# Design System Inspiration of Paramount+ (iOS)

## 1. Visual Theme & Atmosphere

Paramount+'s iOS app is a network-bundle streaming surface built on a deep, confident navy. It is dark-only — there is no light mode — anchored on a midnight-navy canvas (`#0A0E2D`) that subtly lightens to `#0E1438` beneath hero artwork. The navy is a deliberate brand choice: it echoes the iconic Paramount blue mountain and reads as broadcast-prestige rather than the flat black of generic streamers. Open the Home tab and the first thing you see, directly under a thin top bar carrying the mountain logomark and "Paramount+" wordmark (the "+" rendered in brand blue), is the **brand-hubs row** — a horizontal strip of network-colored chips (CBS, Paramount Network, MTV, Nickelodeon, Comedy Central, Showtime). This row is the signature framing device: it immediately tells the user "this is a bundle of the networks you know," and tapping a hub re-skins the whole browse experience into that network. Below the hubs sits a full-bleed **hero billboard** for a featured Original, followed by horizontally scrolling content rows — **Live TV & Sports**, **Trending**, **Keep Watching**, **Because you watched** — of 2:3 poster cards.

The accent system is monochrome-on-navy with a single brand color doing all the work: **Paramount+ Blue (`#0064FF`)**. It fills every primary CTA ("Play"), tints the active tab, draws progress bars, and provides selection rings. There is no second accent — a brighter sky-blue (`#4D9DFF`) is used only for the active-tab tint and eyebrow labels for legibility, and a single broadcast red (`#FF2D46`) flags Live TV and sports (a core Paramount+ pillar covering NFL on CBS, UEFA Champions League, the Masters, SEC football, WWE). Everything else is white / `#AEB4D6` text on navy, so full-color poster art is the loudest thing on screen.

The defining product moment is the **hub + hero pairing**. Where Netflix opens straight to a billboard, Paramount+ leads with the hubs row *then* the hero — establishing the network-bundle identity before the featured title. The hero itself uses a heavy treatment: a blue uppercase eyebrow ("PARAMOUNT+ ORIGINAL"), an ultra-bold title (Inter weight 900), a dot-separated metadata line, and a blue "Play" + glass "+ My List" button pair.

Typography is Paramount Sans (a proprietary grotesque); the closest free substitute is **Inter**. The hierarchy is broadcast-bold: hero titles at weight 900, row headers at 22pt weight 700, all-caps tracked eyebrows at 11pt weight 800. The system is built to read cleanly across the matching tvOS, web, and mobile apps.

**Key Characteristics:**
- Dark-only — midnight-navy canvas (`#0A0E2D`) lightening to `#0E1438` under hero art; no light mode
- **Brand-hubs row** — network-colored chips (CBS, MTV, Nickelodeon, Comedy Central, Showtime) high on Home; the bundle identity
- Full-bleed **hero billboard** for a featured Original, directly below the hubs row
- **Single accent** — Paramount+ Blue (`#0064FF`) for every primary CTA, progress, selection; sky-blue (`#4D9DFF`) for active-tab tint
- **Live TV & Sports** flagged with red (`#FF2D46`) + a pulsing dot — a first-class Paramount+ pillar
- **Content rows** — horizontally scrolling 2:3 poster cards; Live cards carry a red LIVE flag
- Broadcast-bold typography — Inter (Paramount Sans fallback), hero weight 900, 11pt uppercase tracked eyebrows
- Monochrome navy chrome — white / `#AEB4D6` text so full-color art leads
- Bottom tab bar: Home / Live TV / Search / My List — sky-blue active tint
- Mountain logomark + "Paramount**+**" wordmark with the blue "+" — the brand signature

## 2. Color Palette & Roles

Paramount+ ships dark-only. The "Light Mode" column documents the rare light surfaces (account/legal web views) for completeness; the product UI uses the dark column everywhere.

### Primary (Interactive)
- **Paramount+ Blue** (`#0064FF`): Primary action — "Play" / "Resume" / "Watch Live" fill; progress fill; selection ring. The one brand accent.
- **Blue Pressed** (`#0052CC`): Pressed state + scale 0.98.
- **Sky Accent** (`#4D9DFF`): Active-tab tint, eyebrow labels (brighter for contrast on navy).
- **Glass Fill** (`rgba(255,255,255,0.14)`): Secondary action ("+ My List", "More Info") — translucent over art.

