# Raihin Design System

> The design system that powers the Raihin product. One canonical theme, a tight token vocabulary, and a small set of structural rules. Foundations, tokens, components, patterns, and writing guidelines all live on this site.

Tokens: 167 total — 50 locked, 65 brand, 52 tunable. Source-of-truth: app/globals.css.

## Foundations

- [Foundations](https://design.raihin.com/foundations): Tier philosophy, immutability rules, structural locks, forbidden patterns, spacing & grid.
- [Theming](https://design.raihin.com/theming): How light/dark and density modes work — token shape, override pattern, scoping, when to use compact.
- [Brand](https://design.raihin.com/branding): Raihin's brand identity — color, typography, logo, voice, and motion at a glance.
- [Cascade](https://design.raihin.com/cascade): How the stylesheet layers compose. @import order, :root, .dark, and component classes — plus a debug checklist for when a token value isn't resolving.

## Tokens

- [All tokens](https://design.raihin.com/tokens): Filterable explorer.
- [Blur](https://design.raihin.com/tokens/blur): Backdrop blur scale
- [Color](https://design.raihin.com/tokens/color): Surfaces, brand, status, state layers, charts
- [Density](https://design.raihin.com/tokens/density): Comfortable vs compact mode mapping
- [Focus ring](https://design.raihin.com/tokens/focus-ring): Pinned to 3px
- [Font](https://design.raihin.com/tokens/font): Sans, mono, heading, display
- [Form](https://design.raihin.com/tokens/form): Field padding, label rhythm
- [Layout](https://design.raihin.com/tokens/layout): Container widths, sidebar widths
- [Motion](https://design.raihin.com/tokens/motion): Durations + easing curves
- [Opacity](https://design.raihin.com/tokens/opacity): Disabled, hover, pressed, overlay, loading
- [Radius](https://design.raihin.com/tokens/radius): Generic scale + semantic radii per registry component
- [Shadow](https://design.raihin.com/tokens/shadow): Elevation tokens; --shadow-focus is locked
- [Sizing](https://design.raihin.com/tokens/sizing): Icon, avatar, control, touch-target sizes
- [Z-index](https://design.raihin.com/tokens/z-index): Cross-product layering — never override

## Reference

- [LLM reference](https://design.raihin.com/llm-reference): Single dense page covering the full vocabulary — token names by family, tier rules, forbidden patterns, common tasks. Optimised for ingestion in one fetch.
- [Patterns](https://design.raihin.com/patterns): Common-task examples (status alerts, chart colors, compact density, form fields with error states, multi-field layouts, submission states).
- [Writing](https://design.raihin.com/writing): Voice & copy guidelines, iconography rules (Phosphor weights), motion guidelines (when to animate, reduced-motion strategy).
- [Components](https://design.raihin.com/components): The Raihin component library — refined shadcn primitives, custom components, and reusable blocks (source lives in the repo under components/ui/).
- [Resources](https://design.raihin.com/resources): Brand assets, machine-readable token exports.

## Optional

- [Token JSON](https://design.raihin.com/llms-tokens.json): Machine-readable token export.