designmd-forge 1.2.0

package/dist/data/designs/ios-pluto-tv.md

@@ -0,0 +1,362 @@
+# Design System Inspiration of Pluto TV (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Pluto TV's iOS app is, more than almost any other streaming app, **one screen**: the **Live TV channel guide (EPG)**. Where Netflix and Tubi lead with poster art, Pluto leads with a grid that looks like cable television rebuilt for a phone — because that's exactly what Pluto is: free, ad-supported *linear* TV with hundreds of always-on channels. The canvas is a deep cool navy (`#0B0F1F`), not pure black, evoking the soft glow of a TV in a dark room. Sitting on that navy is **Pluto Blue (`#0048FF`)** — a saturated, electric, almost-cobalt blue used for the wordmark block, primary CTAs, and the active category pill — paired with the brand's signature **yellow (`#FFE100`)**, which is reserved almost exclusively for the *single most important idea in the app*: what is **on now**.
+
+The signature screen is the **EPG grid**. It has three fixed parts: (1) a **mini-player** pinned at the top that streams whatever channel is currently selected, with a `LIVE` badge and the current program's title; (2) a **sticky time-bar** marking 30-minute increments that stays put as you scroll; and (3) the **grid body** — a vertically-scrolling list of channel rows, each with a **fixed left column** (channel number + channel logo tile) and a **horizontally-scrolling timeline of program cells** to its right. The cell airing right now — the **"On Now" cell** — is the visual anchor of the entire UI: it lifts to a slightly brighter surface (`#1C2440`) and gets a **3pt yellow (`#FFE100`) left border**. That yellow bar is Pluto's most recognizable design signature; your eye is trained to scan down the left edge of the grid for it. Tapping any cell either tunes the mini-player to that channel (On Now) or opens a schedule/detail sheet (future programs).
+
+The atmosphere is **utilitarian, channel-surfing, and proudly retro-broadcast**. Pluto isn't trying to feel like a premium SVOD app; it's trying to feel like *free TV you can flip through*. The category pills across the top (All, Featured, Movies, News, Sports, Comedy…) work like genre "tiers" on a cable box. The secondary surfaces — On Demand rows, channel detail, the player — are more conventional streaming layouts, but they all defer to the guide. Typography is a clean humanist grotesque (Manrope is the closest free analog): heavy 700–800 weights for titles and channel names, compact 12–13pt for program cells, and ALL-CAPS tracked micro-labels for `LIVE`/`ON NOW`. The result reads like a modern, well-organized TV guide channel — dense, scannable, and instantly familiar to anyone who's ever held a remote.
+
+**Key Characteristics:**
+- Deep cool-navy canvas (`#0B0F1F`) — late-night TV glow, not pure black; dark-only, no light mode
+- The product *is* the EPG channel guide — a grid, not a poster wall
+- Pluto Blue (`#0048FF`) for the wordmark, primary CTAs, active category pill
+- Signature yellow (`#FFE100`) reserved for "on now / live" emphasis and the active tab
+- Pinned mini-player on top of the guide — streams the selected channel with a LIVE badge
+- Sticky 30-minute time-bar that stays fixed while the grid scrolls
+- Fixed left channel column (channel number + logo tile) + horizontally-scrolling program timeline
+- **"On Now" cell** = brighter surface (`#1C2440`) + 3pt yellow left border — the app's #1 design signature
+- Red `#FF3B5C` dot + "LIVE" label as the universal live indicator
+- Category-tier pills across the top (All / Featured / Movies / News / Sports / Comedy)
+- Bottom tabs: Live TV / On Demand / Search / My Pluto / Account — active icon in yellow
+
+## 2. Color Palette & Roles
+
+### Primary (Brand & Interactive)
+- **Pluto Blue** (`#0048FF`): Primary brand color — wordmark block, primary CTA ("Watch Live"), active category pill, selected channel highlight.
+- **Pluto Blue Pressed** (`#0039CC`): Pressed state of blue CTAs.
+- **Pluto Blue Bright** (`#2C6BFF`): Hover/focus lift of blue, secondary blue accents, links on dark surfaces.
+- **Pluto Yellow** (`#FFE100`): The "on now / live emphasis" color — On Now cell left border, active tab icon, "Start Watching" highlight CTA. Text on yellow is `#0B0F1F`.
+- **Pluto Cyan** (`#00C2FF`): Tappable text links, channel-name accents, "Full Schedule".
+
+### Canvas & Surfaces (Dark — the only mode)
+- **Canvas Navy** (`#0B0F1F`): Primary app background; also the gap-line color between program cells.
+- **Surface 1** (`#141A2E`): Channel-column tiles, idle program cells, list rows, sheets.
+- **Surface 2** (`#1C2440`): The **On Now** cell, elevated cards, pressed rows, the now-playing bar.
+- **Surface 3** (`#25304F`): Highest elevation — popovers, modals, dropdowns.
+- **Divider** (`#2A3556`): Hairline grid lines (row separators, channel-column border, time-bar underline).
+
+### Text
+- **Text Primary** (`#FFFFFF`): Titles, channel names, On Now program titles, body.
+- **Text Secondary** (`#9DA8C7`): Metadata, idle category pills, schedule times — a cool slate.
+- **Text Tertiary** (`#6B7595`): Channel numbers, time-bar labels, future-program times, disabled.
+- **Text On-Yellow** (`#0B0F1F`): Text on the yellow highlight CTA / chips.
+- **Text On-Blue** (`#FFFFFF`): Text on blue CTAs.
+
+### Semantic & Accent
+- **Live Red** (`#FF3B5C`): The universal LIVE indicator dot + "LIVE" label (player, mini-player, now-playing bar).
+- **Success Green** (`#21D07A`): "Added to Watchlist", reminder set.
+- **Error Red** (`#FF4A6E`): Playback errors, failed actions, destructive confirms.
+- **Channel Logo Tints**: Channel logo tiles use per-channel brand gradients (e.g., Action `#0048FF→#00C2FF`, Movies `#FF6B2C→#FF2C6B`, Sports `#21D07A→#00A6A6`) — these are content, not system tokens.
+
+### Note on Theme
+Pluto TV ships **dark-only**. There is no light mode; the navy canvas is the brand environment (it makes the blue and yellow read like backlit broadcast graphics). Do not invent a light palette — defer to the OS for any system surface.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Manrope` (by Mikhail Sharanda / Mirko Velimirović, SIL OFL) — a clean, semi-rounded humanist grotesque that closely matches Pluto's brand sans (geometric, friendly, strong at heavy weights).
+- **Alternative**: `Inter` (SIL OFL) — acceptable substitute if Manrope is unavailable; slightly more neutral.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numerals**: Tabular figures for channel numbers and schedule times so the grid columns align perfectly.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Manrope | 32pt | 800 | 1.1 | -0.5pt | Onboarding / empty-state headlines |
+| Screen Title | Manrope | 24pt | 800 | 1.15 | -0.3pt | "Live TV Guide", channel detail title |
+| Section | Manrope | 20pt | 700 | 1.2 | -0.2pt | "Featured Channels", On Demand rails |
+| Now Playing | Manrope | 17pt | 700 | 1.2 | -0.2pt | Mini-player current program title |
+| Body | Manrope | 15pt | 400 | 1.5 | 0pt | Descriptions, synopsis, body copy |
+| Channel Name | Manrope | 13pt | 700 | 1.2 | 0pt | Channel name under logo / in lists |
+| Program Title | Manrope | 13pt | 600 | 1.2 | 0pt | EPG cell program titles |
+| Meta / Schedule | Manrope | 12pt | 500 | 1.3 | 0pt | "9:00 – 10:00 PM · Action" |
+| Channel Number | Manrope | 10pt | 800 | 1.0 | 0.2pt | "612" in the channel column (tabular) |
+| Time-bar Label | Manrope | 10pt | 700 | 1.0 | 0pt | "9:30 PM" sticky time markers (tabular) |
+| Live / On-Now Badge | Manrope | 10pt | 800 | 1.0 | 0.5pt | "LIVE", "ON NOW" — ALL CAPS |
+| Tab Label | Manrope | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Heavy and scannable**: channel names and titles are 700–800. The guide must be readable in a glance while channel-surfing.
+- **Compact in the grid**: program cells use 12–13pt — the grid prioritizes information density (many channels/programs visible) over generous type.
+- **Tabular numerals everywhere numeric**: channel numbers and times use tabular figures so the fixed channel column and time-bar stay perfectly aligned as the grid scrolls.
+- **ALL CAPS for status only**: `LIVE`, `ON NOW`, `NEW` are uppercase with positive tracking (`+0.5pt`); program titles and body are sentence case.
+- **Cool slate secondary**: metadata is `#9DA8C7` (a cool blue-grey), harmonizing with the navy — never warm grey.
+- **Dynamic Type**: titles, body, synopsis scale; EPG cell text, time-bar labels, channel numbers, and badges stay FIXED (the grid is layout-locked).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Watch Live / Watch Now)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#0048FF` (Pluto Blue)
+- Text + leading play glyph: `#FFFFFF`, Manrope 15pt weight 800
+- Height: 48pt; padding 13pt vertical, 28pt horizontal
+- Pressed: background `#0039CC` + scale 0.98
+
+**Highlight Button (Start Watching / Resume — high-emphasis moments)**
+- Background: `#FFE100` (Pluto Yellow)
+- Text: `#0B0F1F`, Manrope 15pt weight 800
+- Corner radius: 8pt; height 48pt
+- Pressed: `filter: brightness(0.94)` + scale 0.98
+- Use sparingly — yellow signals "the thing that's live/important", not every button
+
+**Secondary Button (+ Watchlist / Share / Set Reminder)**
+- Background: transparent
+- Border: 1pt `rgba(255,255,255,0.30)`
+- Text + icon: `#FFFFFF`, Manrope 14pt weight 700
+- Corner radius: 8pt; height 44pt
+- Pressed: background `rgba(255,255,255,0.08)`
+
+**Text Button (Full Schedule / See All / More Info)**
+- Font: Manrope 14pt weight 700
+- Color: `#00C2FF` (Pluto Cyan)
+- No background, no underline
+- Pressed: opacity 0.7
+
+**Category Pill (All / Movies / News / Sports …)**
+- Idle: `#1C2440` bg, `#9DA8C7` text, Manrope 11pt weight 700, 6×12pt padding, 999pt radius
+- Active: `#0048FF` bg, `#FFFFFF` text
+- Horizontally scrollable strip directly under the guide header
+
+### Core Atoms
+
+**EPG Program Cell (the core unit)**
+- Min height: row height (64pt); width = proportional to program duration along the timeline
+- Idle: `#141A2E` fill, 1pt `#0B0F1F` right gap-line; title Manrope 13pt weight 600 `#FFFFFF` (truncates with ellipsis), time Manrope 12pt weight 500 `#6B7595`
+- **On Now**: `#1C2440` fill + **3pt `#FFE100` left border** + title in full white — the app's signature state
+- Future cell: same as idle but time-only label `#6B7595`
+- Pressed: brief `#25304F` flash; On Now tap → tune mini-player; future tap → schedule/reminder sheet
+
+**Channel Column Tile (fixed left column)**
+- Width: 86pt; row height 64pt; `#141A2E` fill, 0.5pt `#2A3556` right border
+- Stacked center: channel number Manrope 10pt weight 800 `#6B7595` (tabular) + channel logo tile (≈40×28pt, 5pt radius, per-channel brand gradient, channel abbreviation in 9pt weight 800 white)
+- Sticky horizontally (stays while program timeline scrolls)
+
+**Time-Bar (sticky header)**
+- Sits above the grid body, offset by the 86pt channel-column width
+- 30-minute increments; each label Manrope 10pt weight 700 `#6B7595` (tabular), min-width matched to the timeline scale
+- `#0B0F1F` background, 0.5pt `#2A3556` bottom border, `z-index` above rows, scrolls horizontally in sync with the program timeline
+
+**Mini-Player (pinned top)**
+- Height ≈150pt; full-bleed video/gradient
+- Top-left `LIVE` chip: `rgba(0,0,0,0.4)` bg, `#FF3B5C` dot + white "LIVE" 10pt weight 800
+- Bottom-left: channel line ("CH 612 · PLUTO TV ACTION") in `#00C2FF` 11pt weight 700, program title 18pt weight 800, a thin `#FFE100` progress bar (program elapsed) on a `rgba(255,255,255,0.2)` track
+- Tap → expand to full-screen player
+
+**Now-Playing Bar (compact, e.g. when browsing On Demand)**
+- `#1C2440` fill, 12pt radius, 12×14pt padding
+- 56×38pt thumbnail (6pt radius) + title 13pt weight 700 + "CH 612 · Pluto TV Action" 11pt `#9DA8C7` + trailing `#FF3B5C` dot + "LIVE" 10pt weight 800
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 54pt + safe-area home indicator
+- Background: `rgba(11,15,31,0.96)` with `backdrop-filter: blur(20px) saturate(180%)`, 0.5pt top border `#2A3556`
+- Tabs (5): Live TV, On Demand, Search, My Pluto, Account
+- Icon size: 22pt; label Manrope 10pt weight 600
+- Active: icon + label in `#FFE100` (yellow), icon filled
+- Inactive: `#6B7595`
+- No pill indicator — color + fill change only
+
+**Guide Header**
+- Title "Live TV Guide" Manrope 15pt weight 800 + a "Now · 9:41 PM" clock in `#9DA8C7` 11pt weight 700
+- Category pill strip directly beneath
+
+**Channel Detail / On Demand Nav**
+- Standard top bar: back chevron (`#FFFFFF`, 24pt) + screen title (24pt/800) + optional trailing search/cast
+
+### Input Fields
+
+**Search Bar**
+- Height: 44pt; background `#1C2440`; corner radius 8pt
+- Leading magnifyingglass 16pt `#6B7595`
+- Placeholder "Search channels, shows, movies" 14pt `#6B7595`
+- Text `#FFFFFF` 15pt; focus → 1.5pt `#0048FF` border
+
+**Search Results**
+- Sectioned: "Channels" (logo + name + channel number rows) and "On Demand" (poster grid, 3-col)
+
+### Distinctive Components
+
+**EPG Guide (the signature surface)**
+- Full assembly: pinned mini-player → guide header → category pills → sticky time-bar → scrolling channel rows (fixed channel column + horizontal program timeline). See atoms above. The yellow-left-border "On Now" cell is the defining detail.
+
+**On Now Indicator System**
+- Three coordinated signals for "this is airing now": (1) yellow 3pt left border on the EPG cell, (2) `#FF3B5C` dot + "LIVE" in the mini-player/now-playing bar, (3) a thin `#FFE100` elapsed-progress bar in the player. Together they make "what's live" unmistakable.
+
+**Channel Logo Tile**
+- A small rounded rectangle with a per-channel brand gradient and an abbreviated channel name — used in the guide's channel column, search results, and channel detail headers.
+
+**Category-Tier Pills**
+- The cable-box-style genre tiers (All, Featured, Movies, News, Sports, Comedy, Reality, Kids…) — selecting one filters the visible channel rows; active pill is solid Pluto Blue.
+
+**Schedule / Reminder Sheet**
+- Tapping a future program opens a bottom sheet: program art, title, "Airs 10:00 PM · Pluto TV Action", synopsis, and a yellow "Set Reminder" CTA (→ ✓ + `#21D07A` confirm)
+
+**Ad Marker (player)**
+- Free linear playback shows ad breaks; the scrubber has `#FFE100` segment ticks at break points; an "Ad · 0:15" chip top-left in `rgba(0,0,0,0.6)`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48
+- Screen horizontal inset: 16pt (for non-grid surfaces)
+- Channel-column width: 86pt (fixed)
+- EPG row height: 64pt (fixed)
+- Program cell internal padding: 8pt vertical, 10pt horizontal
+- Time-bar increment: 30 minutes; pixel-width of 30 min defines the timeline scale
+
+### Grid & Container
+- The EPG is a **two-axis fixed-grid**: fixed Y (channel rows, vertical scroll) × scrollable X (program timeline) with a frozen left column and frozen top time-bar
+- iPhone: channel column 86pt; ~3.5 thirty-minute slots visible at 390pt width
+- Non-grid surfaces (On Demand, detail): 16pt insets, conventional rail/poster layout
+- iPad: wider channel column (110pt), more time slots visible, mini-player can dock to a side region in landscape
+- Search/On Demand grid: 3 columns, 10pt gutter
+
+### Whitespace Philosophy
+- **Grid density is the point**: the EPG deliberately packs many channels and programs on screen — it's a TV guide, breadth and scannability beat whitespace.
+- **Frozen frame, scrolling content**: the channel column and time-bar never move; only the program timeline and the row list scroll. This stability is what makes the guide feel like a real TV guide.
+- **The yellow bar gets clearance**: nothing crowds the On Now cell's left edge — the 3pt yellow border must always be visible at a glance.
+- **Non-grid screens breathe more**: On Demand and detail pages use conventional, more generous streaming spacing.
+
+### Border Radius Scale
+- Square (0pt): EPG cells, channel-column tiles, time-bar (the grid is rectilinear like a real TV guide)
+- Tiny (4pt): progress bars, ad ticks
+- Small (5–6pt): channel logo tiles, now-playing thumbnail
+- Standard (8pt): buttons, search bar, cards
+- Card (10–12pt): On Demand posters, now-playing bar, sheets
+- Pill (999pt): category-tier pills, LIVE chips
+- Circle (50%): avatars, the live dot
+
+## 6. Depth & Elevation
+
+Pluto conveys elevation through **surface lightening on a flat navy field**, with shadow used sparingly (the EPG itself is intentionally flat and rectilinear, like a broadcast graphic).
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, on `#0B0F1F` | EPG grid background, time-bar, body text |
+| Grid Surface | `#141A2E`, no shadow | Idle program cells, channel-column tiles, list rows |
+| On Now / Raised | `#1C2440` + 3pt `#FFE100` left border | The On Now cell, now-playing bar, elevated cards |
+| Floating (Level 2) | `#25304F`, `0 10px 28px rgba(0,0,0,0.5)` | Dropdowns, context menus, schedule popovers |
+| Sheet (Level 3) | `#141A2E`, `0 -10px 36px rgba(0,0,0,0.55)` | Bottom sheets (reminder, channel actions) |
+| Modal Overlay | Scrim `rgba(4,6,15,0.7)` | Dim behind modals and sheets |
+
+**Shadow Philosophy**: The guide is a flat, gridded broadcast surface — it uses *brightness and the yellow border*, not drop shadows, to express state and hierarchy (a real TV guide has no shadows). Shadows appear only on truly floating UI (sheets, popovers, expanded player chrome). The mini-player is the one place a soft inner vignette is used for text legibility.
+
+### Motion
+- **Channel surf (cell → mini-player)**: tapping an On Now cell cross-fades the mini-player video to the new channel over ~300ms; the tapped cell briefly flashes `#25304F`
+- **Time-bar / timeline scroll**: horizontal scroll of the program timeline is 1:1 with the sticky time-bar (they move together, instantly); vertical channel-row scroll is native momentum
+- **On Now border pulse (optional)**: the yellow left border can do a very subtle 2s breathing opacity (0.85↔1.0) to draw the eye — keep it minimal
+- **Mini-player progress**: the `#FFE100` elapsed bar advances in real time; on channel change it resets and animates to current elapsed over 300ms
+- **Category filter**: switching a pill cross-fades the visible rows over 200ms; selected pill fills with Pluto Blue (150ms)
+- **Sheet present**: bottom sheet slides up 300ms ease-out; scrim fades to `rgba(4,6,15,0.7)`; dismiss drag 1:1, threshold 40%
+- **Set Reminder**: CTA morphs to ✓ with a 250ms spring + brief `#21D07A` flash + soft haptic
+- **Player chrome**: tap toggles controls with a 200ms fade; auto-hide after 3s idle
+- **Tab switch**: instant content swap; active icon animates color to yellow + fill over 200ms
+- **Haptics**: selection tick on channel-cell focus while surfing; soft impact on tune-in and reminder confirm
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the deep cool-navy canvas (`#0B0F1F`) — late-night TV glow, NOT pure black
+- Make the EPG channel guide the centerpiece — it *is* the app
+- Freeze the channel column and time-bar; scroll only the program timeline and row list
+- Mark the "On Now" cell with a brighter surface (`#1C2440`) + **3pt `#FFE100` yellow left border** — the #1 signature
+- Reserve yellow (`#FFE100`) for live/now emphasis and the active tab — never as a generic accent
+- Use Pluto Blue (`#0048FF`) for the wordmark, primary CTA, and active category pill
+- Pin a mini-player on top of the guide that streams the selected channel with a LIVE badge
+- Use a `#FF3B5C` dot + "LIVE" as the universal live indicator everywhere
+- Use tabular numerals for channel numbers and times so the grid stays aligned
+- Keep EPG cells rectilinear (square corners) — it's a broadcast grid, not a card stack
+- Use cool slate (`#9DA8C7`) for metadata, harmonizing with the navy
+
+### Don't
+- Don't add a light mode — Pluto is dark-only; defer to OS for system sheets
+- Don't lead with a poster wall — the guide grid is the identity, not Netflix-style rails
+- Don't let the channel column or time-bar scroll away — the frozen frame is what makes it a TV guide
+- Don't use yellow for ordinary buttons or accents — it must mean "this is on now / live"
+- Don't round the EPG cells into cards — keep the rectilinear broadcast-grid look
+- Don't drop-shadow the grid — use surface brightness + the yellow border for hierarchy
+- Don't use warm grey for metadata — cool slate `#9DA8C7` matches the navy
+- Don't use proportional figures for channel numbers/times — columns will misalign
+- Don't bury the live indicator — `#FF3B5C` + "LIVE" must always be obvious
+- Don't animate the grid aggressively — channel surfing is fast and quiet (200–300ms)
+- Don't make the navy pure black — the slight blue lift is what makes the blue/yellow glow
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Channel column 80pt; ~3 thirty-min slots visible; mini-player ~135pt |
+| iPhone 13/14/15 | 390pt | Standard: channel column 86pt; ~3.5 slots visible; mini-player ~150pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above the mini-player |
+| iPhone 15/16 Pro Max | 430pt | ~4 slots visible; mini-player ~165pt; larger program titles |
+| iPad (portrait) | 768pt | Channel column 110pt; ~6 slots visible; conventional On Demand grid 4-col |
+| iPad (landscape) | 1024pt+ | Mini-player docks to a right rail; guide fills the rest; ~9 slots visible |
+
+### Dynamic Type
+- Screen titles, body, synopsis, now-playing title: full scale
+- EPG cell text, channel numbers, time-bar labels, LIVE/ON-NOW badges, tab labels: FIXED (the grid is layout-locked; scaling them would break column alignment)
+- Schedule-sheet text: scales to L, then truncates
+
+### Orientation
+- Phone: guide is portrait-primary; player rotates to landscape fullscreen
+- iPad: landscape gets the docked mini-player + wide guide layout
+- The frozen channel column / time-bar behavior is preserved in all orientations
+
+### Touch Targets
+- EPG program cell: full cell tappable, min 64pt tall
+- Channel-column tile: full tile tappable (jumps to that channel)
+- Category pill: min 32pt tall, full pill tap
+- Tab bar icons: 22pt glyph, 54pt row, full-segment tap
+- Mini-player: full surface tap → fullscreen
+
+### Safe Area Handling
+- Top: mini-player respects safe area & Dynamic Island; video bleeds under the status bar
+- Bottom: tab bar respects home indicator; player controls inset above it
+- Sides: non-grid screens use 16pt insets; the EPG timeline bleeds to the right edge
+- The sticky time-bar sits below the safe-area / mini-player, never under the notch
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (navy): `#0B0F1F`
+- Surface 1 / 2 / 3: `#141A2E` / `#1C2440` / `#25304F`
+- Divider (grid lines): `#2A3556`
+- Pluto Blue: `#0048FF` (pressed `#0039CC`, bright `#2C6BFF`)
+- Pluto Yellow (on-now/live): `#FFE100` / text on it `#0B0F1F`
+- Pluto Cyan (links): `#00C2FF`
+- Live Red: `#FF3B5C`
+- Text primary / secondary / tertiary: `#FFFFFF` / `#9DA8C7` / `#6B7595`
+- Success / Error: `#21D07A` / `#FF4A6E`
+
+### Example Component Prompts
+- "Build the Pluto TV EPG row in SwiftUI: a 64pt-tall row. Leading: a fixed 86pt channel-column tile — `#141A2E` background, 0.5pt `#2A3556` right border, centered VStack of channel number (Manrope 10pt weight 800 `#6B7595`, tabular) over a 40×28pt logo tile (5pt radius, channel brand gradient, abbreviation in 9pt weight 800 white). Trailing: a horizontally-scrolling row of program cells. Idle cell: `#141A2E`, 1pt `#0B0F1F` right gap-line, program title Manrope 13pt weight 600 white (1 line, ellipsis), time Manrope 12pt weight 500 `#6B7595`, width proportional to duration. The On Now cell: `#1C2440` fill + a 3pt `#FFE100` left border + full-white title."
+
+- "Create the Pluto TV sticky time-bar: a horizontal strip offset 86pt from the left (to clear the channel column), `#0B0F1F` background, 0.5pt `#2A3556` bottom border, `zIndex` above the rows. 30-minute labels in Manrope 10pt weight 700 `#6B7595` (tabular figures), each label min-width matched to the timeline's 30-min pixel scale. It scrolls horizontally in lockstep with the program timeline and stays pinned to the top while channel rows scroll vertically."
+
+- "Build the Pluto TV pinned mini-player: ~150pt tall, full-bleed video with a subtle bottom vignette. Top-left a LIVE chip — `rgba(0,0,0,0.4)` bg, a `#FF3B5C` 7pt dot + 'LIVE' in Manrope 10pt weight 800 white. Bottom-left: channel line 'CH 612 · PLUTO TV ACTION' in `#00C2FF` 11pt weight 700, program title in Manrope 18pt weight 800 white, then a 3pt elapsed-progress bar — `#FFE100` fill on a `rgba(255,255,255,0.2)` track. Tapping the player goes fullscreen."
+
+- "Render the Pluto TV category-tier pill strip: a horizontal scroll of pills directly under the guide header. Idle pill: `#1C2440` background, `#9DA8C7` text, Manrope 11pt weight 700, 6×12pt padding, fully-rounded (999pt). Active pill: `#0048FF` background, white text. Selecting a pill filters the visible channel rows; the fill animates over 150ms."
+
+- "Build the Pluto TV bottom tab bar: 54pt + safe area, `rgba(11,15,31,0.96)` with `backdrop-filter: blur(20px) saturate(180%)`, 0.5pt top border `#2A3556`. Five tabs — Live TV, On Demand, Search, My Pluto, Account — 22pt icons, Manrope 10pt weight 600 labels. Active tab icon + label `#FFE100` (yellow) with the icon filled; inactive `#6B7595`. No Material/pill indicator."
+
+- "Create the Pluto TV now-playing bar: `#1C2440` fill, 12pt corner radius, 12×14pt padding, row of: a 56×38pt thumbnail (6pt radius, channel gradient) + a VStack with program title Manrope 13pt weight 700 white and 'CH 612 · Pluto TV Action' Manrope 11pt weight 500 `#9DA8C7` + a trailing group of a `#FF3B5C` 7pt dot and 'LIVE' in Manrope 10pt weight 800 `#FF3B5C`."
+
+### Iteration Guide
+1. Canvas is deep cool-navy `#0B0F1F` (slight blue lift) — NOT pure black; dark-only
+2. The app *is* the EPG channel guide — a frozen-frame grid, not a poster wall
+3. Channel column (86pt) and 30-min time-bar are FROZEN; only the program timeline + row list scroll
+4. The "On Now" cell = `#1C2440` surface + **3pt `#FFE100` yellow left border** — the single defining signature
+5. Yellow `#FFE100` means "on now / live / important" only — never a generic accent; blue `#0048FF` is the brand CTA
+6. A pinned mini-player on top streams the selected channel with a `#FF3B5C` "LIVE" badge
+7. EPG cells are rectilinear (square corners) like a broadcast graphic — no card rounding, no shadows on the grid
+8. Tabular numerals for channel numbers and times so columns stay aligned while scrolling
+9. Metadata is cool slate `#9DA8C7`; titles/channel names are heavy Manrope 700–800
+10. Bottom tabs Live TV / On Demand / Search / My Pluto / Account — active icon yellow `#FFE100`, no pill