---
version: alpha
name: Netflix
description: One red button burning against a wall of dimmed movie posters.
colors:
  on-surface-variant: "#414141"
  surface: "#000000"
  primary: "#E50914"
  on-surface: "#FFFFFF"
  near-black: "#161616"
  input-charcoal: "#232323"
  surface-2: "#2D2D2D"
  surface-3: "#323232"
  surface-4: "#373737"
  text-grey: "#333333"
  control-grey: "#808080"
  off-white: "#F2F2F2"
typography:
  display:
    fontFamily: Netflix Sans
    fontSize: 100px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  heading:
    fontFamily: Netflix Sans
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  title:
    fontFamily: Netflix Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  subheading:
    fontFamily: Netflix Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  body:
    fontFamily: Netflix Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Netflix Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Netflix Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
rounded:
  buttons-ctas: 4px
  text-links: 2px
  input-field-dark-control: 8px
  cards-larger-panels: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 36px
---
# Netflix — Style Reference
> One red button burning against a wall of dimmed movie posters.

**Theme:** dark

Netflix builds its entire surface on a single act of restraint: one saturated color — the #E50914 red — against a field of pure black and painted greys, and nothing else. The red is spent only where it must pull a click (the wordmark, the Sign In pill, the Get Started CTA, the little N badges); every other element is white text or a neutral charcoal drawn from a tight ramp of near-blacks. The hero is not an illustration but a darkened, angled collage of the catalog itself — the product is the background. Type is Netflix Sans, set heavy and tight: a short bold display line, one calm 20px sub-promise, then straight to an email field. It is a conversion page dressed as a cinema wall — loud where it counts, silent everywhere else.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Netflix Red | `#E50914` | `--color-red` | The only saturated color. Wordmark, N badges, Sign In pill, and the primary Get Started CTA. Never a background wash, never for body text — it exists to be clicked. |
| Pure Black | `#000000` | `--color-black` | The canvas and the darkening veil laid over the poster collage. Also a border color on the darkest controls. |
| Near Black | `#161616` | `--color-near-black` | Deep secondary surface — the recessed base beneath elevated banners and footers. |
| White | `#FFFFFF` | `--color-white` | Every foreground: headings, body, labels, button text. Carries all legibility against black. |
| Input Charcoal | `#232323` | `--color-surface-1` | The email field and dark control fills — a lifted charcoal that reads as an input against black. |
| Surface 2 | `#2D2D2D` | `--color-surface-2` | Heading/label block fills and card surfaces one step above charcoal. |
| Surface 3 | `#323232` | `--color-surface-3` | Neutral panel step. *(inferred ramp step)* |
| Surface 4 | `#373737` | `--color-surface-4` | Upper neutral panel step for stacked dark surfaces. *(inferred ramp step)* |
| Muted Grey | `#414141` | `--color-muted` | Secondary/muted text and hairline borders on dark. |
| Text Grey | `#333333` | `--color-text-muted` | De-emphasized text on lighter surfaces. |
| Control Grey | `#808080` | `--color-grey` | Secondary / low-emphasis button fill (e.g. Learn More) and neutral borders. |
| Off White | `#F2F2F2` | `--color-off-white` | The light-mode surface used on the site's lower marketing/FAQ zones — the one bright ground. |

## Tokens — Typography
### Netflix Sans — the entire voice: wordmark, display, body, and labels · `--font-sans`
- **Substitute:** Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif
- **Weights:** 100, 300, 400, 500, 700, 900 (a full variable range; display leans 700, controls 500, body 400)
- **Sizes:** 100px, 56px, 24px, 20px, 16px, 14px, 13px
- **Line height:** Tight on display (~1.0–1.1), comfortable ~1.4 on body
- **Letter spacing:** Near-zero; display is set solid and heavy with no tracking indulgence
- **Role:** A single proprietary grotesque does all the work — there is no serif, no accent face. Weight, not family, creates hierarchy.

### Netflix Sans Mono — numeric / technical utility · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo, monospace
- **Weights:** 100–900 variable
- **Sizes:** Small utility only
- **Line height:** ~1.4
- **Letter spacing:** Default
- **Role:** Loaded for monospaced/technical contexts; not part of the marketing display voice.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 100px | ~1.0 | 0 | `--text-display` |
| Heading (H1) | 56px | ~1.1 | 0 | `--text-h1` |
| Title | 24px | ~1.2 | 0 | `--text-title` |
| Subheading | 20px | ~1.3 | 0 | `--text-subheading` |
| Body | 16px | ~1.4 | 0 | `--text-body` |
| Small | 14px | ~1.4 | 0 | `--text-sm` |
| Caption | 13px | ~1.4 | 0 | `--text-caption` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 36px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / CTAs (Get Started, Sign In) | 4px |
| Text links | 2px |
| Input field / dark control | 8px |
| Cards / larger panels | 16px |
| Decorative badge shape | 50% 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Ambient glow | `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` | `--shadow-ambient` |

