# Design System Inspiration of Max (iOS)

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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`)

## 3. Typography Rules

### 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

## 4. Component Stylings

### 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 `#0046FF` to `#7B2FF7`
- Text: `#FFFFFF`
- Icon: SF Symbol `play.fill` 18pt 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 `#5A2BE0` solid 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 28px` and 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) → #12053A` anchors 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` + `Share` vertical 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 `.regularMaterial` blur
- Tabs: Home, Search, My List
- Icon size: 24pt
- Active color: `#FFFFFF` with a 3pt solid `#5A2BE0` underline 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 white `play.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 `magnifyingglass` 18pt `#B0A8D0`
- Placeholder: "Search Max", 16pt w400 `#B0A8D0`
- Text color: `#FFFFFF`
- Focus: 1.5pt gradient ring (solid `#5A2BE0` fallback)

**Filter / Genre Chip**
- Background: `#250F5E` default / gradient `#0046FF→#7B2FF7` selected
- 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**
- On launch, a full-screen grid of large 96pt circular avatars ("Who's watching?") over the purple canvas — the HBO-lineage profile selector. Focused avatar gets a 2pt gradient ring.

**Trailer Crossfade + Gradient Shimmer**
- The billboard trailer dissolves between titles (1.2s); the primary CTA carries a slow 4s diagonal gradient shimmer to signal it as the brand action.

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 52, 64
- Standard margin: 16pt horizontal
- Between rows: 28pt vertical
- Tile gap: 12pt

### Grid & Container
- Content width: full device width with 16pt horizontal margins
- Horizontal rows: begin at 16pt left inset, peek last tile at right edge
- My List grid: 3-column (16:9) or 3-column (2:3 movies), 12pt gap
- Profile gate: 2-column avatar grid, centered, 32pt gap

### Whitespace Philosophy
- **Prestige spacing**: Rows sit 28pt apart with restrained metadata — more breathing room than a budget streamer, signaling premium
- **Billboard dominance**: The auto-trailer billboard owns ~460pt before any rows — the spectacle leads
- **Tight tile gaps within rows**: 12pt keeps the row scannable while each tile stays large

### Border Radius Scale
- Sharp (0pt): Full-bleed billboard, details backdrop, video surface
- Soft (6pt): Content tiles, posters, hero thumbnails
- Standard (8pt): Buttons, search bar, cards
- Comfortable (12-16pt): Bottom sheets, modals
- Full Pill (500pt): Genre/filter chips, "Max Originals" badge, "LIVE" badge
- Circle (50%): Profile avatars, player center button

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Canvas, rows, list rows |
| Tile Focus (Level 1) | `rgba(0,0,0,0.55) 0 12px 28px` | Tile lifted on press/focus |
| Card (Level 2) | `rgba(0,0,0,0.45) 0 6px 18px` | Sheets, metadata panels |
| Brand Glow (Accent) | `rgba(91,43,224,0.35) 0 8px 24px` | Under the gradient CTA, focused-tile gradient ring |
| Sheet (Level 3) | `rgba(0,0,0,0.6) 0 -16px 44px` | Bottom sheets, episode-options menu |
| Tab Bar Material | `.regularMaterial` over `rgba(18,5,58,0.94)` | Bottom tab bar over scrolling content |

**Shadow Philosophy**: On the deep-purple canvas, neutral shadows must be deep (0.45-0.55 opacity, 18-28pt blur) to register. The signature elevation cue is chromatic and brand-aligned: the violet glow under the gradient CTA and the gradient ring on a focused tile communicate lift where neutral shadows can't. Everything else is flat — depth is surface-step color within the purple family, never borders.

