Pluto TV DESIGN.md

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

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).

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

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