Max DESIGN.md

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

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

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

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