---
id: netflix
name: Netflix
country: US
category: consumer-tech
homepage: "https://www.netflix.com"
primary_color: "#E50914"
logo:
  type: simpleicons
  slug: "netflix"
verified: "2026-06-06"
added: "2026-06-06"
omd: "0.1"
tokens:
  source: prose-derived
  extracted: "2026-06-09"
  colors:
    primary: "#E50914"
    primary-hover: "#B20710"
    brand: "#E50914"
    canvas: "#141414"
    foreground: "#FFFFFF"
    muted: "#B3B3B3"
    on-primary: "#FFFFFF"
    surface: "#181818"
    hairline: "#404040"
    body: "#B3B3B3"
    error: "#E87C03"
    success: "#2A9D3C"
    accent-match: "#46D369"
  typography:
    family: { sans: "Netflix Sans", mono: "Courier New" }
    billboard-title: { size: 56, weight: 700, lineHeight: 1.1, tracking: -0.01, use: "Hero artwork title" }
    display:         { size: 40, weight: 700, lineHeight: 1.15, tracking: -0.01, use: "Marketing hero, sign-up headline" }
    heading-lg:      { size: 32, weight: 700, lineHeight: 1.2, use: "Modal title, detail-page show name" }
    heading:         { size: 24, weight: 700, lineHeight: 1.25, use: "Section / category headers" }
    row-title:       { size: 20, weight: 700, lineHeight: 1.3, use: "Row headers like Trending Now" }
    subtitle:        { size: 18, weight: 500, lineHeight: 1.4, use: "Card title in expanded preview" }
    body-lg:         { size: 16, weight: 400, lineHeight: 1.5, use: "Synopsis, descriptions" }
    body:            { size: 14, weight: 400, lineHeight: 1.5, use: "Standard metadata, list rows" }
    caption:         { size: 13, weight: 400, lineHeight: 1.4, use: "Match %, maturity rating, runtime" }
    micro:           { size: 12, weight: 400, lineHeight: 1.4, tracking: 0.02, use: "Legal, fine print, footer links" }
  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 60 }
  rounded: { sm: 2, md: 4, lg: 6, full: 9999 }
  shadow:
    hover: "0 12px 24px rgba(0,0,0,0.8)"
    floating: "0 6px 16px rgba(0,0,0,0.7)"
    modal: "0 8px 32px rgba(0,0,0,0.9)"
  components_harvested: true
  components:
    button-primary: { type: button, bg: "#FFFFFF", fg: "#000000", radius: "4px", padding: "8px 24px", font: "16px / 700", states: "hover rgba(255,255,255,0.75)", use: "Play action on billboard / detail / continue-watching" }
    button-cta: { type: button, bg: "#E50914", fg: "#FFFFFF", radius: "4px", padding: "16px 28px", font: "18px / 700", states: "hover #B20710", use: "Marketing acquisition CTA (Get Started, Finish Sign-Up)" }
    button-secondary: { type: button, bg: "rgba(109,109,110,0.7)", fg: "#FFFFFF", radius: "4px", padding: "8px 24px", font: "16px / 700", states: "hover rgba(109,109,110,0.4)", use: "More Info beside Play" }
    button-circle: { type: button, bg: "rgba(42,42,42,0.6)", fg: "#FFFFFF", border: "2px solid rgba(255,255,255,0.5)", radius: "9999px", height: "40px", states: "hover border #FFFFFF", use: "Add-to-list, Like, expand on hover cards" }
    input-auth: { type: input, bg: "#161616", fg: "#FFFFFF", border: "1px solid #808080", radius: "4px", padding: "16px", font: "16px / 400", focus: "border #FFFFFF", states: "error border-bottom 2px #E87C03", use: "Email/password on sign-in" }
    input-search: { type: input, bg: "rgba(0,0,0,0.75)", fg: "#FFFFFF", border: "1px solid #FFFFFF", radius: "4px", padding: "7px 12px", font: "14px / 400", use: "Top-nav search, expands from icon" }
    card-tile: { type: card, bg: "#181818", radius: "4px", shadow: "none", use: "Resting poster tile in a scrolling row" }
    card-hover: { type: card, bg: "#181818", radius: "6px", shadow: "0 12px 24px rgba(0,0,0,0.8)", states: "transform scale(1.5)", use: "Expanded preview card lifting above row" }
    badge-new: { type: badge, bg: "transparent", fg: "#E50914", font: "12px / 700", use: "NEW EPISODE / RECENTLY ADDED overlay, uppercase" }
    badge-top10: { type: badge, bg: "#E50914", fg: "#FFFFFF", font: "9px / 700", use: "Top 10 trending-rank ribbon" }
    badge-maturity: { type: badge, bg: "rgba(51,51,51,0.6)", fg: "#FFFFFF", border: "1px solid #666666", radius: "2px", padding: "2px 6px", font: "13px / 400", use: "Maturity rating on detail pages / previews" }
    tab-nav: { type: tab, fg: "#E5E5E5", font: "14px / 400", active: "color #FFFFFF weight 700", states: "hover #B3B3B3", use: "Top nav links" }
    toast-banner: { type: toast, bg: "#E87C03", fg: "#FFFFFF", padding: "12px 16px", font: "14px / 500", use: "Account / payment full-width top banner" }
    dialog-modal: { type: dialog, bg: "#181818", fg: "#FFFFFF", radius: "6px", padding: "0 / 24px body", shadow: "0 8px 32px rgba(0,0,0,0.9)", use: "Title-detail modal, account-action confirm" }
    toggle-default: { type: toggle, bg: "#737373", radius: "9999px", states: "on track #E50914, thumb #FFFFFF", use: "Autoplay previews, subtitle, profile-lock switches" }
