🍙 Onigiri

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

Docs draft

PlayerGate

When to use it

useBlocking gates (dub unavailable, stream limit, premium) and centered status overlays (error, mature, coming soon, unavailable) inside the player.

Anatomy

PlayerGateArt (boolean) + Title + Body + stacked outcome-named Buttons in the Actions slot, on bg.secondary.

PlayerOverlayGlyph (swap the icon instance) + Title + Body + optional Actions; sits centered on bg.scrim.

Design specifications

gate-paddingspace.32, gap space.24
overlay-glyph40px
titletype.title-4 / type.label-lg

Accessibility

Gate renders as role=dialog named by its title; overlay is role=status. The old teal 'Sign in' / 'maturity settings' links become text.link.