W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
HBO Max
HBO Max — rebranded to Max in May 2023 — is the Warner Bros. Discovery subscription streaming service that consolidates HBO, Warner Bros., Discovery, and Cartoon Network libraries. The brand identity is anchored on a saturated purple-to-blue gradient on a dark canvas, deliberately distinct from streaming's red/black (Netflix) and navy/blue (Disney+) conventions. The brand is dark-first and content-forward; the wordmark and gradient read as the brand, with the content carrying the visual weight.
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/hbo-max/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/hbo-max/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.
HBO Max
HBO Max — rebranded to Max in May 2023 — is the Warner Bros. Discovery subscription streaming service that consolidates HBO, Warner Bros., Discovery, and Cartoon Network libraries. The brand identity is anchored on a saturated purple-to-blue gradient on a dark canvas, deliberately distinct from streaming's red/black (Netflix) and navy/blue (Disney+) conventions. The brand is dark-first and content-forward; the wordmark and gradient read as the brand, with the content carrying the visual weight.
Tags: streaming, entertainment, hbo, max, warner-bros, dark-first
Atoms
Palette
HBO Max · [email protected] · Proprietary — All Rights Reserved
HBO Max (now branded as Max) corporate palette. The Warner Bros. Discovery streaming service was rebranded from HBO Max to Max in May 2023, retaining the saturated purple-to-blue gradient identity that distinguished HBO Max at launch. The palette is anchored on Max Purple (#B535F6) running through to a deeper blue (#0046FE), on a near-black canvas. The brand is dark-first — the consumer product, marketing surfaces, and the Max wordmark all live on black or near-black surfaces with the purple-blue gradient reading as the brand signature.
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 |
|---|---|---|
max-purple |
Max Purple | #B535F6 |
max-purple-deep |
Max Purple Deep | #7A1FB8 |
max-blue |
Max Blue | #0046FE |
max-blue-bright |
Max Blue Bright | #3D7AFF |
max-black |
Max Black | #000000 |
max-near-black |
Max Near-Black | #0A0A14 |
max-charcoal |
Max Charcoal | #1A1A2E |
max-white |
Max White | #FFFFFF |
max-gray-light |
Max Gray Light | #B8B8C8 |
max-gray |
Max Gray | #5A5A6E |
max-fog |
Max Fog | #F5F5FA |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
max-fog |
#F5F5FA |
surface |
max-white |
#FFFFFF |
surface-elevated |
max-white |
#FFFFFF |
text-primary |
max-near-black |
#0A0A14 |
text-secondary |
max-gray |
#5A5A6E |
text-tertiary |
max-gray-light |
#B8B8C8 |
primary |
max-purple |
#B535F6 |
primary-hover |
max-purple-deep |
#7A1FB8 |
accent |
max-blue |
#0046FE |
accent-hover |
max-blue-bright |
#3D7AFF |
warning |
max-purple-deep |
#7A1FB8 |
warning-hover |
max-purple |
#B535F6 |
error |
max-purple-deep |
#7A1FB8 |
success |
max-blue-bright |
#3D7AFF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
max-black |
#000000 |
surface |
max-near-black |
#0A0A14 |
surface-elevated |
max-charcoal |
#1A1A2E |
text-primary |
max-white |
#FFFFFF |
text-secondary |
max-gray-light |
#B8B8C8 |
text-tertiary |
max-gray |
#5A5A6E |
primary |
max-purple |
#B535F6 |
primary-hover |
max-purple-deep |
#7A1FB8 |
accent |
max-blue |
#0046FE |
accent-hover |
max-blue-bright |
#3D7AFF |
warning |
max-purple |
#B535F6 |
warning-hover |
max-purple-deep |
#7A1FB8 |
error |
max-purple |
#B535F6 |
success |
max-blue-bright |
#3D7AFF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
max-black |
#000000 |
on-identity |
max-purple |
#B535F6 |
background |
max-black |
#000000 |
surface |
max-near-black |
#0A0A14 |
surface-elevated |
max-charcoal |
#1A1A2E |
text-primary |
max-white |
#FFFFFF |
text-secondary |
max-gray-light |
#B8B8C8 |
text-tertiary |
max-gray |
#5A5A6E |
primary |
max-purple |
#B535F6 |
primary-hover |
max-purple-deep |
#7A1FB8 |
accent |
max-blue |
#0046FE |
accent-hover |
max-blue-bright |
#3D7AFF |
mark |
max-purple |
#B535F6 |
text-emphasis |
max-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: max-purple, max-blue, max-white, max-black
- forbidden: max-purple-deep, max-blue-bright, max-gray, max-gray-light
The Max wordmark renders in the purple-to-blue gradient, in monochrome white on dark surfaces, or in monochrome black on light. The deeper and brighter gradient anchors are interactive-state values; gray tones are chrome — none are acceptable wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, flat-purple-instead-of-gradient
The Max wordmark's signature treatment is the purple-to-blue gradient — flattening to solid purple, recoloring outside the gradient, or rendering over busy photography breaks the defining brand element. Apply only WBD-approved variants with respected clearspace.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Max White on Max Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/ background pairing on Max surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Max Purple (#B535F6) on Max Black gives ~6:1 — clears AA-large and approaches AA-normal. Buttons using the purple as a fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, error-state
Max Purple is the brand-identity color and the wordmark fill. Using it inside body copy, for secondary links, or for error states dilutes the signature accent and breaks 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.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700, 900
Max's marketing display headlines use Medium (500), Bold (700), and Black (900) weights 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
Max's marketing hero typography runs substantially larger than body copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: max-blue, max-black, max-white
- doesNotPairWith: max-purple-deep
The signature treatment is Max Purple → Max Blue gradient on black. Pairing the purple with the deeper purple on the same surface flattens the gradient signature into a single-purple composition that reads as inconsistency.
Provenance
- Source: https://press.wbd.com/us/
- License:
Proprietary — All Rights Reserved - Attribution: Warner Bros. Discovery, Inc. — HBO, HBO Max, Max, and associated marks are registered trademarks of Warner Bros. Discovery, Inc. The signature purple-to-blue gradient and the dark canvas are documented across HBO Max's launch brand-system materials and the WBD press kit. The HBO Max corporate display sans is the proprietary marketing typeface; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: HBO Max was rebranded to Max in May 2023; the brand atom captures the visual identity across that transition. The purple-to-blue gradient (#B535F6 → #0046FE) is the most distinctive brand element. The marketing display typeface is proprietary and not publicly distributed; Inter is referenced as the open-source fallback.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by HBO Max
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.
HBO Max
A clear hierarchy in HBO Max'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
→ max-blue #0046FE accent-hover
→ max-blue-bright #3D7AFF background
→ max-black #000000 identity
→ max-black #000000 mark
→ max-purple #B535F6 on-identity
→ max-purple #B535F6 primary
→ max-purple #B535F6 primary-hover
→ max-purple-deep #7A1FB8 surface
→ max-near-black #0A0A14 surface-elevated
→ max-charcoal #1A1A2E text-emphasis
→ max-white #FFFFFF text-primary
→ max-white #FFFFFF text-secondary
→ max-gray-light #B8B8C8 text-tertiary
→ max-gray #5A5A6E Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from hbo-max)
Light mode (14 roles)
accent
→ max-blue accent-hover
→ max-blue-bright background
→ max-fog error
→ max-purple-deep primary
→ max-purple primary-hover
→ max-purple-deep success
→ max-blue-bright surface
→ max-white surface-elevated
→ max-white text-primary
→ max-near-black text-secondary
→ max-gray text-tertiary
→ max-gray-light warning
→ max-purple-deep warning-hover
→ max-purple Dark mode (14 roles)
accent
→ max-blue accent-hover
→ max-blue-bright background
→ max-black error
→ max-purple primary
→ max-purple primary-hover
→ max-purple-deep success
→ max-blue-bright surface
→ max-near-black surface-elevated
→ max-charcoal text-primary
→ max-white text-secondary
→ max-gray-light text-tertiary
→ max-gray warning
→ max-purple warning-hover
→ max-purple-deep Rules (9 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed max-purple, max-blue, max-white, max-black forbidden max-purple-deep, max-blue-bright, max-gray, max-gray-light The Max wordmark renders in the purple-to-blue gradient, in monochrome white on dark surfaces, or in monochrome black on light. The deeper and brighter gradient anchors are interactive-state values; gray tones are chrome — none are acceptable wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, flat-purple-instead-of-gradient The Max wordmark's signature treatment is the purple-to-blue gradient — flattening to solid purple, recoloring outside the gradient, or rendering over busy photography breaks the defining brand element. Apply only WBD-approved variants with respected clearspace.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Max White on Max Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/ background pairing on Max surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Max Purple (#B535F6) on Max Black gives ~6:1 — clears AA-large and approaches AA-normal. Buttons using the purple as a fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, error-state Max Purple is the brand-identity color and the wordmark fill. Using it inside body copy, for secondary links, or for error states dilutes the signature accent and breaks 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.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 700, 900 Max's marketing display headlines use Medium (500), Bold (700), and Black (900) weights 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 Max's marketing hero typography runs substantially larger than body copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith max-blue, max-black, max-white doesNotPairWith max-purple-deep The signature treatment is Max Purple → Max Blue gradient on black. Pairing the purple with the deeper purple on the same surface flattens the gradient signature into a single-purple composition that reads as inconsistency.
Provenance
- Source
- https://press.wbd.com/us/
- License
Proprietary — All Rights Reserved- Attribution
- Warner Bros. Discovery, Inc. — HBO, HBO Max, Max, and associated marks are registered trademarks of Warner Bros. Discovery, Inc. The signature purple-to-blue gradient and the dark canvas are documented across HBO Max's launch brand-system materials and the WBD press kit. The HBO Max corporate display sans is the proprietary marketing typeface; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- HBO Max was rebranded to Max in May 2023; the brand atom captures the visual identity across that transition. The purple-to-blue gradient (#B535F6 → #0046FE) is the most distinctive brand element. The marketing display typeface is proprietary and not publicly distributed; Inter is referenced as the open-source fallback.