---

# Design System Inspiration of Netflix

## 1. Visual Theme & Atmosphere

Netflix is the streaming interface that taught the world what "lean-back" entertainment software should feel like — a dark, cinematic theater where the content is the only thing that glows. The product opens on near-black (`#141414`) and stays there. There is no white-canvas mode, no light theme in the consumer app; the darkness is not a setting, it is the brand. Against that black, full-bleed artwork — show posters, hero billboards, character key-art — supplies all the color the screen needs. The UI itself recedes to white text, grey metadata, and one searing red accent: **Netflix Red `#E50914`**, reserved almost exclusively for the logo, the primary CTA, and progress fills.

The custom **Netflix Sans** typeface (designed with foundry Dalton Maag, shipped 2018, replacing Gotham) is the quiet workhorse. It is a geometric, confident, faintly condensed grotesque tuned for screen rendering at TV viewing distance and mobile arm's-length alike. It carries the same optical voice from the wordmark down to the 12px caption, which is the point: one family, top to bottom, so the chrome feels like a single continuous surface and never competes with the artwork.

What defines Netflix visually is the **theater principle**: dim the room, light the screen. Chrome is intentionally low-contrast (grey-on-black) so that when artwork appears it reads as luminous. Rows of posters scroll horizontally; the page is a grid of doors into content, each door a 16:9 or 2:3 image with a hover-expand that pops a preview. The interface is less a set of widgets and more a dark frame around moving pictures.

**Key Characteristics:**
- Netflix Red (`#E50914`) used sparingly — logo, primary CTA, progress bars, never as a background wash
- Near-black canvas (`#141414`) as the permanent, theme-less ground
- Netflix Sans (Dalton Maag, 2018) — one geometric family across the entire UI
- Full-bleed artwork supplies color; chrome stays grey-on-black to let posters glow
- Horizontal poster rows ("sliders") as the primary navigation metaphor
- Hover-to-expand cards that scale up and reveal preview controls
- Top nav fades from transparent over the hero billboard to solid black on scroll

## 2. Color Palette & Roles

### Primary
- **Netflix Red** (`#E50914`): The brand red (Pantone 1795 C, RGB 229·9·20). Primary CTA fill, logo, progress-bar fill, active selection underline. Energetic, digital, legible on black and white. Used as accent, never as a large fill area.
- **Dark Red** (`#B20710`): Hover/pressed state for the red CTA; secondary brand red in marketing gradients.
- **Pure Black** (`#000000`): Player background, modal scrims, the deepest layer. Body of the video surface.
- **Near Black** (`#141414`): The app canvas — the default page and row background. Slightly lifted from pure black so layered surfaces are distinguishable.
- **Pure White** (`#FFFFFF`): Primary text, active icons, logo on dark contexts.

### Brand (Logo / Marketing)
- **Netflix Red** (`#E50914`): The wordmark and "N" ribbon mark. The single non-negotiable brand asset color.
- **Black** (`#000000`) / **White** (`#FFFFFF`): The only approved logo backgrounds. The mark is never placed on a colored fill.

### Semantic
- **Error Red** (`#E87C03`→`#E50914` family): Form errors use a warm red `#E50914`; auth/payment errors render in `#E87C03` amber-red to distinguish from the brand red CTA on the same screen.
- **Success Green** (`#2A9D3C`): "Downloaded", "Added to list" confirmations. Rare — Netflix avoids semantic green in the browse UI.
- **Warning Amber** (`#E87C03`): Billing reminders, payment-failed banners, "Your plan changes soon".
- **New Badge Red** (`#E50914`): "New Episode", "Recently Added" ribbons reuse the brand red.

