DESIGN.md · Analysis

Netflix

netflix.com · 27 Oct 2026 · 47 colors · Netflix Sans

Netflix

Netflix is a subscription streaming service for movies and TV shows, presented on a near-black canvas with full-bleed title artwork and a single saturated red action color. The marketing site converts visitors through one email field and one red 'Get Started' button.

Colors

surface#0a0a0a

surface-dim#000000

surface-bright#232323

surface-container-lowest#000000

surface-container-low#161616

surface-container#232323

surface-container-high#333333

surface-container-highest#414141

on-surface#ffffff

on-surface-variant#d8d8d8

inverse-surface#ffffff

inverse-on-surface#161616

outline#808080

outline-variant#414141

surface-tint#e50914

primary#e50914

on-primary#ffffff

primary-container#c11119

on-primary-container#ffffff

inverse-primary#c11119

secondary#a9a9a9

on-secondary#161616

secondary-container#414141

on-secondary-container#ffffff

tertiary#3860be

on-tertiary#ffffff

tertiary-container#fff3eb

on-tertiary-container#161616

error#eb3942

on-error#111111

error-container#2bb871

on-error-container#161616

primary-fixed#e50914

primary-fixed-dim#c11119

on-primary-fixed#ffffff

on-primary-fixed-variant#ffffff

secondary-fixed#d8d8d8

secondary-fixed-dim#a9a9a9

on-secondary-fixed#161616

on-secondary-fixed-variant#414141

tertiary-fixed#3860be

tertiary-fixed-dim#2f4fa0

on-tertiary-fixed#ffffff

on-tertiary-fixed-variant#ffffff

background#000000

on-background#ffffff

surface-variant#333333

Typography

display: fontFamily: Netflix Sans · fontSize: 56px · fontWeight: 700 · lineHeight: 70px · letterSpacing: normal
headline-lg: fontFamily: Netflix Sans · fontSize: 40px · fontWeight: 700 · lineHeight: 48px
headline-md: fontFamily: Netflix Sans · fontSize: 24px · fontWeight: 500 · lineHeight: normal
title-lg: fontFamily: Netflix Sans · fontSize: 24px · fontWeight: 500 · lineHeight: 30px
body-lg: fontFamily: Netflix Sans · fontSize: 18px · fontWeight: 400 · lineHeight: 26px
body-md: fontFamily: Netflix Sans · fontSize: 16px · fontWeight: 400 · lineHeight: normal
label-md: fontFamily: Netflix Sans · fontSize: 24px · fontWeight: 500 · lineHeight: 24px
label-sm: fontFamily: Netflix Sans · fontSize: 16px · fontWeight: 500 · lineHeight: 16px

Design guidance

Overview

Netflix presents its subscription streaming catalogue as a cinematic, edge-to-edge wall of title artwork layered behind a near-black scrim, a 'theatre-dark' aesthetic in which the content itself supplies the color. The emotional response is anticipation: the interface recedes so posters, trailers and the single red call to action feel like the lit screen of a darkened room. Voice is direct, confident and conversational, leading with price and reassurance ('Starts at $8.99. Cancel anytime.') and short imperative phrases ('Get Started', 'Sign In').

The personality is generous but unfussy. Headlines are declarative promises ('Unlimited movies, TV shows, and more'), supporting copy is one plain sentence, and nothing is decorated for its own sake. Example sentence: "Ready to watch? Enter your email to create or restart your membership."

Colors