### Layout
- **Page max-width:** Full-bleed hero (edge-to-edge poster collage); centered content column ~1000px
- **Section gap:** Generous vertical rhythm (~48–72px between hero and banner)
- **Card padding:** 12px 24px on primary CTA; 24px on hero content blocks
- **Element gap:** 16px between the email field and its CTA

## Components
### Primary CTA — Get Started
**Role:** The one conversion action on the page.
Fill `#E50914`, text `#FFFFFF`, radius 4px, padding 12px 24px, size 24px / weight 500, no border. Sits directly beside the email input with a trailing chevron. It is the loudest element on the page and the sole reason the red exists.

### Sign In Pill
**Role:** Top-right entry for existing members.
A compact red link-button: fill `#E50914`, text `#FFFFFF`, radius 4px, padding 4px 16px, 14px / 500. Same red as the CTA, scaled down — hierarchy by size, not color.

### Secondary Button — Learn More
**Role:** Low-emphasis action inside the promo banner.
Fill `#808080`, text `#FFFFFF`, radius 4px, padding 6px 16px, 16px / 500, no border. Neutral grey keeps it subordinate to the red CTA above it.

### Email Input
**Role:** The single field that starts a membership.
Dark fill `#232323`, white text, radius 8px, floating-label padding (~24px 16px 8px), no visible border — a soft charcoal box that reads as editable against pure black. Pairs with the Get Started CTA as one unit.

### Hero Display Heading
**Role:** The promise, in two lines.
Netflix Sans, up to 100px display (56px measured H1), weight 700, `#FFFFFF`, set tight and solid. Bold weight alone carries the hierarchy — no color, no italic.

### Subheading / Price Line
**Role:** The reassurance beneath the headline.
"Starts at $8.99. Cancel anytime." — 20px, weight 500, `#FFFFFF`, centered.

### NETFLIX Wordmark
**Role:** Brand anchor, top-left.
Set in `#E50914` on black. The logotype is one of only four places the red appears above the fold.

### Language Selector
**Role:** Locale switch in the header.
Ghost control: white text, hairline neutral border (`#808080`), transparent fill, with a globe glyph and caret. Quiet chrome against the collage.

### Promo Banner
**Role:** Persistent bottom bar surfacing the ad-supported plan.
An elevated dark surface (drawn from the `#232323`/`#2D2D2D` neutral steps) spanning full width, holding a bold `#FFFFFF` headline, a muted sub-line, and a grey Learn More button. Elevation is read by luminance lift, not by a hard border.

### Poster Collage Backdrop
**Role:** The hero background — the product as decoration.
An angled, tiled grid of catalog title cards laid behind a `#000000` darkening veil so foreground white text stays legible. No abstract art; the content sells itself.

### N Badge
**Role:** The recurring Netflix "N" marks on title cards.
Small `#E50914` marks scattered across the collage — the red seeded through the background as brand texture.

### Text Link
**Role:** Inline navigation and footer links.
White text, radius 2px focus/hover target, no underline by default, 14–16px / 400.

## Do's and Don'ts
### Do
- Keep `#E50914` reserved for click targets and brand marks — the wordmark, Sign In, Get Started, and N badges. Its scarcity is the whole strategy.
- Build every surface from the black-to-charcoal ramp (`#000000`, `#161616`, `#232323`, `#2D2D2D`) and let white text do all the talking.
- Create hierarchy with Netflix Sans weight (900/700 display down to 400 body), not with a second typeface or a second accent color.
- Darken any imagery behind text with a `#000000` veil so white foreground holds contrast.
- Pair the email field and CTA as one tight unit — the field is dark, the button is red, the gap is 16px.

### Don't
- Don't introduce a second saturated color. There is exactly one hue here; add a blue or a green and the system breaks.
- Don't wash backgrounds in red or set body copy in red — it appears only on interactive/brand elements.
- Don't put the CTA on anything but 4px corners at `#E50914`; the button shape is a constant.
- Don't lighten the canvas above the near-black ramp on the cinematic zones — the darkness is what makes the posters and the red glow.
- Don't reach for serifs, italics, or a display accent face. Weight is the only variable.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The page ground and the veil over imagery. |
| 1 | Near Black | `#161616` | Recessed base beneath banners/footers. |
| 2 | Charcoal | `#232323` | Inputs and dark controls. |
| 3 | Surface | `#2D2D2D` | Cards, heading blocks. |
| 4 | Panel | `#323232` / `#373737` | Upper neutral steps for stacked dark panels. |
| Light | Off White | `#F2F2F2` | The bright marketing/FAQ ground lower on the site. |

## Elevation
Depth is conveyed by luminance step, not by shadow. Surfaces climb a tight neutral ramp — `#000000` → `#161616` → `#232323` → `#2D2D2D` — and the eye reads the lighter box as nearer. The only shadow in the system is a soft ambient glow, `rgba(0, 0, 0, 0.2) 0 0 18px 0`, used sparingly around lifted controls. Borders are near-invisible (`#414141`, `#808080` hairlines); the design leans on brightness difference rather than lines or drop shadows.