### Neutral Scale (dark-first)
- **Grey 900** (`#141414`): App canvas, row background.
- **Grey 850** (`#181818`): Card resting fill, expanded preview-card body.
- **Grey 800** (`#2F2F2F`): Hover row background, secondary button fill.
- **Grey 700** (`#404040`): Borders on dark surfaces, divider lines, circle-icon button outline.
- **Grey 600** (`#6D6D6E`): Disabled text, muted controls, secondary button border.
- **Grey 500** (`#808080`): Caption/metadata text, "secondary" CTA label, inactive nav links.
- **Grey 400** (`#B3B3B3`): Body metadata, sub-headings, the canonical "Netflix grey" for descriptions.
- **Grey 300** (`#E5E5E5`): Emphasized secondary text, list-item labels.
- **White** (`#FFFFFF`): Primary headings, active nav, key labels.

### Surface & Borders
- **Border Default**: `#404040` (grey700). Inputs, dividers, icon-button rings on dark.
- **Border Subtle**: `#333333`. Hairline separators inside dark cards.
- **Overlay Scrim**: `rgba(0,0,0,0.7)` to `rgba(0,0,0,0.9)`. Modal and player-control scrims.
- **Hero Gradient**: `linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,1) 100%)` — the bottom-of-billboard fade that blends artwork into the canvas. Also a left-to-right variant `rgba(0,0,0,0.6)→transparent` for text legibility over key-art.

## 3. Typography Rules

### Font Family
- **Primary**: `"Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`
- **Legacy fallback**: Pre-2018 surfaces used Gotham / `"Roboto"`; the modern stack standardizes on Netflix Sans.
- **Monospace**: `"Courier New", monospace` (used only in dev/diagnostic overlays, not consumer UI).

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Billboard Title | Netflix Sans | 56px | 700 | 1.1 | -0.01em | Hero artwork title (often replaced by logo art) |
| Display | Netflix Sans | 40px | 700 | 1.15 | -0.01em | Marketing hero, sign-up headline |
| Heading Large | Netflix Sans | 32px | 700 | 1.2 | normal | Modal title, detail-page show name |
| Heading | Netflix Sans | 24px | 700 | 1.25 | normal | Section / category headers |
| Row Title | Netflix Sans | 20px | 700 | 1.3 | normal | "Trending Now", "Continue Watching" |
| Subtitle | Netflix Sans | 18px | 500 | 1.4 | normal | Card title in expanded preview |
| Body Large | Netflix Sans | 16px | 400 | 1.5 | normal | Synopsis, descriptions |
| Body | Netflix Sans | 14px | 400 | 1.5 | normal | Standard metadata, list rows |
| Caption | Netflix Sans | 13px | 400 | 1.4 | normal | Match %, maturity rating, runtime |
| Micro | Netflix Sans | 12px | 400 | 1.4 | 0.02em | Legal, fine print, footer links |

### Principles
- **One family, full range**: Netflix Sans ships Light through Black; the UI primarily uses 400 (body/metadata), 500 (card labels), and 700 (titles/CTAs). Bold titles, regular everything else.
- **Grey is the default body color**: descriptive text is `#B3B3B3`, not white. White is reserved for the single most important label per surface, preserving contrast hierarchy on black.
- **Tight display, loose body**: large titles tighten letter-spacing (`-0.01em`) for cinematic density; body text stays at normal tracking with generous 1.5 line-height for arm's-length readability.
- **No italics in chrome**: emphasis comes from weight and color, not slant. Italics appear only inside subtitle/caption rendering of the video itself.

## 4. Component Stylings

### Buttons

Netflix buttons are flat, rounded-rectangle, high-contrast. The primary action on the player and browse surfaces is white (a "play" button), while red is reserved for marketing CTAs and the sign-up flow. There is no shadow on dark surfaces — separation comes from fill contrast.

**Primary / White (Play)**
- Background: `#FFFFFF`
- Text: `#000000`
- Border: none
- Radius: 4px
- Padding: 8px 24px
- Font: 16px / 700 / Netflix Sans
- Icon: leading play glyph, 24px, `#000000`
- Hover: background `rgba(255,255,255,0.75)`
- Use: "재생 / Play" on billboard, detail page, continue-watching card — the dominant action

**Primary / Red (Marketing CTA)**
- Background: `#E50914`
- Text: `#FFFFFF`
- Border: none
- Radius: 4px
- Padding: 16px 28px
- Font: 18px / 700 / Netflix Sans (24px on marketing hero)
- Hover: background `#B20710`
- Use: "Get Started", "Finish Sign-Up", "Restart Membership" — acquisition surfaces only

