Tubi DESIGN.md

1. Visual Theme & Atmosphere

Tubi's iOS app is built around a single, unmistakable idea: free movies and TV, paid for by ads, presented like a premium streamer. The canvas is a deep indigo-black (#0A0A2A) — not the neutral near-black of Netflix or the warm charcoal of Apple TV, but a cool, slightly violet darkness that exists specifically so Tubi's signature purple→magenta gradient (#7408FF → #FF00FF) can glow against it. That gradient is the entire brand. It runs through the lowercase tubi wordmark, the focus and selection states, the active bottom-tab icon, continue-watching progress bars, and the secondary CTAs. Where most streaming apps pick one accent color, Tubi picks a spectrum, and the whole UI is engineered to make that spectrum sing.

The signature screen is the Home feed: a near-full-width featured hero at the top (a single big title with a gradient/photo backdrop, a "Tubi Original" or genre badge, title, metadata line, and a white Play Free button), followed by a vertical stack of horizontally-scrolling poster rows — "Continue Watching", "Trending Now", "Free Movies You'll Love", "Leaving Soon", genre rails, and so on. Posters are tall 2:3 cards, densely packed (3.4 visible per row on a 390pt screen), each carrying a small yellow "FREE" tag in the corner. This density is deliberate: Tubi's entire pitch is catalog breadth at zero cost, so the UI shows as many titles as possible per screen. The other signature surface is the Title Detail page — a full-bleed backdrop, a giant title, a prominent white Play button, "+ My List", a synopsis, cast, and "More Like This" rails — and the Live TV guide, an EPG-style channel grid for Tubi's free linear channels.

The atmosphere is energetic, youthful, and unapologetically commercial. Tubi leans into the fact that it's ad-supported rather than hiding it: the yellow "FREE" badge is a feature, not an apology. Motion is punchy — posters scale slightly on focus, the hero cross-dissolves between featured titles, and the gradient shimmers subtly behind the wordmark on launch. Typography is a tight geometric grotesque (Inter is the closest free analog to Tubi's custom face): heavy weights (800–900) for titles, clean 400 body, all-caps tracked labels for badges. The result reads like a neon-lit movie marquee rebuilt for a phone — bold, saturated, and proudly free.

Key Characteristics:

