🍙 Onigiri

The Crunchyroll design system, rendered live from its own tokens and components. It cannot drift from what ships.

Changelog

Current version v1.0.1. Releases follow semver; a deprecation always names its migration path. This page and the repo's CHANGELOG.md both render from changelog.json, so neither can drift.

v1.0.12026-09-07Overlay glyphs stay light

Thumbnail's play glyph and duration chip were bound to text.primary, which is black in the light theme, so they went dark on artwork that is always dark. Caught on the portfolio's live Onigiri window in light mode.

added
text.on-media: a theme-constant role (cream.50 in both themes) for glyphs and labels over artwork and the scrim.
fixed
Thumbnail's glyph and duration chip read text.on-media instead of text.primary, so they stay light in the light theme.
v1.0.02026-09-01Spec conformance, gated

DSDS validation joined npm run verify, and wiring the gate exposed that all 51 docs had drifted off the published v0.15.2 schema. The migration is this release's breaking change, and the gate is why it cannot happen again.

changed
Breaking. Every DSDS entity now matches the published v0.15.2 schema. Block lists are items, agent rules are agent-side guidelines with conformance levels, and the onigiri. identifier prefix is gone.

Migration: Read block lists from items (use-cases, variants, states, guidelines). Address entities by short id: button, not onigiri.button. Agent rules live in agentDocumentBlocks as guidelines items with must and must-not levels.

added
DSDS schema validation (ajv against the vendored v0.15.2 bundled schema) wired into npm run verify, alongside manifest ref and token source checks.
fixed
poster-card's accessibility note described a RatingMark that had not landed yet; it now records the real composition, and the missing composes edge to rating-mark is in.
v0.5.02026-09-01Storybook, a second renderer

The system's docs gained an industry-standard renderer without gaining a second place to write them: every autodocs page is generated from the same validated DSDS entities the styleguide reads.

added
Storybook 9 with full coverage: 45 components plus foundations rendered from tokens.meta.json, dark default, deployed at onigiri-storybook.vercel.app.
fixed
Thumbnail's watch-progress bar carried role=progressbar with no accessible name; the Storybook a11y gate caught it on day one. Fixed in the component, rule recorded in the media-card docs.
fixed
Button labels could wrap under flex squeeze; .button was missing white-space: nowrap. Fixed, with a must-not recorded in the button docs: containers reflow around buttons, never bend the pill.
v0.4.02026-07-28A warm value never lives in ink

A naming correction, not a restyle: rendered pixels are unchanged in both themes and every contrast contract still holds.

changed
#736D57 moved from ink.400 to cream.350, the warm ramp where it belongs; ink.400 became a true grey (#999999). New rule: a warm value never lives in ink, a grey never lives in cream.
v0.3.02026-07-27The living styleguide
added
Styleguide site live at onigiri-virid.vercel.app: foundations rendered from the token build, 49 component pages with live previews, DSDS docs rendered straight from the entities.
changed
Conformance labels render as stance rows: hue carries polarity, weight carries force, so must and must-not stop reading identically.
removed
All 32 archived Figma pages torn down after a dependency sweep caught and fixed the two live references into them.
v0.2.02026-07-26The distillation

The audit's verdict sheet, executed: about 4,400 old variants became about 45 components.

added
The component tiers rebuilt in Figma and code: forms, cards (1,021 variants to 39), navigation (326 to 13), player (164 to 20), carousels (127 to 19), with real Crunchyroll glyphs replacing every hand-drawn icon.
removed
Platform and breakpoint axes everywhere. Responsive behavior belongs to code; content types became data on props instead of variants.
v0.1.02026-07-25Tokens before components
added
DTCG token files (color, dimension, typography, elevation) with dark overrides, generated CSS variables, and the contrast gate that fails any build breaking a declared pair.
deprecated
The 68 tripled text styles, welded to 12 utilities. Desktop values are canonical; the responsive step-down is code's job.

Migration: Map old styles to the 12 type utilities; the old styles are archived under the Figma archive prefix and the typography foundation carries the full ramp table.

deprecated
The 5-level elevation scale, collapsed to raised, overlay, and modal. The old level 2 was indistinguishable between 1 and 3.

Migration: Levels 1 and 2 become raised, 3 and 4 become overlay, 5 becomes modal.

changed
Brand orange is a fill, never a text color; text on accent is ink. This is why Crunchyroll buttons carry dark labels.
fixed
All three contrast failures from the audit, including disabled text at 1.7:1.