## Imagery
Imagery *is* the design. The hero is a real, angled mosaic of Netflix's own catalog — dozens of title cards tiled edge to edge, then dimmed under a black veil. There is no illustration, no 3D, no abstract gradient; the product library is the only art. Foreground legibility is bought entirely by the darkening layer. Away from the hero, surfaces go flat black with white type and the lone red accent.

## Layout
Full-bleed and cinematic. The poster collage runs edge to edge behind a centered ~1000px content column: wordmark top-left, language selector and Sign In top-right, then a vertically centered stack — display headline, price line, sub-prompt, and the email+CTA unit. Below the fold, a persistent full-width promo banner pins the ad-supported plan. The rhythm is one decisive hero, then stacked marketing bands — dark cinematic zones alternating toward the lighter `#F2F2F2` informational sections.

## Typography Voice
Netflix runs a single-family system and lets weight carry everything. The display line is Netflix Sans at 700–900, set tight (~1.0 line height) and solid so two short lines land like a title card; the supporting copy drops to 20px/500 and 16px/400 with calmer ~1.4 leading. There is no tracking flourish and no second face — the contrast between a 100px heavy headline and a quiet 16px body is the entire hierarchy. It works because the proprietary grotesque is legible at every weight against black, and the restraint mirrors the color strategy: one font, one hue, maximum contrast.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000` / text: `#FFFFFF` / surface: `#232323` (input) · `#2D2D2D` (card) / border: `#808080` · `#414141` / accent: `#E50914` / primary action: `#E50914`

## Example Component Prompts
1. **Hero + email capture**: Full-bleed black hero over a darkened, angled grid of movie poster cards. Centered stack: Netflix Sans 700 display headline in `#FFFFFF` (~56–100px, two lines, tight), a 20px/500 white price line, then a `#232323` email input (8px radius, white text, floating label) beside a `#E50914` "Get Started" button (white text, 4px radius, 12px 24px padding, 24px/500, trailing chevron), 16px gap.
2. **Primary CTA**: A single button, fill `#E50914`, text `#FFFFFF`, radius 4px, padding 12px 24px, Netflix Sans 24px weight 500, no border — the only saturated element on the screen.
3. **Top header bar**: Transparent bar over black. Left: "NETFLIX" wordmark in `#E50914`. Right: a ghost language selector (white text, globe + caret, `#808080` hairline border) and a `#E50914` Sign In pill (white text, radius 4px, padding 4px 16px, 14px/500).
4. **Promo banner**: Full-width elevated dark surface (`#2D2D2D` over a `#161616` base), bold `#FFFFFF` headline, muted sub-line, and a right-aligned `#808080` "Learn More" button (white text, radius 4px, 6px 16px). Depth by luminance, no border.
5. **Dark card**: Surface `#232323`, radius 16px, white heading, muted `#414141` body, optional soft ambient glow `rgba(0,0,0,0.2) 0 0 18px 0`. No hue except an optional `#E50914` link.

## Similar Brands
- **Spotify** — a single black canvas with one confident accent hue and white type; hierarchy by weight, not decoration.
- **HBO Max / Max** — cinematic streaming darkness where the catalog art carries the visual load.
- **YouTube** — a lone red mark reserved for brand and play, everything else neutral.
- **Disney+** — full-bleed dark hero fronted by content tiles as the primary imagery.
- **Hulu** — dark UI with a single saturated accent held back for calls to action.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-red: #E50914;
  --color-black: #000000;
  --color-near-black: #161616;
  --color-white: #FFFFFF;
  --color-surface-1: #232323;
  --color-surface-2: #2D2D2D;
  --color-surface-3: #323232;
  --color-surface-4: #373737;
  --color-muted: #414141;
  --color-text-muted: #333333;
  --color-grey: #808080;
  --color-off-white: #F2F2F2;

  /* Typography — Families */
  --font-sans: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --font-mono: 'Netflix Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-display: 100px;
  --text-h1: 56px;
  --text-title: 24px;
  --text-subheading: 20px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 13px;
  --leading-tight: 1.0;
  --leading-normal: 1.4;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 36px;

  /* Border Radius */
  --radius-link: 2px;
  --radius-button: 4px;
  --radius-input: 8px;
  --radius-card: 16px;

  /* Shadow */
  --shadow-ambient: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-red: #E50914;
  --color-black: #000000;
  --color-near-black: #161616;
  --color-white: #FFFFFF;
  --color-surface-1: #232323;
  --color-surface-2: #2D2D2D;
  --color-surface-3: #323232;
  --color-surface-4: #373737;
  --color-muted: #414141;
  --color-text-muted: #333333;
  --color-grey: #808080;
  --color-off-white: #F2F2F2;

  /* Typography — Families */
  --font-sans: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --font-mono: 'Netflix Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-display: 100px;
  --text-h1: 56px;
  --text-title: 24px;
  --text-subheading: 20px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 13px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 36px;

  /* Border Radius */
  --radius-link: 2px;
  --radius-button: 4px;
  --radius-input: 8px;
  --radius-card: 16px;

  /* Shadow */
  --shadow-ambient: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```