designmd-forge 1.2.0

package/dist/data/designs/ios-tubi.md

@@ -0,0 +1,383 @@
+# Design System Inspiration of Tubi (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Tubi's iOS app is built around a single, unmistakable idea: **free movies and TV, paid for by ads, presented like a premium streamer**. The canvas is a deep indigo-black (`#0A0A2A`) — not the neutral near-black of Netflix or the warm charcoal of Apple TV, but a cool, slightly violet darkness that exists specifically so Tubi's signature **purple→magenta gradient (`#7408FF` → `#FF00FF`)** can glow against it. That gradient is the entire brand. It runs through the lowercase `tubi` wordmark, the focus and selection states, the active bottom-tab icon, continue-watching progress bars, and the secondary CTAs. Where most streaming apps pick one accent color, Tubi picks a *spectrum*, and the whole UI is engineered to make that spectrum sing.
+
+The signature screen is the **Home feed**: a near-full-width featured hero at the top (a single big title with a gradient/photo backdrop, a "Tubi Original" or genre badge, title, metadata line, and a white **Play Free** button), followed by a vertical stack of **horizontally-scrolling poster rows** — "Continue Watching", "Trending Now", "Free Movies You'll Love", "Leaving Soon", genre rails, and so on. Posters are tall 2:3 cards, densely packed (3.4 visible per row on a 390pt screen), each carrying a small yellow **"FREE"** tag in the corner. This density is deliberate: Tubi's entire pitch is *catalog breadth at zero cost*, so the UI shows as many titles as possible per screen. The other signature surface is the **Title Detail** page — a full-bleed backdrop, a giant title, a prominent white Play button, "+ My List", a synopsis, cast, and "More Like This" rails — and the **Live TV guide**, an EPG-style channel grid for Tubi's free linear channels.
+
+The atmosphere is **energetic, youthful, and unapologetically commercial**. Tubi leans into the fact that it's ad-supported rather than hiding it: the yellow "FREE" badge is a *feature*, not an apology. Motion is punchy — posters scale slightly on focus, the hero cross-dissolves between featured titles, and the gradient shimmers subtly behind the wordmark on launch. Typography is a tight geometric grotesque (Inter is the closest free analog to Tubi's custom face): heavy weights (800–900) for titles, clean 400 body, all-caps tracked labels for badges. The result reads like a neon-lit movie marquee rebuilt for a phone — bold, saturated, and proudly free.
+
+**Key Characteristics:**
+- Deep indigo-black canvas (`#0A0A2A`) — cool and slightly violet so the gradient glows; dark-only, no light mode
+- Signature purple→magenta gradient (`#7408FF` → `#FF00FF`) — the brand, used on wordmark, focus, active tab, progress, secondary CTAs
+- Oversized featured hero at top of Home — single title, badge, white "Play Free" button
+- Dense horizontal poster rows — tall 2:3 cards, 3+ visible per row, packed for catalog-breadth feel
+- Yellow `#FFD400` "FREE" tag on every poster — Tubi's promise stated as a UI feature
+- White (`#FFFFFF`) primary Play button — maximum contrast against the cool dark field
+- "Tubi Original" badges in gradient — signals exclusive content
+- Continue-watching progress bars in gradient under each in-progress poster
+- Live TV EPG guide — channel grid for Tubi's free linear channels
+- Bottom tab bar: Home / Search / Live TV / My List / Account — active icon in magenta
+- All-caps tracked micro-labels (badges, tags) in heavy weight; titles 800–900
+
+## 2. Color Palette & Roles
+
+### Primary (Brand Gradient & Interactive)
+- **Tubi Purple** (`#7408FF`): Gradient start — wordmark, focus rings, active states, progress fill start.
+- **Tubi Magenta** (`#FF00FF`): Gradient end — wordmark, active tab icon, progress fill end.
+- **Tubi Violet** (`#A12BFF`): Mid-gradient stop / solid violet for single-color uses (chips, links on light press).
+- **Tubi Pink** (`#FF4FD8`): Tappable text links, "More Like This", inline actions.
+- **Play White** (`#FFFFFF`): Primary Play / Play Free button background — the highest-priority CTA.
+- **Play White Pressed** (`#E6E6F2`): Pressed state of the white play button.
+
+### Canvas & Surfaces (Dark — the only mode)
+- **Canvas Indigo-Black** (`#0A0A2A`): Primary app background.
+- **Surface 1** (`#15153D`): Cards, sheets, the title-detail panel, settings rows.
+- **Surface 2** (`#1E1E52`): Elevated surfaces, pressed rows, search field, chips.
+- **Surface 3** (`#262666`): Highest elevation — modals, popovers, focused poster lift.
+- **Divider** (`#2A2A5C`): Hairline separators between sections and list rows.
+- **Overlay Scrim** (`rgba(10,10,42,0.95)`): Bottom gradient over the hero backdrop for text legibility.
+
+### Text
+- **Text Primary** (`#FFFFFF`): Titles, body, primary content.
+- **Text Secondary** (`#B9B9D6`): Metadata lines, synopsis, secondary labels — a cool lavender-grey.
+- **Text Tertiary** (`#7A7AA0`): Disabled, timestamps, very low-emphasis captions.
+- **Text On-White** (`#0A0A2A`): Text on the white Play button (the indigo-black canvas color).
+
+### Semantic & Accent
+- **Free Tag Yellow** (`#FFD400`): The "FREE" badge on posters and the hero — Tubi's signature warm accent. Text on it is `#1A0A2A`.
+- **Success Green** (`#1FD17B`): "Added to My List" confirmation, download-complete.
+- **Error Red** (`#FF4A6E`): Playback errors, failed sign-in, destructive confirms.
+- **Live Red** (`#FF3B5C`): "LIVE" indicator dot on Live TV channels.
+- **Rating Amber** (`#FFB020`): Star ratings / IMDb-style score chips.
+
+### Gradient Tokens
+| Token | Definition | Use |
+|-------|-----------|-----|
+| `gradient/brand` | `linear-gradient(135deg, #7408FF 0%, #FF00FF 100%)` | Wordmark, secondary CTA, active tab, "Tubi Original" badge |
+| `gradient/progress` | `linear-gradient(90deg, #7408FF 0%, #FF00FF 100%)` | Continue-watching progress fill |
+| `gradient/focus` | `linear-gradient(135deg, #7408FF, #FF00FF)` as 2pt ring | Focused / selected poster outline |
+| `gradient/hero-scrim` | `linear-gradient(180deg, transparent 40%, rgba(10,10,42,0.95) 100%)` | Bottom fade on hero & detail backdrops |
+
+### Note on Theme
+Tubi ships **dark-only**. There is no light mode toggle; the indigo-black canvas is the brand environment. Do not invent a light palette — if a light surface is ever needed (e.g., a system share sheet), defer to the OS, not a Tubi-themed light scheme.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` (by Rasmus Andersson, SIL OFL) — the closest free analog to Tubi's custom geometric grotesque. Tubi's brand face is a tight, slightly condensed sans with heavy display weights; Inter at weights 800–900 reproduces the marquee feel.
+- **Display Alternative**: `Archivo` or `Archivo Black` (Google Fonts, SIL OFL) — for extra-punchy hero titles if a more condensed display face is wanted.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numerals**: Tabular figures for runtime/metadata (`1h 52m`), proportional elsewhere.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero Title | Inter | 32pt | 900 | 1.0 | -0.6pt | Featured title on Home hero — heaviest weight |
+| Detail Title | Inter | 28pt | 800 | 1.05 | -0.5pt | Title on the Title Detail page |
+| Row Header | Inter | 22pt | 800 | 1.1 | -0.3pt | "Trending Now", "Continue Watching" rail headers |
+| Section Title | Inter | 18pt | 700 | 1.2 | -0.2pt | Sub-section headers, settings group titles |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Synopsis, descriptions, body copy |
+| Card Title | Inter | 15pt | 600 | 1.15 | 0pt | Poster captions, list-row titles |
+| Button Label | Inter | 15pt | 800 | 1.0 | 0pt | Play / Register / CTA text |
+| Meta | Inter | 13pt | 500 | 1.3 | 0pt | "2024 · Thriller · 1h 52m · TV-MA" |
+| Caption | Inter | 12pt | 500 | 1.3 | 0pt | Timestamps, fine print, episode counts |
+| Badge / Tag | Inter | 11pt | 700 | 1.0 | 0.4pt | "TUBI ORIGINAL", "FREE", "NEW" — ALL CAPS |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Weight is the brand**: Tubi titles are *heavy* (800–900). The contrast between a 900 hero title and 400 body is the primary hierarchy signal — never set titles below 700.
+- **ALL CAPS for badges only**: Genre/Original/FREE badges and tags are uppercase with positive tracking (`+0.4pt`). Body and titles are sentence case, never tracked positive.
+- **Tight display tracking**: Hero and detail titles use negative letter-spacing (-0.5 to -0.6pt) for a dense, condensed marquee look.
+- **Cool lavender secondary**: Metadata uses `#B9B9D6` (a cool lavender-grey), not neutral grey — it harmonizes with the indigo canvas.
+- **Tabular numerals for time**: Runtimes, "min left", and clock times use tabular figures so rows don't jitter.
+- **Dynamic Type**: Titles, body, synopsis scale; badge text, tab labels, and progress labels stay fixed (layout-sensitive).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Play / Play Free)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#FFFFFF` (Play White) — the single highest-contrast CTA
+- Text + leading play glyph: `#0A0A2A` (canvas indigo-black), Inter 15pt weight 800
+- Height: 48pt; padding 14pt vertical, 30pt horizontal; leading SF play.fill 13pt
+- Pressed: background `#E6E6F2` + scale 0.98
+- Full-width variant on Title Detail; inline width on hero
+
+**Secondary Button (Register / Sign Up / Upgrade)**
+- Background: `gradient/brand` (`linear-gradient(135deg, #7408FF, #FF00FF)`)
+- Text: `#FFFFFF`, Inter 15pt weight 800
+- Corner radius: 8pt; height 48pt
+- Pressed: `filter: brightness(0.92)` + scale 0.98
+
+**Tertiary Button (+ My List / Share / Download)**
+- Background: `rgba(255,255,255,0.10)`
+- Border: 1pt `rgba(255,255,255,0.25)`
+- Text + icon: `#FFFFFF`, Inter 14pt weight 700
+- Corner radius: 8pt; height 44pt; on-detail often icon-over-label stacked (icon 22pt, label 11pt)
+- Pressed: background `rgba(255,255,255,0.18)`
+
+**Text Button (More Like This / See All / Cast & Crew)**
+- Font: Inter 14pt weight 700
+- Color: `#FF4FD8` (Tubi Pink)
+- No background, no underline
+- Pressed: opacity 0.7
+
+**Icon Button (top bar: download, search, profile)**
+- 24pt glyph in 44pt hit area
+- Default `#FFFFFF`; no background
+- Active/selected tints to magenta `#FF00FF`
+
+### Core Atoms
+
+**Poster Card (the core content unit)**
+- Aspect ratio: 2:3 (e.g., 100×150pt on a 390pt screen, ~3.4 visible per row)
+- Corner radius: 10pt
+- Shadow: `0 6px 16px rgba(0,0,0,0.45)`
+- Leading-top **FREE tag**: `#FFD400` bg, `#1A0A2A` text, 8pt, weight 900, 2×5pt padding, 3pt radius
+- Optional bottom caption overlay: title 11pt weight 700 `#FFFFFF` with `text-shadow: 0 1px 4px rgba(0,0,0,0.8)`
+- In-progress variant: 4pt `gradient/progress` bar pinned to the card's bottom edge
+- Focused/selected: 2pt `gradient/focus` ring + scale 1.04 (150ms)
+
+**Featured Hero**
+- Height: ~230–300pt (≈ 60% of viewport width tall)
+- Full-bleed backdrop image/gradient, corner radius 18pt (inset 14pt from screen edges) or full-bleed on Detail
+- `gradient/hero-scrim` bottom fade for text legibility
+- Top-left badge: "TUBI ORIGINAL" / genre — `gradient/brand` pill, 9pt weight 800 caps
+- Stacked: title (32pt/900) → meta line (11pt/500 `#B9B9D6`) → button row (white Play Free + circular + add)
+- Auto cross-dissolves between 4–6 featured titles every ~6s (400ms fade)
+
+**Row Header**
+- Title 22pt weight 800; optional trailing "See All ›" in `#FF4FD8` 13pt weight 700
+- 16pt horizontal inset, 10pt bottom gap before the poster strip
+
+**Free Tag / Badge Chip**
+- "FREE": `#FFD400` fill, `#1A0A2A` text — the signature
+- "TUBI ORIGINAL": `gradient/brand` fill, white text
+- "NEW" / "LEAVING SOON": `#1E1E52` fill, `#FF4FD8` text
+- All: 11pt weight 700 caps, +0.4pt tracking, 3pt radius, 2×6pt padding
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe-area home indicator
+- Background: `rgba(10,10,42,0.96)` with `backdrop-filter: blur(20px) saturate(180%)`, 0.5pt top border `#2A2A5C`
+- Tabs (5): Home, Search, Live TV, My List, Account
+- Icon size: 22pt; label Inter 10pt weight 600
+- Active: icon + label in `#FF00FF` (magenta), icon filled
+- Inactive: `#7A7AA0`
+- No pill indicator — color + fill change only
+
+**Top Bar (Home)**
+- Height: 44pt + safe area
+- Leading: `tubi` gradient wordmark (≈22pt cap height)
+- Trailing: download, search, profile icons (24pt, `#FFFFFF`, 16pt gap)
+- Transparent over hero; gains `#0A0A2A` background after scroll-past-hero
+
+**Title Detail Nav**
+- Transparent over backdrop; back chevron top-left (`#FFFFFF`, 24pt, in a 32pt circular `rgba(0,0,0,0.4)` scrim)
+- Trailing: cast / share icons
+
+### Input Fields
+
+**Search Bar**
+- Height: 44pt
+- Background: `#1E1E52`
+- Corner radius: 10pt
+- Leading magnifyingglass 16pt `#7A7AA0`
+- Placeholder "Search movies, shows, channels" 14pt `#7A7AA0`
+- Text: `#FFFFFF` 15pt
+- Focus: 1.5pt `#7408FF` border
+
+**Search Results Grid**
+- 3-column poster grid, 10pt gutter, 16pt screen inset, FREE tag on each
+
+### Distinctive Components
+
+**Live TV EPG Guide**
+- Vertical list of channel rows; each row: leading 56pt channel logo tile (`#15153D` bg, 10pt radius) + channel name (15pt/600) + a horizontally-scrolling timeline of program blocks
+- Program block: `#1E1E52` fill, 10pt radius, 8pt padding, program title 13pt/600 + time range 11pt/500 `#B9B9D6`
+- "On Now" block: `gradient/brand` left border (3pt) + faint gradient wash; leading `#FF3B5C` "LIVE" dot
+- Sticky time-header strip across the top (every 30 min), `#7A7AA0` 11pt
+- Tapping "On Now" → full-screen player; tapping future block → reminder/detail sheet
+
+**Continue-Watching Card**
+- Poster with a 4pt `gradient/progress` bar at the bottom edge (width = % watched)
+- Below caption: "41 min left" or "S2:E4" in 12pt `#B9B9D6`
+- Long-press → "Remove from Continue Watching" context sheet
+
+**Tubi Original Badge**
+- Pill: `gradient/brand` fill, white "TUBI ORIGINAL" text 9pt weight 800 caps, top-left of hero/poster
+
+**Ad Marker (player)**
+- During free playback, a thin `#FFD400` segment-marked scrubber shows ad-break positions
+- "Ad · 0:15" chip top-left during an ad in `rgba(0,0,0,0.6)` with `#FFD400` accent
+
+**Genre Rail Pills (browse)**
+- Horizontal scroller of pills: `#1E1E52` bg, `#FFFFFF` 14pt/600, 10pt radius; selected → `gradient/brand` fill
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 20, 24, 32, 40, 48, 64
+- Screen horizontal inset: 16pt
+- Poster gutter: 10pt
+- Row vertical rhythm: 16pt between a row's last poster and the next row header
+- Hero inset from screen edges: 14pt (rounded 18pt) on Home; full-bleed on Detail
+
+### Grid & Container
+- iPhone: 16pt insets; poster rows scroll edge-to-edge (first poster aligned to 16pt inset, content bleeds past right edge)
+- Poster row: ~3.4 cards visible at 390pt width
+- Search / browse grid: 3 columns, 10pt gutter
+- iPad: 5–6 column poster grids; hero spans full width with larger 36–40pt title
+- Live TV guide: fixed-width channel-label column (96pt) + horizontally-scrolling program timeline
+
+### Whitespace Philosophy
+- **Density over air**: Tubi intentionally packs the screen — many posters per row, tight 10pt gutters — to communicate catalog breadth ("thousands of free titles"). This is the opposite of a minimalist content app.
+- **Hero breathes, rows pack**: the featured hero gets generous height and a clear scrim; the rows beneath are deliberately dense.
+- **Edge-bleeding rows**: poster strips run off the right edge to signal "there's more, keep scrolling".
+- **Badges never crowd the title**: the FREE tag sits in the poster's top-left corner away from the bottom caption.
+
+### Border Radius Scale
+- Square (0pt): full-bleed hero/backdrop on Detail, dividers
+- Subtle (4pt): progress bars, ad markers, tiny tags
+- Standard (8pt): buttons, search bar
+- Card (10pt): posters, channel tiles, program blocks, genre pills
+- Hero (18pt): inset featured hero on Home
+- Sheet (20pt): bottom sheets, modals (top corners)
+- Pill (500pt): badge chips, filter pills
+- Circle (50%): profile avatars, circular hero add/secondary buttons
+
+## 6. Depth & Elevation
+
+Tubi uses **glow and gradient** more than shadow. On the dark indigo canvas, elevation is conveyed by surface lightening (`#15153D` → `#1E1E52` → `#262666`) plus a soft black drop shadow on floating content (posters, sheets). The brand gradient itself acts as a "spotlight" cue on focus.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, on `#0A0A2A` | Page background, row headers, body text |
+| Raised (Level 1) | Surface `#15153D`, `0 6px 16px rgba(0,0,0,0.45)` | Poster cards, channel tiles, list rows |
+| Floating (Level 2) | Surface `#1E1E52`, `0 12px 28px rgba(0,0,0,0.55)` | Context menus, dropdowns, focused poster lift |
+| Sheet (Level 3) | Surface `#15153D`, `0 -10px 40px rgba(0,0,0,0.6)` | Bottom sheets (My List actions, episode picker) |
+| Modal Overlay | Scrim `rgba(5,5,16,0.7)` | Dim behind modals and sheets |
+| Focus Glow | 2pt `gradient/focus` ring + scale 1.04 | Selected poster / focused interactive element |
+
+**Shadow Philosophy**: Shadows are deep (0.45–0.6 opacity) so they register against the dark canvas, but they're never the brand statement — the *gradient glow* is. A focused poster doesn't just shadow; it gains a purple→magenta ring and scales up, as if lit by the brand.
+
+### Motion
+- **Hero cross-dissolve**: featured titles auto-rotate every ~6s with a 400ms opacity cross-fade; backdrop ken-burns drift (very slow scale 1.0→1.05 over the dwell)
+- **Poster focus/press**: scale 1.0 → 1.04 over 150ms ease-out + gradient ring fades in; release reverses in 120ms
+- **Row scroll**: native momentum horizontal scroll; deceleration standard iOS
+- **Wordmark shimmer**: on app launch / Home appear, a subtle highlight sweeps across the `tubi` gradient wordmark over 800ms (once)
+- **Play transition**: tapping Play scales the poster/hero up and cross-fades into the player over 350ms; player chrome fades out after 3s idle
+- **Tab switch**: instant content swap; active icon morphs color to magenta + a 200ms fill animation
+- **Bottom sheet**: slides up 300ms ease-out, dims background to `rgba(5,5,16,0.7)`; dismiss drag 1:1, threshold 40%
+- **Add to My List**: + icon morphs to ✓ with a 250ms spring + brief `#1FD17B` flash + soft haptic
+- **Progress bar**: continue-watching fill animates from 0 → current % over 500ms on first appear
+- **Haptics**: soft impact on Play, add-to-list confirm, and tab switch; selection tick on focus change in Live TV guide
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the deep indigo-black canvas (`#0A0A2A`) — cool and slightly violet, NOT neutral black
+- Make the purple→magenta gradient (`#7408FF` → `#FF00FF`) the brand signature — wordmark, focus, active tab, progress, secondary CTA
+- Keep the primary Play button pure white (`#FFFFFF`) with indigo-black text — it must out-contrast everything
+- Put the yellow `#FFD400` "FREE" tag on posters — it's a feature, lean into "free"
+- Pack poster rows densely (3+ visible, 10pt gutters) — catalog breadth is the pitch
+- Use heavy title weights (800–900) with tight negative tracking — marquee feel
+- Bleed poster rows off the right edge — signals "keep scrolling, there's more"
+- Use ALL-CAPS tracked labels for badges/tags only (FREE, TUBI ORIGINAL, NEW)
+- Render the Live TV EPG with sticky time header + gradient-marked "On Now" blocks
+- Give focused posters a gradient ring + 1.04 scale (lit-by-brand)
+- Use cool lavender-grey (`#B9B9D6`) for metadata, not neutral grey
+
+### Don't
+- Don't add a light mode — Tubi is dark-only; defer to OS for system sheets
+- Don't use a neutral or warm dark canvas — the indigo-violet base is what makes the gradient glow
+- Don't replace the gradient with a single flat purple for brand moments — the spectrum *is* the identity
+- Don't hide or shrink the "FREE" tag — it's core messaging, never an apology
+- Don't make poster rows sparse/airy — density communicates the value prop
+- Don't set titles below 700 weight — heavy display weight is the brand
+- Don't tint the primary Play button — it stays white for max contrast
+- Don't use the gradient as body text or large fills behind reading copy — it's for marks, accents, focus
+- Don't add positive tracking to titles/body — only badges are tracked/uppercased
+- Don't use light shadows — they vanish on the dark canvas; go deep (0.45–0.6) or use the gradient glow
+- Don't animate aggressively in content rows — motion is punchy but brief (120–400ms)
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Hero ~210pt tall; ~3.2 posters/row; tab labels stay 10pt |
+| iPhone 13/14/15 | 390pt | Standard layout; hero ~230pt; ~3.4 posters/row |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; top bar respects it |
+| iPhone 15/16 Pro Max | 430pt | Hero ~260pt; ~3.8 posters/row; larger hero title (34pt) |
+| iPad (portrait) | 768pt | Full-width hero (title 36pt); 5-column poster grids; 2-up rows |
+| iPad (landscape) | 1024pt+ | Cinematic full-width hero (title 40pt); 6-column grids; Live TV guide shows more channels |
+
+### Dynamic Type
+- Hero/detail titles, row headers, body, synopsis: full scale
+- Badge text, tab labels, progress labels, ad-marker chip, EPG time header: FIXED (layout-sensitive)
+- Poster captions: scale to L only, then truncate with ellipsis
+
+### Orientation
+- Phone: portrait-locked for browse; player rotates to landscape (and supports fullscreen landscape)
+- iPad: all orientations; landscape gets the cinematic wide hero
+- Live TV player: landscape fullscreen with overlaid guide drawer
+
+### Touch Targets
+- Poster card: full card tappable (min 100×150pt)
+- Tab bar icons: 22pt glyph, 56pt row height, full-segment tap
+- Play button: 48pt tall
+- Top-bar icons: 24pt glyph, 44pt hit
+- EPG program block: min 44pt tall, full block tappable
+
+### Safe Area Handling
+- Top: top bar + hero respect safe area and Dynamic Island; backdrop bleeds *under* the status bar
+- Bottom: tab bar respects home indicator; player chrome insets controls above it
+- Sides: 16pt content inset; hero backdrop bleeds to screen edges (Detail) or 14pt inset (Home)
+- Player: controls avoid notch in landscape
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (indigo-black): `#0A0A2A`
+- Surface 1 / 2 / 3: `#15153D` / `#1E1E52` / `#262666`
+- Divider: `#2A2A5C`
+- Gradient start (Tubi Purple): `#7408FF`
+- Gradient end (Tubi Magenta): `#FF00FF`
+- Brand gradient: `linear-gradient(135deg, #7408FF, #FF00FF)`
+- Tubi Pink (links): `#FF4FD8`
+- Play button: `#FFFFFF` / text `#0A0A2A`
+- FREE tag: `#FFD400` / text `#1A0A2A`
+- Text primary / secondary / tertiary: `#FFFFFF` / `#B9B9D6` / `#7A7AA0`
+- Success / Error / Live: `#1FD17B` / `#FF4A6E` / `#FF3B5C`
+
+### Example Component Prompts
+- "Build the Tubi Home featured hero in SwiftUI: a 230pt-tall card inset 14pt from screen edges, 18pt corner radius, full-bleed backdrop with a `linear-gradient(180deg, transparent 40%, rgba(10,10,42,0.95) 100%)` scrim. Top-left a 'TUBI ORIGINAL' pill with `linear-gradient(135deg,#7408FF,#FF00FF)` fill, white Inter 9pt weight 800 ALL CAPS +0.4pt tracking. Bottom-left stacked: title Inter 32pt weight 900 white -0.6pt tracking, meta line Inter 11pt weight 500 `#B9B9D6`, then a button row: white 'Play Free' button (48pt tall, 8pt radius, `#0A0A2A` text + leading play.fill) and a 44×38pt circular `rgba(255,255,255,0.16)` '+' button."
+
+- "Create a Tubi poster card: 100×150pt (2:3), 10pt corner radius, `0 6px 16px rgba(0,0,0,0.45)` shadow. Top-left a 'FREE' tag — `#FFD400` background, `#1A0A2A` text, Inter 8pt weight 900, 2×5pt padding, 3pt radius. Optional bottom caption: title Inter 11pt weight 700 white with `text-shadow: 0 1px 4px rgba(0,0,0,0.8)`. On focus: 2pt `linear-gradient(135deg,#7408FF,#FF00FF)` ring + scale 1.04 over 150ms."
+
+- "Render a Tubi content row: header 'Trending Now' in Inter 22pt weight 800 white -0.3pt tracking at 16pt leading inset, optional trailing 'See All ›' in `#FF4FD8` 13pt weight 700. Below: a horizontal scroll of 2:3 poster cards, 10pt gutter, first card at 16pt inset, content bleeding past the right screen edge. 16pt vertical gap to the next row."
+
+- "Build a Tubi continue-watching card: standard poster with a 4pt-tall progress bar pinned to the bottom edge — `linear-gradient(90deg,#7408FF,#FF00FF)` fill at 62% width on a `rgba(255,255,255,0.16)` track. Below the card: '41 min left' in Inter 12pt weight 500 `#B9B9D6`. Animate the fill 0 → 62% over 500ms on first appear."
+
+- "Render the Tubi Live TV EPG guide: a vertical list of channel rows. Each row: a 56pt square channel logo tile (`#15153D`, 10pt radius) + channel name Inter 15pt weight 600 white, then a horizontally-scrolling timeline of program blocks. Each block: `#1E1E52` fill, 10pt radius, 8pt padding, title Inter 13pt weight 600 + time range Inter 11pt weight 500 `#B9B9D6`. The 'On Now' block gets a 3pt `linear-gradient(135deg,#7408FF,#FF00FF)` left border, a faint gradient wash, and a leading `#FF3B5C` 'LIVE' dot. Sticky 30-min time header strip on top in `#7A7AA0` 11pt."
+
+- "Build the Tubi bottom tab bar: 56pt tall + safe area, `rgba(10,10,42,0.96)` background with `backdrop-filter: blur(20px) saturate(180%)`, 0.5pt top border `#2A2A5C`. Five tabs — Home, Search, Live TV, My List, Account — 22pt icons, Inter 10pt weight 600 labels. Active tab icon + label `#FF00FF` (magenta) with the icon filled; inactive `#7A7AA0`. No pill indicator."
+
+### Iteration Guide
+1. Canvas is deep indigo-black `#0A0A2A` (cool, slightly violet) — NOT neutral black, NOT charcoal; dark-only
+2. The purple→magenta gradient (`#7408FF` → `#FF00FF`) is THE brand — wordmark, focus, active tab, progress, secondary CTA
+3. Primary Play button is pure white `#FFFFFF` with `#0A0A2A` text — highest contrast, never tinted
+4. Every poster carries a yellow `#FFD400` "FREE" tag — it's a feature, never hidden
+5. Poster rows are dense (3+ visible, 10pt gutters) and bleed off the right edge — catalog breadth is the pitch
+6. Titles are heavy (800–900) with tight negative tracking; only badges are ALL-CAPS + positive-tracked
+7. Metadata uses cool lavender-grey `#B9B9D6`, not neutral grey
+8. Elevation = surface lightening + deep shadow (0.45–0.6); focus = gradient ring + 1.04 scale (lit-by-brand)
+9. Live TV is an EPG channel grid with a sticky time header and gradient-marked "On Now" blocks
+10. Bottom tabs: Home / Search / Live TV / My List / Account — active icon magenta `#FF00FF`, no pill