# Design System Inspiration of Disney+ (iOS)

## 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

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Billboard Title (text fallback) | Avenir Next | 30pt | 700 | 1.1 | -0.3pt | Used when no logo artwork is available |
| Detail Title | Avenir Next | 26pt | 700 | 1.15 | -0.2pt | Series / film detail hero title |
| Section Header | Avenir Next | 20pt | 700 | 1.2 | -0.1pt | "Recommended For You", "Originals" |
| Row Header (Brand) | Avenir Next | 18pt | 700 | 1.2 | 0pt | "Because you watched…" |
| Card Title | Avenir Next | 14pt | 600 | 1.3 | 0pt | Title under a 16:9 card (when shown) |
| Synopsis / Body | Avenir Next | 15pt | 400 | 1.5 | 0pt | Detail-screen description |
| Metadata Strip | Avenir Next | 13pt | 600 | 1.3 | 0.3pt | "Action · PG-13 · 2024 · 2h 11m" |
| Subtitle / Caption | Avenir Next | 14pt | 400 | 1.3 | 0pt | "S2:E4 · The Mandalorian" |
| Meta / Count | Avenir Next | 12pt | 400 | 1.3 | 0pt | "24 episodes", tabular |
| Badge (UPPER) | Avenir Next | 10pt | 700 | 1.0 | 1.0pt | "NEW", "PREMIERE", "LIVE" |
| Button (Primary) | Avenir Next | 16pt | 700 | 1.0 | 0.3pt | Blue "Play" / "Resume" |
| Button (Secondary) | Avenir Next | 14pt | 600 | 1.0 | 0.2pt | Outline "Watchlist" / "Trailer" |
| Tab Label | Avenir Next | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |

### 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

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Rows, canvas, content shelves |
| Card (Level 1) | `rgba(0,0,0,0.4) 0 6px 18px` | 16:9 cards lift subtly off the navy |
| Billboard Scrim | Vertical gradient transparent → `#0A0E2A` | Grounds foreground UI over key art |
| Focus Glow (Level 2) | `rgba(26,117,255,0.30) 0 0 24px` + 2pt `#1A75FF` border | Focused/selected cards and portal tiles |
| Play Bloom | `rgba(26,117,255,0.30) 0 6px 22px` | Soft bloom behind the billboard Play button |
| Sheet (Level 3) | `rgba(0,0,0,0.5) 0 -14px 44px` | Bottom sheets, episode pickers |
| Tab Bar Material | `.regularMaterial` over 96%-opaque navy | Bottom tab bar over scrolling content |

**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
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | 200pt 16:9 cards; 3.5 brand tiles visible |
| iPhone 13/14/15 | 390pt | Standard 220pt cards; ~4 brand tiles visible |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the transparent top bar |
| iPhone 15/16 Pro Max | 430pt | 240pt cards; taller billboard; 5 brand tiles visible |
| iPad | 768pt+ | 3–4 cards per row; billboard ~50% height; portals as a larger band |

### 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