### Canvas & Surfaces (Light Mode — account / web views only)
- **Light Canvas** (`#FFFFFF`): Legal & web-account pages.
- **Light Surface** (`#F2F4FB`): Cards in account views.
- **Light Divider** (`#DDE1F0`): Hairlines in light web views.
- **Light Text** (`#0A0E2D`): Body text in light web views.

### Canvas & Surfaces (Dark Mode — the product)
- **Canvas** (`#0A0E2D`): Primary app background — midnight navy.
- **Canvas 2** (`#0E1438`): Background under hero billboard; subtle lift.
- **Surface 1** (`#161C44`): Cards, sheets, settings rows.
- **Surface 2** (`#1F2655`): Elevated chips, progress track, pressed rows.
- **Divider** (`#2A3266`): Hairline dividers, tab-bar top border.

### Text
- **Text Primary** (`#FFFFFF`): Titles, hero, primary labels.
- **Text Secondary** (`#AEB4D6`): Metadata, captions, "See All".
- **Text Tertiary** (`#6F77A6`): Inactive tabs, disabled, faint meta dots.

### Semantic
- **Live Red** (`#FF2D46`): Live TV / sports badge, "LIVE" flag — pulsing dot.
- **Success Green** (`#1ED760`): Download-complete, save confirmation toast.
- **Error Red** (`#FF453A`): Playback error, payment failure.
- **Rating Gold** (`#F5C518`): Critic / star rating.

### Role → Color Table

| Role | Light Mode | Dark Mode (product) |
|------|-----------|---------------------|
| Canvas | `#FFFFFF` | `#0A0E2D` |
| Canvas (hero) | `#FFFFFF` | `#0E1438` |
| Surface 1 | `#F2F4FB` | `#161C44` |
| Surface 2 | `#E8EBF7` | `#1F2655` |
| Divider | `#DDE1F0` | `#2A3266` |
| Text Primary | `#0A0E2D` | `#FFFFFF` |
| Text Secondary | `#5A6088` | `#AEB4D6` |
| Text Tertiary | `#9298BE` | `#6F77A6` |
| Primary CTA | `#0064FF` | `#0064FF` |
| CTA Label | `#FFFFFF` | `#FFFFFF` |
| Active Tab | `#0064FF` | `#4D9DFF` |
| Live | `#FF2D46` | `#FF2D46` |

## 3. Typography Rules

### Font Family
- **Brand**: `Paramount Sans` — a proprietary grotesque commissioned for the Paramount+ identity.
- **Closest Free Substitute**: `Inter` (by Rasmus Andersson, Google Fonts, SIL OFL) — a neutral grotesque with excellent hinting and a wide weight range up to 900.
- **Alternate Substitute**: `Manrope` or `Archivo` if Inter is unavailable.
- **System Fallback**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Numerals**: Lining, tabular for time codes and live scores; proportional elsewhere.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title | Inter | 32pt | 900 | 1.05 | -0.6pt | "Home", "My List" nav titles |
| Hero Title | Inter | 26pt | 800 | 1.02 | -0.5pt | Featured billboard title (logo lockup may replace) |
| Row Header | Inter | 22pt | 700 | 1.15 | -0.2pt | "Live TV & Sports", "Trending" |
| Card Title | Inter | 18pt | 700 | 1.2 | -0.1pt | Detail-page / large-card title |
| Body | Inter | 16pt | 600 | 1.5 | 0pt | Synopsis, descriptions |
| Body Regular | Inter | 16pt | 400 | 1.5 | 0pt | Long-form legal / settings copy |
| Caption | Inter | 15pt | 500 | 1.35 | 0pt | "S2 · E5 · 52 min" episode meta |
| Meta | Inter | 13pt | 400 | 1.4 | 0pt | "2024 · Crime Drama · TV-MA" dot-separated |
| Poster Caption | Inter | 11pt | 500 | 1.25 | 0pt | Title under a poster card |
| Tab Label | Inter | 12pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Eyebrow | Inter | 11pt | 800 | 1.0 | 1.6pt (uppercase) | "PARAMOUNT+ ORIGINAL" over hero |
| Button | Inter | 15pt | 700 | 1.0 | 0pt | Primary/secondary button label |
| Hub Label | Inter | 11pt | 800 | 1.0 | 0.3pt | Network name on a hub chip |
| Badge | Inter | 8pt | 800 | 1.0 | 0.5pt (uppercase) | "LIVE", "NEW" |

