Disney+ DESIGN.md

1. Visual Theme & Atmosphere

Disney+'s iOS app is a cinema lobby rendered in deep space-navy. The canvas is #0A0E2A — a rich midnight blue, not black — that evokes a darkened theater and the night sky over a castle. Surfaces step up to #12152E and #1A1F3D, with #2A3050 hairline dividers. The mood is premium, magical, and aspirational: the app is a portal into five storytelling universes (Disney, Pixar, Marvel, Star Wars, National Geographic), and every screen is staged like a film billboard. The signature visual is the starfield — a subtle scatter of faint white points layered behind the hero billboard so the whole interface feels like it's floating in the same space as the streaming logo animation.

The accent system is a confident Disney Blue. #0063E5 is the primary brand and CTA color; a brighter glow blue (#1A75FF) is used for focus halos, selected brand-portal tiles, and the play-button bloom. There is no second brand hue — the cinematic color comes from full-bleed content artwork, not UI chrome. White (#FFFFFF) is primary text; a cool periwinkle-gray (#A0A6C0) carries metadata and descriptions, tuned to harmonize with the navy. The restraint keeps the focus on the billboards and the brand portals — the content is the spectacle.

Typography is a clean geometric sans — Disney's product type is an Avenir-family humanist sans (Inter is the precise web/system fallback). Weights stay at 400 / 600 / 700. The type is cinematic but unobtrusive: it sits over imagery, so it's set in confident bold for titles and quiet regular for synopsis. The most expressive typographic moment is the hero billboard, where a series' logo artwork (not text) dominates, with a one-line "genre · rating · year" strip and a metadata blurb beneath in 14-15pt.

Key Characteristics:

