--- version: alpha name: "HBO Max" description: "Max (formerly HBO Max) trades on prestige-TV signaling: a deep blue-black `#0b0c0f` canvas, a brand blue `#0072ff` that anchors the wordmark and primary CTA, and a custom Sharp Grotesk display sans rendered tight and modest. Where Netflix is content-dense, Max is content-curated — fewer, larger billboards, more editorial copy, and a spotlight on prestige titles (Succession, The Last of Us, House of the Dragon) rendered with custom title-card SVGs and cinematic still photography. Type uses Sharp Grotesk Display at 700 weight with `-0.02em` tracking for headlines, body in Sharp Grotesk Text at 400. Buttons are flat 4px rectangles, modals dark `#1a1c1f` with subtle 1px hairlines. The brand reads as a premium cable-network carrying a streaming UI on top — restrained, confident, almost stately." colors: bg: "#0b0c0f" bg-deep: "#000000" surface: "#1a1c1f" surface-strong: "#26282d" surface-soft: "#15171a" surface-card: "#1a1c1f" surface-overlay: "rgba(11,12,15,0.85)" text: "#ffffff" text-strong: "#ffffff" text-body: "#e6e7eb" text-muted: "#9aa0aa" text-soft: "#6c7280" text-disabled: "#4d5159" brand: "#0072ff" brand-hover: "#1f86ff" brand-active: "#0058cc" brand-deep: "#003e99" brand-purple: "#9c1ee0" brand-purple-soft: "#5f0d8a" on-brand: "#ffffff" accent-gold: "#c9a961" accent-cyan: "#00d4ff" border: "#2a2d33" border-soft: "#1f2126" border-strong: "#4d5159" shadow-card: "rgba(0,0,0,0.7)" shadow-billboard: "rgba(0,0,0,0.85)" success: "#00c08a" warning: "#f6b73c" danger: "#ff4757" danger-deep: "#cc1c2c" info: "#0072ff" rating-mature: "#ffffff" progress-watched: "#0072ff" progress-rail: "#3a3d44" hbo-prestige: "#7a1fa2" typography: display: fontFamily: "Sharp Grotesk" fontSize: "72px" lineHeight: 1.5 letterSpacing: "-0.025em" body: fontFamily: "Sharp Grotesk Text" fontSize: "16px" lineHeight: 1.5 mono: fontFamily: "SFMono-Regular" rounded: button: "4px" card: "6px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview Max is the prestige-TV streamer wearing a 21st-century streaming UI. The canvas is a deliberate `#0b0c0f` — a deep blue-black, slightly cooler than Netflix's `#141414`, evoking the hour after dusk in an editorial photoshoot. Where Netflix is content-as-wall, Max is content-as-feature: the page renders fewer rows, larger billboard hero stills, and gives every prestige title (Succession, The Last of Us, House of the Dragon, Hacks) the editorial gravity of a museum spread. The brand blue `#0072ff` is the singular voltage. After the 2023 transition from "HBO Max" to "Max", the wordmark shifted from the gradient-purple lockup to a flat brand-blue letterform. The blue surfaces only on primary CTA, the wordmark, the watched-progress bar, and the "NEW EPISODE" outlined tag — everywhere else is monochrome white-on-deep-black. (Legacy HBO purple `#9c1ee0` still appears occasionally on archived HBO-original surfaces, but it has been progressively retired.) Sharp Grotesk, the bespoke type family commissioned from Klim Type Foundry, is the second restraint. Display runs 700–800 weight with `-0.02em` to `-0.03em` tracking, body runs 400 in Sharp Grotesk Text. The cut is a modern grotesk with subtly humanised terminals — geometric enough to feel premium-engineered, soft enough to feel narrative-warm. Headlines hold tight (`-0.03em` at 56–72px); body is generous (1.5 line-height, 16–18px). The page rhythm is editorial. A typical Max landing renders one auto-rotating billboard (longer dwell than Netflix's 12s — Max sits at 14–16s), a hub-tile band (HBO, DC, Adult Swim, Cartoon Network, Discovery, TLC sub-brands), and 4–5 carousel rows. The space between rows is wider (40px) and the section gap larger (96px). The result is a magazine-spread cadence rather than a video-store density. Where Netflix's interaction signature is the 0.75s delayed-hover poster expand, Max's is the *click*-to-expand preview — posters scale only 1.05× on hover (a whisper, not a leap), and the full preview opens on click. This is more deliberate, more "premium" — the user is making a decision, not browsing. **Key Characteristics:** - Deep blue-black `#0b0c0f` canvas — cooler than Netflix, warmer than pure black. - Brand blue `#0072ff` for primary CTA, wordmark, watched progress, NEW EPISODE tag — rationed. - Custom Sharp Grotesk display sans (Klim Type Foundry); Sharp Grotesk Text for body. - Editorial pull-quote ("A masterpiece — The New York Times") woven into billboard hero compositions. - Title-card SVG artwork at 280–320px wide, anchored bottom-left of poster card with 8% inset. - Hub-tile band — HBO, DC, Discovery, Adult Swim sub-brand entries with branded backgrounds. - 1.05× hover scale (subtler than Netflix), click-to-expand preview interaction. - Critical-reception strip in detail modal — review-quote pull and Rotten Tomatoes/Metacritic scores. - Sharper typography: 700-weight display with `-0.02em` to `-0.03em` tight tracking. - Dark-mode-only — Max has no public light theme. ## Colors ### Primary - **Canvas Deep Blue-Black** (`#0b0c0f`): The defining ground. Cooler than Netflix's `#141414`, slightly bluer than pure black. - **Pure White** (`#ffffff`): All display and primary text. - **Max Blue** (`#0072ff`): The single brand action voltage. Wordmark, primary CTA, watched-progress, NEW EPISODE outline. ### Brand & Dark - **Blue Hover** (`#1f86ff`): CTA hover lift, 240ms transition. - **Blue Active** (`#0058cc`): Press / pointer-down state. - **Blue Deep** (`#003e99`): Gradient terminus on subscribe-page hero. - **Pure Black** (`#000000`): Reserved for billboard scrim terminus and player surface. - **Legacy HBO Purple** (`#9c1ee0`): Retained on some HBO-original archive surfaces; being progressively retired. - **HBO Prestige Purple** (`#7a1fa2`): Original HBO logo purple, on legacy network-mark contexts. ### Accent - **Gold** (`#c9a961`): Premium-tier "Max Ultimate" badge accent on the plan-comparison page. Rare elsewhere. - **Cyan** (`#00d4ff`): Sport / docs sub-brand accent — used on Bleacher Report integration. - **Brand Purple Soft** (`#5f0d8a`): Origin colour of HBO-Max gradient washes on legacy archival pages. ### Interactive - **CTA Blue** (`#0072ff`): Primary action. - **Glass White** (`rgba(255,255,255,0.15)` with `rgba(255,255,255,0.3)` 1px border): Translucent secondary on billboard. - **Outline Grey** (`#4d5159` border on transparent): Ghost CTA on dark surface. ### Neutral Scale - **Display White** (`#ffffff`): Headlines. - **Body Light** (`#e6e7eb`): Synopsis paragraph text. - **Muted** (`#9aa0aa`): Metadata, "2024 · S2 · 8 Episodes · TV-MA". - **Soft** (`#6c7280`): Disabled, footer secondary. - **Disabled** (`#4d5159`): Greyed-out menu items. - **Mid Grey** (`#3a3d44`): Unfilled progress rail, maturity-chip background. ### Surface & Borders - **Surface Strong** (`#26282d`): Input fill, hovered element ground. - **Surface Default** (`#1a1c1f`): Secondary panel, modal ground. - **Surface Soft** (`#15171a`): Alt-row band. - **Surface Overlay** (`rgba(11,12,15,0.85)`): Billboard scrim ground. - **Border Default** (`#2a2d33`): 1px hairline divider. - **Border Soft** (`#1f2126`): Subtler row divider. - **Border Strong** (`#4d5159`): Focused input outline. ### Shadow Colors - **Poster Hover** (`rgba(0,0,0,0.7)`): Hard, opaque drop — same logic as Netflix (soft shadows vanish on dark grounds). - **Modal** (`rgba(0,0,0,0.85)`): Heavy under-modal shadow. - **Hub Tile** (`rgba(0,0,0,0.45)`): Lighter lift on the hub-tile band, where tiles already have visible bg. ### Semantic - **Success** (`#00c08a`): Subscription-confirmed teal-green. - **Warning** (`#f6b73c`): Buffering indicator amber. - **Danger** (`#ff4757`): Form validation red. - **Danger Deep** (`#cc1c2c`): Hovered danger state. - **Info** (`#0072ff`): Matches brand blue — info banners use brand colour. ## Typography ### Font Family - **Primary Display**: `"Sharp Grotesk"` — bespoke Klim Type Foundry cut commissioned for the 2020 HBO Max launch and refined for the 2023 Max rebrand. Weights 400, 500, 700, 800, 900. Falls back to `"Helvetica Neue", Helvetica, Arial`. - **Body**: `"Sharp Grotesk Text"` — humanist text companion to the display cut. Optimised for 14–18px sizes. - **Mono**: SF Mono / Menlo fallback chain. Used only on developer doc surfaces. - **OpenType Features**: `ss01` for stylistic alternates on display; `tnum` for metadata rows ("S2 · 8 Episodes · 47m"). ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | Billboard Hero (text fallback) | Sharp Grotesk | 72px | 800 | 1.0 | -0.03em | ss01 | Used only when title-card SVG unavailable | | Display XL | Sharp Grotesk | 56px | 800 | 1.05 | -0.025em | ss01 | Detail modal hero | | Display LG | Sharp Grotesk | 40px | 700 | 1.1 | -0.02em | ss01 | Marketing landing hero | | Display MD | Sharp Grotesk | 28px | 700 | 1.15 | -0.01em | ss01 | Modal sub-header, season label | | Display SM | Sharp Grotesk | 22px | 700 | 1.2 | 0 | ss01 | Episode title in season list | | Section Title | Sharp Grotesk | 20px | 500 | 1.3 | 0 | -- | "Continue Watching", "New This Month" | | Row Title | Sharp Grotesk | 18px | 500 | 1.2 | 0 | -- | Carousel row label | | Body LG | Sharp Grotesk Text | 18px | 400 | 1.5 | 0 | -- | Modal synopsis | | Body MD | Sharp Grotesk Text | 16px | 400 | 1.5 | 0 | -- | Account, settings | | Body SM | Sharp Grotesk Text | 14px | 400 | 1.43 | 0 | -- | Episode descriptions | | Button LG | Sharp Grotesk | 16px | 700 | 1.0 | 0.01em | -- | Primary CTA | | Button MD | Sharp Grotesk Text | 14px | 700 | 1.0 | 0.01em | -- | Modal action | | Caption | Sharp Grotesk Text | 13px | 400 | 1.4 | 0 | -- | Disclosures | | Metadata | Sharp Grotesk Text | 14px | 400 | 1.3 | 0 | tnum | "2024 · S2 · 8 Episodes" | | Badge Rating | Sharp Grotesk Text | 11px | 700 | 1.0 | 0.05em | -- | "TV-MA", uppercase | | Nav Link | Sharp Grotesk Text | 14px | 500 | 1.0 | 0.01em | -- | Top nav | | Legal | Sharp Grotesk Text | 12px | 400 | 1.5 | 0 | -- | Footer | | Micro Label | Sharp Grotesk Text | 11px | 700 | 1.0 | 0.08em | -- | "MAX ORIGINAL", uppercase | | Editorial Quote | Sharp Grotesk | 22px | 500 | 1.35 | 0 | -- | Critic pull-quote, italic permitted here | ### Principles - **Sharp Grotesk's tight tracking is the brand voice.** Display sizes hold `-0.02em` to `-0.03em` — anything looser reads as generic. - **Editorial italics permitted, but only for pull-quotes.** Sharp Grotesk italic appears only in the critic-quote slot. Everywhere else, upright. - **800 weight for hero, 700 for sub-display.** This double-bold cadence creates the prestige-TV "this is HBO important" tone. - **Tabular numerals on episode metadata.** Season-list "S2 E07 · 47m" rows align via `tnum`. - **Uppercase reserved for badges + tags only.** Sentence case rules for everything else. - **Body in Sharp Grotesk Text, not Display.** Klim's separate body cut has wider proportions optimised for paragraph reading. ## Layout ### Spacing System - Base: 4px. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 120. - Row gap: 40px (looser than Netflix's 36) — Max wants more editorial air. - Section gap: 96px between major page modules. ### Grid & Container - Page width: 1920px max. Content max: 1440px. - Carousel: 6 posters per row at desktop, 4 at tablet, 2.5 at mobile. - Hub-tile band: 6 tiles per row at desktop, 3 at tablet, 2 at mobile. - Header: 72px fixed. ### Whitespace Philosophy Max balances density with editorial breathing room. Typical landing renders billboard + hub band + 4 carousel rows above the fold (vs Netflix's 6–7). The page reads more like a magazine table-of-contents than a video-store wall. ### Section Cadence - Billboard hero (16:9 full-bleed) - Hub-tile band (HBO, DC, Adult Swim, Cartoon Network, Discovery, TLC, ID) - Continue Watching (if applicable) - Editorial spotlight ("Critically Acclaimed") - 3–4 personalised rows - Footer (compact dark) ### Breakpoints | Token | Min | Use | |-------|-----|-----| | mobile | 0px | 2.5 posters peek, hub-tiles stack 2-wide | | tablet | 1024px | 4 posters, hub 3-wide | | desktop | 1280px | 6 posters, hub 6-wide | | wide | 1920px | 6 posters, billboard full-bleed | ### Touch Targets - 48×48 minimum hit area on all controls. Buttons full-width on mobile. ### Collapsing Strategy - Top nav links → hamburger at < 1024px. - Billboard CTAs → stacked at < 640px. - Detail modal → full-screen sheet at < 768px. - Hub-tile band → 2-up grid on mobile, scrolls vertically. ### Image Behavior - Posters: 2:3, lazy-loaded, srcset 250/500/1000w. - Billboard: 16:9, srcset 720/1080/1440/2160p. - Hub tile: 16:9 sub-brand artwork, srcset 300/600/1200w. ### Container Queries Preview popup chooses left/right anchor based on row-container CQ. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 | Flat, no shadow | Default poster, page bg, transparent nav | | 1 | 1px `#2a2d33` border | Section dividers, focused input | | 2 | `0 8px 24px rgba(0,0,0,0.45)` | Hub-tile hover | | 3 | `0 12px 24px rgba(0,0,0,0.7)` + scale(1.05) | Poster hover | | 4 | `0 32px 64px rgba(0,0,0,0.85)` + scrim | Detail modal | | 5 | `rgba(0,0,0,0.5)` scrim only | Player chrome | ### Shadow Philosophy Same as Netflix's near-black canvas problem — soft shadows vanish, so Max uses hard, opaque drops. The hover lift is gentler (1.05× vs 1.4×) to read as premium-restraint rather than browse-energy. ## Shapes - **Sharp** (`0px`): MAX ORIGINAL badge, watched-progress bar, billboard image edges. Sharp where the artwork dominates. - **Micro** (`2px`): Maturity rating chip, NEW EPISODE outlined tag. - **Standard** (`4px`): Buttons, poster cards, inputs. - **Comfortable** (`6px`): Preview popup. - **Relaxed** (`8px`): Detail modal, hub tiles, plan cards. - **Pill** (`9999px`): Critical-acclaim pills, profile avatars. ## Components ### Buttons **Primary CTA** - Background: `#0072ff`. Text: `#ffffff`. Radius: `4px`. Padding: `14px 28px`. Height: `48px`. Font: Sharp Grotesk 16 / 700, `0.01em` tracking. - Hover: `#1f86ff` (240ms ease-standard). - Active: `#0058cc`. - Use: "Sign Up Now", "Start Streaming", "Watch", "Continue". **Primary Hero CTA** - Background: `#0072ff`. Text: `#ffffff`. Radius: `4px`. Padding: `18px 36px`. Height: `56px`. - Use: Billboard hero "Watch" — paired with glass More Info sibling. **Glass Secondary** - Background: `rgba(255,255,255,0.15)`. Border: `1px solid rgba(255,255,255,0.3)`. Color: `#ffffff`. Radius: `4px`. Padding: `14px 28px`. - Use: "More Info" sibling on billboard. Frost-glass over still imagery. **White CTA** - Background: `#ffffff`. Color: `#0b0c0f`. Radius: `4px`. - Use: Acquisition page "Choose Your Plan" — high-contrast over deep blue gradient hero. **Ghost / Outline** - Background: `transparent`. Color: `#ffffff`. Border: `1px solid #4d5159`. Radius: `4px`. - Use: Modal cancel, settings cancel, "Skip Intro". ### Cards & Tiles **Poster Card** - Background: `#1a1c1f`. Aspect: 2:3. Radius: `4px`. No shadow at rest. - Title-card SVG overlay anchored bottom-left, 8% inset from edges, max 70% of card width. - Hover: 1.05× scale + `0 12px 24px rgba(0,0,0,0.7)` shadow, 240ms ease-prestige. **Preview Popup** - Background: `#1a1c1f`. Radius: `6px`. Width: 380px. - Trigger: click-to-expand (not hover, like Netflix). - Content: 16:9 still, title-card SVG, critical-acclaim badges (Rotten Tomatoes %, Metacritic score, Emmy/Golden Globe/Peabody if applicable), 2-line synopsis, Watch + Add-to-List + More-Info row. **Billboard Hero** - Aspect: 16:9 full-bleed. Bottom inset gradient: `#0b0c0f` over 240px. - Title-card SVG: 320–400px wide, anchored bottom-left at 7% page-width inset. - Editorial pull-quote: optional, 22px Sharp Grotesk italic 500, anchored above CTAs in a 480px-wide column. - CTAs: Blue Watch + Glass More Info. - Auto-rotate: 14–16s dwell, 1.2s cross-dissolve. **Hub Tile** - Background: full-bleed sub-brand artwork (HBO, DC, Adult Swim, Cartoon Network, Discovery, TLC, ID). - Radius: `8px`. Height: 120px on desktop, aspect 16:9 on mobile. - Hover: 1.04× scale + `0 8px 24px rgba(0,0,0,0.45)`. - Layout: horizontal row of 6–7 tiles, gutter 12px. **Detail Modal** - Background: `#1a1c1f`. Radius: `8px`. Width: clamp(900px, 80vw, 1400px). - Header: 16:9 hero still with title-card SVG anchored bottom-left. - Critical strip: Rotten Tomatoes badge + Metacritic + Emmy/Globe icons in a horizontal row beneath the still. - Synopsis: 18px / 400 / 1.5 paragraph. - Episode list: per-season tabbed view with 16:9 episode-still + title + runtime + synopsis. ### Badges, Tags **MAX ORIGINAL / HBO ORIGINAL** - Background: `#ffffff`. Color: `#0b0c0f`. Radius: `0`. Padding: `4px 8px`. Font: 11px / 700 uppercase, `0.08em` tracking. - Use: White-block tag in modal header above the title. **Maturity Rating** - Background: `#3a3d44`. Color: `#ffffff`. Radius: `2px`. Padding: `2px 6px`. - Use: "TV-MA", "R", "TV-14" chip in metadata row. **NEW EPISODE** - Background: `transparent`. Color: `#0072ff`. Border: `1px solid #0072ff`. Radius: `2px`. - Use: Outlined blue pill on returning-series posters. **Critical Acclaim Pill** - Background: `#1a1c1f`. Color: `#c9a961`. Border: `1px solid #c9a961`. Radius: `pill`. Padding: `4px 12px`. - Use: "Emmy Winner", "Golden Globe Nominee" — gold-on-dark pill in critical strip. ### Inputs, Forms **Text Input** - Background: `#26282d`. Color: `#ffffff`. Radius: `4px`. Border: `1px solid transparent`. Height: `50px`. - Floating label: `#9aa0aa` 13px → animates to top-left on focus. - Focus: Border `#0072ff`. **Plan-Card (Subscribe page)** - Background: `#1a1c1f`. Radius: `8px`. Border: `1px solid #2a2d33` (default) → `1px solid #0072ff` (selected). - Selected state shows blue ring `0 0 0 2px #0072ff`. - Use: With Ads / Standard / Ultimate plan-comparison cards. ### Navigation **Top Nav (Transparent)** - Background: `transparent`. Color: `#ffffff`. Height: `72px`. - Logo: blue Max wordmark (24px height) anchored left. - Links: Home, Series, Movies, Originals, Sport, Browse — five-link bar. **Top Nav (Solid)** - Background: `#0b0c0f` + 1px bottom hairline `#2a2d33` after scrollY > 60px. - 240ms transition. **Hub Sub-Nav** - When user enters a hub (e.g. /hbo), sub-nav appears below main with hub-specific filters. ### Player **Player Controls** - Background: `linear-gradient(0deg, rgba(0,0,0,0.7), transparent)`. Height: 100px. - Scrubber: rail `#3a3d44`, fill `#0072ff`, height `4px`. - Playhead: `#0072ff` 14×14 circle, scales to 18×18 on hover. ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — defaults. - **Out**: `cubic-bezier(0, 0, 0.2, 1)` — incoming elements. - **Prestige**: `cubic-bezier(0.65, 0, 0.35, 1)` — slower, more deliberate. The brand's signature ease for poster hover and modal entry. ### Duration Buckets - **Fast**: 120ms — colour shift on button hover. - **Standard**: 240ms — modal in, billboard CTA hover, poster scale. - **Slow**: 480ms — billboard cross-dissolve. ### Per-Component Recipes - **Primary CTA hover**: `#0072ff → #1f86ff`, 120ms. - **Glass button hover**: bg `0.15 → 0.25` opacity lift, border opacity `0.3 → 0.5`. - **Poster hover**: 1.0× → 1.05×, 240ms ease-prestige + shadow fade-in. - **Billboard auto-rotate**: 14–16s dwell, 1.2s cross-dissolve. - **Modal in**: 360ms ease-prestige, scale 0.96 → 1.0 + opacity 0 → 1. - **Top-nav solidify**: 240ms ease-standard at scrollY > 60px. ### Page Transitions Hub navigation uses route-driven transitions with a 240ms cross-fade of the carousel band; modal navigation is in-page. ### Reduced Motion - Poster hover → opacity-only (no scale). - Billboard auto-rotate → halts. - Modal in → opacity-only. - Clip autoplay → static still. ### Contrast Pairs - White on `#0b0c0f`: **19.2:1** — AAA. - Muted `#9aa0aa` on `#0b0c0f`: **6.8:1** — AAA at body sizes. - White on brand `#0072ff`: **4.6:1** — AA. - Soft `#6c7280` on `#0b0c0f`: **3.4:1** — AA large only. - Gold `#c9a961` on `#1a1c1f`: **6.2:1** — AAA. ### Focus Indicators - 2px solid `#0072ff` ring with 3px offset on all controls. Brand-blue ring against deep canvas reads with high salience and ties focus to brand. ### ARIA Patterns - Carousels: `role="region" aria-roledescription="carousel"`. - Hub tiles: `role="link" aria-label="Browse [Sub-brand]"`. - Modal: `role="dialog" aria-modal="true"`, focus trapped, ESC closes. - Player: standard media controls with full keyboard support. ### Keyboard Navigation - Tab between rows; arrows within rows. - Enter on poster opens detail modal. - Space play/pause in player. - Esc closes modal / pauses / exits fullscreen progressively. ### Screen Reader - Poster `aria-label` packs title, year, season info, maturity, critical scores. - Hub tile `aria-label` names sub-brand explicitly. ### Caption / AD - Caption tracks on all originals; full customisation (color, size, edge, opacity). - Audio description on most HBO originals; toggle from player gear. ### Reduced Motion Honoured per §8. ### Tone Max's voice is **prestige-editorial**. Less "watch this" and more "this is the work." Acquisition copy invokes craft ("home of the cultural conversations that shape us"); product copy invokes critical reception ("Emmy-winning", "from the creator of..."). ### Microcopy Patterns - **Primary CTA**: "Sign Up Now", "Start Streaming", "Watch" (in product), "Continue". - **Secondary**: "More Info", "Try It Free". - **Acquisition headline**: "Where HBO meets so much more." or "Stream now. Cancel anytime." - **Empty list**: "Movies and shows you've added will appear here." - **Error**: "We can't find an account with that email. Try a different one or sign up." - **Profile prompt**: "Who's watching?" - **Cancellation**: "Cancel anytime. No commitments." ### Empty States Empty My-List: text + 6-poster suggested-adds row. Empty Continue Watching: row hidden (not rendered). ### CTA Verb Conventions - "Watch" (primary in product) > "Stream" > "Sign Up" > "Start Streaming". - "Add to My List" not "Save". - "More Info" > "Details". **Dark-only.** Max ships no public light theme. The video-streaming context favours dark for OLED-friendliness and viewer-eye fatigue across long sessions. Help-doc / legal surfaces (`help.max.com`) use a neutral light skin for documentation legibility, but this is not part of the consumer product. A hypothetical light theme would lift canvas to `#fafafa` and deepen brand to `#005ad6` for AA — but no design exists. Max's lineage is HBO's premium-cable identity translated to streaming UI. **HBO premium cable.** The "MAX ORIGINAL" / "HBO ORIGINAL" white-block tag is a direct descendant of HBO's late-90s on-screen ID slate. The dark-canvas-with-prestige-still aesthetic mirrors HBO's mid-2000s on-air bumpers. **The New York Times Magazine.** The editorial pull-quote on the billboard hero is borrowed from broadsheet feature-piece layout. Sharp Grotesk's humanised terminals echo NYT-Mag's preferred typography. **Apple TV (2019+).** The hub-tile band and the larger-than-Netflix billboard borrow from Apple TV's prestige-streaming UI vocabulary. What Max rejects: high-density poster walls (Netflix), thumbnail-heavy preview cards (YouTube), gamified tile aesthetics. Restraint is the brand. **Influences:** - **HBO (1972–present)** — premium-cable identity, "It's not TV. It's HBO." - **Klim Type Foundry** — drew Sharp Grotesk and Sharp Grotesk Text. https://klim.co.nz - **The New York Times Magazine** — editorial pull-quote convention. - **Apple TV+ (2019)** — prestige-streaming hub-tile pattern. https://tv.apple.com - **Saul Bass** — title-as-graphic SVG-overlay principle. ## Do's and Don'ts **Do:** - Use `#0b0c0f` — slightly bluer than Netflix's near-black, warmer than pure black. - Reserve `#0072ff` for primary CTA, wordmark, watched-progress, NEW EPISODE outline. - Render show titles as title-card SVG anchored bottom-left of poster with 8% inset. - Use Sharp Grotesk 700–800 weight at display sizes with `-0.02em` to `-0.03em` tracking. - Include editorial pull-quote in billboard hero when a critic-quote is available. - Surface Rotten Tomatoes / Metacritic / Emmy / Golden Globe in detail-modal critical strip. - Use 1.05× hover scale (subtler than Netflix), with 240ms ease-prestige curve. - Show MAX ORIGINAL / HBO ORIGINAL white-block tag above title in modals. - Use hub-tile band for sub-brand entry (HBO, DC, Discovery, Adult Swim, etc). - Default to dark — Max has no light theme. **Don't:** - Don't use Netflix's `#141414` — Max's `#0b0c0f` is cooler and bluer; the shift is intentional. - Don't pile colour onto the page — blue is the only brand voltage; everything else is monochrome. - Don't over-densify — Max wants 4–5 rows above the fold, not Netflix's 6–7. - Don't auto-play preview clips on hover — Max uses click-to-expand; hover is just 1.05× lift. - Don't use italic Sharp Grotesk except for the editorial pull-quote slot. - Don't use legacy purple `#9c1ee0` on new surfaces — the brand transitioned to blue in 2023. - Don't apply soft shadows — they vanish on `#0b0c0f`; use hard `rgba(0,0,0,0.7)` drops. - Don't put the wordmark in any colour but `#0072ff` (or white over blue surfaces). - Don't use uppercase outside of MAX ORIGINAL, NEW EPISODE, and rating chips. - Don't introduce a light theme — Max is dark. ### Quick Color Reference - Canvas: `#0b0c0f` - Brand Blue: `#0072ff` - Blue Hover: `#1f86ff` - Pure White: `#ffffff` - Muted: `#9aa0aa` - Surface: `#1a1c1f` - Surface Strong: `#26282d` - Border: `#2a2d33` - Glass White: `rgba(255,255,255,0.15)` - Gold (premium): `#c9a961` ### Example Component Prompts 1. "Create a Max-style billboard hero — full-bleed 16:9 prestige still with bottom `#0b0c0f` gradient over 240px, title-card SVG at 360px wide bottom-left at 7% page inset, optional 22px Sharp Grotesk italic 500 critic pull-quote above CTAs, blue `#0072ff` Watch button + `rgba(255,255,255,0.15)` glass More Info." 2. "Design a Max poster card — 2:3 portrait, `#1a1c1f` bg, 4px radius, title-card SVG anchored bottom-left with 8% inset, on hover scale to 1.05× over 240ms with `cubic-bezier(0.65,0,0.35,1)` and gain `0 12px 24px rgba(0,0,0,0.7)` shadow." 3. "Build a Max hub-tile band — 6 horizontal sub-brand tiles (HBO, DC, Adult Swim, Cartoon Network, Discovery, TLC), each 16:9 with full-bleed brand artwork, 8px radius, 12px gutter, 1.04× hover scale + `0 8px 24px rgba(0,0,0,0.45)` shadow." 4. "Render a Max detail modal — `#1a1c1f` bg, 8px radius, 16:9 hero still header, MAX ORIGINAL white-block tag above title, critical-acclaim strip beneath (Rotten Tomatoes %, Metacritic, Emmy nominations), 18px Sharp Grotesk Text synopsis paragraph." 5. "Create a Max plan card — `#1a1c1f` bg, 8px radius, 1px `#2a2d33` border, blue `#0072ff` border + `0 0 0 2px #0072ff` ring on selected, plan-name in 28px Sharp Grotesk 700, monthly price in 40px 800." ### Iteration Guide 1. **Cool the canvas.** If the page reads as Netflix-warm, push canvas bluer toward `#0b0c0f`. 2. **Sharpen the type.** Sharp Grotesk's brand voice is its tight tracking — pull display to `-0.025em`. 3. **Editorialise.** If the billboard feels generic, add a critic pull-quote — Max's signature. 4. **Subtler hover.** If the poster hover feels Netflix-like, reduce scale from 1.4× to 1.05× and slow the curve. 5. **Add a critical strip.** Detail modals without Rotten Tomatoes / Metacritic feel un-Max. 6. **Hub-tile, don't poster.** Sub-brand entries use larger 16:9 tiles, not portrait posters. 7. **Pull the colour.** If you have more than blue + neutrals + white on screen, audit for stray accent colour — Max is monochrome with one brand voltage. 8. **Italicise the quote.** Sharp Grotesk italic appears nowhere except critic pull-quotes — guard the rule.