№ netflix-com--id-title-81675025

Netflix

Deep crimson shadows, clean sans-serif geometry, expansive dark space for cinematic immersion.

Marquee Herominimalism medialight

The hero is a full-screen image of various movie posters, immediately establishing the platform's core offering. The overall feel is sleek and sophisticated, relying on dark tones and subtle animations to draw the eye. · streaming service, movie platform, tv shows, dark interface, video content, subscription, entertainment, film, series

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · high-contrast · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#e30c14
OKLCHoklch(57.8% 0.233 28)
RoleDominant
find sites →
Hex#671024
OKLCHoklch(33.9% 0.119 14)
RoleSurface
find sites →
Hex#ee636a
OKLCHoklch(67.6% 0.172 20)
RoleInk
find sites →
Hex#7f7e7e
OKLCHoklch(59.4% 0.001 17)
RoleAccent
find sites →
Hex#c4c3c2
OKLCHoklch(81.8% 0.002 68)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	Netflix Sans	56px	700	1.25	Aa Bb Cc
h2	Netflix Sans	24px	500	1.4	Aa Bb Cc
h3	Netflix Sans	16px	400	1.5	Aa Bb Cc
body	sans-serif	16px	400	1.4	Aa Bb Cc
button	Netflix Sans	16px	400	1.4	Aa Bb Cc

Spacing scale

4px

16px

20px

Radius scale

0px

2px

4px

8px

17px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #e30c14;
  --color-surface: #671024;
  --color-ink: #ee636a;
  --color-accent: #7f7e7e;
  --color-detail: #c4c3c2;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Netflix.
Reference design system (extracted from the live site):
- Palette: #e30c14, #671024, #ee636a, #7f7e7e, #c4c3c2
- Typefaces: Netflix Sans, sans-serif
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/netflix-com--id-title-81675025

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Netflix Sans

56px

700

1.25

Aa Bb Cc

Netflix Sans

24px

500

1.4

Aa Bb Cc

Netflix Sans

16px

400

1.5

Aa Bb Cc

body

sans-serif

16px

400

1.4

Aa Bb Cc

button

Netflix Sans

16px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Netflix. Reference design system (extracted from the live site): - Palette: #e30c14, #671024, #ee636a, #7f7e7e, #c4c3c2 - Typefaces: Netflix Sans, sans-serif - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/netflix-com--id-title-81675025