• Deep space-navy canvas (#0A0E2A) with a subtle starfield behind the hero — a darkened theater
• Disney Blue (#0063E5) primary, glow blue (#1A75FF) for focus halos and selected tiles
• The starfield hero billboard — full-bleed key art with logo artwork and an auto-playing trailer
• Brand-portal tile row — Disney / Pixar / Marvel / Star Wars / Nat Geo as five gateway tiles
• 16:9 landscape content cards (the streaming/TV aspect, not square music tiles)
• Hero auto-trailer — the billboard transitions to muted video after a beat
• Avenir-family sans (Inter fallback), weights 400/600/700
• Periwinkle-gray secondary text (#A0A6C0) tuned to the navy

2. Color Palette & Roles

Primary

• Disney Blue (#0063E5): Primary CTA, "Play" button, active tab, primary brand accent, progress fill.
• Glow Blue (#1A75FF): Focus halo, selected brand-portal tile border, play-button bloom, hover-equivalent emphasis.
• Blue Pressed (#0052BD): Tap-down state for blue CTAs.

Canvas & Surfaces

• Canvas Navy (#0A0E2A): Primary canvas — the deep midnight-blue theater background.
• Surface 1 (#12152E): Cards, rows, the metadata panel.
• Surface 2 (#1A1F3D): Elevated panels, sheets, the search field, pressed rows.
• Divider (#2A3050): Hairline dividers between sections and rows.

Text

• Text Primary (#FFFFFF): Titles, screen headlines, primary UI text.
• Text Secondary (#A0A6C0): Synopsis, metadata, genre/rating/year strip — periwinkle-gray, tuned to the navy.
• Text Tertiary (#5A6080): Disabled state, very low-emphasis labels.

Semantic

• Progress Blue (#0063E5): Continue-watching progress bar and the scrubber fill.
• Live Red (#E5484D): "LIVE" badge on live events / sports (ESPN-style tiles).
• New Badge Blue (#1A75FF): "NEW" / "PREMIERE" tags on tiles.
• Download Blue (#0063E5): Completed-download checkmark.
• Starfield (rgba(255,255,255,0.0–0.5)): Faint scattered points behind the hero billboard.
• Error Red (#E5484D): Playback errors, connectivity issues.

Light Mode

Disney+'s iOS app is dark-only by design — the deep space-navy and starfield are the brand identity and the optimal stage for full-bleed cinematic key art. There is no light variant.

3. Typography Rules

Font Family

• Primary: Disney's product sans (an Avenir-family humanist geometric sans)
• Web / System Fallback: Inter — the closest free humanist grotesque
• Production Fallback: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Numerics: Tabular figures for runtime and episode counts

Hierarchy

Principles

• Weights 400 / 600 / 700: regular, semibold, bold — no thin, no black
• Negative tracking on large titles (-0.1 to -0.3pt); the metadata strip uses small positive tracking (+0.3pt)
• Logo artwork over type wherever possible: billboards and detail heroes prefer the series' branded logo image; the text title is a fallback
• All-caps badges with +1.0pt tracking — "NEW", "PREMIERE", "LIVE"
• Tabular numerals on runtime/episode counts
• Dynamic Type respected on titles, synopsis, metadata; badges and tab labels stay fixed

4. Component Stylings

Buttons

Primary Play Button (Detail / Billboard)

• Shape: Pill (rounded rect, full width on detail; auto-width on billboard)
• Background: #FFFFFF (white play button on the navy — the cinematic standard)
• Content: SF Symbol play.fill in #0A0E2A + label "Play" / "Resume S2:E4" in #0A0E2A
• Height: 48pt, corner radius: 8pt
• Font: Avenir Next 16pt weight 700, +0.3pt tracking
• Pressed: background #E8EAF2, scale 0.98
• A subtle rgba(26,117,255,0.30) glow can sit behind it on the billboard

Secondary Action (Watchlist / Trailer)

• Background: rgba(255,255,255,0.12) glass over the key art
• Text + icon: #FFFFFF
• Border: 1pt rgba(255,255,255,0.24)
• Height: 48pt, corner radius: 8pt
• Font: Avenir Next 14pt weight 600
• Pressed: background rgba(255,255,255,0.20)

Brand-Portal Tile (Signature)

• A landscape rounded card (≈ 160 × 96pt) carrying a brand logo centered on a brand-tinted gradient
• Default: 1pt #2A3050 border
• Selected/focused: 2pt #1A75FF border + a rgba(26,117,255,0.35) outer glow + scale 1.04
• The five portals: Disney, Pixar, Marvel, Star Wars, National Geographic

Icon Actions (Add, Download, Share, Rate, More)

• Size: 22pt glyph, 44pt hit area
• Default: #FFFFFF
• Active: #0063E5 (added to watchlist, downloaded)
• Layout: a labeled icon row on the detail screen ("Watchlist", "Download", "Share")

Text Button ("See All", "Details")

• Font: Avenir Next 14pt weight 700
• Color: #A0A6C0
• No underline, 44pt hit area

Cards & Containers

16:9 Content Card (Horizontal shelf)

• Width: 220pt, aspect 16:9 (the streaming/TV ratio — never square)
• Corner radius: 6pt
• Key art only (no title text by default — Disney+ shows branded key art that includes the title)
• Gap between cards: 12pt
• Continue-watching cards carry a 3pt #0063E5 progress bar pinned to the bottom edge of the art + a small play overlay
• Focused/pressed: scale 1.04 + a rgba(26,117,255,0.30) glow + 2pt #1A75FF border

Brand-Portal Row

• A horizontal row of the five brand tiles directly below the hero billboard
• Each tile ≈ 160 × 96pt landscape, 10pt radius, brand-tinted gradient + centered logo
• This is Disney+'s defining navigation element — the "five universes" gateway

Hero Billboard

• Full-bleed key art at the top of Home, ≈ 62% of viewport height
• A vertical gradient scrim from transparent (top) to #0A0E2A (bottom) so foreground UI reads
• Series logo artwork centered-low (not a text title)
• Metadata strip (13pt 600 #A0A6C0): "Action · PG-13 · 2024 · 2h 11m"
• Primary white "Play" pill + a glass "Watchlist" / "Trailer" secondary
• Auto-trailer: after ~3s the still cross-fades to a muted, looping trailer; a mute toggle sits bottom-right
• A faint starfield layer sits behind/within the scrim

Detail Screen Hero

• Full-bleed key art + scrim, logo artwork, metadata strip, synopsis (15pt 400 #A0A6C0)
• Full-width white "Play" / "Resume S2:E4" pill
• Labeled icon row: Watchlist · Download · Share · Rate
• Tabs below: "Episodes", "Suggested", "Extras", "Details"

Episode Row

• Height: 104pt
• Layout: 160 × 90pt 16:9 thumbnail (6pt radius) with a small play overlay + a #0063E5 progress bar if partially watched → stacked "E4 · Title" (14pt 600) + synopsis (13pt 400 #A0A6C0, 2-line) + runtime (12pt 400, tabular) + download icon
• Background: #12152E card, 8pt radius

Navigation

Bottom Tab Bar

• Height: 52pt + safe area
• Background: rgba(10,14,42,0.96) with .regularMaterial blur
• Tabs: Home, Search, Watchlist, Downloads, Profile
• Icon size: 24pt
• Active color: #FFFFFF with a small #0063E5 underline/dot indicator; inactive: #A0A6C0
• Labels: Avenir Next 10pt weight 600, shown always
• Active icon: filled SF Symbol variant; inactive: outlined

Top Nav (Home Entry)

• Height: 44pt + safe area, transparent over the billboard
• Disney+ wordmark/logo centered (or left); profile avatar (28pt) top-right
• Scrolls to a solid #0A0E2A bar with a hairline #2A3050 divider on content scroll

Detail Nav

• A back chevron (28pt, white) in a subtle glass circle top-left over the key art
• A cast/AirPlay icon top-right

Input Fields

Search Bar

• Background: #1A1F3D
• Height: 44pt
• Corner radius: 8pt
• Leading SF Symbol magnifyingglass, 18pt, #A0A6C0
• Placeholder: "Search by title, character, or genre", 16pt 400 #A0A6C0
• Focus: 1pt #0063E5 border, cursor #0063E5
• Text in field: #FFFFFF

Filter Chip

• Background: #1A1F3D default / #0063E5 selected
• Text: #FFFFFF (both states)
• Padding: 8pt vertical, 18pt horizontal
• Corner radius: 8pt
• Font: Avenir Next 14pt weight 600
• Examples: "Movies", "Series", "Originals", "Kids"

Distinctive Components

The Brand-Portal Tiles (Signature)

• Five landscape gateway tiles — Disney, Pixar, Marvel, Star Wars, National Geographic — in a row beneath the billboard
• Each is a brand-tinted gradient with the brand's logo centered (Disney = blue/castle, Pixar = blue/lamp, Marvel = red, Star Wars = black/gold, Nat Geo = yellow frame)
• Tapping one opens that universe's curated hub; the tile lifts (scale 1.04) with a #1A75FF glow on focus
• This "choose your universe" row is the most recognizable Disney+ pattern

Starfield Hero Billboard with Auto-Trailer

• The hero is full-bleed key art over a faint scatter of white star points (rgba(255,255,255,0.0–0.5), 1–2px, parallax-subtle)
• A bottom-up #0A0E2A scrim grounds the foreground UI
• After ~3s the still cross-fades to a muted looping trailer; a speaker.slash / speaker mute toggle sits bottom-right
• The starfield reinforces the brand's "magic / night sky / cinema" identity

Tile Glow + Scale Focus

• Any card or portal tile, when focused or pressed, scales to 1.04, gains a 2pt #1A75FF border and a rgba(26,117,255,0.30) outer glow over ~180ms
• This is the unified selection language across Home, brand hubs, and search

Continue-Watching Progress Bar

• 16:9 cards in the "Continue Watching" row carry a 3pt #0063E5 progress bar pinned to the bottom of the art, plus a centered play affordance — a clear resume cue across the catalog

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56, 72
• Standard margin: 16pt horizontal, 24pt between content rows
• Row header to cards: 12pt; card-to-card: 12pt

Grid & Container

• Content width: full device width with 16pt horizontal margins
• Horizontal shelves: 16pt left inset, last 16:9 card peeks at the right edge
• The brand-portal row: 5 tiles, horizontally scrollable, 12pt gap
• Search grid: 2-column 16:9 grid, 12pt gap

Whitespace Philosophy

• Cinematic full-bleed: the billboard and key art bleed edge-to-edge; chrome is minimal so content fills the frame
• Horizontal browsing rhythm: rows of 16:9 cards scroll sideways like a film-poster wall
• The portals get a stage: the brand-tile row sits in its own band with breathing room — it's a featured choice, not a list

Border Radius Scale

• Soft (6pt): 16:9 content cards, episode thumbnails
• Comfortable (8pt): buttons, cards, search, chips, the metadata panel
• Portal (10pt): brand-portal tiles
• Sheet (16pt): bottom sheets
• Circle (50%): avatars, icon hit targets, the mute toggle

6. Depth & Elevation

Shadow Philosophy: Disney+ expresses depth cinematically — the dominant "shadow" is the billboard scrim (a gradient to navy, not a drop shadow) that makes UI legible over key art. Cards carry a soft dark lift so the poster wall feels layered. The expressive accent is the blue focus glow (#1A75FF at 30%): selecting a card or brand portal blooms a halo around it, the spotlight-on-a-marquee feel. Conventional gray shadows are minimal; the navy canvas and blue glow do the work.

Motion

• Tile glow + scale (signature): focus/press scales 1.0 → 1.04, fades in a 2pt #1A75FF border + rgba(26,117,255,0.30) glow over 180ms ease-out
• Hero auto-trailer: still → muted video cross-fade over ~600ms after a ~3s dwell
• Play button tap: scale 0.98 spring (damping 0.8), .impactOccurred(.medium) haptic
• Brand-portal open: tile scales up and cross-fades into the universe hub (shared-element, 0.35s)
• Row scroll: smooth horizontal paging with a slight peek; no bounce-heavy physics
• Detail open: key art shared-element rise from the tapped card, scrim fades in over 300ms
• Starfield: a very slow parallax drift (sub-pixel), effectively ambient

7. Do's and Don'ts

Do

• Use the deep space-navy canvas (#0A0E2A) with a faint starfield behind the hero
• Reserve Disney Blue (#0063E5) for primary actions; use glow blue (#1A75FF) for focus halos and selected tiles
• Make the brand-portal tile row (Disney/Pixar/Marvel/Star Wars/Nat Geo) a prominent, defining element
• Use 16:9 landscape cards — the streaming/TV aspect, never square music tiles
• Stage the hero as a full-bleed billboard with logo artwork and an auto-playing muted trailer
• Use a white "Play" pill with a dark glyph over key art (the cinematic standard)
• Apply the unified tile glow + scale 1.04 focus language everywhere
• Use an Avenir-family sans (Inter fallback) at weights 400/600/700
• Keep secondary text periwinkle-gray (#A0A6C0), tuned to the navy

Don't

• Don't use pure black or a flat gray canvas — Disney+ is rich navy #0A0E2A with a starfield
• Don't add a second brand hue — content artwork supplies the color
• Don't use square (1:1) content tiles — Disney+ is 16:9 landscape
• Don't replace logo artwork with plain text titles when branded logos exist
• Don't drop the brand-portal row — it's the signature navigation
• Don't use heavy neutral drop shadows — depth is the scrim + the blue focus glow
• Don't use thin or black font weights — 400/600/700 only
• Don't animate focus with bounce — the glow + scale is a smooth 180ms ease-out
• Don't omit the bottom-up scrim over key art — foreground text needs it

8. Responsive Behavior

Device Sizes

Dynamic Type

• Detail title, synopsis, metadata strip, episode titles: full scale
• Badges ("NEW", "LIVE"): fixed 10pt (exact geometry)
• Runtime/episode counts: scale but stay tabular
• Tab labels: fixed 10pt
• Logo artwork: scales proportionally with the billboard (image, not type)

Orientation

• Home / Search / Watchlist / Downloads: portrait-locked
• Detail: portrait-locked
• Video player: landscape (full-screen cinematic playback)

Touch Targets

• Play pill: full-width, 48pt tall — unmissable
• Brand-portal tiles: ≈ 160 × 96pt — large, easily tappable
• 16:9 cards: full-card tap, ≥ 90pt tall
• Icon actions: 22pt glyph, 44pt hit area
• Tab icons: 24pt glyph, 44pt effective hit

Safe Area Handling

• Top: transparent nav respects safe area; Dynamic Island floats over the billboard scrim
• Bottom: tab bar respects the home indicator; the billboard bleeds full under the status bar
• Sides: 16pt content insets; key art and billboard bleed edge-to-edge

9. Agent Prompt Guide

Quick Color Reference

• Canvas navy: #0A0E2A
• Surface 1 (cards): #12152E
• Surface 2 (sheets/search): #1A1F3D
• Divider: #2A3050
• Text primary: #FFFFFF
• Text secondary (periwinkle-gray): #A0A6C0
• Text tertiary: #5A6080
• Disney Blue (action): #0063E5
• Glow Blue (focus/selected): #1A75FF
• Blue pressed: #0052BD
• Live red: #E5484D

Example Component Prompts

• "Create the SwiftUI Disney+ hero billboard: full-bleed 16:9 key art at ~62% viewport height with a faint starfield (scattered rgba(255,255,255,0.0–0.5) 1–2px points) and a vertical scrim from transparent to #0A0E2A (bottom). Centered-low series logo artwork (image, not text), a metadata strip 'Action · PG-13 · 2024 · 2h 11m' in Avenir Next 13pt weight 600 #A0A6C0, a white 'Play' pill (48pt, 8pt radius, play.fill + label in #0A0E2A) with a rgba(26,117,255,0.30) bloom, and a glass 'Watchlist' secondary. After ~3s cross-fade the still to a muted looping trailer with a speaker.slash mute toggle bottom-right."
• "Build a Disney+ brand-portal row: a horizontally scrollable row of five 160×96pt landscape tiles (10pt radius) — Disney, Pixar, Marvel, Star Wars, National Geographic — each a brand-tinted gradient with the brand logo centered, 1pt #2A3050 border. On focus/press: scale 1.04, 2pt #1A75FF border, and a rgba(26,117,255,0.35) outer glow over 180ms ease-out."
• "Design a Disney+ 16:9 content card: 220pt wide, 16:9 aspect, 6pt corner radius, branded key art only (no separate title). Continue-watching variant adds a 3pt #0063E5 progress bar pinned to the bottom edge + a centered play overlay. Focused: scale 1.04 + 2pt #1A75FF border + rgba(26,117,255,0.30) glow."
• "Create a Disney+ episode row: 104pt tall #12152E card (8pt radius), a 160×90pt 16:9 thumbnail (6pt radius) with a play overlay and a #0063E5 progress bar, 'E4 · The Siege' in Avenir Next 14pt weight 600 #FFFFFF, a 2-line synopsis in 13pt weight 400 #A0A6C0, runtime '48m' in 12pt weight 400 tabular, and a download icon."
• "Build the Disney+ bottom tab bar: 52pt + safe area, rgba(10,14,42,0.96) with .regularMaterial blur. Tabs Home / Search / Watchlist / Downloads / Profile, 24pt icons, active = #FFFFFF with a small #0063E5 dot indicator, inactive = #A0A6C0, labels Avenir Next 10pt weight 600."

Iteration Guide

1. Canvas is rich space-navy #0A0E2A with a faint starfield behind the hero — never pure black or flat gray
2. Disney Blue (#0063E5) for actions; glow blue (#1A75FF) for focus halos and selected brand tiles
3. The brand-portal tile row (Disney/Pixar/Marvel/Star Wars/Nat Geo) is the signature navigation — make it prominent
4. Content cards are 16:9 landscape (streaming/TV aspect), never square; prefer branded key art over text titles
5. The hero is a full-bleed billboard with logo artwork + a bottom-up scrim + a muted auto-trailer after ~3s
6. Apply the unified tile glow + scale 1.04 focus language everywhere (180ms ease-out, no bounce)
7. Typography: Avenir-family sans (Inter fallback), weights 400/600/700; periwinkle-gray secondary tuned to the navy
8. Depth is the scrim + the blue focus glow, not neutral gray shadows; dark-only — there is no light mode