--- version: alpha name: Netflix description: The most recognizable dark interface in entertainment — a pure black canvas where Netflix Sans runs heavy and white, the iconic #e50914 red carries every call to action like a marquee bulb, and near-black cards with sharp 2px corners frame the content the way a theater frames its screen. colors: # Surface / canvas background: "#000000" # pure black canvas — the signature theater void surface: "#141414" # dark content surface, rows and rails surface-elevated: "#232323" # raised FAQ accordion / card panels surface-hover: "#333333" # hovered accordion / control # Ink / text ink: "#ffffff" # primary white text, headings ink-secondary: "#b3b3b3" # supporting copy, captions ink-muted: "#808080" # faint metadata, placeholders ink-faint: "#414141" # disabled, lowest-emphasis dividers on-primary: "#ffffff" # white text on the red button # Brand accent — the iconic Netflix red primary: "#e50914" # every CTA, the brand bulb primary-hover: "#c11119" # pressed / hover red primary-strong: "#b1060f" # deepest pressed red # Borders border: "#404040" # control outlines on dark border-subtle: "#333333" # faint dividers between rows # Shadow tints (opaque approximations for the elevation table) shadow-ambient: "#000000" # was rgba(0,0,0,0.2) 0px 0px 18px — Google format requires hex shadow-soft: "#323232" # was rgba(50,50,93,0.1) 0px 7px 14px — Google format requires hex typography: display-hero: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 64px fontWeight: 900 lineHeight: 1.08 letterSpacing: 0px display: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0px heading: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px heading-sub: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0px body-large: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 19px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px label: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px button-ui: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px rounded: none: 0px sm: 2px md: 4px lg: 8px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.border}" textColor: "{colors.ink}" button-compact: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.sm}" padding: 12px 10px button-compact-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-accordion: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px card-accordion-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 24px 16px 8px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label}" padding: 16px 48px link: textColor: "{colors.ink}" typography: "{typography.body}" padding: 0px badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.sm}" padding: 4px 10px --- # Netflix Design System ## Overview Netflix owns the most recognizable dark interface in entertainment, and the design language is built around a single radical commitment: the canvas is pure black (`{colors.background}`), not a near-black or a charcoal, but `#000000` — the void of a darkened theater the instant before the screen lights up. Everything else is a reaction to that black. Text is white (`{colors.ink}`) and set in **Netflix Sans**, the custom grotesk drawn to replace the brand's old Gotham licensing, run heavy: hero headlines hit weight **900** (`{typography.display-hero}`) so the marketing copy lands like a movie title card. The black makes the white type and the cover art glow; nothing competes with the content. The signature move is the red. Netflix red — `#e50914` (`{colors.primary}`) — is one of the most valuable single colors in media, and the system treats it like a marquee bulb. It is the fill of every primary call to action: "Get Started", "Sign In", "Learn more". It almost never appears as a large field or a background wash; it is reserved, point-source, a button or a logo, so that when you see it your eye goes straight to the one action Netflix wants. Against the pure black it reads hot and urgent — the visual equivalent of the *ta-dum* sound logo. The hover state deepens it to `#c11119` (`{colors.primary-hover}`), a barely-perceptible darkening that keeps the bulb feeling physical. Structurally the system is sharp and screen-like. Cards and panels sit on near-black surfaces (`{colors.surface}`, `{colors.surface-elevated}`), and corners are kept tight — 2px on small controls, 4px on buttons (`{rounded.md}`), 8px at most on cards (`{rounded.lg}`). The famous FAQ accordion rows are flat `#232323` panels with hard square corners (`{rounded.none}`) and a thin black gap between each, a `+` toggle in the corner — a pattern so iconic it has been copied across the entire SaaS landing-page world. There are no soft drop shadows doing decorative work; depth comes from luminance, the way one dark gray sits a step brighter than the black behind it, exactly like content rails layering over a theater backdrop. **Key Characteristics:** - Pure black canvas (`{colors.background}`, `#000000`) — the darkened-theater void, the brand's foundational commitment - **Netflix Sans** run heavy: hero at weight **900** (`{typography.display-hero}`), section heads at 700 — type as title card - Netflix red (`{colors.primary}`, `#e50914`) reserved strictly for CTAs — a point-source marquee bulb, never a wash - White text (`{colors.ink}`) and cover art are the only things that glow against the black - Sharp corners: 2px on small controls (`{rounded.sm}`), 4px on buttons (`{rounded.md}`), 8px max on cards (`{rounded.lg}`) - The iconic FAQ accordion: flat `{colors.surface-elevated}` panels, square corners (`{rounded.none}`), thin black gaps, `+` toggle - Depth by luminance, not shadow — surfaces step up from black through `#141414` → `#232323` → `#333333` - Red hover barely darkens to `{colors.primary-hover}` — keeps the bulb physical without breaking the brand color - Generous touch targets: 24px button text (`{typography.button-ui}`) and roomy padding for the lean-back, TV-distance UI - No gradients in the chrome — illustration accents carry the only secondary color (magenta/pink) ## Colors ### Surface & Canvas - **Pure Black** (`{colors.background}`): The signature canvas — `#000000`, the theater void. Nearly the entire site sits on it. - **Content Dark** (`{colors.surface}`): The near-black of content rows and rails, one luminance step above black. - **Panel** (`{colors.surface-elevated}`): The raised FAQ accordion and card panels. - **Hover** (`{colors.surface-hover}`): The brighter state of a hovered accordion or secondary control. ### Ink / Text - **White** (`{colors.ink}`): Primary text and headings — the thing that glows against the black. - **Light Gray** (`{colors.ink-secondary}`): Supporting copy and captions. - **Mid Gray** (`{colors.ink-muted}`): Faint metadata and placeholders. - **Faint Gray** (`{colors.ink-faint}`): Disabled states and the lowest-emphasis dividers. ### Brand Accent - **Netflix Red** (`{colors.primary}`): `#e50914`, the marquee bulb. Every CTA, the logo. Reserved and point-source. - **Red Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): The barely-darkened pressed states that keep the red feeling physical. ### Borders & Shadow Tints - **Control Outline** (`{colors.border}`): Outlines on dark controls. - **Subtle Divider** (`{colors.border-subtle}`): The thin gaps between accordion rows and rails. - **Ambient / Soft** (`{colors.shadow-ambient}`, `{colors.shadow-soft}`): Opaque stand-ins for the rare drop shadow (originals were rgba — flattened for the Google spec). ## Typography ### Font Family - **Primary**: **Netflix Sans** (fallbacks `Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif`) — the custom grotesk carrying everything from heavy hero to body. - **Weights**: an unusually wide range is used — 400 body, 500 sub-heads, 700 section heads, and **900** for hero display. - **Tracking**: near-zero throughout; the type relies on weight and scale, not letter-spacing, for hierarchy. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 64px / 900 — the marquee headline / title card | | `display` | 48px / 700 — large section headlines | | `heading` | 32px / 700 — feature headings | | `heading-sub` | 24px / 500 — sub-section headings | | `body-large` | 19px / 400 — lead paragraphs | | `body` | 16px / 400 — standard body and inputs | | `body-small` | 14px / 400 — dense supporting copy | | `label` | 14px / 700 — bold UI labels | | `button-ui` | 24px / 500 — the large lean-back button text | | `caption` | 13px / 400 — metadata, fine print | ### Principles - **Weight does hierarchy**: 900 for hero, 700 for sections, 500 for sub-heads, 400 for body — the system spans the whole weight axis. - **Big buttons for distance**: button text runs large (24px) for the lean-back, across-the-room reading distance Netflix designs for. - **Near-zero tracking**: Netflix Sans was drawn to work at scale without letter-spacing tweaks. - **White on black is the rule**: type almost always sits white on the black canvas; red is for buttons, not headlines. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px. The rhythm is generous and roomy — large vertical gaps (`{spacing.5xl}` = 96px) separate marketing sections, and controls carry padding sized for the lean-back, larger-touch-target experience. ### Grid & Container - Wide centered marketing container with full-bleed black between sections - Common pattern: centered hero headline + red CTA over a faint background image, then stacked feature rows - The FAQ is a single vertical stack of full-width accordion panels ### Whitespace Philosophy - **Black is the negative space**: the void between sections *is* the whitespace — no separators needed - **Roomy controls**: padding and type are sized up for distance and touch - **Content over chrome**: layout recedes so cover art and copy carry the screen ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | Pure black `{colors.background}`, no shadow | The base canvas | | Luminance 1 | Step up to `{colors.surface}` (`#141414`) | Content rows and rails | | Luminance 2 | Step up to `{colors.surface-elevated}` (`#232323`) | FAQ accordion, card panels | | Luminance 3 | Step up to `{colors.surface-hover}` (`#333333`) | Hovered / active panels | | Ambient (rare) | `0 0 18px` at `{colors.shadow-ambient}` | The occasional floating overlay | **Shadow Philosophy**: Netflix builds depth almost entirely from **luminance, not shadow**. Against pure black, a panel only needs to be a few percent brighter to read as "on top" — `#141414` floats over black, `#232323` floats over that, `#333333` is the hover. This is exactly how content layers in front of a dark theater backdrop, and it keeps the interface flat, sharp, and screen-like. Real drop shadows are rare and reserved for true overlays. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | The FAQ accordion panels — hard square corners | | `sm` | 2px | Small controls, badges, compact buttons | | `md` | 4px | Primary and secondary buttons — the default interactive radius | | `lg` | 8px | Cards and content tiles — the maximum | | `pill` | 9999px | Round avatars and toggles (rare) | The system is sharp and restrained: 2–4px on most controls, never exceeding 8px on cards, and the signature FAQ accordion goes fully square (`{rounded.none}`). Tight corners keep the interface reading like a screen, not a soft consumer app. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Netflix-red (`{colors.primary}`) fill, white text, large 24px button type, 4px radius. The marquee CTA — "Get Started". Hover deepens to `{colors.primary-hover}`. - **`button-secondary`** — Translucent dark-gray (`{colors.surface-hover}`) fill, white text. The quieter "More Info" action. - **`button-compact`** — Red fill, smaller bold label, 2px radius — the dense in-banner "Learn more" button. ### Cards - **`card`** — Near-black (`{colors.surface}`) surface, 8px radius — content tiles. - **`card-accordion`** — The iconic FAQ row: flat `{colors.surface-elevated}` panel, square corners (`{rounded.none}`), `+` toggle. Hover brightens to `{colors.surface-hover}`. ### Inputs - **`input`** — Near-black fill, floating-label padding (`24px 16px 8px`), 4px radius, white text. **`input-focus`** keeps the dark fill; the label floats up. ### Navigation - **`nav-bar`** — Pure black, white bold labels, the red "Sign In" button anchored right. Flat, flush, no shadow. ### Accent & Labels - **`link`** — White body text, underline on hover. - **`badge`** — Red fill, white bold label, 2px radius — the small flag. ## Do's and Don'ts ### Do - Keep the canvas pure black (`{colors.background}`, `#000000`) — not charcoal, not near-black; the void is the brand - Set everything in **Netflix Sans** and lean on weight: 900 for hero (`{typography.display-hero}`), 700 for sections - Reserve Netflix red (`{colors.primary}`) strictly for CTAs — a point-source marquee bulb, one action at a time - Keep text white (`{colors.ink}`) on the black — let type and cover art be the only things that glow - Build depth from luminance steps (`{colors.surface}` → `{colors.surface-elevated}` → `{colors.surface-hover}`), not shadow - Keep corners tight: 2px (`{rounded.sm}`), 4px (`{rounded.md}`), 8px max on cards (`{rounded.lg}`) - Use the square-cornered (`{rounded.none}`) `{colors.surface-elevated}` accordion with a `+` toggle for FAQs - Size buttons and type up (`{typography.button-ui}` at 24px) for the lean-back, distance-reading experience ### Don't - Don't replace pure black with a dark gray or a tinted near-black — `#000000` is non-negotiable - Don't use red as a background or large field — it's a button bulb, never a wash - Don't put red on headlines or body — the red belongs to the action, the type stays white - Don't reach for soft drop shadows — separation comes from luminance steps against the black - Don't round corners past 8px — the interface stays sharp and screen-like - Don't shrink the buttons to dense web sizes everywhere — Netflix designs for distance, so primary CTAs run large - Don't introduce a second accent color into the chrome — red plus white-on-black is the whole system --- ## Responsive Behavior ### Breakpoints *(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <740px | Single column; hero scales 64px → ~32px; nav collapses; full-width red CTA; accordion rows go full-bleed | | Tablet | 740–949px | Wider hero; feature rows begin pairing | | Desktop | 950–1449px | Full layout; centered hero with red CTA over a faint background image | | Large | ≥1450px | Wide centered container, generous black section padding (`{spacing.5xl}`) | ### Touch Targets - Primary buttons run tall with large 24px type — sized for both touch and across-the-room reading - Accordion rows are full-width with generous vertical padding for easy tapping ### Collapsing Strategy - **Navigation**: full nav → minimal bar with the red "Sign In" persisting on mobile - **Hero**: headline and red CTA stack and center; type scales down - **FAQ**: accordion stays a vertical full-width stack at every size - **Spacing**: section padding compresses from 96px toward ~48px ### Image Behavior - Faint background imagery sits behind the black-tinted hero; cover-art tiles reflow as grid children, always the brightest elements --- ## Agent Prompt Guide ### Quick Color Reference - Background: Pure Black (`{colors.background}`, `#000000`) - Text: White (`{colors.ink}`) - Brand accent: Netflix Red (`{colors.primary}`, `#e50914`) - Secondary text: Light Gray (`{colors.ink-secondary}`) - Panel surface: `{colors.surface-elevated}` (`#232323`) - Primary CTA: **Netflix Red** fill, white text (`{colors.primary}` + `{colors.on-primary}`) ### Example Component Prompts - "Create a hero on pure black (`{colors.background}`) with a 64px Netflix Sans headline at weight 900 in white (`{colors.ink}`), centered, with a Netflix-red (`{colors.primary}`) primary button below: white 24px text (`{typography.button-ui}`), 4px radius (`{rounded.md}`), 12px 24px padding" - "Build the iconic FAQ accordion row: a flat `{colors.surface-elevated}` (`#232323`) panel, square corners (`{rounded.none}`), white heading-sub text (`{typography.heading-sub}`), a large `+` toggle on the right, with a thin black gap to the next row — hover brightens to `{colors.surface-hover}`" - "Render a compact in-banner button: Netflix-red (`{colors.primary}`) fill, white bold label (`{typography.label}`), 2px radius (`{rounded.sm}`), 12px 10px padding — the 'Learn more' button" - "Create a floating-label email input: near-black (`{colors.surface}`) fill, white text, padding `24px 16px 8px` so the label floats, 4px radius (`{rounded.md}`), the red CTA beside it" - "Design a content card: near-black (`{colors.surface}`) surface stepping up one luminance level from the black canvas, 8px radius (`{rounded.lg}`), white text, no drop shadow" ### Iteration Guide 1. Start on pure black (`{colors.background}`, `#000000`). If you used a dark gray for the canvas, fix it — the void is the brand. 2. Set everything in Netflix Sans and lean on weight — 900 for hero, 700 for sections. Hierarchy is weight, not tracking. 3. Red (`{colors.primary}`) is for CTAs only. If red is filling a background or a headline, pull it back to the button. 4. Keep text white on black. The only things that should glow are type and cover art. 5. Build depth with luminance steps (`{colors.surface}` → `{colors.surface-elevated}` → `{colors.surface-hover}`), not shadow. 6. Keep corners tight — 2–4px on controls, 8px max on cards (`{rounded.lg}`). The FAQ accordion is square (`{rounded.none}`). 7. Size primary buttons and their type up (`{typography.button-ui}`) — Netflix designs for lean-back, distance reading. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Netflix. Brand names and trademarks belong to their respective owners.