What is Netflix's primary brand color?

Netflix Red is '#e50914', extracted three times across the homepage as a pure background fill — once on the 'Get Started' CTA pill in the hero, once on the same CTA pill in the FAQ-bottom email-capture band, and once on the rotating-N logo glyph (as a background gradient stop). It never appears as text color, border, or hairline on this page. The full brand palette is Netflix Red plus four gradient washes — deep navy '#192247', wine '#210e17', burgundy '#461518', and oxblood '#6f181d' — which appear only inside the trending poster rail backdrop.

Does Netflix's homepage have a light mode?

No. The signup-funnel page is dark-only by design — the base canvas is pure '#000000' so movie-poster thumbnails read at maximum contrast. There is no toggle, no system-preference override, no light variant of the FAQ accordion or feature cards. White ('#ffffff') appears 538 times across the page (272 as text, 265 as border) carrying every typographic level; the achromatic ramp '#161616' → '#232323' → '#2d2d2d' provides every surface step. Inverting this to a light theme would break the photography-first identity.

What typography does Netflix use, and what if Netflix Sans isn't available?

Every visible string runs Netflix Sans, with a fallback stack of 'Helvetica Neue', 'Segoe UI', Roboto, Ubuntu, and system sans-serif. The hero headline 'Unlimited movies, TV shows, and more' renders at '56px' / weight '900' / '70px' line-height — the only weight-900 token in the system. Section heads ('Trending Now', 'More Reasons to Join') sit at '24px' / weight '500'. Body and navigation run '14px'–'16px' / weight '400'. If Netflix Sans is unavailable, Helvetica Now Display Black or Inter at weight 900 is the closest open substitute for the hero — preserve the heavy display-to-thin-body contrast, since hierarchy here comes from weight gap, not type-scale ratio.

Why does Netflix round every surface to 8px?

The extraction shows '8px' on 44 of 71 measured corners — by far the dominant radius. Buttons, accordion FAQ rows, feature cards, the email-input ticket, and the icon-card mini-buttons all share the same '8px' rounding. The remaining radii are scoped: '2px' (16 occurrences) for hairline-thin focus rings, '4px' (7) for the language-picker chevron border, and '16px' (4) for the rotating-N logo container. The result is a single recognizable card shape across every section — there is no pill, no full-round, no square. The system reads as one continuous rounded surface family.

What is the navy-to-burgundy gradient under the Trending Now row?

Behind the four numbered poster thumbnails, the page paints a horizontal wash that runs deep navy '#192247' on the left into wine '#210e17' in the middle and burgundy '#461518' on the right, with oxblood '#6f181d' as a far-right accent stop. This is the only gradient anywhere on the page — the rest of the layout is flat fills on flat charcoals. The wash exists to give the giant outline-stroked rank numbers ('1', '2', '3', '4') something to stand on without competing with the poster art.

Can I use this DESIGN.md to build a React streaming or signup-funnel page?

Yes — the file is structured for AI ingestion. Feed it to Claude, Cursor, or any tool that reads structured tokens and the agent will reproduce the cinema-black canvas, single-red-CTA discipline, and '8px' card geometry rather than defaulting to a generic shadcn theme. You can also reference tokens directly: every color, type style, radius, spacing value, and component recipe is a quoted value ready for Tailwind config, CSS variables, or a component library. The 18 component recipes cover the full surface area of a signup funnel — hero CTA, trending rail, feature-card grid, FAQ accordion, inline email capture, and the language-picker dropdown.

Netflix Design System

Netflix's design system as a DESIGN.md file.

About Netflix DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source netflix.com

Music, Video & Streaming

Netflix's sign-up page is a movie theater before the lights come up. The canvas is pure "#000000" with three charcoal surfaces — "#161616" for the trending rail backdrop, "#232323" for the FAQ accordion and feature cards, "#2d2d2d" for the inline email field — stacked so that movie-poster artwork is the only object on the page carrying chroma. Netflix Red ("#e50914") appears in exactly three places: the "Get Started" CTA pill, the top-right Sign In button, and the play-triangle glyph inside the rotating logo. Where streaming competitors crowd the homepage with feature shelves, marketing chrome, and hover affordances, Netflix runs a four-section funnel — hero, trending poster carousel, four reasons-to-join cards, FAQ accordion — that ends every screen in the same email-and-Get-Started field.

This page packages the Netflix homepage chrome into a single DESIGN.md file built on the Google Labs spec. Inside: 18 color tokens grouped into brand, surface, ink, hairline, and gradient roles; 8 typography levels in a tight 13px–56px range; 5 corner radii anchored on the dominant "8px"; a 9-step spacing scale; and 18 component recipes covering the red CTA pill, dark accordion rows, gradient poster rail, vertical-stacked feature cards, and the inline email-capture field. The extraction picked up zero CSS custom properties on ":root" — Netflix ships its homepage with hex literals on inline styles rather than a token API, so every value here is a render-time measurement.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes signup-funnel components that match Netflix's vocabulary — weight 900 hero on cinema-black, single-pill red CTA, "8px" rounded charcoal cards with FAQ accordion — rather than a generic SaaS landing template. Or reference the tokens directly: every hex, font stack, radius, and spacing value is a quoted DESIGN.md value ready for Tailwind config, CSS variables, or your own component library. The system is worth studying as the strict end of single-voltage marketing — one red, one font family, one corner radius, four sections — designed to make every visitor end at the same email field.

What makes it distinct

Cinema-black canvaspure black ('#000000') page with three charcoal cards ('#161616', '#232323', '#2d2d2d') so movie posters carry all chroma
Single-shot red voltageNetflix Red ('#e50914') restricted to the Get Started pill, Sign In button, and play glyph; never on hairlines or text
Weight 900 hero with weight 400 bodya heavyweight Netflix Sans display sits on top of a thin body, no intermediate display tier
Gradient wash poster raildeep navy ('#192247') into burgundy ('#461518') sits behind the trending row, the only place gradients live
Eight-pixel rounding everywherebuttons, accordion FAQ rows, feature cards, and email input share one '8px' radius (44 of 71 measurements)

Live at netflix.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

netflix.com

Explore Netflix

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Netflix design system FAQ

Common questions about Netflix's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Netflix — official site

The streaming homepage this DESIGN.md was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Netflix in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→