**Secondary / Grey (More Info)**
- Background: `rgba(109,109,110,0.7)` (grey600 @70%)
- Text: `#FFFFFF`
- Border: none
- Radius: 4px
- Padding: 8px 24px
- Font: 16px / 700 / Netflix Sans
- Icon: leading "ⓘ" info glyph
- Hover: background `rgba(109,109,110,0.4)`
- Use: "상세 정보 / More Info" paired beside the white Play button

**Circle Icon Button**
- Background: `rgba(42,42,42,0.6)`
- Border: 2px solid `rgba(255,255,255,0.5)`
- Radius: 9999px
- Size: 40px diameter (44px on detail page)
- Icon: 20px, `#FFFFFF`
- Hover: border `#FFFFFF`, icon `#FFFFFF`
- Use: Add-to-list (+), Like (👍), expand (⌄) on hover cards

### Inputs

Sign-in and search inputs sit on dark fills with subtle borders; the email field on the marketing page is a notable high-contrast exception.

**Auth Field (dark)**
- Background: `#161616` (with `rgba(22,22,22,0.7)` over artwork)
- Text: `#FFFFFF`
- Border: 1px solid `#808080`
- Radius: 4px
- Padding: 16px
- Font: 16px / 400 / Netflix Sans
- Placeholder / floating label: `#8C8C8C`
- Focus: border `#FFFFFF`, label floats up to 11px
- Error: border-bottom 2px `#E87C03`, message `#E87C03` 13px below
- Use: Email/password on the sign-in screen

**Search Field**
- Background: `rgba(0,0,0,0.75)`
- Text: `#FFFFFF`
- Border: 1px solid `#FFFFFF`
- Radius: 4px
- Padding: 7px 12px
- Font: 14px / 400 / Netflix Sans
- Icon: leading magnifier 18px `#FFFFFF`
- Use: Top-nav search, expands from an icon

### Cards (Title Cards)

The title card is THE Netflix component — a poster tile in a horizontal row that expands on hover.

**Resting (Row Tile)**
- Background: artwork image, fallback `#181818`
- Border: none
- Radius: 4px
- Aspect: 16:9 (boxshot rows) or 2:3 (portrait rows)
- Shadow: none at rest
- Use: Default state in a scrolling row

**Hover (Expanded Preview)**
- Background: `#181818` body below 16:9 artwork
- Border: none
- Radius: 6px (top corners follow artwork, bottom info-panel squared-rounded)
- Transform: `scale(1.5)` with `transform-origin` toward row center
- Shadow: `0 12px 24px rgba(0,0,0,0.8)`
- Contains: muted autoplay preview, action button row (play, +, like, expand), match % in green `#46D369`, maturity badge, duration, genre tags
- Use: Hover/focus on a row tile — lifts above neighbors with z-index and shadow

**Match Score**
- Text: `#46D369` (Netflix green)
- Font: 14px / 700 / Netflix Sans
- Use: "98% Match" inside expanded cards

### Badges

**New / Recently Added**
- Background: transparent
- Text: `#E50914`
- Border: none
- Font: 12px / 700 / Netflix Sans, uppercase, letter-spacing 0.05em
- Use: "NEW EPISODE", "RECENTLY ADDED" overlaid bottom-left on artwork

**Top 10 Ribbon**
- Background: `#E50914` (red triangle ribbon, top-right of tile)
- Text: `#FFFFFF`
- Font: 9px / 700 uppercase "TOP 10"
- Use: Trending-rank indicator on qualifying tiles

**Maturity Rating**
- Background: `rgba(51,51,51,0.6)`
- Text: `#FFFFFF`
- Border: 1px solid `#666666` (left accent line for some regions)
- Radius: 2px
- Padding: 2px 6px
- Font: 13px / 400 / Netflix Sans
- Use: "18", "15+", "TV-MA" on detail pages and previews

### Tabs / Nav

**Top Nav Link**
- Text: `#E5E5E5` (active `#FFFFFF` 700)
- Font: 14px / 400 / Netflix Sans
- Hover: `#B3B3B3`
- Background: transparent → `#141414` solid on scroll
- Use: Home / TV Shows / Movies / New & Popular / My List

**Profile Gate Tile**
- Background: artwork avatar, `#333333` fallback
- Radius: 4px
- Size: 84px–200px square depending on viewport
- Hover: 2px solid `#FFFFFF` outline, label brightens white
- Use: "Who's watching?" profile selection grid

### Progress Bar

**Continue Watching**
- Track: `#404040`
- Fill: `#E50914`
- Height: 3px
- Radius: 0
- Use: Resume position under continue-watching tiles and on the player scrubber

### Toasts / Banners

