# Netflix design system: colors, fonts and tokens

> 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.

Source: https://netflix.com, captured 25 June 2026. Page: https://designlang.app/design-system/netflix

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#e50914` | 16 |
| Secondary | `#3860be` | 14 |
| Accent | `#468254` | 2 |

Neutrals: `#ffffff`, `#000000`, `#333333`, `#232323`, `#414141`, `#555555`, `#f4f4f4`, `#161616`, `#808080`, `#c1c1c1`

Backgrounds: `#000000`, `#2d2d2d`

## Fonts

- Netflix Sans (sans), 572 elements

## 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 |
| 12px | 400 | 14px | normal | span |
| 10px | 400 | 16px | normal | div, svg, path |

## Spacing

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

## Radii

2px, 8px, 16px, 20px, 50px

## Motion

Feel: mixed. Durations: 100ms, 200ms, 300ms.

## Audit

Overall 87/100 (grade B).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/netflix-com/netflix-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/netflix-com/netflix-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/netflix-com/netflix-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/netflix-com/netflix-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/netflix-com/netflix-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/netflix-com/netflix-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/netflix-com/netflix-com-DESIGN.md)

Regenerate: `npx designlang netflix.com`