### Motion
- **Tile press**: scale 1.0 → 1.04 over 180ms ease-out, focus shadow + gradient ring fade in, `.impactOccurred(.light)` haptic
- **Play CTA tap**: scale 0.97 spring (damping 0.7), gradient darkens, `.impactOccurred(.light)`
- **Billboard trailer crossfade**: 1.2s opacity dissolve between consecutive titles every ~20s
- **CTA gradient shimmer**: a slow 4s diagonal highlight sweep, infinite
- **Row scroll**: native momentum, last tile peeks; no snap
- **Details enter**: backdrop cross-dissolves in over 250ms, rows slide up 12pt + fade
- **Player controls**: fade in/out over 200ms with the scrim

## 7. Do's and Don'ts

### Do
- 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
- 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 `#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
- 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

## 8. Responsive Behavior

### 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

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas: `#12053A`
- Surface 1 (cards): `#1B0B4D`
- Surface 2 (sheets/chips): `#250F5E`
- Surface 3 / Divider: `#36206E`
- Primary text: `#FFFFFF`
- Secondary text: `#B0A8D0`
- Tertiary text: `#7E76A6`
- Gradient start: `#0046FF`
- Gradient end: `#7B2FF7`
- Gradient solid (fallback): `#5A2BE0`
- Live gold: `#F2C94C`
- Error red: `#FF5C7A`

### Example Component Prompts
- "Create a SwiftUI Max primary Play button: full-width, 52pt tall, 8pt corner radius, background a 135° linear gradient from #0046FF to #7B2FF7, leading SF Symbol 'play.fill' 18pt + label 'Play' in Inter 16pt weight 800, both #FFFFFF. Soft brand glow shadow rgba(91,43,224,0.35) 0 8px 24px. Pressed: a rgba(74,34,189,0.55) overlay, scale 0.97, light haptic. Idle: a slow 4s diagonal shimmer across the gradient."
- "Build the Max hero billboard: full-bleed 460pt-tall auto-trailer frame with a bottom-up gradient from rgba(18,5,58,0) to #12053A. Show title 'Dune: Prophecy' bottom-left in Inter 32pt weight 800 #FFFFFF, metadata '2024 · TV-MA · 1 Season · Sci-Fi' in 13pt weight 400 #B0A8D0, a small gradient-bordered 'Max Originals' pill above it. Action row: gradient Play CTA, '+ My List', 'More Info'. Cross-fade to the next title every ~20s with a 1.2s dissolve."
- "Design a Max Originals tile: 220×124pt (16:9) artwork, 6pt corner radius, with a small gradient-edge 'Max Originals' badge top-left (Inter 11pt weight 800 uppercase #FFFFFF). On press: scale 1.04 with shadow rgba(0,0,0,0.55) 0 12px 28px and a 2pt gradient ring (#0046FF→#7B2FF7)."
- "Create the Max profile gate: deep-purple #12053A full screen, centered title 'Who's watching?' in Inter 28pt weight 800 #FFFFFF, a 2-column grid of 96pt circular avatars with names below in 15pt weight 600. Focused avatar gets a 2pt gradient ring; pressed scales to 0.95."
- "Build the Max bottom tab bar: 52pt + safe area, background rgba(18,5,58,0.94) with regularMaterial blur. Tabs Home, Search, My List. Active icon + label #FFFFFF with a 3pt solid #5A2BE0 underline indicator (gradient fallback at small size), inactive #B0A8D0. Labels Inter 10pt weight 600, filled SF Symbol when active."

### Iteration Guide
1. Canvas is `#12053A` deep purple — the brand color is the environment, NOT a neutral dark
2. The gradient (`#0046FF→#7B2FF7`) is brand/action-only — wordmark, Play CTA, focus, Originals badge
3. Use the solid violet `#5A2BE0` fallback wherever a gradient can't render cleanly (tab indicator, tiny toggles)
4. Lead Home with the auto-trailer billboard; cross-fade between titles every ~20s
5. White text on the gradient button — white on the blue-violet gradient is correct
6. Step elevation within the purple family (`#1B0B4D`, `#250F5E`), never toward gray
7. Elevation on dark = surface-step color + the violet glow / gradient ring, never borders
8. Typography is Inter, weights 400/600/800 only — no thin, no medium; prestige 28pt row spacing