W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Netflix
Netflix, Inc. is the global subscription streaming service and studio that, since the 2007 streaming launch, has set the visual grammar for "what a streaming service looks like." The brand is dark-first, cinematic, and minimal: a near-black canvas with the saturated Netflix Red wordmark and the geometric "N" mark used sparingly as the brand-identity anchor. The voice is confident, spare, and built around the content rather than around the product — chrome stays out of the way of the title art.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/netflix/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/netflix/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Netflix
Netflix, Inc. is the global subscription streaming service and studio that, since the 2007 streaming launch, has set the visual grammar for "what a streaming service looks like." The brand is dark-first, cinematic, and minimal: a near-black canvas with the saturated Netflix Red wordmark and the geometric "N" mark used sparingly as the brand-identity anchor. The voice is confident, spare, and built around the content rather than around the product — chrome stays out of the way of the title art.
Tags: streaming, entertainment, netflix, dark-first, consumer-tech
Atoms
Palette
Netflix · [email protected] · Proprietary — All Rights Reserved
Netflix corporate palette built around Netflix Red (#E50914) and a deep-black canvas. The brand is dark-first: the Netflix consumer product, marketing surfaces, and the iconic "N" mark all live on near-black surfaces with the saturated red used sparingly for the wordmark, the mark, and the highest-priority calls to action. The red value is verified from the official Netflix logomark SVG and Netflix's own brand-asset press kit.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Netflix Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Netflix Sans ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
netflix-red |
Netflix Red | #E50914 |
netflix-red-dark |
Netflix Red Dark | #B81D24 |
netflix-black |
Netflix Black | #000000 |
netflix-near-black |
Netflix Near-Black | #141414 |
netflix-charcoal |
Netflix Charcoal | #221F1F |
netflix-gray |
Netflix Gray | #564D4D |
netflix-white |
Netflix White | #FFFFFF |
netflix-off-white |
Netflix Off-White | #F5F5F1 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
netflix-off-white |
#F5F5F1 |
surface |
netflix-white |
#FFFFFF |
surface-elevated |
netflix-white |
#FFFFFF |
text-primary |
netflix-black |
#000000 |
text-secondary |
netflix-charcoal |
#221F1F |
text-tertiary |
netflix-gray |
#564D4D |
primary |
netflix-red |
#E50914 |
primary-hover |
netflix-red-dark |
#B81D24 |
accent |
netflix-red |
#E50914 |
accent-hover |
netflix-red-dark |
#B81D24 |
warning |
netflix-red |
#E50914 |
warning-hover |
netflix-red-dark |
#B81D24 |
error |
netflix-red |
#E50914 |
success |
netflix-gray |
#564D4D |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
netflix-black |
#000000 |
surface |
netflix-near-black |
#141414 |
surface-elevated |
netflix-charcoal |
#221F1F |
text-primary |
netflix-white |
#FFFFFF |
text-secondary |
netflix-off-white |
#F5F5F1 |
text-tertiary |
netflix-gray |
#564D4D |
primary |
netflix-red |
#E50914 |
primary-hover |
netflix-red-dark |
#B81D24 |
accent |
netflix-red |
#E50914 |
accent-hover |
netflix-red-dark |
#B81D24 |
warning |
netflix-red |
#E50914 |
warning-hover |
netflix-red-dark |
#B81D24 |
error |
netflix-red |
#E50914 |
success |
netflix-white |
#FFFFFF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
netflix-black |
#000000 |
on-identity |
netflix-red |
#E50914 |
background |
netflix-black |
#000000 |
surface |
netflix-near-black |
#141414 |
surface-elevated |
netflix-charcoal |
#221F1F |
text-primary |
netflix-white |
#FFFFFF |
text-secondary |
netflix-off-white |
#F5F5F1 |
text-tertiary |
netflix-gray |
#564D4D |
primary |
netflix-red |
#E50914 |
primary-hover |
netflix-red-dark |
#B81D24 |
accent |
netflix-red |
#E50914 |
accent-hover |
netflix-red-dark |
#B81D24 |
mark |
netflix-red |
#E50914 |
text-emphasis |
netflix-white |
#FFFFFF |
text-muted |
netflix-gray |
#564D4D |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: netflix-red, netflix-white, netflix-black
- forbidden: netflix-red-dark, netflix-gray, netflix-off-white
The Netflix wordmark renders only in Netflix Red, white, or black per the public brand assets. The dark-red hover color and gray tones are interactive-state values for product surfaces, not wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, red-on-busy-background
The Netflix wordmark and "N" mark are among the most-policed commercial marks in the world. Apply only Netflix-approved variants with adequate clearspace; never render the red wordmark over a busy photographic background where it loses legibility.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Netflix White on Netflix Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing introduced on Netflix surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Netflix Red on Netflix Black must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the interactive affordance of the primary CTA.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link
Netflix Red is reserved for the brand mark and primary action. Using it inside body copy or for secondary links dilutes the signature accent and weakens the visual hierarchy Netflix's brand depends on.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700
The Netflix Sans corporate weights most commonly seen on headlines and the wordmark are Medium (500) and Bold (700). Lighter cuts compromise the marketing voice; heavier cuts are outside the standard kit.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.6
Netflix's marketing headlines run substantially larger than body copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.
Provenance
- Source: https://brand.netflix.com/
- License:
Proprietary — All Rights Reserved - Attribution: Netflix, Inc. — Netflix, the Netflix wordmark, the Netflix "N" mark, and Netflix Sans are registered trademarks of Netflix, Inc. This atom captures brand-atoms' read of Netflix's publicly available brand assets and press kit; it is not an official Netflix brand-guidelines document.
- Imported:
2026-05-17 - Notes: Netflix's brand operates on a small, disciplined system: one red, one black, one proprietary typeface, and a wordmark that almost never deviates. The forbidden-treatment rules below encode the most consistently policed elements of that system.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Netflix
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Netflix
A clear hierarchy in Netflix's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Netflix
[email protected]font · heading
Netflix Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Netflix Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ netflix-red #E50914 accent-hover
→ netflix-red-dark #B81D24 background
→ netflix-black #000000 identity
→ netflix-black #000000 mark
→ netflix-red #E50914 on-identity
→ netflix-red #E50914 primary
→ netflix-red #E50914 primary-hover
→ netflix-red-dark #B81D24 surface
→ netflix-near-black #141414 surface-elevated
→ netflix-charcoal #221F1F text-emphasis
→ netflix-white #FFFFFF text-muted
→ netflix-gray #564D4D text-primary
→ netflix-white #FFFFFF text-secondary
→ netflix-off-white #F5F5F1 text-tertiary
→ netflix-gray #564D4D Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Netflix Sans prose
→ body Netflix Sans wordmark
→ heading Netflix Sans Palette mode mappings (from netflix)
Light mode (14 roles)
accent
→ netflix-red accent-hover
→ netflix-red-dark background
→ netflix-off-white error
→ netflix-red primary
→ netflix-red primary-hover
→ netflix-red-dark success
→ netflix-gray surface
→ netflix-white surface-elevated
→ netflix-white text-primary
→ netflix-black text-secondary
→ netflix-charcoal text-tertiary
→ netflix-gray warning
→ netflix-red warning-hover
→ netflix-red-dark Dark mode (14 roles)
accent
→ netflix-red accent-hover
→ netflix-red-dark background
→ netflix-black error
→ netflix-red primary
→ netflix-red primary-hover
→ netflix-red-dark success
→ netflix-white surface
→ netflix-near-black surface-elevated
→ netflix-charcoal text-primary
→ netflix-white text-secondary
→ netflix-off-white text-tertiary
→ netflix-gray warning
→ netflix-red warning-hover
→ netflix-red-dark Rules (8 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed netflix-red, netflix-white, netflix-black forbidden netflix-red-dark, netflix-gray, netflix-off-white The Netflix wordmark renders only in Netflix Red, white, or black per the public brand assets. The dark-red hover color and gray tones are interactive-state values for product surfaces, not wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, red-on-busy-background The Netflix wordmark and "N" mark are among the most-policed commercial marks in the world. Apply only Netflix-approved variants with adequate clearspace; never render the red wordmark over a busy photographic background where it loses legibility.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Netflix White on Netflix Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing introduced on Netflix surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Netflix Red on Netflix Black must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the interactive affordance of the primary CTA.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link Netflix Red is reserved for the brand mark and primary action. Using it inside body copy or for secondary links dilutes the signature accent and weakens the visual hierarchy Netflix's brand depends on.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 700 The Netflix Sans corporate weights most commonly seen on headlines and the wordmark are Medium (500) and Bold (700). Lighter cuts compromise the marketing voice; heavier cuts are outside the standard kit.
fontPairing typography.heading requires body minSizeRatio 1.6 Netflix's marketing headlines run substantially larger than body copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.
Provenance
- Source
- https://brand.netflix.com/
- License
Proprietary — All Rights Reserved- Attribution
- Netflix, Inc. — Netflix, the Netflix wordmark, the Netflix "N" mark, and Netflix Sans are registered trademarks of Netflix, Inc. This atom captures brand-atoms' read of Netflix's publicly available brand assets and press kit; it is not an official Netflix brand-guidelines document.
- Imported
2026-05-17- Notes
- Netflix's brand operates on a small, disciplined system: one red, one black, one proprietary typeface, and a wordmark that almost never deviates. The forbidden-treatment rules below encode the most consistently policed elements of that system.