AniSetu Design System
v2.0

Visual Operating System & Living Component Playground

Semantic Color Architecture

All values are defined in OKLCH via CSS variables with paired foreground tokens to guarantee WCAG 2.2 AA contrast.

Background--background

Card Canvas--card

Primary Action--primary

Secondary Action--secondary

Muted Surface--muted

Accent Active--accent

Success / Completed--success

Warning / Airing--warning

Info / Telemetry--info

Destructive--destructive

Border Subtle--border

Focus Ring--ring

Typography Scale & Multilingual Hierarchy

Display Black (48px)

Hero Headline (32px)

Heading Level 1 (24px)

Heading Level 2 (20px)

Heading Level 3 (18px)

Body Large (18px): An expansive viewing experience bridging anime enthusiasts across India.

Body Regular (15px): Default reading typography optimized for high-density reviews and episode synopses.

Body Small (13px): Supporting notes, secondary dates, and metadata labels.

mono-code: const ANIME_SETU_VERSION = "2.0.0"