---
title: "HBO Max design system"
variant: extended
source: https://www.hbomax.com/
captured_at: 2026-10-12
theme: dark
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/hbomax-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# HBO Max · Design System

> A cinematic showcase built around must-see stories.

**Theme:** dark · **Industry:** entertainment · **Source:** https://www.hbomax.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A cinematic streaming homepage pairs a near-black canvas with bold white messaging and a dense showcase of series, films, sports, and subscription plans. Large entertainment artwork provides the color and atmosphere while restrained controls keep attention on what to watch.

## North star

Let cinematic content artwork carry the color while a near-black canvas and clear white typography keep the experience focused.

## Overview

The page uses a near-black canvas to make its large entertainment images feel cinematic and keep white messaging immediately legible. A deep plum surface appears in measured section data, while the screenshots are predominantly black; use the plum as a subtle dark surface rather than a competing background. The opening hero pairs a large, left-aligned headline and short supporting line with a broad collage of show artwork on the right. White filled buttons stand out against the dark interface, with outlined alternatives for secondary choices. Max Sans supplies a clean, contemporary voice across oversized display headlines, compact navigation, body copy, and small legal text. Below the opening, the page alternates pricing cards, horizontal content shelves, broad promotional banners, category features, and an FAQ. Most color comes from the supplied title artwork, not from interface accents; keep those cyan, green, and blue tones confined to media treatments. Generous black gaps give dense image shelves room to breathe.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Screen Black | `#000000` | `--color-screen-black` | brand | Primary page canvas and dominant background, giving the full content journey its cinematic foundation. |
| Spotlight White | `#ffffff` | `--color-spotlight-white` | brand | Primary headline, navigation, card, and footer text; also the filled primary subscription button. |
| Plum Shadow | `#120c1d` | `--color-plum-shadow` | surface | Measured deep-plum section surface; keep it subtle within the otherwise near-black page. |
| Soft Silver | `#cccccc` | `--color-soft-silver` | semantic | Muted supporting and footer copy, visually subordinate to white headings and calls to action. |
| Divider Charcoal | `#3a3a3a` | `--color-divider-charcoal` | semantic | Fine card borders and separation lines that define dark content surfaces without bright outlines. |
| Pale Silver | `#d4d4d4` | `--color-pale-silver` | semantic | Secondary muted text, providing a softer alternative to primary white on dark backgrounds. |
| Card Graphite | `#272727` | `--color-card-graphite` | surface | Dark card fill for pricing and title tiles against the black page canvas. |
| Panel Charcoal | `#1a1a1a` | `--color-panel-charcoal` | surface | Secondary dark panel surface, including subdued interface areas and content groupings. |
| Electric Cyan | `#02d5e8` | `--color-electric-cyan` | accent | Appears in measured media gradients and glow effects; treat as artwork-led color, not a general interface accent. |
| Deep Teal | `#014a51` | `--color-deep-teal` | accent | Lower stop of a cyan media gradient; reserve for promotional imagery and media treatments. |
| Vivid Green | `#1ee682` | `--color-vivid-green` | accent | Measured in media gradients and glow effects, rather than the core page controls. |
| Forest Green | `#0b6036` | `--color-forest-green` | accent | Lower stop of a green media gradient; keep it within artwork and promotional media. |
| Slate Blue | `#4e6883` | `--color-slate-blue` | accent | Measured in a blue media gradient and glow; use as imagery treatment, not a default UI color. |
| Night Slate | `#151c23` | `--color-night-slate` | accent | Dark lower stop of the measured blue media gradient, not a principal page surface. |
| Midtone Gray | `#5f5f5f` | `--color-midtone-gray` | neutral | Occasional muted heading or interface detail; keep subordinate to white text and dark surfaces. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | neutral | Sparse secondary text detail, used for low-emphasis supporting information. |

### Semantic aliases