### Principles
- **Broadcast boldness**: Hero and screen titles run heavy (800-900) — Paramount+ reads like prestige-network branding, not a utility app.
- **All-caps tracked eyebrows**: Category/Original labels above the hero are 11pt uppercase weight 800 with +1.6pt tracking — the signature framing device.
- **Hub chips speak in network voice**: hub labels use weight 800 in each network's brand color so CBS / MTV / Showtime read instantly.
- **Monochrome chrome, color content**: chrome type is white / `#AEB4D6` only; the single blue accent never sits behind body text.
- **Dynamic Type**: Titles, body, captions scale; tab labels, eyebrows, hub labels, badges stay fixed (layout-sensitive over art).

## 4. Component Stylings

### Buttons

**Primary Button (Play / Resume / Watch Live)**
- Shape: Rounded rectangle, 6pt corner radius
- Background: `#0064FF` (Paramount+ Blue — the one accent)
- Text/Icon: `#FFFFFF`, Inter 15pt weight 700, leading ▶ play glyph 14pt
- Padding: 13pt vertical, 28pt horizontal
- Pressed: background `#0052CC` + scale 0.98
- Width: hugs content on hero; full-width on detail page

**Secondary / Glass Button (+ My List / More Info / Trailer)**
- Background: `rgba(255,255,255,0.14)` with `backdrop-filter: blur(6px)`
- Text: `#FFFFFF`, Inter 14pt weight 600
- Border: none
- Corner radius: 6pt
- Padding: 12pt vertical, 16-22pt horizontal
- Pressed: background `rgba(255,255,255,0.22)`

**Outline Button (Watch Live secondary / Schedule)**
- Background: transparent
- Border: 1.5pt `rgba(255,255,255,0.4)`
- Text: `#FFFFFF`, Inter 14pt weight 600
- Corner radius: 6pt
- Padding: 11pt vertical, 20pt horizontal

**Text Button (More Info / See All / Manage)**
- Background: transparent
- Text: `#AEB4D6`, Inter 14pt weight 600
- No underline
- Pressed: text → `#FFFFFF`

**Icon Button (search, profile, add)**
- 21pt glyph, 44pt hit area
- Color `#FFFFFF`; inactive `#6F77A6`
- No background

### Core Atoms

**Poster Card**
- 2:3 aspect ratio, ~116pt wide on phone (variable per row)
- Corner radius: 8pt
- Full-bleed key art, no border
- Optional red "LIVE" flag top-left with a 5pt pulsing white dot, Inter 8pt w800
- Optional blue "NEW" badge top-left, Inter 8pt w800
- Caption below: title, Inter 11pt w500 `#AEB4D6`
- Pressed: scale 0.97, 150ms

**Hub Chip (Brand-hubs row)**
- ~70pt min-width × 40pt rounded rectangle, 8pt corner radius
- Filled with the network's brand gradient (CBS blue, Paramount black, MTV red, Nick orange, Comedy Central purple, Showtime green)
- Network name centered, Inter 11pt w800, white (or near-black on light networks like Nick)
- Pressed: scale 0.96; tapping re-skins browse into that network

**Hero Billboard**
- Full-bleed key art occupying ~46% of screen height (332pt on phone), directly below the hubs row
- Bottom gradient scrim: `linear-gradient(180deg, transparent 36%, rgba(10,14,45,0.72) 70%, #0A0E2D 100%)`
- Left-aligned: eyebrow (11pt uppercase sky-blue) → title or logo lockup → meta row (`12pt #AEB4D6` dot-separated) → button pair (blue Play + glass +My List)

**Live Badge**
- `#FF2D46` fill, 4pt corner radius, Inter 11pt w800 uppercase, 5pt/10pt padding
- Leading 7pt white dot that pulses (opacity 1 → 0.4, 1.2s loop)

**Progress Bar (Keep Watching)**
- 4pt track height, 2pt radius, track `#1F2655`
- Fill: `#0064FF` solid
- Label below: Inter 11pt w500 `#AEB4D6` — "S2 E5 · 22 min left"

**Live Score Strip (sports cards)**
- Compact row over live event art: team marks + score in tabular Inter 13pt w700, red "LIVE" flag

### Navigation

**Bottom Tab Bar**
- Height: 64pt + safe area
- Background: `rgba(10,14,45,0.96)` with `backdrop-filter: blur(18px) saturate(160%)`
- Top border: 0.5pt `#2A3266`
- Tabs (4): Home, Live TV, Search, My List
- Icon: 22pt; active = `#4D9DFF` **filled** glyph, inactive = `#6F77A6` stroked glyph
- No tint pill — the color + fill swap is the active treatment
- Labels: Inter 12pt w600, always shown

