Netflix Red
#e50914Primary CTAs, brand logo, active states, and the single chromatic accent in the entire system — the only warm color allowed to break the black void
Netflix Spain
netflix.comWebsite preview
The design language
Netflix operates in cinematic darkness: a pure black void where vibrant content artwork becomes the visual hero. The interface strips itself down to typography and a single, unambiguous signal of action — Netflix Red. Every surface is some shade of near-black, creating a theatrical environment that makes movie posters, thumbnails, and show artwork explode off the screen. The system is intentionally minimal at the chrome level and maximal at the content level, with the red accent acting as the only warm temperature in an otherwise cold, immersive black space. Cards and feature tiles carry subtle dark-to-dark gradients (deep indigo, burgundy, charcoal) that add atmospheric depth without competing with the photographic content they frame.
Color palette
brand
accent
Cinema Indigo
#192247Feature card gradient origin — deep blue-violet used as the cool terminus in card background gradients
Bordeaux Glow
#461518Radial highlight origin on feature cards — a warm deep red that adds atmospheric luminosity to card edges
Ember Arc
#6f181dHorizontal light beam across card midlines — a thin warm glow that bisects feature cards with a soft red line
neutral
Pure Black
#000000Dominant page canvas and deepest surface — the cinematic background that swallows everything non-essential
Obsidian
#0f0f0fElevated surface tone, barely distinguishable from black — used for subtle layering and section dividers
Carbon
#232323Card and button surface background — the primary elevated layer above pure black
Charcoal
#2d2d2dDeeper card surface and input field background — secondary surface level for nested elements
Graphite
#323232Rounded card backgrounds and tertiary surface treatment
Slate
#393939Hover states and pressed button backgrounds — a step lighter than carbon for interaction feedback
Ash
#5a5a5aHairline borders and subtle dividers on dark surfaces
Steel
#808080Muted body text and inactive helper copy
Fog
#b3b3b3Secondary body text, metadata, footer links, and de-emphasized descriptions
Pure White
#ffffffPrimary headings, body text, input text, and icon fills — the sole text color that carries information weight
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
100px · 400 · 1The quick brown fox jumps
heading
56px · 900 · 1The quick brown fox jumps
heading-sm
24px · 400 · 1.17The quick brown fox jumps
subheading
20px · 500 · 1.2The quick brown fox jumps
body-lg
16px · 400 · 1.5The quick brown fox jumps
body
14px · 400 · 1.5The quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
text-12
12px · 400 · 1.17The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Netflix Sans
- Weights
- 400, 500, 700, 900
- Sizes
- 10px, 12px, 13px, 14px, 16px, 20px, 24px, 56px, 100px
- Line height
- 1.0–1.6
- Fallback
- Inter or Helvetica Neue
Netflix Sans is a custom geometric sans optimized for on-screen readability across devices. The wide weight range (400–900) creates a dramatic hierarchy where 900-weight headlines at 56–100px feel like movie marquee titles. Body text stays at 400/500 with tight tracking. The extreme size jump from 24px to 56px signals a sharp two-tier heading system: section titles, then hero displays.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 12px
- Element gap
- 12px
Border radius
cards
8pxlinks
2pxtiles
16pxinputs
4pxbuttons
8pxSpacing scale
2px3px4px6px8px12px16px22px24px32px34px36px64px100px128px148px173pxGuidelines
Do
- Use #e50914 exclusively for the single primary action per view — never decorate, never use it for icons, tags, or secondary links
- Keep all surfaces in the pure black to charcoal range (#000000–#2d2d2d) — the darkness is the brand
- Let content artwork fill 80%+ of the visual real estate; UI chrome should recede
- Use Netflix Sans weight 900 at 56–100px for hero/display headlines to create a marquee-title impact
- Apply 8px border-radius consistently to cards, buttons, and inputs — the system has exactly two radii (2px for links, 8px for containers)
- Layer content posters at slight rotations in hero/collage contexts to create a sense of depth and abundance
- Use #b3b3b3 for all secondary and metadata text — never use a chromatic gray
Don’t
- Do not introduce any chromatic color other than #e50914 into the system — no blues, greens, or purples as UI accents (gradients on feature cards are the sole exception and are decorative only)
- Do not use drop shadows or box-shadows for elevation — depth comes from surface tone shifts only
- Do not add borders to cards — use tonal contrast between the card surface (#232323) and the page (#000000) instead
- Do not use rounded corners above 16px — the system is rectilinear with subtle softening, never pill-shaped except for tag/badge contexts
- Do not use Netflix Sans weight 400 for headings — reserve it for body copy; headings should be 700 or 900
- Do not place UI text directly on poster artwork without a dark scrim overlay — always protect legibility
- Do not introduce additional accent colors for states (hover, focus) — use #393939 (hover surface) and keep the red button as the only action signal
Components
Primary CTA Button (Red Filled)
The single most important interaction element — sign-up, get started, submitBackground: #e50914. Text: #ffffff, Netflix Sans weight 500, 16px. Border-radius: 8px. Padding: 12px 24px. No border, no shadow. May include a trailing chevron icon (›) for forward-action semantics.
Header Sign-In Button
Navigation authentication entry pointBackground: #e50914. Text: #ffffff, Netflix Sans weight 500, 14px. Border-radius: 8px. Padding: 8px 16px. Compact variant of the primary CTA sized for the header bar.
Email Input Field
Email capture for membership registrationBackground: transparent with a dark inner fill. Border: none, relies on a dark pill container. Text: #ffffff, 16px. Placeholder: #b3b3b3. Border-radius: 4px (inner) inside an 8px outer container. No visible focus ring — the red CTA beside it provides the action anchor.
Email Capture Composite
Hero email-to-CTA pattern — the membership conversion unitA horizontal pair: dark email input on the left (flexible width) + red Get Started button on the right (fixed). Container has no visible border. The red button's 8px radius matches the input's 4px inner radius for a unified pill shape when joined.
Hero Background Collage
Cinematic atmosphere generator for the landing pageFull-bleed background composed of overlapping movie/show poster thumbnails at various rotations and scales. A dark gradient overlay (black at 60–80% opacity) sits on top to ensure text contrast. A radial vignette darkens edges. This is not a component per se but a signature layout pattern.
Trending Rank Card
Numbered content tile showing top-10/popular content with rank overlaySquare aspect ratio poster image. Large white rank number (1, 2, 3…) overlaid on the left side, Netflix Sans weight 900, ~100px, with a subtle black outline/drop for legibility. Small red Netflix N-logo badge in top-left corner of the poster. Cards are displayed in a horizontal row with 8px gaps.
Feature Reason Card
Marketing card explaining a membership benefitBackground: dark gradient (Cinema Indigo to Bordeaux, with radial glow). Border-radius: 16px. Padding: 12px. Contains: heading (Netflix Sans 700, 20–24px, #ffffff), description body (400, 16px, #ffffff), and a decorative icon (TV, download arrow, megaphone, or profile shapes) in the lower portion. The icon is rendered in warm reds/oranges against the dark card, creating a single warm focal point per card.
Content Row Section
Horizontally scrollable strip of content thumbnailsSection heading (Netflix Sans 700, 24px, #ffffff) above a horizontal row of portrait-aspect poster cards. Cards have 8px radius. A right-pointing chevron button appears on hover for carousel scrolling. Section gap: 64px between rows.
Language Selector
Locale switcher in the headerDark background with a globe icon and 'English' label in Netflix Sans 400, 14px, #ffffff. Dropdown caret on the right. Border-radius: 8px. Sits beside the red Sign-In button in the header.
Pricing Banner
Promotional strip advertising the ad-supported tierHorizontal banner at the page bottom. Dark background. Contains: small Netflix icon on the left, headline text (Netflix Sans 500, 16px, #ffffff), and a secondary action link/button on the right. Sits above the footer area.
Horizontal Divider with Glow
Section separator that doubles as a atmospheric light lineA thin horizontal gradient line (transparent → #6f181d → transparent) that separates the hero from the content sections. Functions as both divider and atmospheric accent, recalling a cinema marquee light strip.
Footer Link List
Site navigation links in the footerMulti-column grid of text links in Netflix Sans 400, 13–14px, #b3b3b3. Links have a 2px bottom border or underline on hover. No background, no card container — floats directly on the black page canvas.
Surfaces & elevation
Level 0
Pure Black
#000000Page canvas — the infinite black background
Level 1
Obsidian
#0f0f0fNear-black elevated section background
Level 2
Carbon
#232323Card and button surface
Level 3
Charcoal
#2d2d2dInput fields and nested card surfaces
Level 4
Graphite
#323232Rounded feature card background
No drop shadows. Depth is communicated exclusively through surface tonal shifts (black → carbon → charcoal) and gradient washes on feature cards. The system rejects traditional elevation in favor of the cinematic flat-black aesthetic where depth comes from luminance contrast, not box-shadow.
Layout & imagery
Layout
The page is full-bleed with a max content width of ~1200px centered. The hero occupies the full viewport with a poster-collage background and a centered headline + email capture composite. Below the hero, a glowing red divider separates the content area. Content sections stack vertically: 'Trending Now' as a horizontal row of 5–10 numbered cards, then 'More Reasons to Join' as a 4-column feature card grid. All content sits on a pure black canvas with generous 64px section gaps. Navigation is a single top bar with the red Netflix wordmark left, language selector and red Sign-In button right. No sticky header, no sidebar, no mega-menu. The rhythm is: full-bleed atmospheric hero → repeating horizontal content rows → structured card grids → footer.
Imagery
The visual system is overwhelmingly photographic. Movie posters, show stills, and content thumbnails are the primary visual content. The hero uses a chaotic, multi-rotation collage of poster artwork at various angles to create a sense of abundance and discovery. Content rows display portrait-aspect poster tiles in clean horizontal strips. Feature card icons are flat, simplified vector shapes (TV, download arrow, megaphone, user profile) rendered in warm reds and oranges. The overall treatment is: let the content artwork do the heavy lifting, keep all UI chrome and icons minimal and monochromatic or single-accent red. No lifestyle photography, no human subjects in UI — the content IS the imagery.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #000000 - border: #5a5a5a - accent: #e50914 - primary action: #e50914 (filled action) **Example Component Prompts** 1. *Hero with email capture:* Full-bleed black (#000000) background with a centered content block. Headline at 56px Netflix Sans weight 900, #ffffff, line-height 1.0. Subtext at 16px weight 400, #b3b3b3. Email input with dark fill (#2d2d2d), white text, 4px inner radius. Red Get Started button (#e50914, white text, weight 500, 8px radius, 12px 24px padding) with trailing › chevron. 2. *Feature reason card:* 16px border-radius card with a Cinema Indigo to Bordeaux gradient background. Heading at 20px weight 700, #ffffff. Description at 16px weight 400, #ffffff. Decorative icon in warm red/orange in the lower-right quadrant. 12px internal padding. 3. *Trending rank row:* Black background section. 'Trending Now' heading at 24px weight 700, #ffffff, with 64px top margin from previous section. Horizontal row of 5 square poster tiles with 8px gaps. Each tile has a large white rank number (100px, weight 900) overlaid on the left edge with a subtle dark outline for legibility, and a small red N-badge in the top-left corner. 4. *Header navigation bar:* Black background bar with 16px vertical padding. Left: 'NETFLIX' wordmark in #e50914, Netflix Sans weight 900, 24px. Right: dark language selector (8px radius, globe icon + 'English' text at 14px #ffffff) followed by a red Sign-In button (#e50914, white text, 14px, 8px radius, 8px 16px padding). 5. *Footer link list:* No container, directly on #000000. Multi-column grid of links in Netflix Sans 400, 13px, #b3b3b3, with 22px row spacing. 2px bottom-border on hover state. No icons, no separators between columns.
Similar brands
HBO Max
Same dark-cinema aesthetic with a single chromatic brand color (purple) and content-artwork-driven hero treatment
Disney+
Full-bleed black canvas with brand-color CTAs and portrait-aspect poster rows; identical content-grid rhythm
Hulu
Dark UI with green single-accent CTAs and poster-collage hero, similar surface tonal layering
Apple TV+
Near-black background with minimal chrome, letting video/poster artwork dominate; clean typographic hierarchy
Spotify
Dark-mode-first interface where the brand color is used sparingly as a single warm signal against monochrome depth
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
