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
Crunchyroll, in one page
Crunchyroll's iOS app is a cinema for anime. The entire experience is built on a true-black OLED canvas (#000000) so that full-bleed key-art — the painted, saturated, character-forward poster of each show — can bleed edge-to-edge and dissolve into a perfect black floor. Open any title and the first thing you see is a ~60%-of-screen hero image of the show's art, overlaid at the bottom with a black gradient scrim that the title, rating, and genre tags sit on. The philosophy is "the art is the interface": Crunchyroll's catalog is its product, and the UI is engineered to recede so the illustration carries the screen. Chrome is sparse — a translucent status bar floating over the art, a single bright-orange call-to-action, a thin segmented control, and a five-tab bottom bar.
The one color that ever competes with the artwork is Crunchyroll Orange (#F47521) — the brand's signature "hime" orange. It is used with discipline: the primary "Start Watching" button, the active bottom-tab icon and label, the sliding underline on the segmented control, and the episode-progress bar. Nothing else is orange. This single-accent restraint is deliberate — it means the orange always reads as "the thing to tap" or "where you left off", never as decoration. The second brand color, Premium Gold (#FFC107), is reserved exclusively for the "Premium" badge and the lock glyph on premium-gated episodes; it never appears as a button or accent.
The signature interaction moment is the anime detail screen: a full-bleed key-art hero with a Simulcast/Premium badge row, the show title in heavy Lato 900, a star-rating + year + maturity + genre meta line, a full-width orange "Start Watching E1" (or "Resume E7" if the user has progress) button, a four-icon action row (Watchlist, Rate, Share, Comments), a segmented control (Episodes / Details / More Like This), and then the resume-aware episode list — each row a 112×64 thumbnail with a number chip, title, two-line synopsis, and an orange progress bar pinned to the bottom of the thumbnail showing exactly how far the user got. The Simulcast badge (a green chip that means "airing in Japan and here within an hour") and the Sub | Dub control are the two most Crunchyroll-specific affordances.
Typography is Lato — a humanist sans with a friendly warmth and a notably heavy 900 "Black" weight that Crunchyroll leans on hard for titles and CTAs. The hierarchy is poster-like: huge heavy titles, medium-weight section headers, light body. Weights concentrate at 400 (body/meta), 700 (titles, episode names), and 900 (hero titles, screen titles, button labels, badges). The black weight is the brand's voice — it makes the app feel bold and energetic, matching anime's intensity. On iOS, Lato falls back to SF Pro when not bundled.
Key Characteristics:
- True-black OLED canvas (
#000000) — no light mode; the app is dark-only so key-art bleeds to a perfect black floor - Full-bleed key-art hero (~60% of screen) with a bottom-to-black gradient scrim carrying title + meta
- Single accent — Crunchyroll Orange (
#F47521) for CTA, active tab, segmented underline, progress bar; nothing else - Premium Gold (
#FFC107) reserved only for the Premium badge and premium-lock glyph - Resume-aware episode list — every episode row carries an orange progress bar showing watch position
- Simulcast badge (green
#2BB673) — Crunchyroll's "airing now in Japan" signature affordance - Sub | Dub segmented control — switch audio/subtitle track, a core anime-streaming gesture
- Lato Black (900) titles — heavy, energetic poster typography matching anime's intensity
- Segmented control with a sliding orange underline (Episodes / Details / More Like This)
- Five-tab bottom bar: Home / Browse / Watchlist / Manga / Profile
- Content cards are pure key-art posters with minimal chrome — the illustration is the card
Do's and don'ts
Do
- Use true black (
#000000) as the canvas — Crunchyroll is OLED-first and dark-only - Let key-art bleed full-width and dissolve into the black floor via the scrim gradient
- Use Crunchyroll Orange (
#F47521) for exactly the CTA, active tab, segmented underline, and progress bar — nothing else - Reserve Premium Gold (
#FFC107) only for the Premium badge and premium-lock glyph - Put an orange progress bar on every resumable episode and Continue-Watching tile
- Use Lato 900 (Black) for hero titles, screen titles, button labels, and badges — the heaviness is the brand
- Use the Simulcast (green) badge for currently-airing-in-Japan titles
- Provide the Sub | Dub control on episodes — anime audiences expect to choose track
- Keep chrome sparse — the illustration is the interface
- Use the scrim gradient (not a solid panel) so title + meta stay legible over any art
Don't
- Don't add a light mode — Crunchyroll has none; a light canvas breaks the OLED key-art floor
- Don't introduce a second accent color — orange is the only interactive accent
- Don't use gold (
#FFC107) as a button or general accent — it means "Premium" exclusively - Don't put borders or cards around poster art — the black canvas is the separator
- Don't substitute weight 700 for hero/screen titles — they must be Lato 900
- Don't use uppercase for titles or body — uppercase is only for badges and the segmented control
- Don't let meta lines (year/rating/genre) use white — they are secondary gray
#A0A0A0 - Don't use heavy drop-shadows on the black canvas (they're invisible) — use the scrim and hairlines
- Don't animate aggressively — motion is cinematic and calm (150–300ms ease-out), including the "lights down" fade-to-black before playback
- Don't hide the episode-progress bar — resume position is the core re-engagement hook
- Don't render the hero scrim as a solid block — it must be a gradient resolving to
#000000
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 Crunchyroll design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Crunchyroll Orange: #f47521
- Premium Gold: #ffc107
- Orange Pressed: #d8610f
- Orange Tint: #ff8c42
- OLED Canvas: #000000
- Surface 1: #16171a
- Surface 2: #23252b
- Surface 3: #2e3035
- Divider: #2a2c31
- Text Primary: #ffffff
Type:
- families: Lato, Heavy Display, Fallback Stack, Dynamic Type
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 22
- weights: 400, 700, 900
Shape:
- radius: 6, 8
Spacing: 12, 24
Rules:
- Use true black (`#000000`) as the canvas — Crunchyroll is OLED-first and dark-only
- Let key-art bleed full-width and dissolve into the black floor via the scrim gradient
- Use Crunchyroll Orange (`#F47521`) for exactly the CTA, active tab, segmented underline, and progress bar — nothing else
- Reserve Premium Gold (`#FFC107`) only for the Premium badge and premium-lock glyph
- Put an orange progress bar on every resumable episode and Continue-Watching tile
- Use Lato 900 (Black) for hero titles, screen titles, button labels, and badges — the heaviness is the brand
Avoid:
- Don't add a light mode — Crunchyroll has none; a light canvas breaks the OLED key-art floor
- Don't introduce a second accent color — orange is the only interactive accent
- Don't use gold (`#FFC107`) as a button or general accent — it means "Premium" exclusively
- Don't put borders or cards around poster art — the black canvas is the separator
- Don't substitute weight 700 for hero/screen titles — they must be Lato 900
- Don't use uppercase for titles or body — uppercase is only for badges and the segmented control
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Crunchyroll Orange (
#F47521): The single brand accent — primary "Start Watching" button, active tab icon + label, segmented-control underline, episode-progress bar, focus rings. - Orange Pressed (
#D8610F): Pressed/active state of the orange CTA. - Orange Tint (
#FF8C42): Lighter orange used sparingly for hover/highlight on dark surfaces and inline links.
Canvas & Surfaces (Dark — the only mode)
- OLED Canvas (
#000000): Primary canvas — true black, lets key-art bleed and saves OLED power. - Surface 1 (
#16171A): Bottom sheets, modals, the "more options" tray. - Surface 2 (
#23252B): Cards on solid backgrounds, list-row press state, ghost-button fill, search field. - Surface 3 (
#2E3035): Inset progress-track background, segmented-control inactive fill, chips. - Divider (
#2A2C31): Hairline dividers between episode rows and between sections.
Crunchyroll ships no light mode. There is no light token table — the app is dark-only by design so the OLED black floor and key-art are always preserved.
Text
- Text Primary (
#FFFFFF): Titles, episode names, button labels — pure white on the black canvas. - Text Secondary (
#A0A0A0): Synopsis, meta lines (year · rating · genre), inactive tab labels. - Text Tertiary (
#6A6C70): Disabled actions, very low-emphasis captions, timestamps. - Text On-Scrim (
#D8D8D8): The rating/meta line that sits on the hero gradient scrim (slightly dimmed white for legibility over art).
Brand & Status Accents
| Role | Color | Usage | |
|---|---|---|---|
| Crunchyroll Orange | #F47521 | Primary CTA, active tab, progress bar, segmented underline | |
| Orange Pressed | #D8610F | CTA pressed state | |
| Premium Gold | #FFC107 | "Premium" badge fill, premium-lock glyph (text on it: #1A1304) | |
| Simulcast Green | #2BB673 | "Simulcast" badge fill | |
| New Blue | #2A9DF4 | "New Episode" badge fill | |
| Subtitled Tag | #FFFFFF on transparent + 1px rgba(255,255,255,0.5) border | "Sub \ | Dub" outline chip |
Semantic
- Error Red (
#E03E3E): Playback-error toast, download-failed banner, destructive confirm. - Success Green (
#2BB673): "Added to Watchlist" toast (reuses Simulcast green). - Warning Amber (
#FFC107): Offline / data-saver warnings (reuses Premium gold). - Scrim Gradient:
linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 55%, #000000 100%)— the hero-to-black fade behind title + meta.
Type scaleRead the full spec
Font Family
- Primary:
Lato(by Łukasz Dziedzic, 2010, SIL OFL) — humanist sans with semi-rounded details and a notably heavy 900 "Black" weight; warm, friendly, energetic — the Crunchyroll product face. - Heavy Display:
Latoweight 900 (Black) — used for hero titles, screen titles, button labels, and badges; the brand's primary expressive voice. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - iOS Note: When Lato is not bundled, falls back to SF Pro; map Lato Black → SF Pro
.heavy/.blackweight.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Lato | 32pt | 900 | 1.1 | -0.5pt | "Browse", "Watchlist" large nav titles |
| Hero Title | Lato | 28pt | 900 | 1.08 | -0.5pt | Show title over the key-art scrim |
| Section Header | Lato | 22pt | 900 | 1.15 | -0.2pt | "Continue Watching", "Popular This Season" |
| Row / Carousel Header | Lato | 18pt | 700 | 1.2 | -0.1pt | Home-screen carousel titles |
| Body | Lato | 16pt | 400 | 1.5 | 0pt | Synopsis paragraph, About text |
| Episode Title | Lato | 15pt | 700 | 1.3 | 0pt | "E1 — The Blade Awakens" |
| Episode Synopsis | Lato | 13pt | 400 | 1.35 | 0pt | Two-line clamp under episode title |
| Meta Line | Lato | 14pt | 400 | 1.4 | 0pt | "2024 · TV-14 · Action, Fantasy" |
| Button Label | Lato | 16pt | 900 | 1.0 | 0.3pt | "Start Watching", "Resume E7" |
| Segmented Item | Lato | 14pt | 900 | 1.0 | 0pt | Episodes / Details / More Like This |
| Badge | Lato | 11pt | 900 | 1.0 | 0.4pt | SIMULCAST / PREMIUM / NEW EPISODE (uppercase) |
| Tab Label | Lato | 10pt | 700 | 1.0 | 0.1pt | Bottom-tab labels |
| Caption / Timestamp | Lato | 12pt | 400 | 1.3 | 0pt | "Aired Oct 12", "24 min" |
Principles
- Black weight is the voice: Hero titles, screen titles, button labels, and badges are all Lato 900 — the heaviness IS the brand. Don't substitute 700 for these.
- Poster rhythm, not document rhythm: Type follows entertainment-poster conventions (huge title → small meta), not editorial conventions.
- Uppercase only for badges and the segmented control — never for titles or body.
- Body and synopsis stay 400 — only titles, episode names, and CTAs get weight.
- Meta lines are secondary gray (
#A0A0A0) — year/rating/genre never compete with the title. - Dynamic Type: titles, body, synopsis scale; badges, tab labels, segmented items, progress-bar geometry stay FIXED.
Components and layoutRead the full spec
Buttons
Primary Button ("Start Watching" / "Resume E7")
- Shape: Rounded rectangle, 8pt corner radius
- Size: full content width, 52pt tall
- Background:
#F47521(Crunchyroll Orange) - Text:
#FFFFFF, Lato 16pt weight 900, 0.3pt tracking - Leading icon: filled play triangle, 18pt,
#FFFFFF, 10pt gap before label - Pressed: background
#D8610F+ scale 0.98 - Disabled: background
#23252B, text#6A6C70
Secondary / Outline Button ("Add to Watchlist")
- Background: transparent
- Border: 1.5pt
rgba(255,255,255,0.4) - Text:
#FFFFFF, Lato 14pt weight 700 - Padding: 12pt vertical, 22pt horizontal
- Corner radius: 8pt
- Pressed: background
rgba(255,255,255,0.08)
Ghost Button ("Resume" on cards)
- Background:
#23252B - Text:
#FFFFFF, Lato 14pt weight 700 - Corner radius: 8pt
- Padding: 12pt vertical, 20pt horizontal
Text Button ("See all episodes")
- Background: none
- Text:
#F47521, Lato 14pt weight 900 - No underline
- Pressed: opacity 0.6
Icon Action (Watchlist / Rate / Share / Comments row)
- Vertical stack: 22pt stroked glyph + 11pt weight-700 label
- Color:
#A0A0A0default; the Watchlist glyph turns#F47521filled when the title is saved - 8pt vertical gap between glyph and label; evenly distributed in the action row
Content Card (the core atom)
Crunchyroll's catalog is rendered as key-art poster cards. The card *is* the illustration.
Poster Card (Browse grid / carousel)
- Aspect ratio: 2:3 (vertical poster) in grids; 16:9 (landscape thumbnail) in "Continue Watching"
- Corner radius: 6pt
- Image: full-bleed show key-art, full color, no overlay by default
- Optional top-left badge: Simulcast / New Episode chip, 8pt inset
- Optional bottom progress bar: 3pt orange fill on
rgba(255,255,255,0.25)track (Continue Watching only) - Title below card: Lato 14pt weight 700
#FFFFFF, 1-line truncate, 8pt top gap - Pressed: scale 0.97, 150ms ease-out
Hero Card (detail-screen top)
- Height: ~60% of screen (≈420pt on a 390pt-wide device)
- Full-bleed key-art, no corner radius (bleeds to screen edges)
- Bottom scrim:
linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 55%, #000 100%) - Overlaid content (badges, title, meta) anchored 18pt from bottom
Episode Row (signature component)
- Container: full width, 12pt vertical padding, 1pt
#2A2C31bottom divider - Thumbnail: 112×64pt, 6pt corner radius, full-color still
- Episode-number chip: top-left of thumbnail,
rgba(0,0,0,0.7)bg,#FFFFFFLato 10pt weight 900, 2×6pt padding, 3pt radius — e.g. "E1" - Progress bar: pinned to thumbnail bottom, 3pt tall,
rgba(255,255,255,0.25)track +#F47521fill at watched fraction - Title: Lato 15pt weight 700
#FFFFFF - Synopsis: Lato 13pt weight 400
#A0A0A0, 2-line clamp, 3pt top gap - 12pt gap between thumbnail and text column
Navigation
Bottom Tab Bar
- Height: 50pt + safe area (≈64pt total)
- Background:
rgba(0,0,0,0.95)withbackdrop-filter: blur(20px) saturate(180%), 0.5pt top border#2A2C31 - Tabs (5): Home, Browse, Watchlist, Manga, Profile
- Icon size: 22pt
- Active:
#F47521(filled glyph + label) - Inactive:
#6A6C70(stroked glyph + label) - Labels: Lato 10pt weight 700, always shown
- No tint pill — active state is pure orange color change
Top Bar (detail screen)
- No solid bar — a translucent back chevron + share/cast icons float directly over the key-art at the safe-area inset
- On scroll, a solid
#000000bar with the compact show title fades in once the hero title scrolls out
Top Bar (Home / Browse)
- Height: 44pt + safe area
- Background: transparent over content,
#000000when scrolled - Leading: Crunchyroll wordmark (Home) or screen title (Browse)
- Trailing: search glyph + notifications bell, 22pt,
#FFFFFF
Input Fields
Search Field
- Height: 44pt
- Background:
#23252B - Corner radius: 8pt
- Leading icon: magnifier 16pt
#A0A0A0 - Placeholder: "Search anime, manga…" Lato 15pt weight 400
#6A6C70 - Text:
#FFFFFF - Focus: 1.5pt
#F47521border
Segmented Control (Episodes / Details / More Like This)
- A row of text items separated by 24pt, sitting above a 1pt
#2A2C31divider - Item: Lato 14pt weight 900 —
#A0A0A0inactive,#FFFFFFactive - Active indicator: 3pt
#F47521bar pinned to the divider beneath the active item, 2pt radius - Tap or swipe to switch; the orange bar slides 220ms ease-out to the new item
Distinctive Components
Content Badge
- Pill-less rounded rect, 4pt corner radius, Lato 11pt weight 900 uppercase, 0.4pt tracking, 4–5pt padding
- Variants: Simulcast (
#2BB673bg /#FFFtext), Premium (#FFC107bg /#1A1304text), New Episode (#2A9DF4bg /#FFFtext) - Placement: top-left of poster cards (8pt inset) or in a badge row above the hero title
Sub | Dub Control
- An outline chip or two-segment toggle: "SUB" and "DUB" labels, Lato 12pt weight 900
- Inactive segment: transparent + 1pt
rgba(255,255,255,0.5)border, text#FFFFFF - Active segment:
#F47521fill, text#FFFFFF - 6pt corner radius; lives in the episode header or player overlay
Episode Progress Bar
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Hero ≈ 380pt tall; 3-col Browse grid; tab labels stay |
| iPhone 13/14/15 | 390pt | Standard layout; hero ≈ 420pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated by floating translucent top controls |
| iPhone 15/16 Pro Max | 430pt | Hero ≈ 460pt; 3-col grid with larger posters |
| iPad (portrait) | 768pt | 5-col Browse grid; detail content max-width 760pt centered; hero full-bleed |
| iPad (landscape) | 1024pt+ | 6-col grid; two-pane Browse + detail; player fills screen |
Dynamic Type
- Scales: hero title, section headers, body, synopsis, meta
- Fixed: badges, tab labels, segmented items, episode-number chip, progress-bar geometry
- Long titles wrap to 2 lines max in the hero; episode synopsis clamps to 2 lines
Orientation
- Portrait-primary for browsing screens; the video player is landscape-locked full-screen
- iPad supports landscape browsing with a wider grid and optional two-pane detail
Touch Targets
- Primary CTA: 52pt tall (exceeds 44pt minimum)
- Tab icons: 22pt glyph, 49pt+ hit area
- Episode row: full-row tap, 64pt+ effective height
- Segmented item: 14pt text, 44pt hit height
- Sub | Dub chip: 44pt hit height
Safe Area Handling
- Top: floating translucent back/share/cast controls respect safe area and the Dynamic Island
- Bottom: bottom tab bar + home indicator respected; player controls inset from the home indicator
- Hero key-art extends *under* the status bar (full-bleed) but title/meta stay below the safe area
- Sides: 20pt content inset; hero and carousels are full-bleed
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-crunchyroll {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #8e6a00;
--link-hover-color: #5b4400;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #ffc107;
--button-text-color: #000000;
--button-hover-bg: #d39e00;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-lato);
--heading-font: var(--font-lato);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- substack 83.3%
- youtube music 83.1%
- coffee meets bagel 81.2%
- espn 79.0%
- chipotle 78.3%
Where this came from
- Source document
ios/design-md/video/crunchyroll/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.