What is HBO Max's primary brand color?

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.

What typeface does HBO Max use, and what should I use as a substitute?

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.

Why does HBO Max use pure black instead of a softer charcoal?

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.

What is HBO Max's corner-radius philosophy?

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.

Can I use this DESIGN.md to build my own React streaming-marketing site?

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.

HBO Max Design System

HBO Max's plan-picker and discovery surface as a DESIGN.md file.

About HBO Max DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source max.com

Music, Video & Streaming

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.

What makes it distinct

Poster-grid as canvasfull-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 tierdisplay, heading, body, button, and the 9.6px uppercase microcaption strip all share one custom proprietary sans
Mixed-radius scale8px 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

Live at max.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

max.com

Explore HBO Max

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

HBO Max design system FAQ

Common questions about HBO Max's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

HBO Max — official site

HBO Max's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.