**Account Banner**
- Background: `#E87C03` (warning) or `#E50914` (urgent)
- Text: `#FFFFFF`
- Padding: 12px 16px
- Font: 14px / 500 / Netflix Sans
- Use: "Update your payment method", full-width top banner

### Dialogs

**Modal (Detail / Confirm)**
- Background: `#181818`
- Text: `#FFFFFF`
- Border: none
- Radius: 6px
- Padding: 0 (artwork-bleed top) then 24px body
- Shadow: `0 8px 32px rgba(0,0,0,0.9)`
- Scrim: `rgba(0,0,0,0.7)`
- Use: Title-detail modal opened from a tile, account-action confirmations

### Toggles

**Default**
- Track: `#E50914` (on) / `#737373` (off)
- Radius: 9999px
- Thumb: `#FFFFFF` circle
- Use: Autoplay previews, subtitle settings, profile-lock switches

---


**Tier 1 sources:** https://www.netflix.com (live production site, verified via live DOM getComputedStyle).

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 60px
- Row gutter (between rows): ~3vw vertical, scaling with viewport
- Tile gap (within a row): 4px–8px, kept tight so more tiles peek at row edges

### Grid & Container
- Page padding: 4% of viewport width left/right (`padding: 0 4vw`)
- Rows are horizontally scrollable carousels, not a fixed grid — tile count per row is responsive (2 on mobile → 6+ on wide desktop)
- Hero billboard: full-bleed, ~56vh tall, artwork right-aligned with left-side text gradient
- Detail modal: max-width ~850px, centered, artwork bleeds to modal edges

### Whitespace Philosophy
- **Let artwork breathe, keep chrome tight**: generous vertical gaps between rows so each category reads as its own shelf; tight gaps within a row so the carousel feels abundant.
- **Edge-peek**: tiles are deliberately clipped at row edges to signal "scroll for more" — the row never ends cleanly at the viewport.
- **Dark negative space is the frame**: black around artwork is not empty, it is the cinema. Never fill it with decoration.

### Border Radius Scale
- Sharp (2px): maturity badges, inline chips
- Standard (4px): buttons, inputs, resting tiles, profile gates
- Comfortable (6px): expanded hover cards, modals
- Pill (9999px): toggles, circle icon buttons

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Resting row tiles, page background |
| Hover (Level 1) | `0 12px 24px rgba(0,0,0,0.8)` + scale(1.5) | Expanded preview card lifting above row |
| Floating (Level 2) | `0 6px 16px rgba(0,0,0,0.7)` | Dropdown menus, profile menu, search panel |
| Modal (Level 3) | `0 8px 32px rgba(0,0,0,0.9)` | Detail modal, confirmation dialog |
| Scrim | `rgba(0,0,0,0.7)` full overlay | Behind any modal or the player chrome |

**Shadow Philosophy**: On a black canvas, drop-shadows are nearly invisible — so Netflix communicates elevation primarily through **scale and z-index**, not shadow. The hover card grows to 1.5× and slides above its neighbors; the shadow underneath is heavy and pure-black only to anchor that lift against the dark. Elsewhere, separation comes from fill-lightness steps (`#141414` → `#181818` → `#2F2F2F`), not from luminous edges. There are no colored shadows and no soft ambient glows — the artwork is the only light source.

### Blur Effects
- Player controls and the top nav use a subtle backdrop scrim (gradient, not gaussian blur) to keep text legible over moving artwork.
- Profile and account dropdowns drop a hard `rgba(0,0,0,0.9)` panel rather than a frosted blur.

## 7. Do's and Don'ts

### Do
- Keep the canvas dark — `#141414` page, `#000000` player. Never a light theme in the consumer app.
- Reserve Netflix Red (`#E50914`) for the logo, the primary marketing CTA, progress fills, and "New" markers.
- Use white (`#FFFFFF`) as the primary in-app action color (the Play button); red is for acquisition.
- Default body/metadata text to grey `#B3B3B3`; reserve white for the single most important label.
- Let full-bleed artwork supply the color — keep surrounding chrome neutral.
- Use 700 weight for titles and CTAs, 400 for everything else.
- Communicate elevation with scale + z-index on the dark canvas, not soft shadows.
- Clip tiles at row edges to invite horizontal scroll.

