name: netflix-design
version: alpha
description: >
  Netflix runs on a pure-black canvas with one brand voltage — Netflix Red — used
  only for the logo and the primary "Get Started" CTA. Type is Netflix Sans, bold
  for headlines, white on black. The layout primitive is the poster grid (ranked
  "Trending Now" tiles) over a dimmed full-bleed title collage, with a signature red
  hairline arcing under the hero. Feature cards carry dark navy→plum gradients with
  playful glossy icons; the FAQ is a dark accordion of +-toggled rows.
colors:
  # Brand
  primary: '#E50914'        # Netflix Red — logo + primary CTA only
  primary-hover: '#F6121D'
  on-primary: '#FFFFFF'
  # Surface
  surface: '#000000'        # the canvas
  surface-raised: '#1A1A1A' # inputs, subtle wells
  surface-accordion: '#2D2D2D' # FAQ rows
  # Feature-card gradient (navy → plum)
  card-gradient-start: '#1A2A4A'
  card-gradient-end: '#3B1F47'
  # Text
  on-surface: '#FFFFFF'     # headings, primary text
  on-surface-secondary: '#B3B3B3' # captions, footer links, meta
  on-surface-disabled: '#808080'
  # Hairlines
  hairline: '#333333'       # input borders, dividers
  hairline-red: '#B9090B'   # the arc/divider glow under the hero
typography:
  display:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, Arial, sans-serif'
    fontSize: 56px # "Unlimited movies, shows, and more"
    fontWeight: 700
    lineHeight: 60px
    letterSpacing: -0.5px
  headline-lg:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, sans-serif'
    fontSize: 40px # "Trending Now", "More reasons to join"
    fontWeight: 700
    lineHeight: 44px
    letterSpacing: normal
  headline-md:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, sans-serif'
    fontSize: 28px # FAQ question, card title
    fontWeight: 500
    lineHeight: 34px
    letterSpacing: normal
  body-lg:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, sans-serif'
    fontSize: 20px # hero subhead
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: normal
  body-md:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  label:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, sans-serif'
    fontSize: 18px # button text
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: normal
  caption:
    fontFamily: '"Netflix Sans", "Helvetica Neue", Inter, sans-serif'
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: normal
rounded:
  xs: 4px    # buttons, inputs (Netflix stays nearly square)
  sm: 8px    # poster tiles, cards
  md: 12px
  none: 0px
spacing:
  # base unit = 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 64px
components:
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.xs}'
    padding: '14px 24px'
    iconRule: 'trailing chevron ›'
  button-secondary:
    background: 'rgba(0,0,0,0.5)'
    textColor: '{colors.on-surface}'
    border: '1px solid rgba(255,255,255,0.5)'
    typography: '{typography.label}'
    rounded: '{rounded.xs}'
    padding: '8px 16px'
  email-input:
    background: 'rgba(22,22,22,0.7)'
    textColor: '{colors.on-surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.xs}'
    padding: '16px'
  poster-tile:
    background: '{colors.surface-raised}'
    rounded: '{rounded.sm}'
    rankNumeral: 'large outlined numeral overlapping the poster'
  feature-card:
    background: 'linear-gradient(135deg, {colors.card-gradient-start}, {colors.card-gradient-end})'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.sm}'
    padding: '24px'
    iconStyle: 'glossy gradient illustration (red/pink/purple)'
  faq-row:
    background: '{colors.surface-accordion}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.none}'
    toggleIcon: 'plus → close'
    padding: '24px'
  hero-arc:
    color: '{colors.hairline-red}'
    description: 'red glowing hairline arcing under the hero collage'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150ms
  duration-standard: 250ms
icons:
  library: lucide # outline set for UI chrome; feature icons are bespoke glossy illustrations
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 24px, lg: 32px }
  colorRule: 'UI glyphs inherit white; feature illustrations use red/pink/purple gradients'

Netflix

Design spec — version alpha. Surfaces studied via Playwright: signed-out homepage (IN locale) — full-page screenshots + representative element probes. Brand values reconciled with Netflix's well-known identity.

Overview

Netflix is the canonical black-canvas, one-red-voltage brand. The page sits on pure {colors.surface} #000000, with a single accent — Netflix Red {colors.primary} #E50914 — rationed to exactly two jobs: the wordmark logo and the primary "Get Started" CTA. Everything else is white type on black. The hero is a dimmed full-bleed collage of title posters with a confident bold headline, and a signature red hairline arc glowing beneath it ({colors.hairline-red}) — the one decorative flourish.

Type is Netflix Sans, bold for headlines and medium for controls. The layout primitive is the ranked poster grid ("Trending Now" with giant outlined rank numerals overlapping each tile), followed by feature cards that swap pure black for rich navy→plum gradients ({colors.card-gradient-start} → {colors.card-gradient-end}) and playful glossy 3D icons. The FAQ is a dark accordion of #2D2D2D rows toggled by a plus icon. Shapes are nearly square — Netflix uses tiny 4px radii on buttons and inputs, reading as crisp and broadcast-like.