**Top Bar (Home)**
- Height: 44pt + safe area
- Leading: mountain logomark (22pt) + "Paramount" wordmark + blue "+" (Inter 19pt w800)
- Trailing: search glyph + profile/add (21pt, white)
- Solid `#0A0E2D`; hubs row pinned directly below

**Detail Page**
- Full-bleed hero art + back chevron (top-left, white, on 40%-black circle)
- Sticky title bar appears on scroll past hero title

### Input Fields

**Search Bar**
- Height: 44pt
- Background: `#161C44`
- Border: none (1.5pt `#0064FF` on focus)
- Corner radius: 8pt
- Leading magnifier 18pt `#6F77A6`
- Placeholder: "Search shows, movies, sports" Inter 14pt `#6F77A6`
- Text: white

**Profile / PIN Entry**
- Segmented digit boxes, `#161C44` fill, 8pt radius, white digits, focus ring `#0064FF`

### Distinctive Components

**Brand-Hubs Row**
- Horizontal strip of network-brand chips directly under the top bar — the bundle identity
- Tapping a hub re-skins the Home browse into that network's curated content
- Paramount+'s most distinctive structural element

**Mountain Logomark + "Paramount+" Wordmark**
- Blue mountain peak with radiating stars + "Paramount" in white and "+" in `#0064FF`
- The brand signature; top bar, splash, hero Original lockups

**Hero Billboard (below hubs)**
- Featured Original with a blue uppercase eyebrow and weight-900 title — the prestige moment

**Live TV & Sports Lane**
- A first-class row of live event cards with red LIVE flags and live score strips — NFL on CBS / UEFA / SEC / WWE / CBS News 24/7

**Keep Watching Rail**
- Resume cards with a blue progress bar and "S2 E5 · 22 min left" caption

**Network Hub Page**
- Tapping a hub opens a fully re-skinned browse surface in that network's brand color — CBS / MTV / Nickelodeon / Comedy Central / Showtime

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 18, 24, 32, 40, 48, 64
- Content horizontal inset: 18pt (rows bleed to the right edge for "more content" affordance)
- Inter-row vertical gap: 12-16pt
- Poster gap within a row: 10pt; hub chip gap: 8pt

### Grid & Container
- iPhone: 18pt side inset; rows scroll horizontally and bleed off the right edge
- iPad: rows show more posters per viewport; hero billboard taller (440pt); hubs row larger chips
- Hero billboard: ~46% of screen height on phone, full-bleed, directly below the hubs row
- No max content width — rows are edge-to-edge horizontal scrollers

### Whitespace Philosophy
- **Bundle-first**: the hubs row gets pinned, breathable space at the very top — it is the structural anchor
- **Catalog density**: rows are packed tight (10pt gaps) so more art is visible — a content-discovery surface
- **Chrome recedes**: navy canvas frames full-color art with no competing color; only blue accents punctuate

### Border Radius Scale
- Square (0pt): full-bleed hero art, scrims
- Small (4pt): badges, live flag, progress track
- Standard (6pt): buttons, search results
- Card (8pt): poster cards, hub chips, search bar, settings rows
- Comfortable (12pt): inline cards, tooltips
- Sheet (20pt): bottom sheets, modals
- Pill (500pt): filter chips, toggle
- Circle (50%): avatars, back-button background

## 6. Depth & Elevation

Paramount+ uses depth sparingly — the subtle navy lift under hero art is the primary depth cue, not heavy drop shadows.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Rows, posters, hubs, tabs on the navy canvas |
| Hero Lift | `#0E1438` bleed behind art + bottom scrim | Featured billboard depth |
| Card Lift (Level 1) | `rgba(0,0,0,0.45) 0 8px 22px` | Focused/hovered poster (tvOS parity); pressed scale 0.97 |
| Floating (Level 2) | `rgba(0,0,0,0.55) 0 12px 30px` + 1pt `#2A3266` border | Bottom sheets, context menus, "Add to" sheet |
| Modal Overlay | `rgba(0,0,0,0.6)` | Dim behind sheets, age-gate, plan picker |

**Shadow Philosophy**: On a deep navy canvas, soft shadows barely register, so Paramount+ leans on (a) the subtle `#0E1438` lift under hero art and (b) a 1pt `#2A3266` border on floating panels as the elevation cue. Posters lift only via scale on press/focus. Nothing in the resting catalog casts a visible shadow — full-color art against muted navy provides all the figure/ground separation needed.

