Netflix

---
name: netflix-com-design-system
source: https://www.netflix.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#161616"
  text-muted: "#a9a9a9"
  surface: "#ececec"
  hairline: "#808080"
  accent: "#e50914"  # red
  accent-2: "#eb3942"  # red
  accent-3: "#2bb871"  # green
fonts:
  primary: "Netflix Sans"  # medium-confidence: usage counts are close
---

# Netflix Bulgaria - Watch TV Shows Online, Watch Movies Online — Design System

Extracted from **https://www.netflix.com/** on 2026-07-03.

Every value below is mined from the site's live CSS (0 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 104 light against 116 dark. The palette is chromatic: 12 saturated values against 7 neutrals, led by red (`#e50914`). **Netflix Sans** leads the font stack, though usage counts are close — verify against rendered pages before committing. Corner radii run 0.125rem to 1rem.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 33% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 104:116). Don't flip individual sections to the opposite mode.
- `0.125rem` is the workhorse radius (x16); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 100 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#ececec` | 4 | **surface** — neutral closest to canvas luminance |
| `neutral-400` | `#a9a9a9` | 34 | **text-muted** — most-used mid-luminance neutral |
| `neutral-500` | `#808080` | 13 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-800` | `#414141` | 5 | — |
| `neutral-900` | `#232323` | 13 | — |
| `neutral-950` | `#161616` | 17 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `red` | `#e50914` | 13 | **accent** — most-used chromatic color |
| `red-2` | `#eb3942` | 12 | **accent-2** — supporting chromatic color |
| `green` | `#2bb871` | 12 | **accent-3** — supporting chromatic color |
| `orange` | `#d89d31` | 12 | — |
| `deep-blue` | `#050042` | 12 | — |
| `red-3` | `#c11119` | 6 | — |
| `red-4` | `#99161d` | 6 | — |
| `blue` | `#465a7e` | 6 | — |
| `deep-blue-2` | `#192247` | 5 | — |
| `deep-red` | `#461518` | 2 | — |
| `pink` | `#b82869` | 2 | — |
| `red-5` | `#e00000` | 2 | — |

## Typography

**Netflix Sans** has the most `font-family` declarations, but the margin over the rest is thin — treat the primary-face call as provisional and verify on rendered pages. Full list by usage:

| Family | Usage |
| --- | --- |
| Netflix Sans | 7 |
| Netflix Sans Variable | 4 |
| NKufi | 4 |
| GraphikTH | 4 |
| Netflix Sans Debug | 1 |
| Netflix Sans JA | 1 |

**Size scale (px):** `10`, `13`, `14`, `16`, `18`, `20`, `24`, `32`, `64`, `80`, `100`, `120`

**Weights in use:** `100` (x6), `300` (x1), `400` (x15), `500` (x4), `700` (x4), `900` (x1)

**Line-heights (unitless):** `1`, `1.5`

## Spacing

Most-used values (px): `2`, `4`, `7`, `12`, `16`, `22`, `24`, `32`, `36`, `40`, `80`, `96`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `0.125rem` | 16 |
| `radius-md` | `0.5rem` | 8 |
| `radius-lg` | `1rem` | 1 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 0.25rem 0.5rem 0 rgba(0,0,0,0.8)` (x1)

## Breakpoints

`600px`, `960px`, `1280px`, `1600px`, `1920px`, `2560px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #e50914 */
  color: var(--color-canvas); /* #ffffff — contrast 4.8:1 */
  border-radius: 0.125rem;
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #ececec */
  border: 1px solid var(--color-hairline); /* #808080 */
  border-radius: 0.125rem; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #161616 — contrast 18.1:1 */
  border: 1px solid var(--color-hairline); /* #808080 */
  border-radius: 0.125rem;
  /* placeholder color: var(--color-text-muted) #a9a9a9 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #808080 */
  color: var(--color-ink); /* #161616 */
  /* inactive links: var(--color-text-muted) #a9a9a9 */
  /* active link: var(--color-accent) #e50914 — contrast vs canvas 4.8:1 */
}

.modal {
  background: var(--color-surface); /* #ececec */
  border-radius: 0.125rem;
  box-shadow: var(--shadow-sm); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #161616 */
}

.input-error {
  border-color: #e50914; /* mined token: red */
  /* error text: #e50914 on canvas — contrast 4.8:1 */
}

.input-success {
  border-color: #2bb871; /* mined token: green */
}
```

## Observations

- 7 of 19 extracted colors are neutrals.
- 1 distinct shadow; the softest reaches 0px blur.
- 6 breakpoints, from 600px to 2560px.

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-red`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.