### Don't
- Don't use red as a large background fill — it is an accent, not a surface.
- Don't introduce a light/white background in browse, player, or detail surfaces.
- Don't put the logo or red CTA on a colored background — only black or white.
- Don't make all text white; grey hierarchy is what makes white legible.
- Don't add decorative borders or glows around artwork — the black frame is the design.
- Don't use heavy radii (>6px) on cards — Netflix tiles are nearly square-cornered.
- Don't crowd rows vertically — each category needs breathing room above and below.

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <500px | 2–3 tiles/row, hero ~40vh, nav collapses to hamburger + N logo |
| Tablet | 500–950px | 3–4 tiles/row, hover previews disabled (tap to open detail) |
| Desktop | 950–1400px | 5–6 tiles/row, full hover-expand previews enabled |
| Wide / TV | >1400px | 6+ tiles/row, larger billboard, 4% edge padding holds |

### Touch Targets
- Buttons: 44px min height on touch; circle icon buttons 44px diameter
- Tiles: full-tile tappable, opens detail modal directly (no hover-expand on touch)
- Nav: 48px tap rows in the mobile slide-out menu

### Collapsing Strategy
- Hover-expand previews are desktop-only; touch devices open the detail modal on tap.
- Top nav links collapse into a dropdown (mobile) anchored by the red "N" mark.
- Billboard text block stays left-aligned and shrinks; on mobile the synopsis is hidden, leaving title art + Play/Info buttons.
- Rows remain horizontally scrollable at every breakpoint — the core metaphor never breaks down.

### Image Behavior
- Artwork serves responsive crops: 16:9 boxshots for desktop rows, 2:3 portraits for mobile and "Top 10" rows.
- Hero billboard art is right-anchored with a left + bottom gradient so title text stays legible across crops.
- All artwork lazy-loads with a `#181818` placeholder block at exact tile dimensions.

## 9. Agent Prompt Guide

### Quick Color Reference
- Brand / Accent: Netflix Red (`#E50914`)
- Accent Hover: Dark Red (`#B20710`)
- App canvas: Near Black (`#141414`)
- Player / deepest: Pure Black (`#000000`)
- Card fill: Grey 850 (`#181818`)
- Hover row fill: Grey 800 (`#2F2F2F`)
- Primary text: White (`#FFFFFF`)
- Body / metadata text: Grey 400 (`#B3B3B3`)
- Caption text: Grey 500 (`#808080`)
- Border: Grey 700 (`#404040`)
- Match score: Green (`#46D369`)
- Warning: Amber (`#E87C03`)

### Example Component Prompts
- "Create a Netflix title card: 16:9 artwork, 4px radius, `#181818` fallback. On hover, scale to 1.5×, lift z-index, drop `0 12px 24px rgba(0,0,0,0.8)`, reveal an `#181818` info panel with a white circular play button, + and like circle buttons (40px, 2px `rgba(255,255,255,0.5)` border), '98% Match' in `#46D369` 14px/700, and a maturity badge."
- "Build a billboard hero: full-bleed artwork, ~56vh, bottom gradient `rgba(20,20,20,0)→rgba(20,20,20,1)`. Left-aligned title art, then a white Play button (`#FFFFFF` bg, `#000` text, 16px/700, 4px radius, 8px 24px padding) and a grey More Info button (`rgba(109,109,110,0.7)` bg, white text)."
- "Design the top nav: transparent over the hero, fading to solid `#141414` on scroll. Red 'N' mark left, links in `#E5E5E5` 14px/400 (active white 700), search icon + profile avatar right."
- "Create a Get-Started CTA: `#E50914` bg, white 18px/700 text, 16px 28px padding, 4px radius; hover `#B20710`."
- "Build a continue-watching tile: 16:9 artwork with a 3px progress bar at the bottom — track `#404040`, fill `#E50914`."

### Iteration Guide
1. Canvas is always dark (`#141414`); never introduce a light theme.
2. Red (`#E50914`) is an accent — logo, marketing CTA, progress, "New". White is the in-app action color.
3. Body text is grey `#B3B3B3`; reserve white for the single key label per surface.
4. Titles/CTAs are Netflix Sans 700; everything else is 400.
5. Radii stay tight: 4px buttons/tiles, 6px cards/modals, pill for toggles.
6. Elevation = scale + z-index + heavy black shadow, not soft glows.
7. Let artwork carry the color; keep chrome neutral grey-on-black.

---

## 10. Voice & Tone

Netflix speaks like a confident, friendly host who already knows what you want to watch — warm, direct, lightly playful, never corporate. Copy is concise and action-forward. English is the source voice, but Netflix localizes into 30+ languages with culturally-tuned (not literal) translation. Sentences in body copy end in periods; buttons are short imperative verbs with no terminal punctuation. Emoji appear in marketing and social but never in the core browse/player chrome.

