Sugoi Design System

Compact uppercase label — status, count, category. Pill or rectangle.

Tappable action — primary, secondary, or tertiary. Three sizes, full state set.

Horizontal rule. Hairline neutral or the brand gradient rule.

Square container for SVG icons. Five sizes, six color modifiers, tinted-background variants.

Inline anchor — purple, inverse, or subtle. Underlined by default.

Surface for grouped content. Standard, compact, hero, and stat variants. Composes badge, button, link, divider, icon-block.

Vertical list with optional eyebrow + heading. Bullet, numbered, or feature (icon-led) variants.

Full-bleed section opener — deck title slides, EDM banners, landing-page tops, cinema holding pages.

Horizontal row of partner / licensor / cinema-chain logos. Greyscale-on-rest, full-colour on hover.

Pull-quote, testimonial, or critic-review block. Three variants: default, feature, critic.

Reference

Architecture

Tier 1 — Raw tokens: Literal hex/px/font values. The single source of truth. tokens/raw.css
Tier 2 — Semantic tokens: Role-based aliases that primitives consume. tokens/semantic.css
Tier 3 — Primitives: HTML+CSS components. Reference Tier 2 only — never raw values, never literals.
Cascade discipline: Brand refinement = single-line edit in tokens/raw.css. Lint blocks any primitive that violates this.