Netflix design system

Netflix's website (netflix.com) uses a dark interface with #e50914 as its primary color and Netflix Sans as the main typeface. designlang measured 14 font sizes from 10px to 100px, 16 spacing values, 5 corner radii.

Captured 25 June 2026Dark UI926 elements read

Download tokens Read it yourself

Netflix colors

The brand roles and neutrals netflix.com renders, with how many elements use each one.

Brand colors

Primary#e5091416 uses
Secondary#3860be14 uses
Accent#4682542 uses

Neutrals

#ffffff1,109 uses
#000000557 uses
#333333133 uses
#23232326 uses
#41414122 uses
#55555521 uses
#f4f4f45 uses
#1616164 uses
#8080804 uses
#c1c1c13 uses

Backgrounds

#000000
#2d2d2d

Text colors

#0000001:1 on #000000
#ffffff21:1 on #000000
#e509144.38:1 on #000000
#4141412.06:1 on #000000
#3333331.66:1 on #000000
#5555552.82:1 on #000000
#3860be3.58:1 on #000000

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#e50914`	4.79:1	AAA

Netflix fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Netflix Sans: sans, most text (572 elements)

Body text: 16px at weight 400, line height normal.

Weights in use: 400, 700, 500, 600.

Type scale

Size	Weight	Line height	Tracking	Used on
100px	400	normal	normal	span
56px	700	70px	normal	h1
24px	500	24px	normal	button, div, svg, path
21.92px	600	26.304px	normal	h2
20px	500	normal	normal	p
16px	400	normal	normal	html, head, meta, title
14.4px	400	38px	0.144px	button, svg, title, g
14px	500	14px	normal	a, div, ul, li
13.6px	400	27.2px	normal	div, svg, path, span
13.008px	400	normal	normal	p, br, a, div
13px	400	normal	normal	p, span
12.8px	400	normal	normal	input, span

Spacing and radii

Spacing scale

1px
10px
12px
20px
22px
24px
27px
30px
32px
34px
64px
96px
100px
128px

Corner radii

2px
8px
16px
20px
50px

Medium radii lead, with a few larger ones. 4 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 100ms
sm: 200ms
md: 300ms

Easing

ease-out (20 uses): cubic-bezier(0.32, 0.94, 0.6, 1)
ease-in (11 uses): cubic-bezier(0.4, 0, 0.68, 0.06)
ease-in-out (14 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

87/100, grade B

Components found: buttons (30), cards (2), inputs (13), links (26), navigation (7), footer (3).

By category

Color Discipline	92/100
Typography Consistency	82/100
Spacing System	100/100
Shadow Consistency	100/100
Border Radius Consistency	90/100
Accessibility	100/100
CSS Tokenization	50/100

49 !important rules — prefer specificity over overrides
86% of CSS is unused — consider purging
2295 duplicate CSS declarations

Download the tokens

The files designlang wrote for netflix.com. Run it yourself for a fresh read: npx designlang netflix.com.

The core values as CSS variables

:root {
  --color-primary: #e50914;
  --color-secondary: #3860be;
  --color-accent: #468254;
  --color-background: #000000;
  --color-text: #000000;
  --color-neutral-1: #ffffff;
  --color-neutral-2: #000000;
  --color-neutral-3: #333333;
  --color-neutral-4: #232323;
  --font-primary: "Netflix Sans", sans-serif;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

Read netflix.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Raycast design system

Dark UI, Inter, #ff6363

Sentry design system

Dark UI, Rubik, #150f23

Railway design system

Dark UI, Inter, #59497a

Linear design system

Dark UI, Inter Variable, #e4f222

Quick answers

What font does Netflix use?

netflix.com sets most of its text in Netflix Sans (572 elements). designlang read this from the computed styles of the live page on 25 June 2026.

What are Netflix's brand colors?

The brand roles on netflix.com are primary #e50914, secondary #3860be and accent #468254, on a #000000 background. The neutrals used most are #ffffff, #000000 and #333333.

How do I use the Netflix design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang netflix.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from netflix.com's public pages on 25 June 2026, so it shows what the site renders, not Netflix's internal source files. Netflix is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of netflix.com on 25 June 2026. Netflix is a trademark of its owner; designlang is not affiliated with it. More: the full Netflix brand kit, the token extraction guide and the markdown version of this page.