| Context | Tone |
|---|---|
| CTAs | Imperative, short ("Play", "Get Started", "Finish Sign-Up", "More Info") |
| Onboarding | Reassuring, low-commitment ("Cancel anytime.", "We'll send a reminder 3 days before your trial ends.") |
| Empty states | Encouraging, redirective ("Add titles to your list to watch them later.") |
| Error messages | Plain, blameless, actionable ("That password is incorrect. Try again or reset it.") |
| Billing | Calm and transparent ("Your plan changes on June 12. No action needed.") |
| Maturity / parental | Neutral, factual — no judgment in rating language |
| Marketing hero | Bold, benefit-led ("Unlimited movies, TV shows and more.") |

**Forbidden moves.** No jargon ("leverage", "utilize"), no fake urgency countdown timers in core flows, no guilt copy on cancel ("Are you sure you want to leave us?"), no exclamation-stuffed hype in the player UI. The cancel flow is deliberately frictionless — regulatory and brand-trust driven.

## 11. Brand Narrative

Netflix began in 1997 as a **DVD-by-mail** rental service founded by **Reed Hastings** and **Marc Randolph** in Scotts Valley, California — famously conceived (per the often-repeated origin story) after a late video-store fee. The red-envelope mail business undercut Blockbuster's late-fee model, then the company made its defining bet: in 2007 it launched **streaming**, cannibalizing its own profitable mail business before anyone else could. In 2013 it became a studio with **House of Cards**, and "Netflix Original" reframed the company from distributor to producer.

The dark, cinematic interface is a direct expression of that identity. Netflix is not a software company that happens to show video; it is a **theater you carry**, and a theater is dark so the screen can be bright. Every interface decision serves the artwork: the black canvas, the grey-not-white chrome, the single red accent that never competes for attention. The red itself (`#E50914`) descends from the original DVD envelope and the wordmark — a piece of physical-era brand equity carried into pixels.

By the mid-2020s Netflix operates in 190+ countries with hundreds of millions of paid memberships, having expanded into ad-supported tiers, gaming, and live events. Through every expansion the visual system holds: **content is the hero, chrome is the frame, red is the signature.** The personalization engine — the rows are reordered per profile, the artwork itself is A/B-selected per viewer — means the "design" is partly generative, but the frame around it is rigid and constant. That tension — a fixed dark frame around infinitely variable content — is the whole brand.

What Netflix refuses: the bright, busy, multi-color dashboards of productivity software; the light-mode neutrality of utilities; ornamental UI that draws the eye away from a poster. The interface aspires to disappear.

## 12. Principles

1. **Dim the room, light the screen.** The canvas is dark so artwork reads as luminous. Chrome stays grey-on-black; the only light source is the content.
2. **Red is a signature, not a surface.** `#E50914` marks the logo, the acquisition CTA, progress, and "New". It never becomes a background. Overusing red cheapens it.
3. **White is the in-app action; red is acquisition.** Inside the product the dominant button is white (Play). Red lives on sign-up and marketing surfaces. Keep the two jobs separate.
4. **Grey makes white mean something.** Default text to `#B3B3B3`. White is spent on the single most important label per surface, which is how hierarchy survives on black.
5. **Elevation is scale, not glow.** On black, shadows vanish. Lift comes from growing the element (hover scale 1.5×) and raising z-index, anchored by a heavy pure-black shadow.
6. **Rows are doors, edges peek.** Content lives in horizontal carousels; tiles clip at the edge to promise more. The grid is never closed.
7. **The frame is fixed, the content is infinite.** The chrome is rigid and constant precisely because the artwork inside it is personalized and ever-changing.
8. **Chrome aspires to disappear.** Every pixel of UI competes with a poster. When in doubt, make the interface quieter.

## 13. Personas

*Personas below are fictional archetypes informed by publicly described streaming-viewer segments, not individual people.*

**Maya, 26, Los Angeles.** UX designer, watches on a 65" TV most evenings and her phone on the bus. Lives in "Continue Watching" and "Trending Now". Expects the app to remember her exact resume position to the second and to autoplay a preview the moment she lands on a tile. Annoyed by anything that delays the artwork — splash screens, slow row loads. Treats the red Play button as muscle memory.

**Daniel, 41, Chicago.** Father of two, manages four profiles including a Kids profile with a different (brighter, lighter) UI. Cares deeply that maturity ratings and parental locks are unambiguous. Browses lean-back on the living-room TV; never types if he can avoid it, navigating entirely by D-pad through the rows. Values the frictionless billing page — checks his plan once a quarter and wants zero surprises.

**Sofia, 33, Madrid.** Bilingual viewer who switches audio and subtitle languages constantly and watches a mix of Spanish originals and dubbed global content. Relies on the localized interface feeling native, not translated. Uses "My List" as a real watchlist and expects "New Episode" badges to be accurate. Watches mostly on a laptop in a dark room — the dark UI is why she never feels eye strain at midnight.

