Paramount+ DESIGN.md

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

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

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.

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

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