### Motion
- **Hub re-skin**: tapping a hub cross-fades the whole browse into the network's brand color over 300ms ease-in-out
- **Hero auto-rotate / parallax**: the featured billboard may cross-fade between titles every ~8s (400ms ease-in-out); art parallaxes subtly on scroll
- **Row scroll**: native momentum horizontal scroll; cards do not snap (free scroll), 60fps
- **Poster press**: scale 1.0 → 0.97 in 120ms ease-out; release springs back
- **Tab switch**: instant content swap; icon color+fill cross-fades 150ms
- **Detail open**: poster expands / pushes into full-bleed detail with 300ms ease-out shared-element-style transition
- **Live dot pulse**: opacity 1 → 0.4 → 1 over 1.2s, infinite ease-in-out
- **Sheet present**: bottom sheet slides up 300ms ease-out; dim fades in parallel
- **Progress fill**: animates from 0 to value over 400ms when a Keep Watching row appears
- **Haptic feedback**: light impact on poster select, soft on hub switch and add-to-My-List confirm

## 7. Do's and Don'ts

### Do
- Keep the app dark-only on midnight navy `#0A0E2D`; lift to `#0E1438` under hero art
- Lead Home with the brand-hubs row, then the hero — the bundle identity comes first
- Use Paramount+ Blue `#0064FF` as the single accent for every primary CTA, progress, selection
- Use sky-blue `#4D9DFF` for the active-tab tint and eyebrow labels (legibility on navy)
- Flag Live TV & sports with red `#FF2D46` + a pulsing dot — it is a first-class pillar
- Render the hero with an 11pt uppercase tracked sky-blue eyebrow and a weight-900 title
- Color hub chips in each network's brand color (CBS / MTV / Nick / Comedy Central / Showtime)
- Use heavy Inter weights (700-900) for hero & screen titles — broadcast prestige
- Let full-color poster art be the loudest thing on screen; keep chrome monochrome navy
- Re-skin the entire browse surface into a network's brand color when its hub is tapped

### Don't
- Don't add a light mode — Paramount+ is dark-only
- Don't use pure `#000000` for the canvas — the navy `#0A0E2D` / `#0E1438` is the signature
- Don't introduce a second brand accent — Paramount+ Blue + live-red is the entire chromatic budget
- Don't skip the hubs row or push it below the hero — it is the structural anchor of the bundle identity
- Don't use the blue accent as a fill behind body text or as a poster overlay
- Don't put borders on poster cards — art is full-bleed; separation comes from the navy canvas
- Don't animate aggressively — motion is prestige-quiet (120-400ms ease-out)
- Don't use a Material-style tint pill on the active tab — the color+fill swap is the treatment
- Don't snap-scroll content rows — they are free momentum scrollers that bleed off the right edge
- Don't center body/synopsis text — only hub chips are centered; hero & rows are left-aligned
- Don't let chrome compete with art — chrome stays white / `#AEB4D6` on navy

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Hero ~300pt; hubs row scrolls; ~2.4 posters per viewport |
| iPhone 13/14/15 | 390pt | Standard layout; hero 332pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in solid top bar |
| iPhone 15/16 Pro Max | 430pt | Hero 372pt; ~3 posters per viewport |
| iPad (portrait) | 768pt | Hero 440pt full-bleed; ~5 posters per row; larger hub chips; 24pt insets |
| iPad (landscape) | 1024pt+ | Hero 520pt; ~7 posters per row; hubs row spans wider |

### Dynamic Type
- Hero title, screen/row headers, body, captions: full scale
- Tab labels, eyebrows, hub labels, badges, "LIVE": FIXED (composited over art / layout-sensitive)
- Synopsis on detail page scales to XL

### Orientation
- Phone: portrait-primary for browsing; player rotates to landscape full-screen
- iPad: both orientations for browse; player always landscape full-screen
- Hero art re-crops (focal point preserved) across orientations

### Touch Targets
- Poster card: full-card tap, ≥116×164pt
- Hub chip: ≥70×40pt, 44pt min effective
- Tab bar icon: 22pt glyph, 44pt hit
- Play button: ≥44pt tall
- Back button: 24pt glyph in 40pt circle