• Deep indigo-black canvas (#0A0A2A) — cool and slightly violet so the gradient glows; dark-only, no light mode
• Signature purple→magenta gradient (#7408FF → #FF00FF) — the brand, used on wordmark, focus, active tab, progress, secondary CTAs
• Oversized featured hero at top of Home — single title, badge, white "Play Free" button
• Dense horizontal poster rows — tall 2:3 cards, 3+ visible per row, packed for catalog-breadth feel
• Yellow #FFD400 "FREE" tag on every poster — Tubi's promise stated as a UI feature
• White (#FFFFFF) primary Play button — maximum contrast against the cool dark field
• "Tubi Original" badges in gradient — signals exclusive content
• Continue-watching progress bars in gradient under each in-progress poster
• Live TV EPG guide — channel grid for Tubi's free linear channels
• Bottom tab bar: Home / Search / Live TV / My List / Account — active icon in magenta
• All-caps tracked micro-labels (badges, tags) in heavy weight; titles 800–900

2. Color Palette & Roles

Primary (Brand Gradient & Interactive)

• Tubi Purple (#7408FF): Gradient start — wordmark, focus rings, active states, progress fill start.
• Tubi Magenta (#FF00FF): Gradient end — wordmark, active tab icon, progress fill end.
• Tubi Violet (#A12BFF): Mid-gradient stop / solid violet for single-color uses (chips, links on light press).
• Tubi Pink (#FF4FD8): Tappable text links, "More Like This", inline actions.
• Play White (#FFFFFF): Primary Play / Play Free button background — the highest-priority CTA.
• Play White Pressed (#E6E6F2): Pressed state of the white play button.

Canvas & Surfaces (Dark — the only mode)

• Canvas Indigo-Black (#0A0A2A): Primary app background.
• Surface 1 (#15153D): Cards, sheets, the title-detail panel, settings rows.
• Surface 2 (#1E1E52): Elevated surfaces, pressed rows, search field, chips.
• Surface 3 (#262666): Highest elevation — modals, popovers, focused poster lift.
• Divider (#2A2A5C): Hairline separators between sections and list rows.
• Overlay Scrim (rgba(10,10,42,0.95)): Bottom gradient over the hero backdrop for text legibility.

Text

• Text Primary (#FFFFFF): Titles, body, primary content.
• Text Secondary (#B9B9D6): Metadata lines, synopsis, secondary labels — a cool lavender-grey.
• Text Tertiary (#7A7AA0): Disabled, timestamps, very low-emphasis captions.
• Text On-White (#0A0A2A): Text on the white Play button (the indigo-black canvas color).

Semantic & Accent

• Free Tag Yellow (#FFD400): The "FREE" badge on posters and the hero — Tubi's signature warm accent. Text on it is #1A0A2A.
• Success Green (#1FD17B): "Added to My List" confirmation, download-complete.
• Error Red (#FF4A6E): Playback errors, failed sign-in, destructive confirms.
• Live Red (#FF3B5C): "LIVE" indicator dot on Live TV channels.
• Rating Amber (#FFB020): Star ratings / IMDb-style score chips.

Gradient Tokens

Note on Theme

Tubi ships dark-only. There is no light mode toggle; the indigo-black canvas is the brand environment. Do not invent a light palette — if a light surface is ever needed (e.g., a system share sheet), defer to the OS, not a Tubi-themed light scheme.

3. Typography Rules

Font Family

• Primary: Inter (by Rasmus Andersson, SIL OFL) — the closest free analog to Tubi's custom geometric grotesque. Tubi's brand face is a tight, slightly condensed sans with heavy display weights; Inter at weights 800–900 reproduces the marquee feel.
• Display Alternative: Archivo or Archivo Black (Google Fonts, SIL OFL) — for extra-punchy hero titles if a more condensed display face is wanted.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Numerals: Tabular figures for runtime/metadata (1h 52m), proportional elsewhere.

Hierarchy

Principles

• Weight is the brand: Tubi titles are heavy (800–900). The contrast between a 900 hero title and 400 body is the primary hierarchy signal — never set titles below 700.
• ALL CAPS for badges only: Genre/Original/FREE badges and tags are uppercase with positive tracking (+0.4pt). Body and titles are sentence case, never tracked positive.
• Tight display tracking: Hero and detail titles use negative letter-spacing (-0.5 to -0.6pt) for a dense, condensed marquee look.
• Cool lavender secondary: Metadata uses #B9B9D6 (a cool lavender-grey), not neutral grey — it harmonizes with the indigo canvas.
• Tabular numerals for time: Runtimes, "min left", and clock times use tabular figures so rows don't jitter.
• Dynamic Type: Titles, body, synopsis scale; badge text, tab labels, and progress labels stay fixed (layout-sensitive).

4. Component Stylings

Buttons

Primary Button (Play / Play Free)

• Shape: Rounded rectangle, 8pt corner radius
• Background: #FFFFFF (Play White) — the single highest-contrast CTA
• Text + leading play glyph: #0A0A2A (canvas indigo-black), Inter 15pt weight 800
• Height: 48pt; padding 14pt vertical, 30pt horizontal; leading SF play.fill 13pt
• Pressed: background #E6E6F2 + scale 0.98
• Full-width variant on Title Detail; inline width on hero

Secondary Button (Register / Sign Up / Upgrade)

• Background: gradient/brand (linear-gradient(135deg, #7408FF, #FF00FF))
• Text: #FFFFFF, Inter 15pt weight 800
• Corner radius: 8pt; height 48pt
• Pressed: filter: brightness(0.92) + scale 0.98

Tertiary Button (+ My List / Share / Download)

• Background: rgba(255,255,255,0.10)
• Border: 1pt rgba(255,255,255,0.25)
• Text + icon: #FFFFFF, Inter 14pt weight 700
• Corner radius: 8pt; height 44pt; on-detail often icon-over-label stacked (icon 22pt, label 11pt)
• Pressed: background rgba(255,255,255,0.18)

Text Button (More Like This / See All / Cast & Crew)

• Font: Inter 14pt weight 700
• Color: #FF4FD8 (Tubi Pink)
• No background, no underline
• Pressed: opacity 0.7

Icon Button (top bar: download, search, profile)

• 24pt glyph in 44pt hit area
• Default #FFFFFF; no background
• Active/selected tints to magenta #FF00FF

Core Atoms

Poster Card (the core content unit)

• Aspect ratio: 2:3 (e.g., 100×150pt on a 390pt screen, ~3.4 visible per row)
• Corner radius: 10pt
• Shadow: 0 6px 16px rgba(0,0,0,0.45)
• Leading-top FREE tag: #FFD400 bg, #1A0A2A text, 8pt, weight 900, 2×5pt padding, 3pt radius
• Optional bottom caption overlay: title 11pt weight 700 #FFFFFF with text-shadow: 0 1px 4px rgba(0,0,0,0.8)
• In-progress variant: 4pt gradient/progress bar pinned to the card's bottom edge
• Focused/selected: 2pt gradient/focus ring + scale 1.04 (150ms)

Featured Hero

• Height: ~230–300pt (≈ 60% of viewport width tall)
• Full-bleed backdrop image/gradient, corner radius 18pt (inset 14pt from screen edges) or full-bleed on Detail
• gradient/hero-scrim bottom fade for text legibility
• Top-left badge: "TUBI ORIGINAL" / genre — gradient/brand pill, 9pt weight 800 caps
• Stacked: title (32pt/900) → meta line (11pt/500 #B9B9D6) → button row (white Play Free + circular + add)
• Auto cross-dissolves between 4–6 featured titles every ~6s (400ms fade)

Row Header

• Title 22pt weight 800; optional trailing "See All ›" in #FF4FD8 13pt weight 700
• 16pt horizontal inset, 10pt bottom gap before the poster strip

Free Tag / Badge Chip

• "FREE": #FFD400 fill, #1A0A2A text — the signature
• "TUBI ORIGINAL": gradient/brand fill, white text
• "NEW" / "LEAVING SOON": #1E1E52 fill, #FF4FD8 text
• All: 11pt weight 700 caps, +0.4pt tracking, 3pt radius, 2×6pt padding

Navigation

Bottom Tab Bar

• Height: 56pt + safe-area home indicator
• Background: rgba(10,10,42,0.96) with backdrop-filter: blur(20px) saturate(180%), 0.5pt top border #2A2A5C
• Tabs (5): Home, Search, Live TV, My List, Account
• Icon size: 22pt; label Inter 10pt weight 600
• Active: icon + label in #FF00FF (magenta), icon filled
• Inactive: #7A7AA0
• No pill indicator — color + fill change only

Top Bar (Home)

• Height: 44pt + safe area
• Leading: tubi gradient wordmark (≈22pt cap height)
• Trailing: download, search, profile icons (24pt, #FFFFFF, 16pt gap)
• Transparent over hero; gains #0A0A2A background after scroll-past-hero

Title Detail Nav

• Transparent over backdrop; back chevron top-left (#FFFFFF, 24pt, in a 32pt circular rgba(0,0,0,0.4) scrim)
• Trailing: cast / share icons

Input Fields

Search Bar

• Height: 44pt
• Background: #1E1E52
• Corner radius: 10pt
• Leading magnifyingglass 16pt #7A7AA0
• Placeholder "Search movies, shows, channels" 14pt #7A7AA0
• Text: #FFFFFF 15pt
• Focus: 1.5pt #7408FF border

Search Results Grid

• 3-column poster grid, 10pt gutter, 16pt screen inset, FREE tag on each

Distinctive Components

Live TV EPG Guide

• Vertical list of channel rows; each row: leading 56pt channel logo tile (#15153D bg, 10pt radius) + channel name (15pt/600) + a horizontally-scrolling timeline of program blocks
• Program block: #1E1E52 fill, 10pt radius, 8pt padding, program title 13pt/600 + time range 11pt/500 #B9B9D6
• "On Now" block: gradient/brand left border (3pt) + faint gradient wash; leading #FF3B5C "LIVE" dot
• Sticky time-header strip across the top (every 30 min), #7A7AA0 11pt
• Tapping "On Now" → full-screen player; tapping future block → reminder/detail sheet

Continue-Watching Card

• Poster with a 4pt gradient/progress bar at the bottom edge (width = % watched)
• Below caption: "41 min left" or "S2:E4" in 12pt #B9B9D6
• Long-press → "Remove from Continue Watching" context sheet

Tubi Original Badge

• Pill: gradient/brand fill, white "TUBI ORIGINAL" text 9pt weight 800 caps, top-left of hero/poster

Ad Marker (player)

• During free playback, a thin #FFD400 segment-marked scrubber shows ad-break positions
• "Ad · 0:15" chip top-left during an ad in rgba(0,0,0,0.6) with #FFD400 accent

Genre Rail Pills (browse)

• Horizontal scroller of pills: #1E1E52 bg, #FFFFFF 14pt/600, 10pt radius; selected → gradient/brand fill

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 14, 16, 20, 24, 32, 40, 48, 64
• Screen horizontal inset: 16pt
• Poster gutter: 10pt
• Row vertical rhythm: 16pt between a row's last poster and the next row header
• Hero inset from screen edges: 14pt (rounded 18pt) on Home; full-bleed on Detail

Grid & Container

• iPhone: 16pt insets; poster rows scroll edge-to-edge (first poster aligned to 16pt inset, content bleeds past right edge)
• Poster row: ~3.4 cards visible at 390pt width
• Search / browse grid: 3 columns, 10pt gutter
• iPad: 5–6 column poster grids; hero spans full width with larger 36–40pt title
• Live TV guide: fixed-width channel-label column (96pt) + horizontally-scrolling program timeline

Whitespace Philosophy

• Density over air: Tubi intentionally packs the screen — many posters per row, tight 10pt gutters — to communicate catalog breadth ("thousands of free titles"). This is the opposite of a minimalist content app.
• Hero breathes, rows pack: the featured hero gets generous height and a clear scrim; the rows beneath are deliberately dense.
• Edge-bleeding rows: poster strips run off the right edge to signal "there's more, keep scrolling".
• Badges never crowd the title: the FREE tag sits in the poster's top-left corner away from the bottom caption.

Border Radius Scale

• Square (0pt): full-bleed hero/backdrop on Detail, dividers
• Subtle (4pt): progress bars, ad markers, tiny tags
• Standard (8pt): buttons, search bar
• Card (10pt): posters, channel tiles, program blocks, genre pills
• Hero (18pt): inset featured hero on Home
• Sheet (20pt): bottom sheets, modals (top corners)
• Pill (500pt): badge chips, filter pills
• Circle (50%): profile avatars, circular hero add/secondary buttons

6. Depth & Elevation

Tubi uses glow and gradient more than shadow. On the dark indigo canvas, elevation is conveyed by surface lightening (#15153D → #1E1E52 → #262666) plus a soft black drop shadow on floating content (posters, sheets). The brand gradient itself acts as a "spotlight" cue on focus.

Shadow Philosophy: Shadows are deep (0.45–0.6 opacity) so they register against the dark canvas, but they're never the brand statement — the gradient glow is. A focused poster doesn't just shadow; it gains a purple→magenta ring and scales up, as if lit by the brand.

Motion

• Hero cross-dissolve: featured titles auto-rotate every ~6s with a 400ms opacity cross-fade; backdrop ken-burns drift (very slow scale 1.0→1.05 over the dwell)
• Poster focus/press: scale 1.0 → 1.04 over 150ms ease-out + gradient ring fades in; release reverses in 120ms
• Row scroll: native momentum horizontal scroll; deceleration standard iOS
• Wordmark shimmer: on app launch / Home appear, a subtle highlight sweeps across the tubi gradient wordmark over 800ms (once)
• Play transition: tapping Play scales the poster/hero up and cross-fades into the player over 350ms; player chrome fades out after 3s idle
• Tab switch: instant content swap; active icon morphs color to magenta + a 200ms fill animation
• Bottom sheet: slides up 300ms ease-out, dims background to rgba(5,5,16,0.7); dismiss drag 1:1, threshold 40%
• Add to My List: + icon morphs to ✓ with a 250ms spring + brief #1FD17B flash + soft haptic
• Progress bar: continue-watching fill animates from 0 → current % over 500ms on first appear
• Haptics: soft impact on Play, add-to-list confirm, and tab switch; selection tick on focus change in Live TV guide

7. Do's and Don'ts

Do

• Use the deep indigo-black canvas (#0A0A2A) — cool and slightly violet, NOT neutral black
• Make the purple→magenta gradient (#7408FF → #FF00FF) the brand signature — wordmark, focus, active tab, progress, secondary CTA
• Keep the primary Play button pure white (#FFFFFF) with indigo-black text — it must out-contrast everything
• Put the yellow #FFD400 "FREE" tag on posters — it's a feature, lean into "free"
• Pack poster rows densely (3+ visible, 10pt gutters) — catalog breadth is the pitch
• Use heavy title weights (800–900) with tight negative tracking — marquee feel
• Bleed poster rows off the right edge — signals "keep scrolling, there's more"
• Use ALL-CAPS tracked labels for badges/tags only (FREE, TUBI ORIGINAL, NEW)
• Render the Live TV EPG with sticky time header + gradient-marked "On Now" blocks
• Give focused posters a gradient ring + 1.04 scale (lit-by-brand)
• Use cool lavender-grey (#B9B9D6) for metadata, not neutral grey

Don't

• Don't add a light mode — Tubi is dark-only; defer to OS for system sheets
• Don't use a neutral or warm dark canvas — the indigo-violet base is what makes the gradient glow
• Don't replace the gradient with a single flat purple for brand moments — the spectrum is the identity
• Don't hide or shrink the "FREE" tag — it's core messaging, never an apology
• Don't make poster rows sparse/airy — density communicates the value prop
• Don't set titles below 700 weight — heavy display weight is the brand
• Don't tint the primary Play button — it stays white for max contrast
• Don't use the gradient as body text or large fills behind reading copy — it's for marks, accents, focus
• Don't add positive tracking to titles/body — only badges are tracked/uppercased
• Don't use light shadows — they vanish on the dark canvas; go deep (0.45–0.6) or use the gradient glow
• Don't animate aggressively in content rows — motion is punchy but brief (120–400ms)

8. Responsive Behavior

Device Sizes

Dynamic Type

• Hero/detail titles, row headers, body, synopsis: full scale
• Badge text, tab labels, progress labels, ad-marker chip, EPG time header: FIXED (layout-sensitive)
• Poster captions: scale to L only, then truncate with ellipsis

Orientation

• Phone: portrait-locked for browse; player rotates to landscape (and supports fullscreen landscape)
• iPad: all orientations; landscape gets the cinematic wide hero
• Live TV player: landscape fullscreen with overlaid guide drawer

Touch Targets

• Poster card: full card tappable (min 100×150pt)
• Tab bar icons: 22pt glyph, 56pt row height, full-segment tap
• Play button: 48pt tall
• Top-bar icons: 24pt glyph, 44pt hit
• EPG program block: min 44pt tall, full block tappable

Safe Area Handling

• Top: top bar + hero respect safe area and Dynamic Island; backdrop bleeds under the status bar
• Bottom: tab bar respects home indicator; player chrome insets controls above it
• Sides: 16pt content inset; hero backdrop bleeds to screen edges (Detail) or 14pt inset (Home)
• Player: controls avoid notch in landscape

9. Agent Prompt Guide

Quick Color Reference

• Canvas (indigo-black): #0A0A2A
• Surface 1 / 2 / 3: #15153D / #1E1E52 / #262666
• Divider: #2A2A5C
• Gradient start (Tubi Purple): #7408FF
• Gradient end (Tubi Magenta): #FF00FF
• Brand gradient: linear-gradient(135deg, #7408FF, #FF00FF)
• Tubi Pink (links): #FF4FD8
• Play button: #FFFFFF / text #0A0A2A
• FREE tag: #FFD400 / text #1A0A2A
• Text primary / secondary / tertiary: #FFFFFF / #B9B9D6 / #7A7AA0
• Success / Error / Live: #1FD17B / #FF4A6E / #FF3B5C

Example Component Prompts

• "Build the Tubi Home featured hero in SwiftUI: a 230pt-tall card inset 14pt from screen edges, 18pt corner radius, full-bleed backdrop with a linear-gradient(180deg, transparent 40%, rgba(10,10,42,0.95) 100%) scrim. Top-left a 'TUBI ORIGINAL' pill with linear-gradient(135deg,#7408FF,#FF00FF) fill, white Inter 9pt weight 800 ALL CAPS +0.4pt tracking. Bottom-left stacked: title Inter 32pt weight 900 white -0.6pt tracking, meta line Inter 11pt weight 500 #B9B9D6, then a button row: white 'Play Free' button (48pt tall, 8pt radius, #0A0A2A text + leading play.fill) and a 44×38pt circular rgba(255,255,255,0.16) '+' button."

• "Create a Tubi poster card: 100×150pt (2:3), 10pt corner radius, 0 6px 16px rgba(0,0,0,0.45) shadow. Top-left a 'FREE' tag — #FFD400 background, #1A0A2A text, Inter 8pt weight 900, 2×5pt padding, 3pt radius. Optional bottom caption: title Inter 11pt weight 700 white with text-shadow: 0 1px 4px rgba(0,0,0,0.8). On focus: 2pt linear-gradient(135deg,#7408FF,#FF00FF) ring + scale 1.04 over 150ms."

• "Render a Tubi content row: header 'Trending Now' in Inter 22pt weight 800 white -0.3pt tracking at 16pt leading inset, optional trailing 'See All ›' in #FF4FD8 13pt weight 700. Below: a horizontal scroll of 2:3 poster cards, 10pt gutter, first card at 16pt inset, content bleeding past the right screen edge. 16pt vertical gap to the next row."

• "Build a Tubi continue-watching card: standard poster with a 4pt-tall progress bar pinned to the bottom edge — linear-gradient(90deg,#7408FF,#FF00FF) fill at 62% width on a rgba(255,255,255,0.16) track. Below the card: '41 min left' in Inter 12pt weight 500 #B9B9D6. Animate the fill 0 → 62% over 500ms on first appear."

• "Render the Tubi Live TV EPG guide: a vertical list of channel rows. Each row: a 56pt square channel logo tile (#15153D, 10pt radius) + channel name Inter 15pt weight 600 white, then a horizontally-scrolling timeline of program blocks. Each block: #1E1E52 fill, 10pt radius, 8pt padding, title Inter 13pt weight 600 + time range Inter 11pt weight 500 #B9B9D6. The 'On Now' block gets a 3pt linear-gradient(135deg,#7408FF,#FF00FF) left border, a faint gradient wash, and a leading #FF3B5C 'LIVE' dot. Sticky 30-min time header strip on top in #7A7AA0 11pt."

• "Build the Tubi bottom tab bar: 56pt tall + safe area, rgba(10,10,42,0.96) background with backdrop-filter: blur(20px) saturate(180%), 0.5pt top border #2A2A5C. Five tabs — Home, Search, Live TV, My List, Account — 22pt icons, Inter 10pt weight 600 labels. Active tab icon + label #FF00FF (magenta) with the icon filled; inactive #7A7AA0. No pill indicator."

Iteration Guide

1. Canvas is deep indigo-black #0A0A2A (cool, slightly violet) — NOT neutral black, NOT charcoal; dark-only
2. The purple→magenta gradient (#7408FF → #FF00FF) is THE brand — wordmark, focus, active tab, progress, secondary CTA
3. Primary Play button is pure white #FFFFFF with #0A0A2A text — highest contrast, never tinted
4. Every poster carries a yellow #FFD400 "FREE" tag — it's a feature, never hidden
5. Poster rows are dense (3+ visible, 10pt gutters) and bleed off the right edge — catalog breadth is the pitch
6. Titles are heavy (800–900) with tight negative tracking; only badges are ALL-CAPS + positive-tracked
7. Metadata uses cool lavender-grey #B9B9D6, not neutral grey
8. Elevation = surface lightening + deep shadow (0.45–0.6); focus = gradient ring + 1.04 scale (lit-by-brand)
9. Live TV is an EPG channel grid with a sticky time header and gradient-marked "On Now" blocks
10. Bottom tabs: Home / Search / Live TV / My List / Account — active icon magenta #FF00FF, no pill