Signal Blue
#3d6a99Primary CTA fill, active link color, brand accent on icons and borders — the single chromatic note that powers all interactivity
HBO Max
hbomax.comWebsite preview
The design language
HBO Max is a cinema-dark streaming interface: deep black canvas, content poster art as the primary visual unit, and a single steel-blue accent that powers every interactive element. The design is deliberately sparse — white text floats on black, pricing cards flip the polarity to white-on-light to signal commerce zones, and typography does the heavy lifting through size and spacing rather than color. Components stay flat and minimal: 8px-radius buttons, hairline borders, no shadows, no gradients. The custom Max Sans typeface carries a slight positive letter-spacing on small labels, giving even utility text a cinematic, editorial quality.
Color palette
brand
accent
Glacier Beam
#71b8f2Blue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
neutral
Obsidian
#000000Page background, hero canvas, navigation surface — the default darkness that lets poster art and white text feel illuminated
Smoke
#050409Near-black secondary surface, subtle elevation layer above pure black for section separation
Ash Mist
#b8b6bbMuted helper text, secondary body copy, disabled icon strokes — readable but recedes
Iron Veil
#89868eTertiary text, inactive border outlines on controls
Faded Print
#999999Lowest-priority metadata, footnote-level text and borders
Snow
#ffffffPrimary text, pricing card surfaces, icon fills, pill backgrounds — the dominant positive value in the system
Eclipse Indigo
#0e0a17Near-black heading accent, subtle border tint for heading underlines
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 100 · 0.8The quick brown fox jumps
text-44
44px · 600 · 1The quick brown fox jumps
text-37
37px · 600 · 1.96The quick brown fox jumps
heading-lg
35px · 600 · 1The quick brown fox jumps
heading
28px · 600 · 1.1The quick brown fox jumps
text-26
26px · 600 · 1.35The quick brown fox jumps
heading-sm
24px · 400 · 1.11The quick brown fox jumps
text-20
20px · 600 · 1.35The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Max Sans
- Weights
- 100, 300, 400, 600, 700
- Sizes
- 10, 12, 13, 14, 16, 18, 19, 20, 24, 26, 28, 35, 37, 44, 56
- Line height
- 0.80, 1.00, 1.10, 1.11, 1.20, 1.23, 1.25, 1.35, 1.60, 1.96
- Letter spacing
- +0.83px at 10px, +1.0px at 12px, +1.6px at 16px
- Fallback
- Inter, Helvetica Neue, or Söhne
- Features
- "locl" 0
Custom sans-serif. Weights 300–400 carry the bulk of body and headline work; 600–700 reserved for prices and CTAs; 100 used for ultra-light display moments. Positive letter-spacing (0.083–0.1em) on small labels gives cinematic, marquee-poster feel.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
4.5pxcards
4.5pxpills
100pximages
8pxbuttons
8pxSpacing scale
2px3px4px6px7px8px10px12px13px14px15px16px20px23px24px27px28px30px32px48px56px95px96px143px255pxGuidelines
Do
- Use #3d6a99 exclusively for filled CTA buttons, active states, and check icons — it is the system's only chromatic note
- Invert to white surfaces for any commerce/pricing zone; the rest of the page must stay black
- Set buttons to 8px radius and pill elements to 100px radius — never mix intermediate values
- Apply 0.083–0.1em positive letter-spacing on labels, badges, and small-caps text for the cinematic marquee quality
- Keep the page background pure #000000 with no overlays, gradients, or dim layers in content areas
- Use weight 300–400 for headlines; reserve 600–700 for prices, CTAs, and emphasis only
- Maintain generous vertical rhythm: 64px between sections, 24px card padding, 16px between elements
Don’t
- Never use drop shadows — depth comes from surface color polarity, not elevation
- Don't introduce additional accent colors — the system is monochrome plus one blue
- Avoid backgrounds lighter than #050409 outside of pricing cards
- Don't use letter-spacing tighter than -0.01em on small text; the system breathes outward, not inward
- Never place white buttons on white pricing cards or blue buttons on blue surfaces — polarity must flip
- Don't add gradients, glass effects, or blur — the aesthetic is flat cinema-dark
- Avoid using #3d6a99 for large decorative areas; it should stay as precise interactive punctuation, not fill backgrounds
Components
Signal Blue CTA Button
Primary call-to-action for sign-up, plan selection, and key conversion pointsFilled #3d6a99 background, white text at 14px weight 600, 8px border-radius, 12px vertical × 16px horizontal padding. Uppercase or sentence case. Letter-spacing 0.083em. Used for 'Sign Up Now', 'Select Plan'.
Ghost Outline Button
Secondary CTA, nav actions against dark backgroundsTransparent fill, 1px solid white border, white text weight 600, 8px radius, 10px vertical × 16px horizontal padding. Used for 'Sign Up Now' in the header against dark hero.
Pricing Tier Card
Subscription plan display with feature list and priceWhite (#ffffff) surface on black page — full polarity inversion. 4.5px border-radius, 24px padding, checkmark icons in blue (#3d6a99) for feature items, bold price at 28px weight 700, '/month' suffix in lighter weight. Bottom-right Signal Blue Select Plan button.
Category Tile
Genre/content category navigation cardsFull-bleed poster image background, 8px radius, overlay text at bottom: category name in white weight 600, 'for' label in muted white, content title in uppercase small-caps. Used for Movies, Family, Drama, Comedy, Action, True Crime.
Billing Toggle
Monthly/Yearly plan period switcherPill-shaped (100px radius) container with two segments. Active segment: white background, black text. Inactive: transparent, white text. 24px horizontal × 12px vertical padding per segment. SAVE badge floats above in #3d6a99.
Header Navigation
Top-level site navigation and auth actionsTransparent over hero, minimal. HBO Max logo left (white, stacked). Right side: 'Sign In' text link + 'Sign Up Now' ghost button. No background bar — floats directly on dark hero.
Content Hero Grid
Full-bleed poster wall above the foldDense grid of content poster art (10+ columns on desktop), slight tilt/perspective effect, poster images edge-to-edge. Logo + pricing copy + CTA centered over the grid with no card or panel — text sits directly on the artwork.
Feature Check Item
Line item within pricing cards listing plan capabilitiesBlue (#3d6a99) checkmark icon at 14px, followed by dark text weight 400 at 14px. Consistent 8px vertical gap between items. Unchecked items: empty circle outline in same blue.
Carousel Section Header
Genre section titles with horizontal scroll affordanceCentered title at 28px weight 400, flanked by left/right arrow chevrons in muted gray. Adjacent dimmed genre labels scroll into view. Letter-spacing 0.083em for cinematic feel.
Section Heading
Major page section titles like 'Pick Your Perfect Plan'White text at 28px weight 400, centered alignment, generous 64px vertical breathing room above and below. Subtext at 16px weight 400 in #b8b6bb muted gray.
Annual Savings Link
Yearly pricing callout below monthly price'Or pay €X/year and save €Y' in blue (#3d6a99) text link at 12px weight 400, with right-arrow chevron. Sits directly below the /month price line.
Surfaces & elevation
Level 1
Obsidian Canvas
#000000Full-page background, hero section base
Level 2
Smoke Surface
#050409Subtle section separator, slightly elevated dark panel
Level 3
Snow Card
#ffffffPricing tier cards, feature panels — inverted polarity for commerce zones
Level 4
Signal Blue Accent
#3d6a99Active CTA buttons, selected toggle state
No shadows. Depth is communicated exclusively through surface color polarity shifts — white cards on black background create contrast-based elevation, never drop shadows. This keeps the cinema-dark aesthetic pure: no fake light sources, only true surface contrast.
Layout & imagery
Layout
Full-bleed cinematic layout. The hero is a max-edge poster grid with centered logo and CTA floating over it — no container, no card. Below the fold: centered single-column stack with max-width 1280px. The pricing section breaks the dark pattern with a 4-column card grid on white surfaces, providing a stark polarity shift. Category tiles are 6 equal columns. Content carousels use a horizontal scroll model with chevron controls. Navigation is a transparent floating bar with no background fill. Section rhythm: dark band → light pricing band → dark content bands, creating a three-act visual structure.
Imagery
Content poster art is the entire visual identity. The hero is a dense, slightly perspective-tilted grid of real HBO Max show and movie posters — ten or more visible at once with no breathing room between them, creating a wall-of-content effect. Category tiles use full-bleed poster stills with overlaid text. No lifestyle photography, no abstract illustration, no 3D renders. Photography treatment: high-saturation, cinematic color grading inherited from the source material. Icons are minimal — simple checkmark outlines and chevron arrows, no decorative iconography.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #000000 - border: #050409 - accent: #3d6a99 - link/hover: #71b8f2 - primary action: #3d6a99 (filled action) **3-5 Example Component Prompts** 1. **Hero Section**: Full-bleed #000000 background with a 10-column grid of poster images filling the viewport. Centered white HBO Max logo at 56px weight 300, letter-spacing 0.083em. Below: 'Start streaming with HBO Max plans from €6.99/month' at 16px weight 400 white. Signal Blue CTA button: #3d6a99 fill, white text 14px weight 600, 8px radius, 12px 24px padding, letter-spacing 0.083em. 2. **Pricing Card**: White (#ffffff) surface, 4.5px radius, 24px padding. Plan name 'Standard' at 20px weight 400. Feature list: #3d6a99 checkmark icons at 14px with dark body text. Price '€10.99' at 28px weight 700, '/month' suffix at 14px weight 400. Signal Blue Select Plan button (8px radius) bottom-right. Annual savings link in #3d6a99 at 12px below price. 3. **Category Tile**: Full-bleed poster image, 8px radius, 200px height. Bottom overlay: category name 'Drama' in white 20px weight 600, 'HBO ORIGINAL' label in uppercase 10px weight 400 white at 0.1em tracking, content title 'EUPHORIA' in 12px weight 400. 4. **Billing Toggle**: 100px-radius pill, 2px border in #050409. 'MONTHLY' active: white fill, black text 14px weight 600. 'YEARLY' inactive: transparent, white text. SAVE 16% badge above in #3d6a99 with white text 10px weight 600. 5. **Carousel Header**: 'DISCOVER THE GREATEST' eyebrow at 12px weight 400 #b8b6bb, letter-spacing 0.1em. Genre name 'Epics' at 35px weight 300 white, centered. Left/right #89868e chevron arrows flanking, 24px from text.
Polarity System
The defining structural principle is surface polarity inversion. The page lives in #000000 darkness. Commerce zones (pricing) flip to #ffffff light. Active states use #3d6a99 blue as the single chromatic signal. Never blend these zones with gradients, overlays, or transitional surfaces — the contrast between black, white, and blue IS the visual system. Cards on black feel like illuminated screens; cards on white feel like printed pages. This binary approach eliminates ambiguity about where the user is in the conversion funnel.
Similar brands
Netflix
Same dark-canvas streaming aesthetic with content poster grids as the dominant visual unit, and sparse UI chrome that lets artwork carry the brand
Disney+
Similar dark-mode entertainment layout with category carousels and single-accent CTA buttons against near-black backgrounds
Apple TV+
Identical black-canvas minimalism with a single white wordmark and full-bleed content imagery, relying on weight contrast rather than color
Spotify
Dark immersive interface where content art tiles carry the visual weight and the UI recedes into monochrome backgrounds with minimal accent color
Hulu
Similar streaming-tier pricing card grid with polarity-inverted white cards on a dark page and single blue CTA accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
