HBO Max Design System

Overview

HBO Max's marketing page opens the way the product opens. Poster-grid as canvas. The hero is not a typographic shout — it is a full-bleed wall of show artwork with the white HBO Max wordmark sitting on top, no headline, no sub-copy, no CTA above the catalog. The brand makes its first claim through the catalog itself: The Last of Us next to House of the Dragon next to The Penguin, with A24 prestige titles stacked beneath. Where Netflix splits the hero into a single 56px / weight 900 typographic shout over a charcoal floor, and where Apple TV+ trusts a single 80px feature poster as the entire above-fold experience, HBO Max packs the canvas with twelve-plus posters and trusts the density to do the work.

The chromatic move reinforces the discipline. There is exactly one brand voltage — HBO blue ({colors.primary} — #3d6a99) — and it appears as a single role: the background fill of the Select Plan CTA pill on both plan-picker columns (the Standard and the higher-tier paid columns). A second light-blue accent ({colors.primary-accent} — #71b8f2) carries inline price-comparison highlights inside the same plan-picker but never escapes to other surfaces. Every other color the eye sees on the page belongs to show artwork, not to brand chrome. The deep-purple {colors.surface-sports} (#120c1d) handles a single section band behind the Sports content surface — a quiet sub-product signal that doesn't break the cinema-black discipline.

Typography is Max Sans across every tier — a custom proprietary sans Warner Bros Discovery ships with the rebrand. There is no secondary family. Display sits at {typography.display-md} (35px / weight 600) for "Plan for Entertainment Like No Other"; body at {typography.body-lg} (18px / weight 400) for the section paragraphs; and a distinctive {typography.microcaption} tier (9.6px / weight 300 / 0.8px tracking / uppercase) handles legal lines and metadata. The system also carries a 56px / weight 100 carrier inside poster-rail captions — the only weight-100 moment in the system, presumably reserved for cinematic framing copy.

Key Characteristics:

• Pure black canvas ({colors.canvas} — #000000) anchors the page floor so poster artwork reads as cinematic stage lighting rather than flat tiles.
• Single HBO-blue voltage ({colors.primary} — #3d6a99) appears only as the Select Plan CTA fill — never on text, never on borders, never on hairlines. Frequency 4 across the captured page.
• Max Sans across every typographic tier, with a 14-step ladder spanning 9.6px / weight 300 to 56px / weight 100.
• Mixed-step radius scale: {rounded.md} (8px) on 17 of 31 captured surfaces, {rounded.lg} (10px) on the plan-picker stripe, {rounded.full} on icon affordances. No 12-16-20px middle tier.
• Deep-purple {colors.surface-sports} (#120c1d) handles the Sports band background — a single sub-product surface that signals category without leaving the cinema-black floor.
• 9.6px uppercase microcaption tier ({typography.microcaption}) does the work that a small-caps sans label tier would normally do — legal lines, metadata, footnote strips.
• Poster-grid density is the brand's structural device: every major section ("Stories That Make Your Other Apps Jealous," "Discover the Biggest," "More Questions") opens with another wall of artwork rather than with marketing illustration.
• Plan-picker is a two-column comparison (a Standard tier on the left, a higher-tier paid column on the right), both anchored by an HBO-blue Select Plan pill — the page's only direct ask.

Colors

Brand

• HBO Blue ({colors.primary} — #3d6a99): frequency 4. Used as text (2), background (2). Wired in CSS as --emea-plan-picker-button-color and --emea-plan-picker-button-hover-color. The single brand voltage — the Select Plan CTA fill on both plan-picker columns. Never appears as a border or hairline; the role is strictly "press this."
• HBO Light Blue ({colors.primary-accent} — #71b8f2): frequency 2. Used as text only. Wired as --emea-plan-picker-accent-color. The inline price-comparison accent inside the plan-picker — highlights the cheaper monthly rate or the "save" label. Scoped to one component.

Surface

• Canvas ({colors.canvas} — #000000): frequency 120 — the dominant page floor. Used as bg (3), text (59), border (58). Maximum contrast with poster artwork is the intent; softening to a slightly-blue near-black would muddy the cinematic stage-lighting effect.
• Sports Surface ({colors.surface-sports} — #120c1d): frequency 1 — background only. The deep-purple band behind the Sports content section. A single sub-product surface that signals category without leaving the cinema-black system.

Text

• Ink ({colors.ink} — #ffffff): frequency 410 — the dominant typographic color. Used as text (220), bg (3), border (187). Wired as --emea-plan-picker-button-text-color. Pure white on pure black across every tier of running copy.
• Ink Muted ({colors.ink-muted} — #e7e7e7): frequency 14. Used as text (7), border (7). Wired as --emea-plan-picker-stripe-background. The secondary text tone for microcaption tier and the plan-picker stripe background.

Hairline

• Hairline ({colors.hairline} — #e7e7e7): the dominant border tone. Card outlines, plan-column dividers, FAQ accordion rows. The same value as {colors.ink-muted} — the system reuses one off-white for both secondary text and hairlines.

Typography

Font Family

The system runs Max Sans for every tier — a custom proprietary sans Warner Bros Discovery commissioned for the post-merger rebrand. The fallback stack walks -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif. There is no separate display family, no serif tier, no monospace voice. One variable-weight sans does display, heading, body, button, label, and the 9.6px microcaption strip.

Hierarchy

Principles

The display tier tops out at 35px / weight 600, not at 56px / weight 900. The 56px appearance is a weight-100 carrier — airy, cinematic, scoped to poster-rail framing — not a typographic shout. The hierarchy depends on weight and tracking, not on a wide type-scale ratio. The 9.6px microcaption with 0.8px tracking and weight 300 is the system's quietest typographic moment — the work an uppercase-tracked sans label tier would normally do.

Note on Font Substitutes

Max Sans is proprietary. Inter at the same weights is the closest open-source substitute; for the 56px / weight 100 carrier, Helvetica Now Thin or Inter at weight 100 preserves the airy display feel. The 9.6px microcaption tier transfers cleanly to any sans at the same size and tracking — Inter's letterforms read close to Max Sans at sub-12px sizes.

Layout

Spacing System

• Base unit: 8px — the dominant gap value, with {spacing.base} (16px) and {spacing.sm} (8px) carrying 57 of the captured padding values combined.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 30px · {spacing.2xl} 48px · {spacing.3xl} 56px.
• Section padding (vertical): ~48px between major bands on the cinema-black canvas.
• Card internal padding: 22.5x27px on the standard {component.card}, 30px on {component.plan-column}, 16x24px on {component.faq-row}.
• Top-nav padding: 0 vertical, 56px horizontal — the nav sits flush at page top with no inset.

Grid & Container

• Hero poster grid: full-bleed, edge-to-edge, no max-width. Twelve-plus poster tiles arranged in a single horizontal band with no gutters between artwork.
• Plan-picker: two-column 50/50 grid, max-width ~1080px, separated by the {colors.ink-muted} divider stripe.
• Section grids: 4-column poster strips ("Stories That Make Your Other Apps Jealous," "Discover the Biggest") at max-width ~1280px, collapsing to 2-column on tablet.
• Sports band: full-bleed deep-purple block, with a centered content column at ~1080px max-width.
• FAQ accordion: centered single column at ~720px max-width.

Rhythm

The page alternates between edge-to-edge poster density (hero wall, mid-page show-grid bands) and constrained centered editorial (plan-picker, FAQ accordion). There is no atmospheric gradient between bands — every section terminates on the same pure-black floor, and depth comes from poster artwork rather than from background-color shifts. The single exception is the deep-purple Sports band, which signals "different sub-product" by surface color alone.

Elevation

The system has essentially no shadow tier. The canvas is too dark for traditional drop shadows to read — instead, hierarchy comes from poster artwork lifted off the {colors.canvas} floor by image content alone. Plan-picker cards and FAQ rows carry 1px {colors.hairline} borders rather than shadows.

• Flat (no shadow): body, hero poster wall, footer, every editorial band — 99% of surfaces.
• Hairline outlines: {colors.hairline} (#e7e7e7) marks plan-column edges, FAQ row dividers, and card boundaries. The same off-white doubles as the muted text tone — the system reuses one value for both roles.
• Poster-artwork lift: the only "elevation" the system declares is the visual weight of show artwork against the pure-black floor. No drop shadow is drawn; the contrast does the work.

Shapes

The radius scale is mixed-step, not a single linear ladder:

• {rounded.none} 0px — the hero poster wall, the top-nav, the Sports band.
• {rounded.xs} 4.5px — a single off-system value used twice; appears on small inline chips.
• {rounded.md} 8px — dominant on 17 of 31 captured surfaces. Cards, the Select Plan CTA, plan-picker columns, poster tiles, FAQ rows.
• {rounded.lg} 10px — appears 4 times, scoped to the plan-picker outer card stripe. The 2px step from {rounded.md} reads as a deliberate elevation move between the inner CTA and the outer card.
• {rounded.full} 9999px — icon affordances and avatar chips. Fully circular treatment for the most-tappable controls.

There is no 12 / 16 / 20px middle tier. The scale skips straight from 8-10px to fully circular — the same binary discipline Cloudflare runs, but with one extra step in the small-to-medium range.

Components

hero-poster-grid — Full-bleed wall of show artwork across the top of the page. Pure-black {colors.canvas} underneath but rarely visible through the dense poster wall. No padding, no border-radius — edge-to-edge. The white HBO Max wordmark sits on top of the wall as the only typographic element above the fold.

button-primary — The Select Plan CTA. HBO-blue {colors.primary} fill, white {colors.ink} text, {rounded.md} 8px radius, 13x24px padding, 46px height, {typography.body-md} (16px / weight 700) label. The single in-system instance of the brand voltage.

button-primary-hover — Same fill, dropped to 75% opacity. Wired in CSS as --emea-plan-picker-button-hover-color: rgba(61, 106, 153, .75) — the press state is opacity, not a color shift.

button-secondary — Transparent fill with white text and a 1px hairline border. Used for "Sign In" in the top nav and for tertiary CTAs.

top-nav — Pure-black surface, 64px height, 0x56px padding. Houses the HBO Max wordmark flush left, product-nav links (Movies, Shows, Sports, Originals) center, and a Sign In / Subscribe cluster flush right.

nav-link — Transparent background, white text in {typography.nav-link} (20px / 400), 4x0px padding, 40px height. No hover background visible in the captured surface.

hero-heading — White text, {typography.display-md} (35px / weight 600). Used for "Plan for Entertainment Like No Other" above the plan-picker.

section-heading — White text, {typography.heading-lg} (28px / weight 600). Used for "Stories That Make Your Other Apps Jealous," "Discover the Biggest," "More Questions About HBO Max?"

body-paragraph — Default white text at {typography.body-lg} (18px / 400). The hero sub-paragraph and section leads.

microcaption — {colors.ink-muted} (#e7e7e7) text at {typography.microcaption} (9.6px / weight 300 / 0.8px tracking / uppercase). Legal lines, metadata, footnote strips. The quietest typographic moment in the system.

card — Cinema-black fill, white text, {rounded.md} 8px radius, 22.5x27px padding, 1px hairline border. The default content card on the dark canvas.

plan-picker-stripe — {colors.ink-muted} (#e7e7e7) background, black text, {rounded.lg} 10px radius, 10x24px padding. The outer band that wraps the plan-picker columns and carries the comparison label.

plan-column — Transparent fill, white text, {rounded.md} 8px radius, 30px padding, 1px hairline border. The two paid-tier columns of the plan picker, each anchored by a Select Plan CTA.

poster-tile — Cinema-black underneath, white wordmark overlay, {rounded.md} 8px radius, 0 padding (the poster image fills the tile edge-to-edge). Used in the section-level show grids.

sports-band — Deep-purple {colors.surface-sports} (#120c1d) background, white text, full-bleed, 48x56px padding. The single sub-product surface band, signaling Sports content by surface color alone.

faq-row — Pure-black fill, white text, {rounded.md} 8px radius, 16x24px padding, 1px hairline border. The accordion rows in the "More Questions About HBO Max?" section at page bottom.

text-input — Pure-black surface, white text, {rounded.md} 8px radius, 8x16px padding, 44px height, 1px hairline border. The email-capture field in the sign-up band.

icon-button — Transparent fill, white icon, {rounded.full} (fully circular), 8px padding, 40px height. The play / info / mute icons that overlay poster tiles.

Do's and Don'ts

Do treat HBO blue {colors.primary} (#3d6a99) as a single, scarce CTA fill. The system has exactly one role for the brand voltage — the Select Plan pill — and multiplying it into nav links, accent borders, or section dividers would dilute the only direct ask on the page.

Do use {colors.canvas} (#000000) — not a slightly-blue near-black — for the page floor. The maximum contrast with poster artwork is intentional; softening it would make show thumbnails read as flat tiles rather than as cinematic stage lighting.

Do keep display weight at 600 max for typographic shouts, and reserve weight 100 for the 56px poster-rail carrier. The hero h2 at 35px / 600 is the loudest spoken moment; bumping to 900 would turn the editorial dek into a Netflix-style shout and undercut the poster-as-protagonist principle.

Do let the 9.6px {typography.microcaption} tier carry every legal line, metadata strip, and footnote. The system has no uppercase-tracked sans label tier; if you reach for one, you have broken the typographic split.

Don't introduce a third blue. The system has exactly two — {colors.primary} (#3d6a99) and {colors.primary-accent} (#71b8f2) — both scoped to the plan-picker. Adding a third for a link color or hover state would create a chromatic ladder the system explicitly avoids.

Don't use {colors.surface-sports} (#120c1d) outside the Sports content band. The deep-purple is a sub-product surface signal, not a secondary brand color. Painting another section with it would suggest a content category that does not exist.

Don't introduce a 12 / 16 / 20px middle radius tier. The system is binary in spirit — 8px on most surfaces, 10px on the plan-picker stripe, fully circular on icon controls. Adding a middle value softens the contrast between body chrome and the circular tap targets.

Don't add a tinted shadow or glow under the Select Plan CTA. The system has no shadow tier; lift comes from poster-artwork contrast against the black floor and from 1px hairline borders. A shadow would feel borrowed from a SaaS dashboard rather than from a cinema-marketing surface.

Known Gaps

• Hover and focus states: documented for {component.button-primary-hover} only (75% opacity drop). The full state matrix — focus rings, disabled tints, error states — is not captured from the marketing surface.
• Form input error states: {component.text-input} carries the resting state; validation styling for the email-capture field is not exposed on the marketing site.
• Light mode: the captured marketing surface is dark-only. A light variant exists in the product player's accessibility-preferences panel but is not represented here.
• Motion: the hero poster wall and the mid-page poster carousels animate on scroll (parallax, auto-rotation) but the spec captures end-state values only. Easing curves and rotation rate live in the product runtime.
• Product player surfaces: this DESIGN.md captures the marketing site only. The HBO Max video player carries a much richer token system — playback controls, subtitle styling, episode-list panels, parental-control surfaces — that is not represented here.
• Sub-brand color expansion: the captured page exposes only the deep-purple Sports band as a sub-product surface. The Originals, Movies, and Kids surfaces presumably carry their own band colors but are not exposed in the extracted CSS.
• Plan-picker gradient: CSS exposes --emea-plan-picker-badge-background as a 180-degree HBO-blue-to-deep-navy gradient on the "Recommended" plan-badge, but this gradient was not captured as a rendered fill in the live screenshot, so the gradient stops are documented as a known gap rather than as declared tokens.