W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Disney+
Disney+ is The Walt Disney Company's subscription streaming service, launched in November 2019 as the consumer home for Disney, Pixar, Marvel, Star Wars, and National Geographic libraries. The brand is dark-first, cinematic, and unmistakably Disney: a deep navy canvas with the saturated Disney+ Blue carrying the wordmark and its iconic arced "D." The voice is content-forward and family-broad — chrome stays out of the way of the title art, and the brand identity reads as the frame around the storytelling.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/disney-plus/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/disney-plus/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.
Disney+
Disney+ is The Walt Disney Company's subscription streaming service, launched in November 2019 as the consumer home for Disney, Pixar, Marvel, Star Wars, and National Geographic libraries. The brand is dark-first, cinematic, and unmistakably Disney: a deep navy canvas with the saturated Disney+ Blue carrying the wordmark and its iconic arced "D." The voice is content-forward and family-broad — chrome stays out of the way of the title art, and the brand identity reads as the frame around the storytelling.
Tags: streaming, entertainment, disney, disney-plus, dark-first, consumer-tech
Atoms
Palette
Disney+ · [email protected] · Proprietary — All Rights Reserved
Disney+ corporate brand palette. The streaming service's identity is anchored on a deep navy canvas (#01153E) with the saturated Disney+ Blue (#113CCF) carrying the wordmark, the iconic arc on the "D," and primary CTAs. Disney+ is dark-first: the consumer app, marketing surfaces, and the wordmark all live on near-black or deep-navy canvases with the blue used sparingly as the brand identity accent.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
disney-plus-blue |
Disney+ Blue | #113CCF |
disney-plus-blue-bright |
Disney+ Blue Bright | #1F80E0 |
disney-plus-blue-deep |
Disney+ Blue Deep | #0B2BA0 |
disney-plus-navy |
Disney+ Navy | #01153E |
disney-plus-navy-elevated |
Disney+ Navy Elevated | #0B1E4F |
disney-plus-near-black |
Disney+ Near-Black | #0A0E1A |
disney-plus-white |
Disney+ White | #FFFFFF |
disney-plus-fog |
Disney+ Fog | #F5F7FA |
disney-plus-graphite |
Disney+ Graphite | #5A6478 |
disney-plus-gray |
Disney+ Gray | #A2A9B8 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
disney-plus-fog |
#F5F7FA |
surface |
disney-plus-white |
#FFFFFF |
surface-elevated |
disney-plus-white |
#FFFFFF |
text-primary |
disney-plus-navy |
#01153E |
text-secondary |
disney-plus-graphite |
#5A6478 |
text-tertiary |
disney-plus-gray |
#A2A9B8 |
primary |
disney-plus-blue |
#113CCF |
primary-hover |
disney-plus-blue-deep |
#0B2BA0 |
accent |
disney-plus-blue-bright |
#1F80E0 |
accent-hover |
disney-plus-blue |
#113CCF |
warning |
disney-plus-blue-bright |
#1F80E0 |
warning-hover |
disney-plus-blue |
#113CCF |
error |
disney-plus-blue-deep |
#0B2BA0 |
success |
disney-plus-blue-bright |
#1F80E0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
disney-plus-navy |
#01153E |
surface |
disney-plus-navy-elevated |
#0B1E4F |
surface-elevated |
disney-plus-near-black |
#0A0E1A |
text-primary |
disney-plus-white |
#FFFFFF |
text-secondary |
disney-plus-gray |
#A2A9B8 |
text-tertiary |
disney-plus-graphite |
#5A6478 |
primary |
disney-plus-blue-bright |
#1F80E0 |
primary-hover |
disney-plus-blue |
#113CCF |
accent |
disney-plus-blue-bright |
#1F80E0 |
accent-hover |
disney-plus-blue |
#113CCF |
warning |
disney-plus-blue-bright |
#1F80E0 |
warning-hover |
disney-plus-blue |
#113CCF |
error |
disney-plus-blue-bright |
#1F80E0 |
success |
disney-plus-blue-bright |
#1F80E0 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
disney-plus-navy |
#01153E |
on-identity |
disney-plus-white |
#FFFFFF |
background |
disney-plus-navy |
#01153E |
surface |
disney-plus-navy-elevated |
#0B1E4F |
surface-elevated |
disney-plus-near-black |
#0A0E1A |
text-primary |
disney-plus-white |
#FFFFFF |
text-secondary |
disney-plus-gray |
#A2A9B8 |
text-tertiary |
disney-plus-graphite |
#5A6478 |
primary |
disney-plus-blue-bright |
#1F80E0 |
primary-hover |
disney-plus-blue |
#113CCF |
accent |
disney-plus-blue-bright |
#1F80E0 |
accent-hover |
disney-plus-blue |
#113CCF |
mark |
disney-plus-blue |
#113CCF |
text-emphasis |
disney-plus-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.wordmark.fill
- allowed: disney-plus-blue, disney-plus-white
- forbidden: disney-plus-blue-bright, disney-plus-blue-deep, disney-plus-navy, disney-plus-gray
The Disney+ wordmark renders only in Disney+ Blue (#113CCF) on light or navy surfaces, or reversed white on dark cinematic treatments. The brighter and deeper blues are interactive-state and gradient values, not wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant, blue-on-low-contrast-background
Disney's brand-protection program is among the strictest in consumer entertainment. The Disney+ wordmark and arced "D" have specific clearspace and color rules; gradient fills and drop-shadows conflict with the flat, cinematic visual system established at the 2019 launch.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Disney+ White on Disney+ Navy (#01153E) gives ~17:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Disney+ surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Disney+ Blue Bright (#1F80E0) on Disney+ Navy (#01153E) gives ~5:1 — clears AA-large. Buttons using the bright blue as a fill with white text must maintain this floor so the interactive affordance of the primary CTA stays perceptible.
contextRestriction → roles.colors.mark
- forbiddenContexts: body-text, secondary-link, error-state
Disney+ Blue (#113CCF) is reserved for the wordmark, the arced "D," and primary brand surfaces. Using it inside body copy, for secondary links, or for error states dilutes the signature accent and weakens the cinematic hierarchy the 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.
variantSelection → logo
- use:
disney-plus-blue-on-navy - when:
backgroundColorScheme="dark"
On the canonical Disney+ Navy canvas, the wordmark renders in Disney+ Blue. The white-reversed variant is reserved for cinematic title-art treatments and the lowest-contrast backgrounds; the blue-on-navy variant is the default.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700, 800
Disney+'s marketing headlines use ABC Diatype in Medium (500), Bold (700), and Heavy (800) for hero typography. Lighter cuts read as body and compromise the cinematic display voice the brand depends on.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.6
Disney+'s marketing headlines run substantially larger than body and metadata copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.
Provenance
- Source: https://thewaltdisneycompany.com/dis/
- License:
Proprietary — All Rights Reserved - Attribution: The Walt Disney Company — Disney+, the Disney+ wordmark, and the arced "D" mark are registered trademarks of Disney Enterprises, Inc. The signature Disney+ Blue (#113CCF) and the deep-navy canvas (#01153E) are documented across Disney+'s public brand- surface stylesheets and the deployed disneyplus.com hero treatments. ABC Diatype is the proprietary corporate typeface; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: ABC Diatype (licensed from Dinamo) is the corporate brand face Disney+ uses across marketing surfaces. It is a commercial proprietary face and not distributable through this catalog. Inter is referenced as the open-source fallback and ABC Diatype is noted as the proprietary primary in provenance.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Disney+
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.
Disney+
A clear hierarchy in Disney+'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
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
→ disney-plus-blue-bright #1F80E0 accent-hover
→ disney-plus-blue #113CCF background
→ disney-plus-navy #01153E identity
→ disney-plus-navy #01153E mark
→ disney-plus-blue #113CCF on-identity
→ disney-plus-white #FFFFFF primary
→ disney-plus-blue-bright #1F80E0 primary-hover
→ disney-plus-blue #113CCF surface
→ disney-plus-navy-elevated #0B1E4F surface-elevated
→ disney-plus-near-black #0A0E1A text-emphasis
→ disney-plus-white #FFFFFF text-primary
→ disney-plus-white #FFFFFF text-secondary
→ disney-plus-gray #A2A9B8 text-tertiary
→ disney-plus-graphite #5A6478 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from disney-plus)
Light mode (14 roles)
accent
→ disney-plus-blue-bright accent-hover
→ disney-plus-blue background
→ disney-plus-fog error
→ disney-plus-blue-deep primary
→ disney-plus-blue primary-hover
→ disney-plus-blue-deep success
→ disney-plus-blue-bright surface
→ disney-plus-white surface-elevated
→ disney-plus-white text-primary
→ disney-plus-navy text-secondary
→ disney-plus-graphite text-tertiary
→ disney-plus-gray warning
→ disney-plus-blue-bright warning-hover
→ disney-plus-blue Dark mode (14 roles)
accent
→ disney-plus-blue-bright accent-hover
→ disney-plus-blue background
→ disney-plus-navy error
→ disney-plus-blue-bright primary
→ disney-plus-blue-bright primary-hover
→ disney-plus-blue success
→ disney-plus-blue-bright surface
→ disney-plus-navy-elevated surface-elevated
→ disney-plus-near-black text-primary
→ disney-plus-white text-secondary
→ disney-plus-gray text-tertiary
→ disney-plus-graphite warning
→ disney-plus-blue-bright warning-hover
→ disney-plus-blue Rules (9 typed constraints)
error · 7 rules
colorChoice logo.wordmark.fill allowed disney-plus-blue, disney-plus-white forbidden disney-plus-blue-bright, disney-plus-blue-deep, disney-plus-navy, disney-plus-gray The Disney+ wordmark renders only in Disney+ Blue (#113CCF) on light or navy surfaces, or reversed white on dark cinematic treatments. The brighter and deeper blues are interactive-state and gradient values, not wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant, blue-on-low-contrast-background Disney's brand-protection program is among the strictest in consumer entertainment. The Disney+ wordmark and arced "D" have specific clearspace and color rules; gradient fills and drop-shadows conflict with the flat, cinematic visual system established at the 2019 launch.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Disney+ White on Disney+ Navy (#01153E) gives ~17:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Disney+ surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Disney+ Blue Bright (#1F80E0) on Disney+ Navy (#01153E) gives ~5:1 — clears AA-large. Buttons using the bright blue as a fill with white text must maintain this floor so the interactive affordance of the primary CTA stays perceptible.
contextRestriction roles.colors.mark forbiddenContexts body-text, secondary-link, error-state Disney+ Blue (#113CCF) is reserved for the wordmark, the arced "D," and primary brand surfaces. Using it inside body copy, for secondary links, or for error states dilutes the signature accent and weakens the cinematic hierarchy the 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.
variantSelection logo use disney-plus-blue-on-navy when backgroundColorScheme="dark" On the canonical Disney+ Navy canvas, the wordmark renders in Disney+ Blue. The white-reversed variant is reserved for cinematic title-art treatments and the lowest-contrast backgrounds; the blue-on-navy variant is the default.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 700, 800 Disney+'s marketing headlines use ABC Diatype in Medium (500), Bold (700), and Heavy (800) for hero typography. Lighter cuts read as body and compromise the cinematic display voice the brand depends on.
fontPairing typography.heading requires body minSizeRatio 1.6 Disney+'s marketing headlines run substantially larger than body and metadata copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.
Provenance
- Source
- https://thewaltdisneycompany.com/dis/
- License
Proprietary — All Rights Reserved- Attribution
- The Walt Disney Company — Disney+, the Disney+ wordmark, and the arced "D" mark are registered trademarks of Disney Enterprises, Inc. The signature Disney+ Blue (#113CCF) and the deep-navy canvas (#01153E) are documented across Disney+'s public brand- surface stylesheets and the deployed disneyplus.com hero treatments. ABC Diatype is the proprietary corporate typeface; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- ABC Diatype (licensed from Dinamo) is the corporate brand face Disney+ uses across marketing surfaces. It is a commercial proprietary face and not distributable through this catalog. Inter is referenced as the open-source fallback and ABC Diatype is noted as the proprietary primary in provenance.