Raihin Design System
Foundations, tokens, components, and writing guidelines for the Raihin product. One canonical theme, a tight token vocabulary, and the rules that keep every surface coherent.
Forked from design.kaotypr.com.
How the system is organised
Three layers of decisions, one shared vocabulary.
{name}/{name}-foreground/{name}-border triples, the 5-stop state-layer opacities, the --size-* scale, and the z-index ladder. These keep every surface consistent.New to the system? Read Foundations for the rules that hold everything together.
Looking for a specific token? Open the token explorer or browse by family below.
Building a component or screen? Start with Patterns and the Components reference.
Token families
167 tokens across 13 families.
Backdrop blur scale
Surfaces, brand, status, state layers, charts
Comfortable vs compact mode mapping
Pinned to 3px
Sans, mono, heading, display
Field padding, label rhythm
Container widths, sidebar widths
Durations + easing curves
Disabled, hover, pressed, overlay, loading
Generic scale + semantic radii per registry component
Elevation tokens; --shadow-focus is locked
Icon, avatar, control, touch-target sizes
Cross-product layering — never override
Claude Code, claude.ai, and other LLM agents working on the Raihin codebase can fetch /llm-reference for a single dense page covering token names, tier rules, and forbidden patterns. The site also exposes /llms.txt following the llmstxt.org convention.