### Safe Area Handling
- Top: solid top bar respects safe area + Dynamic Island; hubs row pinned directly below
- Bottom: tab bar respects home indicator; rows scroll above it
- Player: full-bleed edge-to-edge, controls inset from safe area
- Sides: 18pt content inset; rows intentionally bleed off the trailing edge

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (dark): `#0A0E2D`
- Canvas 2 (under hero): `#0E1438`
- Surface 1: `#161C44`
- Surface 2: `#1F2655`
- Divider: `#2A3266`
- Text primary: `#FFFFFF`
- Text secondary: `#AEB4D6`
- Text tertiary: `#6F77A6`
- Primary CTA (Play): `#0064FF` fill / `#FFFFFF` label
- Blue pressed: `#0052CC`
- Sky accent (active tab / eyebrow): `#4D9DFF`
- Glass secondary: `rgba(255,255,255,0.14)`
- Live / sports red: `#FF2D46`
- Rating gold: `#F5C518`

### Example Component Prompts
- "Build the Paramount+ brand-hubs row in SwiftUI: a horizontal scroller pinned directly under the top bar, 18pt leading inset, 8pt gaps, bleeds off the trailing edge. Each chip ≥70pt wide × 40pt tall, 8pt corner radius, filled with the network brand gradient (CBS `#0064FF→#0040A8`, MTV `#C8102E→#7A0A1C`, Nick `#FFB81C→#C98A00`, Showtime `#008C45→#045128`), centered network name in Inter 11pt w800 white (near-black on light networks). Tap re-skins browse; press scale 0.96."

- "Create the Paramount+ hero billboard: full-bleed key art ~46% of screen height directly below the hubs row, bottom scrim `linear-gradient(180deg, .clear 36%, rgba(10,14,45,0.72) 70%, #0A0E2D 100%)`. Left-aligned stack: eyebrow 'PARAMOUNT+ ORIGINAL' Inter 11pt w800 uppercase tracking 1.6pt color `#4D9DFF`; title Inter 26pt w800 `#FFFFFF`; meta Inter 12pt w400 `#AEB4D6` dot-separated; button pair — blue 'Play' (fill `#0064FF`, label white, 6pt radius, ▶ glyph) + glass '+ My List' (`rgba(255,255,255,0.14)` blurred)."

- "Render a Paramount+ Live TV & Sports row: 2:3 cards ~116pt wide, 8pt radius, full-bleed art. Top-left red 'LIVE' flag (`#FF2D46`, Inter 8pt w800 uppercase) with a 5pt pulsing white dot. Caption below Inter 11pt w500 `#AEB4D6`. Press: scale 0.97 over 120ms."

- "Build the Paramount+ bottom tab bar: 64pt + safe area, background `rgba(10,14,45,0.96)` blur 18px, 0.5pt top border `#2A3266`. Four tabs Home / Live TV / Search / My List, 22pt icons. Active = `#4D9DFF` filled glyph, inactive = `#6F77A6` stroked glyph, no tint pill. Labels Inter 12pt w600 always shown."

- "Create the Paramount+ Keep Watching progress bar: 4pt track height, 2pt radius, track `#1F2655`, fill `#0064FF` at the watched fraction. Label below Inter 11pt w500 `#AEB4D6` like 'S2 E5 · 22 min left'. Animate fill 0 → value over 400ms ease-out on appear."

- "Render the Paramount+ primary 'Play' button: fill `#0064FF`, label 'Play' Inter 15pt w700 `#FFFFFF` with a leading 14pt ▶ glyph, 6pt corner radius, 13pt/28pt padding. Pressed: `#0052CC` + scale 0.98. This blue is the single accent — never introduce a second."

### Iteration Guide
1. Canvas is midnight navy `#0A0E2D`, lifting to `#0E1438` under hero art — NEVER pure black, NEVER a light mode
2. Home leads with the brand-hubs row, *then* the hero — the network-bundle identity comes first
3. Paramount+ Blue `#0064FF` is the single accent for every CTA/progress/selection; sky-blue `#4D9DFF` only tints the active tab & eyebrows
4. Live TV & sports use red `#FF2D46` + a pulsing dot — a first-class pillar, not an afterthought
5. The hero is left-aligned with an 11pt uppercase tracked sky-blue eyebrow and a weight-900 title
6. Hub chips wear each network's brand color (CBS/MTV/Nick/Comedy Central/Showtime); tapping re-skins browse
7. Content rows are tight free-scroll poster strips that bleed off the trailing edge; no snap, no borders
8. Typography is heavy Inter (Paramount Sans) — hero/title 800-900, eyebrows 11pt uppercase tracked
9. Chrome is monochrome navy (white / `#AEB4D6` / `#6F77A6`) so full-color art is the loudest thing on screen
10. Motion is prestige-quiet — 120-400ms ease-out; hub re-skin cross-fades 300ms, live dot pulses on a 1.2s loop