`--color-canvas` → `#000000` (Screen Black) · `--color-surface` → `#120c1d` (Plum Shadow) · `--color-surface-2` → `#272727` (Card Graphite) · `--color-surface-3` → `#1a1a1a` (Panel Charcoal) · `--color-text` → `#ffffff` (Spotlight White) · `--color-text-muted` → `#cccccc` (Soft Silver) · `--color-text-subtle` → `#d4d4d4` (Pale Silver) · `--color-border` → `#3a3a3a` (Divider Charcoal) · `--color-accent` → `#02d5e8` (Electric Cyan) · `--color-accent-2` → `#014a51` (Deep Teal) · `--color-accent-3` → `#1ee682` (Vivid Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#120c1d` | 19.16:1 | AAA |
| `#ffffff` | `#272727` | 14.94:1 | AAA |
| `#ffffff` | `#1a1a1a` | 17.4:1 | AAA |
| `#cccccc` | `#000000` | 13.08:1 | AAA |
| `#cccccc` | `#120c1d` | 11.93:1 | AAA |
| `#cccccc` | `#272727` | 9.3:1 | AAA |
| `#cccccc` | `#1a1a1a` | 10.84:1 | AAA |
| `#d4d4d4` | `#000000` | 14.17:1 | AAA |
| `#d4d4d4` | `#120c1d` | 12.93:1 | AAA |

### Gradients

- `linear-gradient(rgb(2, 213, 232), rgb(1, 74, 81))`
- `linear-gradient(rgb(30, 230, 130), rgb(11, 96, 54))`
- `linear-gradient(rgb(78, 104, 131), rgb(21, 28, 35))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Max Sans | `--font-body` | webfont | 400, 700, 600, 500, 100, 300 | All page typography, from display headlines and navigation to subscription controls, captions, and legal copy. | Inter |

- **Max Sans:** Use a clean sans-serif voice with measured weights from light to bold. Headlines are large and untracked; navigation and buttons are bold, while captions and legal copy stay compact.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1 | 0 | — | Max Sans | Large, light-weight hero or promotional display headline. |
| h1 | 64px | 700 | 1 | 0 | — | Max Sans | Primary page headline introducing the streaming offer. |
| h2 | 56px | 100 | 1.6 | 0 | — | Max Sans | Major section heading, including page-level content group titles. |
| h3 | 35px | 600 | 1.35 | 0 | — | Max Sans | Prominent section or content-category heading. |
| h4 | 28px | 400 | 1.35 | 0 | — | Max Sans | Smaller card, plan, or subsection heading. |
| body | 14px | 600 | 1.35 | 0 | — | Max Sans | Supporting content and compact plan or feature descriptions. |
| caption | 11px | 400 | 1.5 | 0 | — | Max Sans | Small metadata, image labels, and fine-print information. |
| button | 16px | 700 | 1.1 | 0 | — | Max Sans | Bold labels on subscription and bundle calls to action. |
| nav | 15.5px | 700 | 1.35 | 0 | — | Max Sans | Top navigation and high-priority navigation labels. |
| link | 11px | 400 | 1.5 | 0 | — | Max Sans | Compact footer and supporting text links. |
| eyebrow | 17px | 400 | 1.35 | 0.1em | uppercase | Max Sans | Uppercase, letter-spaced promotional or category label. |

OpenType features in use: `"locl" 0`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 8, 10, 12, 13, 14, 15, 16, 18, 20, 24, 28, 48, 56 px.
- Section rhythm 48px · element gap 2px · card padding — · max content width 1140px.

The page uses a wide desktop composition within a measured maximum width of 1140px and a 12-column grid. The opening hero is left-aligned, with copy and plan calls to action opposite a wide collage of title artwork. Lower sections alternate centered content shelves, promotional splits, pricing cards, and broad category banners. The comfortable rhythm uses a measured 48px section gap, with compact internal spacing for controls and labels. Keep the full page visually spacious through large black intervals, even where card rows are dense.

## Shape & elevation

- Radius: button `8px` · media `4px` · nav `8px` · link `8px` · xs `4px` · sm `5px` · md `8px` · pill `9999px`
- Shadow `lg` (media): `rgba(2, 213, 232, 0.8) 0px -5px 30px 0px`
- Shadow `lg-2` (media): `rgba(30, 230, 130, 0.8) 0px -5px 30px 0px`
- Shadow `lg-3` (media): `rgba(79, 105, 132, 0.8) 0px -5px 30px 0px`
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.34, 1)` on interactive elements.

The interface is mostly flat, relying on contrast between black canvas and charcoal cards rather than layered shadows. Use thin charcoal borders to separate cards and FAQ rows, and reserve measured colored glows for media artwork. Keep controls legible with solid white fills or white outlines; avoid adding broad, decorative interface shadows.

## Imagery

Use cinematic entertainment stills and poster artwork as the main visual expression, arranged in tight horizontal shelves, tiled collages, and wide promotional banners. Hero imagery fades into the black background so copy remains readable. Category banners can feature a large character or cast image alongside a short label. Artwork supplies most of the page's vivid color; gradients and colored glows are media treatments, not a reason to brighten the interface.

## Components

### Hero and subscription offer

Left-aligned headline and supporting copy beside a fading title collage, with white-filled primary buttons and compact price details.

### Plan selector

Dark pricing cards arranged in a row, with bold plan names, feature lists, and white-filled yearly or white-outlined monthly actions.

### Content shelf

Horizontal row of landscape title artwork with short labels, set directly on the black canvas.

### Category banner

Wide, cinematic still with a short category eyebrow and title, followed by a row of related artwork.

### Promotional feature

Broad split composition pairing concise subscription messaging with branded service marks and featured title artwork.

### FAQ accordion

Compact stacked questions on a dark panel, separated with fine charcoal lines and aligned chevrons.

### Footer navigation

Small, centered utility links and language selection in muted tones against the black page canvas.

### Measured component styles

- **Primary button** (“Select Yearly”): background #ffffff · text #000000 · border 2px solid · radius 8px · padding 13px 24px · 700 16px Max Sans
- **Secondary button** (“Select Monthly”): transparent background · text #ffffff · border 2px solid #ffffff · radius 8px · padding 13px 16px · 700 16px Max Sans
- **Link** (“House of the Dragon”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Max Sans
- **Card** (“House of the Dragon”): background #272727 · text #ffffff · radius 0px · padding 0px · 400 18px Max Sans
- **Navigation item** (“Sign In Sign Up Now”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Max Sans

## Do

- Keep the page canvas near-black and consistent.
- Use white for primary headings, navigation, and actions.
- Let licensed title artwork provide most visual color.
- Arrange entertainment artwork in clear horizontal shelves.
- Use compact labels beneath media tiles.
- Separate dark cards with fine charcoal borders.
- Reserve colored glows for media treatments.

## Don't

- Don't use bright gradients as general page backgrounds.
- Don't let artwork overpower readable hero copy.
- Don't add decorative color to standard navigation.
- Don't crowd dense image rows without black breathing room.
- Don't replace the dark canvas with light card-heavy surfaces.
- Don't use heavy shadows on ordinary interface cards.
- Don't make secondary captions compete with headlines.

## Agent prompt

Build a new entertainment page in the HBO Max visual style. Use Screen Black (#000000) as the dominant canvas and Spotlight White (#ffffff) for key text and primary actions. Use Card Graphite (#272727), Panel Charcoal (#1a1a1a), and Plum Shadow (#120c1d) sparingly for dark surfaces; use Divider Charcoal (#3a3a3a) for subtle separators. Treat Electric Cyan (#02d5e8), Vivid Green (#1ee682), and Slate Blue (#4e6883) as media-only accents, not interface colors. Set type in Max Sans or a close Inter substitute, pairing oversized clear headings with compact labels. Build broad, left-aligned hero messaging alongside cinematic title artwork, then use image shelves, promotional banners, pricing cards, and compact FAQ rows. Keep the page flat, high-contrast, and spacious between dense media sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | 左侧展示主标题、订阅文案与方案入口，右侧铺陈影视拼贴；下方衔接居中定价区域。 | 双订阅入口, 价格信息前置, 内容预览, 跳转方案 | 左对齐标题, 渐隐影视拼贴, 白色主按钮, 黑色背景 |

## Source CSS custom properties (selected)

```css
--color_action_link_inverse_text_base: #246298;
--color_action_link_inverse_text_hover: #508fc3;
--color_action_link_inverse_text_press: #4f7695;
--color_action_link_text_base: #71b8f2;
--color_action_link_text_hover: #80c6ff;
--color_action_link_text_press: #508fc3;
--color_action_neutral_border_high: #fff;
--color_action_neutral_border_mid: #ddd;
--color_action_neutral_border_selected: hsla(0,0%,100%,.5);
--color_action_neutral_fill_high: hsla(0,0%,100%,.13);
--color_action_neutral_fill_low: hsla(0,0%,86.7%,.06);
--color_action_neutral_fill_mid: hsla(0,0%,86.7%,.1);
--color_action_neutral_fill_selected: rgba(74,74,74,.85);
--color_action_neutral_text_high: #fff;
--color_action_neutral_text_low: hsla(0,0%,100%,.65);
--color_action_neutral_text_mid: hsla(0,0%,100%,.8);
--color_action_primary_fill_high: #fff;
--color_action_primary_fill_low: hsla(0,0%,100%,.8);
--color_action_primary_fill_mid: #ddd;
--color_action_primary_text: #000;
--color_action_secondary_fill_high: rgba(74,74,74,.85);
--color_action_secondary_fill_low: rgba(62,62,62,.45);
--color_action_secondary_fill_mid: rgba(62,62,62,.75);
--color_action_secondary_fill_selected: rgba(74,74,74,.85);
--color_action_secondary_text: #fff;
--color_captions_black: #000;
--color_captions_blue: #0433ff;
--color_captions_cyan: #00fdff;
--color_captions_green: #008900;
--color_captions_magenta: #ff40ff;
--color_captions_red: red;
--color_captions_white: #fff;
--color_captions_white_muted: #faf9f6;
--color_captions_yellow: #fefb00;
--color_card_border_high: #fff;
--color_card_border_low: hsla(0,0%,100%,.5);
--color_card_border_mid: hsla(0,0%,86.7%,.8);
--color_card_border_selected: #ddd;
--color_card_neutral_fill_high: hsla(0,0%,100%,.13);
--color_card_neutral_fill_low: hsla(0,0%,86.7%,.06);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hbomax-com