Colors

Brand. Netflix Red {colors.primary} #E50914 is the entire identity. Scarcity rule: red is the logo and the primary CTA only — never body links, never borders, never section accents. Hover lifts to {colors.primary-hover} #F6121D.

Surfaces. Canvas pure black {colors.surface} #000000; inputs and subtle wells {colors.surface-raised} #1A1A1A; FAQ rows {colors.surface-accordion} #2D2D2D. Feature cards break the black with a navy→plum gradient (#1A2A4A → #3B1F47).

Text. White {colors.on-surface} #FFFFFF for headings and primary copy; {colors.on-surface-secondary} #B3B3B3 for captions, footer links, and fine print; disabled #808080.

Hairlines. Input borders and dividers use {colors.hairline} #333333; the hero's glowing under-arc uses {colors.hairline-red} #B9090B.

Typography

Family: Netflix Sans → "Helvetica Neue", Inter, Arial, sans-serif. Closest open-source substitute: Inter or Helvetica Now (Netflix Sans is a bespoke Helvetica-lineage grotesque). Weight strategy: 700 for hero/section headlines, 500 for FAQ questions, card titles, and button labels, 400 for body. Tracking is roughly normal (slightly negative on the big hero).

Token	Size	Weight	Usage
display	56px	700	Hero ("Unlimited movies, shows, and more")
headline-lg	40px	700	Section headers ("Trending Now")
headline-md	28px	500	FAQ questions, card titles
body-lg	20px	400	Hero subhead
body-md	16px	400	Default body
label	18px	500	Buttons
caption	13px	400	Fine print, legal

Layout

Base unit 8px, xxxl 64px section rhythm. The hero is full-bleed (poster collage, dark overlay, centered headline + email-capture row). Below: a horizontally-scrollable ranked poster carousel (5 tiles with overlapping outline numerals), a 2×2 grid of gradient feature cards, and a stacked FAQ accordion. The email-capture row repeats before the footer. Content centers to ~1100px with a dark, cinematic feel throughout.

Elevation & Depth

Black-on-black with gradient cards doing the depth work. There's no shadow ladder; instead, the navy→plum feature-card gradients and the red hero arc create dimension against the flat black. Poster tiles read as photos directly on black. The only "glow" is the red arc and the glossy feature icons.

Shapes

Netflix is nearly square: {rounded.xs} 4px on buttons and inputs, {rounded.sm} 8px on poster tiles and cards, {rounded.none} on FAQ rows. The geometry is crisp and broadcast-grade — no pills, no large radii.

Components

• button-primary — Netflix Red #E50914, white 500 label, 4px radius, trailing chevron ("Get Started ›").
• button-secondary — translucent black with a 50% white border (the signed-in/"Sign In" style).
• email-input — translucent dark rgba(22,22,22,0.7), 1px #333 border, 4px radius.
• poster-tile — 8px-radius poster with a large outlined rank numeral overlapping its left edge.
• feature-card — navy→plum gradient, white text, 8px radius, with a glossy red/pink/purple 3D icon ("Enjoy on your TV", "Download your shows…").
• faq-row — #2D2D2D full-width row, white text, square corners, plus→close toggle.
• hero-arc — the red glowing hairline arcing beneath the hero collage.

Motion

Quick and broadcast-clean: {motion.duration-fast} 150ms hovers, {motion.duration-standard} 250ms for accordion expand and carousel scroll, standard ease. FAQ rows expand smoothly; poster carousels slide. No parallax or decorative scroll spectacle — the imagery is the show.

Iconography

UI chrome uses simple outline glyphs (Lucide as substitute), white, 2px stroke. Feature-card icons are bespoke glossy 3D illustrations in red/pink/purple gradients — the one place illustration gets colorful and dimensional. The FAQ toggle is a plain plus that rotates to a close.

Do's and Don'ts

• Do keep the canvas pure black — Netflix is dark-only.
• Do reserve Netflix Red for the logo and exactly one primary CTA per viewport.
• Do keep radii tiny (4px buttons/inputs) — Netflix is crisp, not pill-shaped.
• Do use the navy→plum gradient for feature cards to break the black.
• Do render ranked posters with large overlapping outline numerals.
• Don't use red for links, borders, or section accents.
• Don't introduce a second brand color — there's one voltage, and it's red.
• Don't round things into pills or add soft drop-shadow elevation.

Known Gaps

• Black canvas, Netflix Red CTA/logo, near-square radii, ranked poster grid, navy→plum feature cards, dark FAQ accordion, and the red hero arc were observed directly from full-page captures. The exact card-gradient stops (#1A2A4A→#3B1F47) and arc red (#B9090B) are eyeballed and approximate; #E50914 (Netflix Red), #000000, #B3B3B3, and #2D2D2D are authoritative.
• Inter/Helvetica Neue stand in for the proprietary Netflix Sans.
• Signed-in surfaces (browse, player, profile gate) were not studied; tokens describe the signed-out marketing/home experience.