--- version: alpha name: "HBO Max" website: "https://www.max.com" description: >- A Warner Bros Discovery streaming canvas where pure black (#000000) holds the page floor under a wall of full-bleed poster art, with HBO blue (#3d6a99) reserved as the single Select Plan CTA fill and #71b8f2 as the inline price-comparison accent. Type runs Max Sans across every tier — display headlines sit at 35px / weight 600 ("Plan for Entertainment Like No Other"), body at 18px / 400, and a 9.6px / weight 300 uppercase microcaption strip handles legal lines and metadata. Cards round to 8px, plan-picker pills to 10px, and the page builds its sections out of dense poster grids ("Stories That Make Your Other Apps Jealous") rather than marketing illustration. seo: title: "HBO Max Design System for React — HBO blue #3d6a99, Max Sans, 18 components" metaDescription: "HBO Max's plan-picker and discovery surface as a DESIGN.md file. HBO blue #3d6a99, Max Sans, full-bleed poster grids over pure black, 14 colors, 18 components — for React, Next.js, and AI coding tools." highlights: - "Poster-grid as canvas — full-bleed walls of show artwork carry the only chromatic load, identical to the move Netflix and Prime Video make" - "Single HBO-blue voltage — #3d6a99 fills the Select Plan CTA and nothing else above the fold; #71b8f2 carries inline plan-comparison accents" - "Max Sans across every tier — display, heading, body, button, and the 9.6px uppercase microcaption strip all share one custom proprietary sans" - "Mixed-radius scale — 8px on cards and CTAs, 10px on plan-picker pills, fully circular on icon affordances; no 12-16-20 middle tier" - "Cinema-black floor — #000000 anchors the body so poster art and the deep-purple #120c1d section behind sports content read as cinematic stage lighting" tags: - "Music, Video & Streaming" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | HBO Max's marketing page opens the way the product opens — full-bleed poster art across the top, with the white HBO Max wordmark sitting over a wall of show thumbnails (The Last of Us, House of the Dragon, The Penguin, A24 titles) before any nav, any tagline, any chrome. The poster wall IS the hero. Beneath it the page narrows into a two-column plan-picker captioned "Plan for Entertainment Like No Other" — a Standard column on the left and a Premium column on the right, both anchored by an HBO-blue Select Plan pill in the brand's signature deep blue. Where Netflix splits its hero into a single 56px / weight 900 typographic shout over a charcoal floor, HBO Max trusts the poster wall and lets the typography sit at a measured 35px / weight 600 — the editorial-magazine treatment, not the streaming-shout treatment. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 6 captured color tokens grouped into the HBO-blue voltage, a light-blue inline accent, a deep-purple section surface, and the cinema-black / white / hairline structural set; 14 Max Sans typography tokens spanning a 9.6px uppercase microcaption tier through a 56px display weight 100 carrier; 4 corner radii anchored on 8px with a 10px plan-picker pill variant and a 100% icon-button option; and 18 component recipes covering the Select Plan CTA, the plan-picker card stripe, the poster-grid tile, the FAQ accordion ("More Questions About HBO Max?"), the Sports surface band, and the section-heading scaffold. Feed this file to Claude or Cursor and it reproduces HBO Max's specific moves: poster-grid hero instead of typographic hero, single HBO-blue Select Plan voltage held in reserve, Max Sans across every tier, and the 8px-on-cards / 10px-on-plan-pills radius split. The one move worth borrowing only if your product is itself visually rich: the willingness to put NO brand chrome above the content grid. HBO Max gets away with it because the catalog is the brand. A typical SaaS landing would need an interstitial typographic layer to fill the same vertical space. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.max.com" title: "HBO Max — official site" description: "HBO Max's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is HBO Max's primary brand color?" answer: "HBO Max's brand voltage is the signature HBO deep blue #3d6a99, wired in CSS as --emea-plan-picker-button-color. It appears as the background fill of the Select Plan CTA pill on both the Standard and Premium plan-picker columns, and as the hover-color base for the same buttons (at 75 percent opacity). A second light-blue accent #71b8f2 lives on the same plan-picker as --emea-plan-picker-accent-color and carries the inline price-comparison highlight. Together they form the only chromatic brand chrome on the page; every other color you see (poster art, show thumbnails) is borrowed from the catalog rather than declared in the system." - id: "typography" title: "What typeface does HBO Max use, and what should I use as a substitute?" answer: "Every visible string on the marketing page runs Max Sans, a custom proprietary sans Warner Bros Discovery ships with the rebrand. The hero h2 Plan for Entertainment Like No Other sits at 35px / weight 600 / 47.25px line-height. A secondary 56px / weight 100 carrier appears inside the poster-rail captions. Body and section copy run 18px / weight 400. The system has a distinctive 9.6px / weight 300 uppercase microcaption tier with 0.8px tracking that handles legal lines and metadata labels. If Max Sans is unavailable, Inter at the same weights is the closest open-source substitute; for the 56px weight-100 tier, Helvetica Now Thin or Inter at weight 100 preserves the airy display feel." - id: "canvas-color" title: "Why does HBO Max use pure black instead of a softer charcoal?" answer: "The page floor is pure #000000, deliberately. The dominant visual content on every section is poster artwork, and the maximum-contrast black canvas makes show thumbnails read as cinematic stage lighting rather than as flat tiles in a grid. The single off-black moment in the system is the deep-purple #120c1d background behind the Sports surface band — a quiet move that signals a sub-product without breaking the cinema-black discipline. Where most dark-canvas brands like Linear and Vercel use a slightly-blue near-black for softness, HBO Max keeps the canvas at true black because the catalog needs every pixel of contrast to read as production-value content." - id: "rounded-style" title: "What is HBO Max's corner-radius philosophy?" answer: "The radius scale is mixed-step rather than a clean ladder. 8px is dominant on 17 of 31 captured surfaces — cards, the Select Plan CTA, plan-picker columns, poster tiles. 10px appears 4 times, scoped to the plan-picker outer card stripe; the 2px difference reads as a deliberate elevation step between the inner CTA and the outer card. Icon affordances and avatar chips render at 100% (fully circular). There is no 12-16-20px middle tier; the system skips straight from 8-10px to fully circular. The result is a single recognizable card shape across every section, with circular treatment reserved for the most-tappable controls." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React streaming-marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce HBO Max's specific moves: poster-grid hero instead of typographic hero, single HBO-blue Select Plan voltage, Max Sans across every tier, 8px-on-cards radius with 10px plan-picker stripe, and the 9.6px uppercase microcaption tier for legal lines. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the poster-grid-as-hero only reads as confident when you actually have a catalog of production-value imagery — without it, the same layout feels empty." mockups: - "marketing-hero" - "media-grid" colors: primary: "#3d6a99" primary-accent: "#71b8f2" ink: "#ffffff" ink-muted: "#e7e7e7" canvas: "#000000" surface-sports: "#120c1d" hairline: "#e7e7e7" typography: display-xl: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 56px fontWeight: 100 lineHeight: 89.6px letterSpacing: 0 display-md: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 35px fontWeight: 600 lineHeight: 47.25px letterSpacing: 0 heading-lg: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 37.8px letterSpacing: 0 heading-md: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 25.6px fontWeight: 600 lineHeight: 34.56px letterSpacing: 0 heading-sm: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 32.4px letterSpacing: 0 subheading-md: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 27px letterSpacing: 0 body-lg: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 28.8px letterSpacing: 0 body-md: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 17.6px letterSpacing: 0 body-sm: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 16.8px letterSpacing: 0 label-uppercase: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 15.4px letterSpacing: 0 microcaption: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 9.6px fontWeight: 300 lineHeight: 15.36px letterSpacing: 0.8px nav-link: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 20px letterSpacing: 0 link-em: fontFamily: "\"Max Sans\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18.9px letterSpacing: 1.4px rounded: none: "0px" xs: "4.5px" md: "8px" lg: "10px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "16px" lg: "24px" xl: "30px" 2xl: "48px" 3xl: "56px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "13px 24px" height: "46px" button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "13px 24px" height: "46px" opacity: "0.75" button-secondary: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "13px 24px" height: "46px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 56px" height: "64px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "4px 0px" height: "40px" hero-poster-grid: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: "0" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.heading-lg}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-lg}" microcaption: backgroundColor: transparent textColor: "{colors.ink-muted}" typography: "{typography.microcaption}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.md}" padding: "22.5px 27px" borderColor: "{colors.hairline}" plan-picker-stripe: backgroundColor: "{colors.ink-muted}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "10px 24px" plan-column: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.md}" padding: "30px" borderColor: "{colors.hairline}" poster-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: "0" sports-band: backgroundColor: "{colors.surface-sports}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.none}" padding: "48px 56px" faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.md}" padding: "16px 24px" borderColor: "{colors.hairline}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "8px 16px" height: "44px" borderColor: "{colors.hairline}" icon-button: backgroundColor: transparent textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "8px" height: "40px" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 56px | 100 | 89.6px | 0 | Poster-rail carrier captions ("Stories That Make…") | | `{typography.display-md}` | 35px | 600 | 47.25px | 0 | Hero h2 ("Plan for Entertainment Like No Other") | | `{typography.heading-lg}` | 28px | 600 | 37.8px | 0 | Section h3 ("More Questions About HBO Max?") | | `{typography.heading-md}` | 25.6px | 600 | 34.56px | 0 | Sub-section h3 (plan-picker column titles) | | `{typography.heading-sm}` | 24px | 700 | 32.4px | 0 | h4 headings inside plan-picker cards | | `{typography.subheading-md}` | 20px | 600 | 27px | 0 | h4 / feature-row titles | | `{typography.body-lg}` | 18px | 400 | 28.8px | 0 | Default running text, section paragraphs | | `{typography.body-md}` | 16px | 700 | 17.6px | 0 | Primary CTA label ("Select Plan") | | `{typography.body-sm}` | 14px | 400 | 16.8px | 0 | Secondary running text | | `{typography.label-uppercase}` | 14px | 700 | 15.4px | 0 | Uppercase span labels | | `{typography.microcaption}` | 9.6px | 300 | 15.36px | 0.8px | Legal lines, metadata, uppercase footnote strips | | `{typography.nav-link}` | 20px | 400 | 20px | 0 | Top-nav link labels | | `{typography.link-em}` | 14px | 400 | 18.9px | 1.4px | Emphasized inline link text | ### 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.