# Kaotypr Design System

> A design system built around one canonical theme. Token names and structure are immutable across consumer projects; values are tunable only at specified tiers. Reskin a product in ≤10 lines of CSS.

Tokens: 159 total — 52 locked, 56 brand, 51 tunable. Source-of-truth: app/globals.css.

## Foundations

- [Foundations](https://design.kaotypr.com/foundations): Tier philosophy, immutability rules, structural locks, forbidden patterns, spacing & grid.
- [Theming](https://design.kaotypr.com/theming): How light/dark and density modes work — token shape, override pattern, scoping, when to use compact.
- [Branding](https://design.kaotypr.com/branding): Deep walkthrough of the ≤10 line consumer override — what flips, what's locked, validation checklist, anti-patterns, four reskin starters.
- [Cascade](https://design.kaotypr.com/cascade): How @import order, :root, .dark, and component classes interact. The four debug scenarios when overrides aren't working, plus a 60-second console recipe.

## Tokens

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

## Reference

- [LLM reference](https://design.kaotypr.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.kaotypr.com/patterns): Common-task examples (status alerts, chart colors, brand override, compact density, form fields with error states, multi-field layouts, submission states).
- [Writing](https://design.kaotypr.com/writing): Voice & copy guidelines, iconography rules (Phosphor weights), motion narrative (when to animate, reduced-motion strategy).
- [Components](https://design.kaotypr.com/components): Overview of Kaotypr UI — the private shadcn-compatible registry at ui.kaotypr.com. Install commands, what's in the registry (refined shadcn + custom components + blocks).
- [Resources](https://design.kaotypr.com/resources): Brand assets, install commands, machine-readable token exports, Figma kit access.
- [Showcase](https://design.kaotypr.com/showcase): Real branded products built on Kaotypr (gallery — coming soon).

## Optional

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