The canvas is pure black (#000000) with a raised surface stack from #161616 (surface-container-low, input fields) through #232323 (surface-container, cards) to #333333 (surface-container-high, hover). Primary (#e50914) is the signature Netflix red, used exclusively for the main 'Get Started' and 'Sign In' buttons and for the wordmark; its hover shifts to #c11119 and pressed to #991620. Secondary (#a9a9a9) is the muted grey for focus rings and de-emphasised UI text, and tertiary (#3860be) is a cool blue reserved for informational badges and accents in feature sections. Error (#eb3942) is reserved for validation messaging only.

Hero imagery sits behind a vertical gradient that fades the poster wall into #000000 at the bottom edge; never place body text directly over unscrimmed artwork. On-s

Typography

The type system uses Netflix Sans, a geometric grotesque with a single weight pairing: 700 for display and headline-lg, 500 for titles and buttons, and 400 for body copy. The display step is 56px over a 70px line-height, large enough to read as a poster title against imagery. Use label-md (24px, weight 500, line-height 24px) for primary button text so the CTA reads at near-headline scale, and label-sm (16px, weight 500) for secondary buttons and metadata. Small labels over busy artwork should carry text-shadow: 0 2px 4px rgba(0,0,0,0.5) to preserve legibility.

Layout

The layout is a fluid single-column hero that centres content within a 1023px container, expanding to a 12-column grid on wide screens. Section separation uses lg (15px) and 2xl (20px) spacing; the gutter is 16px (xl). Whitespace is generous around the hero form, with roughly 40px of vertical rhythm between the headline block and the email row. The 8px unit underpins all padding and margin steps.

Elevation & Depth

Depth is conveyed through darkness and imagery rather than heavy shadows. Cards and popovers lift from the canvas via a soft ambient shadow of 0 4px 24px rgba(0,0,0,0.15), and interactive tiles use 0 0.25rem 0.5rem 0 rgba(0,0,0,0.8) on hover. Level 1 is the black canvas, Level 2 is surface-container (#232323) with the ambient shadow, and Level 3 (modals) adds a 1px border of rgba(255,255,255,0.1) over the Level 2 stack.

Shapes

The shape language is restrained and sharp-cornered. Primary and secondary buttons use a 4px radius (rounded.DEFAULT), inputs use the same 4px, and content cards use 8px (rounded.lg) to soften larger artwork. Pill shapes (9999px) are reserved for avatar and status badges only. The contrast between tight controls and rounder content frames keeps the interface feeling like a precise frame around the artwork.

Components

Action Elements The primary button is a solid #e50914 rectangle, 48px tall with 12px 24px padding and a 4px radius. On hover it transitions to #c11119 over 150ms ease-out; on press it deepens to #991620 with no scale change. Secondary buttons are translucent grey (rgba(128,128,128,0.4)) at 32px tall, with text in #ffffff at 16px weight 500, and hover to #333333 over 150ms.

Containers & Surfaces Content cards sit on #232323 with an 8px radius and 15px internal padding. On hover, the surface lifts to #333333 and the artwork scales to 1.03 over 250ms cubic-bezier(0.4,0,0.2,1). Cards never carry a visible border at rest.

Inputs & Interaction The email field is 56px tall on #161616 with a 4px radius and a 1px border of #808080. The floating label sits at 16px and collapses above t

Do's and Don'ts

**Do**

Do reserve #e50914 exclusively for primary CTAs and the wordmark so the red always signals the next action.
Do place headline and CTA copy only over gradient-scrimmed artwork that fades to #000000.
Do keep button labels at label-md (24px, weight 500) on the hero to match the headline rhythm.
Do use 150ms ease-out transitions for button colour changes and 250ms for card scale.

**Don't**

Don't introduce a second saturated accent next to the red CTA in the hero.
Don't place body copy directly on unscrimmed poster artwork without a gradient or text-shadow.
Don't use pill-shaped primary buttons; keep the 4px radius.
Don't use pure white backgrounds for any section; the canvas stays #000000 or #161616.

---
version: alpha
name: Netflix
description: >-
  Netflix is a subscription streaming service for movies and TV shows, presented on a near-black canvas with full-bleed
  title artwork and a single saturated red action color. The marketing site converts visitors through one email field
  and one red 'Get Started' button.
logo:
  src: https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.png
colors:
  surface: '#0a0a0a'
  surface-dim: '#000000'
  surface-bright: '#232323'
  surface-container-lowest: '#000000'
  surface-container-low: '#161616'
  surface-container: '#232323'
  surface-container-high: '#333333'
  surface-container-highest: '#414141'
  on-surface: '#ffffff'
  on-surface-variant: '#d8d8d8'
  inverse-surface: '#ffffff'
  inverse-on-surface: '#161616'
  outline: '#808080'
  outline-variant: '#414141'
  surface-tint: '#e50914'
  primary: '#e50914'
  on-primary: '#ffffff'
  primary-container: '#c11119'
  on-primary-container: '#ffffff'
  inverse-primary: '#c11119'
  secondary: '#a9a9a9'
  on-secondary: '#161616'
  secondary-container: '#414141'
  on-secondary-container: '#ffffff'
  tertiary: '#3860be'
  on-tertiary: '#ffffff'
  tertiary-container: '#fff3eb'
  on-tertiary-container: '#161616'
  error: '#eb3942'
  on-error: '#111111'
  error-container: '#2bb871'
  on-error-container: '#161616'
  primary-fixed: '#e50914'
  primary-fixed-dim: '#c11119'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#ffffff'
  secondary-fixed: '#d8d8d8'
  secondary-fixed-dim: '#a9a9a9'
  on-secondary-fixed: '#161616'
  on-secondary-fixed-variant: '#414141'
  tertiary-fixed: '#3860be'
  tertiary-fixed-dim: '#2f4fa0'
  on-tertiary-fixed: '#ffffff'
  on-tertiary-fixed-variant: '#ffffff'
  background: '#000000'
  on-background: '#ffffff'
  surface-variant: '#333333'
typography:
  display:
    fontFamily: Netflix Sans
    fontSize: 56px
    fontWeight: 700
    lineHeight: 70px
    letterSpacing: normal
  headline-lg:
    fontFamily: Netflix Sans
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
  headline-md:
    fontFamily: Netflix Sans
    fontSize: 24px
    fontWeight: 500
    lineHeight: normal
  title-lg:
    fontFamily: Netflix Sans
    fontSize: 24px
    fontWeight: '500'
    lineHeight: 30px
  body-lg:
    fontFamily: Netflix Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 26px
  body-md:
    fontFamily: Netflix Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: normal
  label-md:
    fontFamily: Netflix Sans
    fontSize: 24px
    fontWeight: 500
    lineHeight: 24px
  label-sm:
    fontFamily: Netflix Sans
    fontSize: 16px
    fontWeight: '500'
    lineHeight: 16px
rounded:
  sm: 2px
  DEFAULT: 4px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  unit: 8px
  xs: 5px
  sm: 8px
  md: 10px
  lg: 15px
  xl: 16px
  2xl: 20px
  gutter: 16px
  container-max: 1023px
elevation:
  sm: 0 0 18px rgba(0,0,0,0.2)
  md: 0 4px 24px rgba(0,0,0,0.15)
  lg: 0 0.25rem 0.5rem 0 rgba(0,0,0,0.8)
layout:
  containerMaxWidth: 1023px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 24px
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary-fixed}'
  button-secondary:
    backgroundColor: rgba(128,128,128,0.4)
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.DEFAULT}'
    padding: 6px 16px
    height: 32px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.lg}'
    padding: '{spacing.lg}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 24px 16px 8px
  input-field-focus:
    backgroundColor: '{colors.surface-container}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  badge:
    backgroundColor: '{colors.tertiary}'
    textColor: '{colors.on-tertiary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

