At a glance
19tokens
10type steps
2radius steps
12pxspacing base
Max, in one page
Max's iOS app is a prestige-cinema surface built on a deep, saturated purple canvas (#12053A) that feels less like a neutral void and more like a darkened theater drenched in brand color. Where most streamers default to near-black, Max commits to its identity: the entire background is a deep blue-violet, and elevated surfaces (#1B0B4D, #250F5E) step up within the same purple family rather than toward gray. The effect is immersive and premium — the chrome itself carries the brand, so even an empty screen reads as "Max."
The accent system is a gradient, not a single hue. The Max brand gradient sweeps from electric blue (#0046FF) to violet (#7B2FF7) and powers the wordmark, the primary "Play" CTA, focus rings, and the auto-playing hero billboard's framing. A solid fallback (#5A2BE0) is used where a gradient can't render (small toggles, tab indicator). This is the design equivalent of a marquee light — the gradient is reserved for brand and primary action moments, while everything else is white, lavender-gray, or deep purple. The restraint around the gradient is what keeps it feeling prestige rather than gaudy.
Typography is Inter (standing in for Max's clean grotesque brand face), with a compact, confident hierarchy from 11-32pt at weights 400 / 600 / 800. There are no decorative display fonts — the content artwork and the auto-trailer billboard are the spectacle. Type's role is to label and badge: row titles at 20-22pt weight 800, tile titles at 15pt weight 600, metadata in lavender-gray at 13pt weight 400, and the signature "Max Originals" badge in 11pt weight 800 uppercase. The most expressive type moment is the billboard, where a show's logo art (or 32pt weight 800 title) sits over a slowly cross-fading auto-trailer.
Key Characteristics:
- Deep purple canvas (
#12053A) — brand color as the entire environment, not a neutral dark - Max brand gradient (
#0046FF → #7B2FF7) — wordmark, primary CTA, focus, billboard framing - Auto-trailer hero billboard — a full-bleed muted trailer that cross-fades into the next title
- Prestige content rows — large 16:9 / 2:3 tiles with restrained, premium spacing
- "Max Originals" badge — gradient-edged pill marking first-party prestige content
- Profile gate — full-screen avatar grid on launch (HBO-lineage "who's watching")
- Solid violet fallback (
#5A2BE0) for toggles and the tab indicator where gradients can't render - Inter typeface (clean grotesque), weights 400/600/800
- Trailer crossfade + a subtle gradient shimmer on the CTA
Do's and don'ts
Do
- Use
#12053Adeep purple as the canvas — the brand color IS the environment, not a neutral dark - Reserve the gradient (
#0046FF→#7B2FF7) for the wordmark, primary CTA, focus, and Originals badge - Use the solid violet fallback (
#5A2BE0) for the tab indicator and small toggles where a gradient can't render - Lead Home with the auto-trailer billboard and cross-fade between titles
- Mark first-party content with the gradient-edge "Max Originals" badge
- Step elevation within the purple family (
#1B0B4D,#250F5E) — not toward gray - Put the violet glow under the gradient CTA — it's the chromatic elevation cue
- Use white text on the gradient button — white on the blue-violet gradient is correct
Don't
- Don't use near-black or gray as the canvas — Max's identity is the deep-purple environment
- Don't apply the gradient to body text or decorative elements — it's brand/action-only
- Don't try to render the full gradient on the tiny tab indicator — use the
#5A2BE0solid fallback - Don't use thin or medium weights — Inter here is 400 / 600 / 800 only
- Don't round content tiles heavily — 6pt max keeps artwork integrity
- Don't crowd the rows — prestige spacing (28pt) is part of the premium signal
- Don't introduce visible card borders — elevation is surface-step color, not strokes
- Don't over-animate — tile scale is subtle (1.04); the only continuous motion is the slow billboard crossfade and CTA shimmer
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Max design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Gradient Start: #0046ff
- Gradient End: #7b2ff7
- Gradient Solid: #5a2be0
- Gradient Pressed: #4a22bd
- Canvas: #12053a
- Deep Black: #000000
- Surface 1: #1b0b4d
- Surface 2: #250f5e
- Surface 3: #36206e
- Divider: #36206e
Type:
- families: Inter, Fallback Stack, Numerals
- scale: 10, 11, 12, 13, 15, 16, 20, 22, 28
- weights: 400, 600, 800
Shape:
- radius: 6, 8
- elevation: Shadow: `rgba(91,43,224,0.35) 0 8px 24px` — a soft brand glow
Spacing: 12, 16
Rules:
- Use `#12053A` deep purple as the canvas — the brand color IS the environment, not a neutral dark
- Reserve the gradient (`#0046FF→#7B2FF7`) for the wordmark, primary CTA, focus, and Originals badge
- Use the solid violet fallback (`#5A2BE0`) for the tab indicator and small toggles where a gradient can't render
- Lead Home with the auto-trailer billboard and cross-fade between titles
- Mark first-party content with the gradient-edge "Max Originals" badge
- Step elevation within the purple family (`#1B0B4D`, `#250F5E`) — not toward gray
Avoid:
- Don't use near-black or gray as the canvas — Max's identity is the deep-purple environment
- Don't apply the gradient to body text or decorative elements — it's brand/action-only
- Don't try to render the full gradient on the tiny tab indicator — use the `#5A2BE0` solid fallback
- Don't use thin or medium weights — Inter here is 400 / 600 / 800 only
- Don't round content tiles heavily — 6pt max keeps artwork integrity
- Don't crowd the rows — prestige spacing (28pt) is part of the premium signal
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand Gradient)
- Gradient Start (
#0046FF): Electric blue — left/top stop of the Max brand gradient. - Gradient End (
#7B2FF7): Violet — right/bottom stop of the Max brand gradient. - Gradient Solid (
#5A2BE0): Solid violet fallback — toggles, tab indicator, small UI where a gradient can't render. - Gradient Pressed (
#4A22BD): Pressed/active state for the solid fallback and CTA overlay. - Gradient Glow (
rgba(91,43,224,0.35)): Soft glow under the primary CTA and around focused tiles.
Canvas & Surfaces
- Canvas (
#12053A): Primary deep-purple app background — the branded environment. - Deep Black (
#000000): Full-screen video player background only. - Surface 1 (
#1B0B4D): Card backgrounds, sheets, elevated rails, details metadata panel. - Surface 2 (
#250F5E): Higher elevation — modals, active rows, chip default background. - Surface 3 (
#36206E): Pressed state on purple surfaces, hairline divider tone. - Divider (
#36206E): 1pt separators between settings rows and metadata blocks.
Text
- Text Primary (
#FFFFFF): Show titles, screen headers, primary labels. - Text Secondary (
#B0A8D0): Lavender-gray — metadata, descriptions, row subtitles. - Text Tertiary (
#7E76A6): Disabled labels, very low-emphasis captions, placeholder text.
Semantic
- Live Gold (
#F2C94C): "LIVE" sports badge (Bleacher Report / live events) and now-playing marker. - Badge Surface (
#250F5E): "TV-MA" / "R" maturity-rating chip background, text#FFFFFF. - Originals Gradient (
#0046FF → #7B2FF7): "Max Originals" badge border/fill. - Error Red (
#FF5C7A): Playback errors, download failures, offline state.
Light Mode (Limited Use)
Max's iOS app is effectively dark-only — the prestige-theater atmosphere depends on the deep-purple canvas. A light variant is not part of the core product.
- Light Canvas (
#FFFFFF) - Light Text (
#12053A)
Type scaleRead the full spec
Font Family
- Primary:
Inter(standing in for Max's clean grotesque brand typeface) - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for runtime, episode counts, and live times
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Billboard Title | Inter | 32pt | 800 | 1.1 | -0.5pt | Show title on the auto-trailer billboard (when no logo art) |
| Screen Title (Large) | Inter | 28pt | 800 | 1.15 | -0.4pt | "My List", "Series" large nav title |
| Row Header | Inter | 22pt | 800 | 1.2 | -0.3pt | "Max Originals", "Trending Now" |
| Section Header | Inter | 20pt | 800 | 1.2 | -0.3pt | Sub-rows inside a category |
| Episode Title | Inter | 16pt | 600 | 1.25 | -0.1pt | Episode row title in details |
| Tile Title | Inter | 15pt | 600 | 1.3 | -0.1pt | Show title under a tile |
| Body | Inter | 15pt | 400 | 1.45 | 0pt | Synopsis, episode description |
| Metadata | Inter | 13pt | 400 | 1.3 | 0pt | "2024 · TV-MA · 1 Season" |
| Tile Subtitle | Inter | 12pt | 400 | 1.3 | 0pt | "S2 · E1" / "New episode" |
| Label (UPPER) | Inter | 11pt | 800 | 1.2 | 0.6pt | "TRENDING NOW" eyebrow labels |
| Button (Primary) | Inter | 16pt | 800 | 1.0 | 0.2pt | Gradient "Play" button |
| Button (Secondary) | Inter | 15pt | 600 | 1.0 | 0pt | "More Info", outline buttons |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
| Badge | Inter | 11pt | 800 | 1.0 | 0.4pt | "Max Originals", "LIVE", rating pill |
Principles
- Weights concentrated at 400 / 600 / 800: Regular for body/metadata, semibold for titles, extrabold for headers, CTAs, and badges — no thin, no medium
- Content is the spectacle: No decorative display type; the auto-trailer billboard and artwork carry drama
- Negative tracking on big type, neutral on small: -0.5pt at 32pt easing to 0pt at body
- All-caps only for eyebrows and badges: "TRENDING NOW", "MAX ORIGINALS" — never for titles
- Gradient is brand-only: gradient fills appear on the wordmark, primary CTA, focus, and Originals badge — never on body text
Components and layoutRead the full spec
Buttons
Primary Play CTA (The Gradient Button)
- Shape: Rounded rectangle, height 52pt, full-width within content margins (auto-width on billboard)
- Background: linear gradient 135° from
#0046FFto#7B2FF7 - Text:
#FFFFFF - Icon: SF Symbol
play.fill18pt leading the label, also#FFFFFF - Corner radius: 8pt
- Font: Inter 16pt weight 800, letter-spacing 0.2pt
- Shadow:
rgba(91,43,224,0.35) 0 8px 24px— a soft brand glow - Pressed: a
rgba(74,34,189,0.55)overlay darkens the gradient, scale 0.97,.impactOccurred(.light)haptic - Idle: a slow 4s diagonal shimmer sweeps across the gradient
Secondary Button ("More Info")
- Background:
rgba(255,255,255,0.14) - Text:
#FFFFFF - Height: 52pt, corner radius 8pt
- Font: Inter 15pt weight 600
- Pressed: background
rgba(255,255,255,0.22), scale 0.98
Icon Actions (My List +, Download, Share)
- Size: 24pt glyph, 44pt hit area
- Default:
#FFFFFF - Active: gradient-tinted (use
#5A2BE0solid where a gradient mask is impractical) — added to My List, download complete - Layout: vertical icon-over-label stacks on the details action row, 32pt gap
Profile Avatar (gate)
- 96pt circle on the launch gate grid, 2pt gradient ring when focused
- Name label below, Inter 15pt weight 600
#FFFFFF - Pressed: scale 0.95 + ring brightens
Text Button ("See All")
- Font: Inter 13pt weight 600
- Color:
#B0A8D0 - No underline, 44pt hit area, trailing each row header
Cards & Containers
Content Tile (Horizontal row)
- Width: 200pt (16:9 standard) or 130pt (2:3 poster, used in movie rows)
- Aspect: 16:9 or 2:3
- Corner radius: 6pt on the artwork
- Gap between tiles: 12pt
- Structure: artwork → optional title (15pt w600, 1-line) → subtitle (12pt w400
#B0A8D0) - "Max Originals" tiles carry a small gradient-edge badge top-left
- Press: scale 1.04 with focus lift
rgba(0,0,0,0.55) 0 12px 28pxand a 2pt gradient ring
Billboard (auto-trailer hero)
- Full-bleed, height ~ 460pt (top of Home)
- A muted auto-playing trailer fills the frame; a bottom-up gradient
rgba(18,5,58,0) → #12053Aanchors text - Show logo art (or 32pt w800 title) bottom-left
- Metadata line "2024 · TV-MA · 1 Season · Drama" 13pt w400
#B0A8D0 - Action row: gradient "Play" CTA +
+ My List+More Info - Trailer cross-fades to the next billboard title every ~20s with a 1.2s dissolve
Max Originals Row
- Header "Max Originals" 22pt w800 (with a small gradient accent mark) + "See All" trailing
- Larger tiles (220pt), each with the gradient-edge Originals badge
Details Hero
- Full-bleed 16:9 backdrop still, height ~ 280pt, darkened bottom-up to
#12053A - Logo art (or 32pt w800 title) anchored bottom-left
- Metadata + gradient "Play" CTA +
+ My List+Download+Sharevertical icon stacks - Below: synopsis (15pt w400, 3-line clamp + "More"), then season picker + episode list
Episode Row
- Height: 96pt
- Layout: 140pt × 79pt (16:9) thumbnail → stacked title (16pt w600) + "S2 · E1 · 58 min" meta (13pt w400
#B0A8D0) + 2-line description → trailing download icon - Background: transparent (
#12053A) - Pressed: background
#1B0B4D
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
rgba(18,5,58,0.94)with.regularMaterialblur - Tabs: Home, Search, My List
- Icon size: 24pt
- Active color:
#FFFFFFwith a 3pt solid#5A2BE0underline indicator (gradient can't render reliably at this size — solid fallback) - Inactive:
#B0A8D0 - Labels: Inter 10pt w600, always shown
- Active tab icon: filled SF Symbol; inactive: outlined
Top Nav (Home)
- Height: 48pt + safe area
- Max gradient wordmark top-left, 22pt
- Profile avatar (28pt circular) top-right
- Transparent over the billboard, fades to
rgba(18,5,58,0.94)blur on scroll
Player Controls Overlay
- Tap video → controls fade in over a
rgba(0,0,0,0.55)scrim - Center: 64pt circular
rgba(255,255,255,0.16)button with whiteplay.fill/pause.fill, ±10s skip flanking at 28pt - Bottom: gradient scrubber (2pt track
rgba(255,255,255,0.3), gradient fill#0046FF→#7B2FF7, 14pt white thumb), elapsed/remaining 12pt - Top: title + close (✕); bottom-right: captions, audio, AirPlay
Input Fields
Search Bar
- Background:
#250F5E - Height: 44pt, corner radius 8pt
- Leading SF Symbol
magnifyingglass18pt#B0A8D0 - Placeholder: "Search Max", 16pt w400
#B0A8D0 - Text color:
#FFFFFF - Focus: 1.5pt gradient ring (solid
#5A2BE0fallback)
Filter / Genre Chip
- Background:
#250F5Edefault / gradient#0046FF→#7B2FF7selected - Text:
#FFFFFF(both states) - Height: 36pt, corner radius 500pt (full pill), horizontal padding 16pt
- Font: Inter 14pt weight 600
Distinctive Components
Gradient-Brand Hero Billboard
- The signature Max move: a full-bleed muted auto-trailer at the top of Home, framed by the deep-purple gradient fade, with the gradient "Play" CTA pinned over it. The trailer cross-fades to the next title every ~20s. This is the prestige-marquee moment — brand gradient, motion, and content fused.
Max Originals Badge
- A small pill with a gradient border (or gradient fill) and "Max Originals" in 11pt w800 uppercase, marking first-party prestige content on tiles, details, and the billboard.
Profile Gate
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 170pt 16:9 tiles, billboard 400pt |
| iPhone 13/14/15 | 390pt | Standard 200pt tiles, billboard 460pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in transparent top nav |
| iPhone 15/16 Pro Max | 430pt | 230pt tiles, billboard scales to 520pt |
| iPad | 768pt+ | 4-column My List grid, larger billboard, rows show 4-5 tiles |
Dynamic Type
- Show titles, episode titles, synopsis: full scale
- Tile subtitle / metadata: scales but clamps at +2 steps (layout-sensitive in rows)
- Play CTA label: scales to 18pt max; button height fixed at 52pt
- Tab labels, badges, scrubber times: fixed (never scale)
Orientation
- Home / Search / My List / Details / Profile gate: portrait-locked
- Video player: rotates to landscape — auto-enters full-screen landscape on play
- Billboard trailer: portrait, muted; full-screen on tap
Touch Targets
- Play CTA: 52pt height, full-width — impossible to miss
- Content tiles: full-tile tappable, ≥ 110pt tall hit
- Episode rows: 96pt height, full-row tappable
- Profile avatars: 96pt circle, generous gate spacing
- Tab bar icons: 24pt icon, 44pt effective hit
Safe Area Handling
- Top: transparent nav respects safe area / Dynamic Island over the billboard
- Bottom: tab bar floats above home indicator; player controls inset from it
- Sides: 16pt content margins; rows bleed to the right edge intentionally
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-max {--page-bg: #12053a;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #3c73ff;
--link-hover-color: #094eff;
--border-color: #3d325d;
--card-bg: #12053a;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #25194a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #12053a;
--footer-text-color: #aca8ba;
--button-bg: #0046ff;
--button-text-color: #ffffff;
--button-hover-bg: #0038cc;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #201446;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #2e2352;
--button-secondary-border: 1px solid #3d325d;
--prompt-bg: #1e1244;
--prompt-text-color: #ffffff;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- life360 86.7%
- peacock 86.0%
- nubank 79.4%
- grammarly 78.7%
- prime video 76.7%
Where this came from
- Source document
ios/design-md/video/max/DESIGN.md· 20.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.