--- name: Netflix 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: billboard-title: fontSize: 56px fontWeight: 700 lineHeight: 1.1 letterSpacing: '-0.01px' use: Hero artwork title display: fontSize: 40px fontWeight: 700 lineHeight: 1.15 letterSpacing: '-0.01px' use: Marketing hero, sign-up headline heading-lg: fontSize: 32px fontWeight: 700 lineHeight: 1.2 use: Modal title, detail-page show name heading: fontSize: 24px fontWeight: 700 lineHeight: 1.25 use: Section / category headers row-title: fontSize: 20px fontWeight: 700 lineHeight: 1.3 use: Row headers like Trending Now subtitle: fontSize: 18px fontWeight: 500 lineHeight: 1.4 use: Card title in expanded preview body-lg: fontSize: 16px fontWeight: 400 lineHeight: 1.5 use: Synopsis, descriptions body: fontSize: 14px fontWeight: 400 lineHeight: 1.5 use: Standard metadata, list rows caption: fontSize: 13px fontWeight: 400 lineHeight: 1.4 use: Match %, maturity rating, runtime micro: fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02px use: Legal, fine print, footer links rounded: sm: 2px md: 4px lg: 6px full: 9999px spacing: xs: 4 sm: 8 md: 12 base: 16 lg: 24 xl: 32 xxl: 48 section: 60 components: button-primary: type: button backgroundColor: '#FFFFFF' textColor: '#000000' rounded: 4px padding: 8px 24px typography: 16px / 700 states: hover rgba(255,255,255,0.75) use: Play action on billboard / detail / continue-watching button-cta: type: button backgroundColor: '#E50914' textColor: '#FFFFFF' rounded: 4px padding: 16px 28px typography: 18px / 700 states: 'hover #B20710' use: Marketing acquisition CTA (Get Started, Finish Sign-Up) button-secondary: type: button backgroundColor: rgba(109,109,110,0.7) textColor: '#FFFFFF' rounded: 4px padding: 8px 24px typography: 16px / 700 states: hover rgba(109,109,110,0.4) use: More Info beside Play button-circle: type: button backgroundColor: rgba(42,42,42,0.6) textColor: '#FFFFFF' border: 2px solid rgba(255,255,255,0.5) rounded: 9999px height: 40px states: 'hover border #FFFFFF' use: Add-to-list, Like, expand on hover cards input-auth: type: input backgroundColor: '#161616' textColor: '#FFFFFF' border: '1px solid #808080' rounded: 4px padding: 16px typography: 16px / 400 focus: 'border #FFFFFF' states: 'error border-bottom 2px #E87C03' use: Email/password on sign-in input-search: type: input backgroundColor: rgba(0,0,0,0.75) textColor: '#FFFFFF' border: '1px solid #FFFFFF' rounded: 4px padding: 7px 12px typography: 14px / 400 use: Top-nav search, expands from icon card-tile: type: card backgroundColor: '#181818' rounded: 4px shadow: none use: Resting poster tile in a scrolling row card-hover: type: card backgroundColor: '#181818' rounded: 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 backgroundColor: transparent textColor: '#E50914' typography: 12px / 700 use: NEW EPISODE / RECENTLY ADDED overlay, uppercase badge-top10: type: badge backgroundColor: '#E50914' textColor: '#FFFFFF' typography: 9px / 700 use: Top 10 trending-rank ribbon badge-maturity: type: badge backgroundColor: rgba(51,51,51,0.6) textColor: '#FFFFFF' border: '1px solid #666666' rounded: 2px padding: 2px 6px typography: 13px / 400 use: Maturity rating on detail pages / previews tab-nav: type: tab textColor: '#E5E5E5' typography: 14px / 400 active: 'color #FFFFFF weight 700' states: 'hover #B3B3B3' use: Top nav links toast-banner: type: toast backgroundColor: '#E87C03' textColor: '#FFFFFF' padding: 12px 16px typography: 14px / 500 use: Account / payment full-width top banner dialog-modal: type: dialog backgroundColor: '#181818' textColor: '#FFFFFF' rounded: 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 backgroundColor: '#737373' rounded: 9999px states: 'on track #E50914, thumb #FFFFFF' use: Autoplay previews, subtitle, profile-lock switches fonts: roles: sans: Netflix Sans mono: Courier New --- # Design System Inspiration of Netflix ## Overview ### 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 ### Primary tasks - Resume a show from the exact point you stopped watching - Preview a title and check its match score before playing - Save a title to your list to watch it later - Switch audio and subtitle languages while watching a dubbed title - Manage several profiles, including a kids profile with its own interface ### 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. ### 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. ### 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. ## Colors ### 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. ## Typography ### 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. ## Layout ### 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 ### 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. ## Elevation & Depth | 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. ### Values kept in prose Measured values the DESIGN.md token grammar cannot carry, kept verbatim: - `shadow.hover`: `0 12px 24px rgba(0,0,0,0.8)` - `shadow.floating`: `0 6px 16px rgba(0,0,0,0.7)` - `shadow.modal`: `0 8px 32px rgba(0,0,0,0.9)` ## 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. ## Components ### 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). ### 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. | ## 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. ## 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. ## 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. --- ## Governance ### Known Gaps - **Contrast, `badge-new`.** Text `#e50914` on `#00000000` measures 4.38:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - **Contrast, `toast-banner`.** Text `#ffffff` on `#e87c03` measures 2.87:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.