## 14. States

| State | Treatment |
|---|---|
| **Empty (My List)** | Centered grey `#B3B3B3` line ("Titles you add to My List appear here.") over `#141414`, with a suggestion row below. No illustration. |
| **Empty (Search no results)** | Grey caption ("Your search for 'xyz' did not have any matches.") plus a "Suggestions:" list and a fallback popular row. |
| **Loading (row)** | `#181818` placeholder tiles at exact final dimensions, faint 1.2s shimmer. Artwork fades in on load. |
| **Loading (page)** | Centered red `#E50914` spinner / the "N" ribbon animation over `#141414`. |
| **Hover (tile)** | Scale 1.5×, z-index lift, `0 12px 24px rgba(0,0,0,0.8)` shadow, muted autoplay preview, action button row reveals. |
| **Error (form field)** | Border-bottom 2px `#E87C03`, amber message 13px below the field. |
| **Error (playback)** | Full black player with centered white message + error code in grey, "Try Again" white button. |
| **Success (added to list)** | The + circle button fills to a ✓, brief scale pulse, no toast. |
| **Disabled** | Control drops to `#6D6D6E` text / `rgba(255,255,255,0.3)`; geometry unchanged. |
| **Buffering** | Red `#E50914` circular spinner centered over the dimmed (`rgba(0,0,0,0.5)`) video frame. |
| **Progress (resume)** | 3px bar, `#404040` track / `#E50914` fill, under continue-watching tiles and on the scrubber. |

## 15. Motion & Easing

**Durations:**

| Token | Value | Use |
|---|---|---|
| `motion-instant` | 0ms | Checkbox/toggle commit |
| `motion-fast` | 150ms | Button hover, nav-link color shift, icon-button border |
| `motion-card` | 300ms | Tile hover-expand (scale 1.5×) and collapse |
| `motion-standard` | 400ms | Modal open, row reorder, nav transparent→solid fade |
| `motion-billboard` | 600ms | Hero artwork cross-fade, billboard text reveal |

**Easings:**

| Token | Curve | Use |
|---|---|---|
| `ease-out` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — card expand, modal in |
| `ease-in` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — card collapse, modal out |
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — nav fade, row scroll |
| `ease-scroll` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Horizontal row carousel paging |

**Signature motions.**

1. **Tile hover-expand.** On hover, the tile scales to 1.5× over `motion-card` with `ease-out`, raises z-index above neighbors, drops a heavy black shadow, and reveals the info panel + autoplay preview. Collapse reverses with `ease-in`. This is the defining Netflix gesture.
2. **Row paging.** Clicking a row's edge arrow slides the carousel one page with `ease-scroll`; tiles at the new edge peek to promise more.
3. **Nav fade.** As the user scrolls off the billboard, the top nav transitions from transparent to solid `#141414` over `motion-standard / ease-standard`, keeping links legible against incoming artwork.
4. **Billboard cross-fade.** Hero artwork and its preview video cross-fade over `motion-billboard`; title art and buttons fade up from below with a slight delay so the artwork lands first.
5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, hover-expand scaling and autoplay previews are suppressed — tiles get a simple border/brightness change instead, and cross-fades become instant cuts. The product stays fully usable.

<!--
OmD v0.1 Sources

Token grounding (WebSearch, 2026-06-06): Netflix Red #E50914 (RGB 229·9·20,
Pantone 1795 C), Black #000000, White #FFFFFF, Dark Red #B20710 — confirmed
across multiple brand-color references. Netflix Sans (custom typeface by
Dalton Maag, introduced 2018, replacing Gotham) confirmed as the brand face.

Dark-UI tokens (#141414 canvas, #181818 card, #B3B3B3 metadata grey, #2F2F2F
hover, #46D369 match-green, hover scale 1.5×) are well-documented conventions
of the Netflix web/TV consumer UI, used here as representative values.

Brand narrative facts (founded 1997 by Reed Hastings & Marc Randolph; DVD-by-mail;
streaming launched 2007; House of Cards 2013; 190+ countries) are widely
documented public history.

Personas (§13) are fictional archetypes informed by publicly described
streaming-viewer segments, not individual people. Interpretive claims
("dim the room, light the screen", "chrome aspires to disappear") are editorial
readings of the design, not official Netflix statements.

Sources:
- https://www.brandcolorcode.com/netflix
- https://brand.netflix.com/en/assets/logos/
- https://www.designyourway.net/blog/netflix-logo/ (Netflix Sans / Dalton Maag history)
-->


---
Source: https://oh-my-design.kr/design-systems/netflix · Raw twin of references/netflix/DESIGN.md
Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills