designlang
Brand guidelines #e50914

June 25, 2026

netflix.com

A reading of the visual language at https://netflix.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 87/100
Tokens
16 colours · 15 sizes
Generated
designlang
Chapter 00

Essence

netflix.com is a Creator brand — warm, kinetic, modern, imaginative and expressive — anchored on #e50914 and Netflix Sans, mixed motion.

Creator archetype · 79% fit · vs Jester

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 29% confidence
Material language
flat
Imagery style
mixed
Component library
unknown
Stack
unknown
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 12 neutrals · 16 total

Primary #E50914
RGB
229, 9, 20
HSL
357°, 92%, 47%
Secondary #3860BE
RGB
56, 96, 190
HSL
222°, 54%, 48%
Accent #468254
RGB
70, 130, 84
HSL
134°, 30%, 39%

Neutrals

#FFFFFF
#000000
#333333
#232323
#414141
#555555
#F4F4F4
#161616
#808080
#C1C1C1
#707070
#D8D8D8

Full palette

#FFFFFF
#000000
#333333
#232323
#414141
#555555
#E50914
#3860BE
#F4F4F4
#161616
#808080
#C1C1C1
#468254
#32AE88
#707070
#D8D8D8

WCAG 100% · 6 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

1 families · 14 sizes · 4 weights

Display
Netflix Sans
Body
Netflix Sans
Weights
400, 700, 500, 600

Specimen

Privacy Preference Center
General Description

Scale

StepSizeSample
t00 100px Privacy Preference Center
t01 56px Privacy Preference Center
t02 24px Privacy Preference Center
t03 21.92px Privacy Preference Center
t04 20px Privacy Preference Center
t05 16px Privacy Preference Center
t06 14.4px Privacy Preference Center
t07 14px Privacy Preference Center
t08 13.6px Privacy Preference Center
t09 13.008px Privacy Preference Center
Chapter 05

Spacing

Base 2px · 16 steps captured

Rhythm

1px
10px
12px
20px
22px
24px
27px
30px
32px
34px
Chapter 06

Shape

5 radii · 4 elevation tiers

Border radii

2px
8px
16px
20px
50px

Elevation

xs
sm
md
lg
Chapter 07

Iconography

unknown · 18 captured

Library
unknown
Confidence
0%
Stroke style
—
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 3 durations · 3 easings

Duration scale

100ms
200ms
300ms

Easings

Chapter 09

Components

unknown · 2 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
—
Sizes
—

input

Slots
leading, trailing
Variants
—
Sizes
—
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
6 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #e50914;
  --font-display: "Netflix Sans";
  --space-base: 2px;
  --radius-md: 8px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#e50914' },
      fontFamily: { display: ['Netflix Sans', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '8px' },
    },
  },
};

Run npx designlang pack netflix.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.