What is Crunchyroll's primary brand color?

Crunchyroll Orange is '#ff5e00', extracted 19 times across the homepage — 6 as background fill, 8 as border, 5 as text. The fill instances sit on the 'Start free trial' CTA pill and the 'Most Popular' badge above the 'Mega Fan' plan card; the border instances trace the 'Mega Fan' plan-card outline and the FAQ row hover state; the text instances appear in the orange wordmark inside the plan-picker section. The brand voltage was clustered from two near-duplicate sources, '#ff5e00' and '#ff640a' — both collapse to one perceptual token. It is the only saturated hue on the page; everything else is achromatic plus a single teal-leaning gray '#2abdbb'.

Does Crunchyroll have a dark mode, or is the whole homepage dark?

Neither. The homepage runs a two-canvas split — the top hero band is '#151515' near-black for atmosphere behind the poster-grid wallpaper, then every section below the fold inverts to '#ffffff' with black ink. The plan-picker section, simulcast tile rail, benefits row, FAQ accordion, and footer all sit on white. There is no theme toggle. The authenticated app at app.crunchyroll.com runs a separate dark-canvas chrome that is out of scope for this DESIGN.md.

What typography does Crunchyroll use, and what if Crunchyroll Atyp isn't available?

Display headings run 'Crunchyroll Atyp', a proprietary geometric sans licensed only to Crunchyroll, with fallback to arial, helvetica, sans-serif. The hero 'The world's largest dedicated Anime collection on demand' lands at '80px' / weight '700' / '80px' line-height / '-2.24px' letter-spacing — the system's only weight-700-on-Atyp display token. Body and navigation run DMSans with a 'Helvetica Neue', helvetica, sans-serif fallback at 14–18px / weight '400'. If Crunchyroll Atyp is unavailable, Inter or Manrope at weight 700 with '-0.02em' tracking is the closest open substitute for the hero — preserve the tight negative-tracking display because hierarchy here comes from the type-scale gap (Atyp '80px' vs DMSans '18px') rather than from weight contrast.

Why does Crunchyroll use a '48px' capsule for so many surfaces?

The extraction shows '48px' on 8 of 16 measured corners — the dominant radius and the only one that touches both buttons and plan-card frames. The 'Start free trial' CTA, the 'Mega Fan' plan-card outline, and the 'Limited Time Member Park' promo banner all share the same '48px' rounding. The remaining radii are scoped: '100px' (5 occurrences) for the FAQ accordion rows where the longer pill reads as a track segment, '16px' (2) for the small plan-feature pill chips, and '8px' (1) for the inline 'Most Popular' badge. The result is a recognizable capsule family across primary surfaces — there is no square corner on any interactive element, but there is no full circle either.

What's the layout of the 'Be the First to Watch' simulcast section?

Five horizontal poster tiles in a single row at desktop, each tile carrying a portrait '2:3' aspect ratio with the show artwork bleeding to all four edges, a title beneath in DMSans '14px' / weight '400', and an episode tag (e.g. 'Episode 12') in '10px' weight '500' uppercase below the title. The section header 'Be the First to Watch' sits at '34px' / weight '700' in Crunchyroll Atyp with a '40px' line height. There is no carousel chrome, no visible arrow buttons; the row scrolls horizontally on overflow. The poster tiles use no border or shadow — the artwork itself is the card.

Can I use this DESIGN.md to build a React streaming or anime-portal page?

Yes — the file is structured for AI ingestion. Feed it to Claude, Cursor, or any tool that reads structured tokens and the agent will reproduce the two-canvas hero/body inversion, the single-orange CTA discipline, and the '48px' capsule geometry rather than defaulting to a generic shadcn theme. You can also reference tokens directly: every color, type style, radius, spacing value, and component recipe is a quoted value ready for Tailwind config, CSS variables, or a component library. The 18 component recipes cover the full surface area of a streaming-portal funnel — hero CTA pill, dual plan cards with the orange-outlined upsell, simulcast poster rail, benefits-icon row, capsule-rounded FAQ accordion, and the promo banner.

Crunchyroll Design System

Crunchyroll's design system as a DESIGN.md file.

About Crunchyroll DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source crunchyroll.com

Music, Video & Streaming
Gaming & Entertainment

Crunchyroll's homepage runs a two-canvas page rather than a single dark theme. The hero band sits on near-black "#151515" so the "World's largest dedicated Anime collection on demand" headline reads at maximum contrast against the poster-grid wallpaper behind it, but every section below — the plan-picker section, the "Be the First to Watch" simulcast rail, the "Get More with Crunchyroll" benefits row, the FAQ accordion, the legal footer — flips to a "#ffffff" background with black text. Crunchyroll Orange ("#ff5e00") appears in exactly three places out of 9 extracted brand tones: the "Start free trial" CTA pill, the "Mega Fan" plan-card outline, and the FAQ row chevron. Where most streaming homepages run one continuous dark theme, Crunchyroll inverts the canvas at the fold — the hero is for atmosphere, the funnel below is for conversion.

This page packages the homepage chrome into a single DESIGN.md file built on the Google Labs spec. Inside: 18 color tokens grouped into brand, ink, surface, and hairline roles built from 9 extracted hex values; 9 typography levels spanning a "10px"–"80px" range with the Atyp display and DMSans body stacks; 4 corner radii anchored on the "48px" capsule (8 occurrences) and a "100px" full-pill (5 occurrences) for the FAQ rows; a 10-step spacing scale running on the "10px"/"12px" double-base unit that drove 97 of 220 measurements; and 18 component recipes covering the orange pill CTA, the "Fan / Mega Fan" plan-card pair, the simulcast tile grid, the chevron-rotating FAQ row, and the limited-time promo banner. The extraction registered only 4 CSS variables on ":root" — every other value here is a render-time measurement.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes funnel components that match Crunchyroll's vocabulary — the two-canvas hero/body inversion, the single-orange CTA discipline, the "48px" capsule shape — rather than a generic streaming template. Or reference the tokens directly: every hex, font stack, radius, and spacing value is a quoted DESIGN.md value ready for Tailwind config, CSS variables, or your own component library. The system is worth studying as a counter-example to the dark-theme orthodoxy — most anime and gaming streaming sites stay on charcoal end-to-end; Crunchyroll runs a dark hero on top of a light marketing page, treating the canvas switch as a section break rather than a mode.

What makes it distinct

Single orange voltageCrunchyroll Orange ('#ff5e00') restricted to the 'Start free trial' pill, the FAQ chevron, and the 'Mega Fan' plan-card outline; never as hairline or body text
Near-black hero, white funnel'#151515' on the 1440x900 hero band only, then '#ffffff' takes over for plans, watchlist tiles, FAQ, and footer — a two-canvas page, not one dark theme
Capsule geometry at '48px'buttons, plan-card frames, and the promo banner all share the same long-pill rounding (8 of 16 measured corners); '100px' carries the FAQ accordion rows
Two-typeface splitdisplay sits in Crunchyroll Atyp ('80px' hero, '54px' h2, weight '700'); body and nav run DMSans 14–18px / weight '400', no shared family
Negative-margin overlap rail'-12px' appears 4 times as the row-stack offset that pulls the FAQ chevron rows into one continuous bar with no visible gap

Live at crunchyroll.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

crunchyroll.com

Explore Crunchyroll

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Crunchyroll design system FAQ

Common questions about Crunchyroll's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Crunchyroll — official site

The anime streaming homepage this DESIGN.md was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.