At a glance
17tokens
10type steps
2radius steps
12pxspacing base
Hulu, in one page
Hulu's iOS app is a content-dense streaming surface built on a near-black canvas (#0B0C0F) that pushes thumbnail artwork forward and lets the chrome disappear. Where some streamers chase cinematic minimalism, Hulu leans into density: the home screen is a stack of horizontally-scrolling rails, each packed with 16:9 landscape tiles, so the eye is always scanning a grid of shows rather than resting on a single hero. The background is a touch warmer and lighter than pure black to keep the dark UI from crushing the edges of poster art, and elevated surfaces (#151619, #1E2024) step up just enough to separate sheets and cards without introducing visible borders.
The accent system is singular and loud. Hulu Green (#1CE783) — the brand's electric, almost neon signature — is reserved for the verb: the primary "Watch" / "Play" CTA, the active tab indicator, progress fill on continue-watching tiles, and toggles. It is intentionally the only saturated color in the interface. Against the desaturated grays and full-color thumbnails, the green reads as "go" — when you see it, it's an action. Everything else is white, gray, or near-black. There is no secondary brand hue competing for attention.
Typography is Graphik (Hulu's brand typeface), rendered here with an Inter fallback that preserves its clean, slightly condensed grotesque character. The hierarchy is compact and utilitarian: 11-32pt with weights at 400 / 600 / 800. There are no oversized editorial headlines — the artwork is the headline. Type's job is to label: show titles at 15-16pt weight 600, metadata (season, rating, year) at 12-13pt weight 400 in gray, rail headers at 20-22pt weight 800. The most expressive type moment is the details hero, where the show's logo art (when present) or title sits at 26-32pt weight 800 over a darkened backdrop still.
Key Characteristics:
- Near-black canvas (
#0B0C0F) — slightly warm/lifted off pure black to protect thumbnail edges - Hulu Green (
#1CE783) as the ONLY accent — the electric "Watch" verb - 16:9 landscape content tiles in dense horizontal rails — a browse-heavy grid
- Hub chip row near the top (Disney, FX, HBO, etc.) for branded content destinations
- Green progress bar on continue-watching tiles — resume-state is always visible
- Graphik typeface (Inter fallback), weights 400/600/800
- Details hero: large darkened backdrop still with a green "Watch" CTA pinned over it
- Tile scale-up on press and a subtle focus lift on the active rail
- Bottom tab bar: Home, Hubs, My Stuff, Search, Account
Do's and don'ts
Do
- Use
#0B0C0Fas the canvas — warm-lifted near-black, NOT pure#000000(reserve that for the player) - Reserve Hulu Green (
#1CE783) for the "Watch" verb, active tab, and progress — it's the only saturated color - Use near-black text (
#0B0C0F) on the green CTA — intentional for contrast on the bright green - Keep 16:9 landscape tiles at 6pt corner radius — soften, don't round
- Always show the green progress bar on in-progress tiles — resume state is core
- Stack rails densely (28pt apart) with full metadata — Hulu is browse-heavy by design
- Put the green glow under the primary CTA — it's the chromatic elevation cue on dark
- Make the active tab GREEN (icon + label) — green is the tab indicator here
Don't
- Don't use pure black
#000000for the app canvas — it crushes thumbnail edges; it's player-only - Don't add a second accent hue — the single electric green is the entire brand voice
- Don't use white text on the green button — near-black is the intentional contrast choice
- Don't use thin or medium weights — Graphik here is 400 / 600 / 800 only
- Don't round content tiles heavily — 6pt max keeps the 16:9 integrity
- Don't hide continue-watching progress — the green bar must always be visible on resumable tiles
- Don't introduce visible card borders — elevation is surface-step color, not strokes
- Don't over-animate — tile scale is subtle (1.04), springs stay in the 180-300ms range
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 Hulu design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Hulu Green: #1ce783
- Green Pressed: #15b869
- Canvas: #0b0c0f
- Deep Black: #000000
- Surface 1: #151619
- Surface 2: #1e2024
- Surface 3: #2a2d33
- Divider: #2a2d33
- Text Primary: #ffffff
- Text Secondary: #a0a4ab
Type:
- families: Graphik, Fallback Stack, Numerals
- scale: 10, 11, 12, 13, 15, 16, 20, 22, 28
- weights: 400, 600, 800
Shape:
- radius: 6, 8
- elevation: Shadow: `rgba(28,231,131,0.30) 0 8px 24px` — a soft green glow
Spacing: 12, 16
Rules:
- Use `#0B0C0F` as the canvas — warm-lifted near-black, NOT pure `#000000` (reserve that for the player)
- Reserve Hulu Green (`#1CE783`) for the "Watch" verb, active tab, and progress — it's the only saturated color
- Use near-black text (`#0B0C0F`) on the green CTA — intentional for contrast on the bright green
- Keep 16:9 landscape tiles at 6pt corner radius — soften, don't round
- Always show the green progress bar on in-progress tiles — resume state is core
- Stack rails densely (28pt apart) with full metadata — Hulu is browse-heavy by design
Avoid:
- Don't use pure black `#000000` for the app canvas — it crushes thumbnail edges; it's player-only
- Don't add a second accent hue — the single electric green is the entire brand voice
- Don't use white text on the green button — near-black is the intentional contrast choice
- Don't use thin or medium weights — Graphik here is 400 / 600 / 800 only
- Don't round content tiles heavily — 6pt max keeps the 16:9 integrity
- Don't hide continue-watching progress — the green bar must always be visible on resumable tiles
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Hulu Green (
#1CE783): Primary "Watch" / "Play" CTA, active tab icon + label, progress-bar fill, active toggle, "in My Stuff" check. - Green Pressed (
#15B869): Pressed/active state for the green CTA and toggles. - Green Glow (
rgba(28,231,131,0.30)): Soft drop-shadow under the primary CTA and around focused tiles.
Canvas & Surfaces
- Canvas (
#0B0C0F): Primary near-black app background — warm-lifted to protect artwork edges. - Deep Black (
#000000): Full-screen video player background, splash. - Surface 1 (
#151619): Card backgrounds, sheets, elevated rails, details metadata panel. - Surface 2 (
#1E2024): Higher elevation — modals, active list rows, chip default background. - Surface 3 (
#2A2D33): Pressed state on dark surfaces, hairline divider tone. - Divider (
#2A2D33): 1pt separators between settings rows and metadata blocks.
Text
- Text Primary (
#FFFFFF): Show titles, screen headers, primary labels. - Text Secondary (
#A0A4AB): Metadata (year · rating · seasons), episode descriptions, rail subtitles. - Text Tertiary (
#6B6F77): Disabled labels, very low-emphasis captions, placeholder text.
Semantic
- Live Red (
#F0476A): "LIVE" badge on sports/news live tiles and the live-TV guide now-playing marker. - Rating Pill Gray (
#2A2D33): "TV-MA" / "R" maturity-rating chip background, text#FFFFFF. - New Badge Green (
#1CE783): "NEW EPISODE" badge (same green as primary). - Error Red (
#F0476A): Playback errors, download failures, offline state.
Light Mode (Limited Use)
Hulu's iOS app is effectively dark-only — the streaming-lounge atmosphere depends on the dark canvas. A light variant is not part of the core product.
- Light Canvas (
#FFFFFF) - Light Text (
#0B0C0F)
Type scaleRead the full spec
Font Family
- Primary:
Graphik(Hulu brand typeface) — clean grotesque with a slightly condensed, modern character - Fallback Stack:
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for runtime, episode counts, and live-guide times
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Details Hero Title | Graphik | 32pt | 800 | 1.1 | -0.5pt | Show title on details screen (when no logo art) |
| Screen Title (Large) | Graphik | 28pt | 800 | 1.15 | -0.4pt | "My Stuff", "Hubs" large nav title |
| Rail Header | Graphik | 22pt | 800 | 1.2 | -0.3pt | "Continue Watching", "TV You Might Like" |
| Section Header | Graphik | 20pt | 800 | 1.2 | -0.3pt | Sub-rails inside a hub |
| Episode Title | Graphik | 16pt | 600 | 1.25 | -0.1pt | Episode row title in details |
| Tile Title | Graphik | 15pt | 600 | 1.3 | -0.1pt | Show title under a 16:9 tile |
| Body | Graphik | 15pt | 400 | 1.45 | 0pt | Synopsis, episode description |
| Metadata | Graphik | 13pt | 400 | 1.3 | 0pt | "2024 · TV-MA · 3 Seasons" |
| Tile Subtitle | Graphik | 12pt | 400 | 1.3 | 0pt | "S3 · E4" / "New episode" under tile |
| Label (UPPER) | Graphik | 11pt | 800 | 1.2 | 0.6pt | "CONTINUE WATCHING" eyebrow labels |
| Button (Primary) | Graphik | 16pt | 800 | 1.0 | 0.2pt | Green "Watch" / "Play" button |
| Button (Secondary) | Graphik | 15pt | 600 | 1.0 | 0pt | "Details", "Trailer", outline buttons |
| Tab Label | Graphik | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
| Badge | Graphik | 11pt | 800 | 1.0 | 0.4pt | "LIVE", "NEW", maturity rating pill |
Principles
- Weights concentrated at 400 / 600 / 800: Regular for body/metadata, semibold for titles, extrabold for headers and CTAs — no thin, no medium
- Density over drama: No hero-size display type; the tile grid is the visual interest
- Negative tracking on big type, neutral on small: -0.5pt at 32pt, easing to 0pt at body sizes
- All-caps only for eyebrows and badges: "CONTINUE WATCHING", "LIVE" — never for titles
- Green text is structural: green appears only on the active tab label and progress; never as decorative body color
Components and layoutRead the full spec
Buttons
Primary Watch CTA (The Green Button)
- Shape: Rounded rectangle, height 52pt, full-width within content margins (or auto-width on details)
- Background:
#1CE783 - Text:
#0B0C0F(intentionally near-black for contrast on the bright green, not white) - Icon: SF Symbol
play.fill18pt leading the label, also#0B0C0F - Corner radius: 8pt
- Font: Graphik 16pt weight 800, letter-spacing 0.2pt
- Shadow:
rgba(28,231,131,0.30) 0 8px 24px— a soft green glow - Pressed: background
#15B869, scale 0.97, with.impactOccurred(.light)haptic
Secondary Button ("Details" / "Trailer")
- Background:
rgba(255,255,255,0.12) - Text:
#FFFFFF - Height: 52pt, corner radius 8pt
- Font: Graphik 15pt weight 600
- Pressed: background
rgba(255,255,255,0.20), scale 0.98
Icon Actions (My Stuff +, Download, Share)
- Size: 24pt glyph, 44pt hit area
- Default:
#FFFFFF - Active:
#1CE783(added to My Stuff, download complete) - Layout: vertical icon-over-label stacks on the details action row, 24pt gap
Hub Chip (branded destinations)
- Background:
#1E2024(or the hub brand fill when entered) - Text/Logo:
#FFFFFF - Height: 40pt, corner radius 8pt, horizontal padding 16pt
- Font: Graphik 13pt weight 600
- Pressed: background
#2A2D33, scale 0.97
Text Button ("See All")
- Font: Graphik 13pt weight 600
- Color:
#A0A4AB - No underline, 44pt hit area, trailing each rail header
Cards & Containers
16:9 Content Tile (Horizontal rail)
- Width: 200pt (standard), 260pt (spotlight rail)
- Aspect: 16:9 landscape thumbnail
- Corner radius: 6pt on the artwork
- Gap between tiles: 12pt
- Structure: thumbnail → optional title (15pt w600, 1-line clamp) → subtitle (12pt w400
#A0A4AB) - Continue-watching variant: 4pt green progress bar pinned to the bottom edge of the thumbnail, track
rgba(255,255,255,0.25) - Press: scale 1.04 with focus lift
rgba(0,0,0,0.5) 0 12px 28pxand subtle green ring
Poster Tile (2:3, used in some hubs)
- Width: 130pt, aspect 2:3
- Corner radius: 6pt
- Used inside movie-forward hubs; same press treatment as 16:9
Continue Watching Rail
- Rail header "Continue Watching" 22pt w800 + "See All" trailing
- 16:9 tiles with green progress bar + "S3 · E4 · 24 min left" subtitle
- A circular play overlay (
rgba(0,0,0,0.45)40pt with whiteplay.fill) centered on hover/focus
Hub Chip Row
- Horizontal scroll directly under the top nav
- 40pt-tall chips with brand wordmarks (Disney, FX, Hulu Originals, HBO, etc.)
- 12pt gap, peek last chip at right edge to signal scroll
Details Hero
- Full-bleed 16:9 backdrop still, height ~ 280pt, darkened with a bottom-up gradient
rgba(11,12,15,0) → #0B0C0F - Show logo art (or 32pt w800 title) anchored bottom-left over the gradient
- Metadata line "2024 · TV-MA · 3 Seasons · Drama" in 13pt w400
#A0A4AB - Action row: full-width green "Watch" CTA, then
+ My Stuff,Download,Sharevertical icon stacks - Below: synopsis (15pt w400, 3-line clamp + "More"), then episode list
Episode Row
- Height: 96pt
- Layout: 140pt × 79pt (16:9) thumbnail with green progress bar if partially watched → stacked title (16pt w600) + "S3 · E4 · 48 min" meta (13pt w400
#A0A4AB) + 2-line description → trailing download icon - Background: transparent (
#0B0C0F) - Pressed: background
#151619
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
rgba(11,12,15,0.94)with.regularMaterialblur - Tabs: Home, Hubs, My Stuff, Search, Account
- Icon size: 24pt
- Active color:
#1CE783(icon + label both turn green — green IS the indicator here) - Inactive:
#A0A4AB - Labels: Graphik 10pt w600, always shown
- Active tab icon: filled SF Symbol; inactive: outlined
Top Nav (Home)
- Height: 48pt + safe area
- Hulu wordmark (green) top-left, 22pt
- Profile avatar (28pt circular) top-right
- Transparent over the hero, fades to
rgba(11,12,15,0.94)blur on scroll
Player Controls Overlay
- Tap video → controls fade in over a
rgba(0,0,0,0.5)scrim - Center: 64pt circular
rgba(255,255,255,0.15)button with whiteplay.fill/pause.fill, ±10s skip flanking at 28pt - Bottom: green scrubber (2pt track
rgba(255,255,255,0.3),#1CE783fill, 14pt white thumb), elapsed/remaining 12pt - Top: title + close (✕), bottom-right: captions, audio, AirPlay icons
Input Fields
Search Bar
- Background:
#1E2024 - Height: 44pt, corner radius 8pt
- Leading SF Symbol
magnifyingglass18pt#A0A4AB - Placeholder: "Search shows, movies, networks", 16pt w400
#A0A4AB - Text color:
#FFFFFF - Focus: 1pt
#1CE783ring
Filter / Genre Chip
- Background:
#1E2024default /#1CE783selected - Text:
#FFFFFFdefault /#0B0C0Fselected - Height: 36pt, corner radius 500pt (full pill), horizontal padding 16pt
- Font: Graphik 14pt weight 600
Distinctive Components
Green Play CTA over Content-Dense Rows
- The signature Hulu move: a single bright-green "Watch" button (with soft green glow) pinned over the details backdrop, immediately above stacked, information-rich episode and recommendation rows. The contrast between the one electric CTA and the dense gray content grid is the brand's core tension.
Continue-Watching Progress Bar
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 170pt 16:9 tiles instead of 200pt |
| iPhone 13/14/15 | 390pt | Standard 200pt tiles |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in transparent top nav |
| iPhone 15/16 Pro Max | 430pt | 230pt tiles, details backdrop scales to 320pt |
| iPad | 768pt+ | 4-column My Stuff grid, larger details backdrop, rails show 4-5 tiles |
Dynamic Type
- Show titles, episode titles, synopsis: full scale
- Tile subtitle / metadata: scales but clamps at +2 steps (layout-sensitive in dense rails)
- Watch CTA label: scales to 18pt max; button height fixed at 52pt
- Tab labels, badges, scrubber times: fixed (never scale)
Orientation
- Home / Hubs / My Stuff / Search / Details: portrait-locked
- Video player: rotates to landscape — auto-enters full-screen landscape on play
- Live guide: portrait, horizontally-scrolling timeline
Touch Targets
- Watch CTA: 52pt height, full-width — impossible to miss
- 16:9 tiles: full-tile tappable, ≥ 110pt tall hit
- Episode rows: 96pt height, full-row tappable
- Tab bar icons: 24pt icon, 44pt effective hit
- Icon actions: 24pt glyph, 44pt hit area
Safe Area Handling
- Top: transparent nav respects safe area / Dynamic Island over the hero
- Bottom: tab bar floats above home indicator; player controls inset from it
- Sides: 16pt content margins; rails bleed to the right edge intentionally
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-hulu {--page-bg: #0b0c0f;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #f0476a;
--link-hover-color: #ec1844;
--border-color: #37383a;
--card-bg: #0b0c0f;
--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: #1f1f22;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0b0c0f;
--footer-text-color: #aaaaab;
--button-bg: #f0476a;
--button-text-color: #000000;
--button-hover-bg: #ec1844;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #1a1b1d;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #28292c;
--button-secondary-border: 1px solid #37383a;
--prompt-bg: #17181b;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/video/hulu/DESIGN.md· 20.8 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.