Hero imagery sits behind a vertical gradient that fades the poster wall into #000000 at the bottom edge; never place body text directly over unscrimmed artwork. On-s

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
The primary button is a solid #e50914 rectangle, 48px tall with 12px 24px padding and a 4px radius. On hover it transitions to #c11119 over 150ms ease-out; on press it deepens to #991620 with no scale change. Secondary buttons are translucent grey (rgba(128,128,128,0.4)) at 32px tall, with text in #ffffff at 16px weight 500, and hover to #333333 over 150ms.

### Containers & Surfaces
Content cards sit on #232323 with an 8px radius and 15px internal padding. On hover, the surface lifts to #333333 and the artwork scales to 1.03 over 250ms cubic-bezier(0.4,0,0.2,1). Cards never carry a visible border at rest.

### Inputs & Interaction
The email field is 56px tall on #161616 with a 4px radius and a 1px border of #808080. The floating label sits at 16px and collapses above t

## Do's and Don'ts

**Do**
- Do reserve #e50914 exclusively for primary CTAs and the wordmark so the red always signals the next action.
- Do place headline and CTA copy only over gradient-scrimmed artwork that fades to #000000.
- Do keep button labels at label-md (24px, weight 500) on the hero to match the headline rhythm.
- Do use 150ms ease-out transitions for button colour changes and 250ms for card scale.

**Don't**
- Don't introduce a second saturated accent next to the red CTA in the hero.
- Don't place body copy directly on unscrimmed poster artwork without a gradient or text-shadow.
- Don't use pill-shaped primary buttons; keep the 4px radius.
- Don't use pure white backgrounds for any section; the canvas stays #000000 or #161616.

Edit, then copy or download.