A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
20tokens
10type steps
3radius steps
14pxspacing base
Tubi, in one page
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
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)
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Tubi design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Tubi Purple: #7408ff
- Tubi Magenta: #ff00ff
- Tubi Violet: #a12bff
- Tubi Pink: #ff4fd8
- Play White: #ffffff
- Play White Pressed: #e6e6f2
- Canvas Indigo-Black: #0a0a2a
- Surface 1: #15153d
- Surface 2: #1e1e52
- Surface 3: #262666
Type:
- families: Inter, Archivo, Archivo Black, Display Alternative
- scale: 10, 11, 12, 13, 15, 16, 18, 22, 28
- weights: 400, 500, 600, 700, 800, 900
Shape:
- radius: 8, 10, 18
- elevation: Shadow: `0 6px 16px rgba(0,0,0,0.45)`
Spacing: 14
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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
| Token | Definition | Use |
|---|---|---|
gradient/brand | linear-gradient(135deg, #7408FF 0%, #FF00FF 100%) | Wordmark, secondary CTA, active tab, "Tubi Original" badge |
gradient/progress | linear-gradient(90deg, #7408FF 0%, #FF00FF 100%) | Continue-watching progress fill |
gradient/focus | linear-gradient(135deg, #7408FF, #FF00FF) as 2pt ring | Focused / selected poster outline |
gradient/hero-scrim | linear-gradient(180deg, transparent 40%, rgba(10,10,42,0.95) 100%) | Bottom fade on hero & detail backdrops |
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.
Type scaleRead the full spec
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:
ArchivoorArchivo 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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Title | Inter | 32pt | 900 | 1.0 | -0.6pt | Featured title on Home hero — heaviest weight |
| Detail Title | Inter | 28pt | 800 | 1.05 | -0.5pt | Title on the Title Detail page |
| Row Header | Inter | 22pt | 800 | 1.1 | -0.3pt | "Trending Now", "Continue Watching" rail headers |
| Section Title | Inter | 18pt | 700 | 1.2 | -0.2pt | Sub-section headers, settings group titles |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Synopsis, descriptions, body copy |
| Card Title | Inter | 15pt | 600 | 1.15 | 0pt | Poster captions, list-row titles |
| Button Label | Inter | 15pt | 800 | 1.0 | 0pt | Play / Register / CTA text |
| Meta | Inter | 13pt | 500 | 1.3 | 0pt | "2024 · Thriller · 1h 52m · TV-MA" |
| Caption | Inter | 12pt | 500 | 1.3 | 0pt | Timestamps, fine print, episode counts |
| Badge / Tag | Inter | 11pt | 700 | 1.0 | 0.4pt | "TUBI ORIGINAL", "FREE", "NEW" — ALL CAPS |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
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).
Components and layoutRead the full spec
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:
#FFD400bg,#1A0A2Atext, 8pt, weight 900, 2×5pt padding, 3pt radius - Optional bottom caption overlay: title 11pt weight 700
#FFFFFFwithtext-shadow: 0 1px 4px rgba(0,0,0,0.8) - In-progress variant: 4pt
gradient/progressbar pinned to the card's bottom edge - Focused/selected: 2pt
gradient/focusring + 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-scrimbottom fade for text legibility- Top-left badge: "TUBI ORIGINAL" / genre —
gradient/brandpill, 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
#FF4FD813pt weight 700 - 16pt horizontal inset, 10pt bottom gap before the poster strip
Free Tag / Badge Chip
- "FREE":
#FFD400fill,#1A0A2Atext — the signature - "TUBI ORIGINAL":
gradient/brandfill, white text - "NEW" / "LEAVING SOON":
#1E1E52fill,#FF4FD8text - 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)withbackdrop-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:
tubigradient wordmark (≈22pt cap height) - Trailing: download, search, profile icons (24pt,
#FFFFFF, 16pt gap) - Transparent over hero; gains
#0A0A2Abackground after scroll-past-hero
Title Detail Nav
- Transparent over backdrop; back chevron top-left (
#FFFFFF, 24pt, in a 32pt circularrgba(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:
#FFFFFF15pt - Focus: 1.5pt
#7408FFborder
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 (
#15153Dbg, 10pt radius) + channel name (15pt/600) + a horizontally-scrolling timeline of program blocks - Program block:
#1E1E52fill, 10pt radius, 8pt padding, program title 13pt/600 + time range 11pt/500#B9B9D6 - "On Now" block:
gradient/brandleft border (3pt) + faint gradient wash; leading#FF3B5C"LIVE" dot - Sticky time-header strip across the top (every 30 min),
#7A7AA011pt - Tapping "On Now" → full-screen player; tapping future block → reminder/detail sheet
Continue-Watching Card
- Poster with a 4pt
gradient/progressbar 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/brandfill, white "TUBI ORIGINAL" text 9pt weight 800 caps, top-left of hero/poster
Ad Marker (player)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Hero ~210pt tall; ~3.2 posters/row; tab labels stay 10pt |
| iPhone 13/14/15 | 390pt | Standard layout; hero ~230pt; ~3.4 posters/row |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; top bar respects it |
| iPhone 15/16 Pro Max | 430pt | Hero ~260pt; ~3.8 posters/row; larger hero title (34pt) |
| iPad (portrait) | 768pt | Full-width hero (title 36pt); 5-column poster grids; 2-up rows |
| iPad (landscape) | 1024pt+ | Cinematic full-width hero (title 40pt); 6-column grids; Live TV guide shows more channels |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-tubi {--page-bg: #0a0a2a;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #a158ff;
--link-hover-color: #8425ff;
--border-color: #363650;
--card-bg: #0a0a2a;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #1e1e3b;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0a0a2a;
--footer-text-color: #a9a9b4;
--button-bg: #7408ff;
--button-text-color: #ffffff;
--button-hover-bg: #5d00d4;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #191937;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #272744;
--button-secondary-border: 1px solid #363650;
--prompt-bg: #161635;
--prompt-text-color: #ffffff;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- nubank 85.0%
- life360 82.1%
- plenty of fish 81.7%
- acorns 80.3%
- grammarly 78.7%
Where this came from
- Source document
ios/design-md/video/tubi/DESIGN.md· 26.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.