Search Kaotypr Design System

Search tokens, pages and quick actions

One canonical theme

Kaotypr Design System

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

Read foundations Browse tokensFor AI agents →
Locked tokens52System identity — never overridden.
Brand tokens56Per-project override expected. The personality dial.
Tunable tokens51Override allowed where it helps the product.

How it works

Three layers, one vocabulary, predictable overrides.

Locked
Names & structure
The 3-tier foreground hierarchy, the 4-tier border hierarchy, status {name}/{name}-foreground/{name}-border triples, the 5-stop state-layer opacities, the --size-* scale, and the z-index ladder all stay identical across every Kaotypr product.
Brand
Values that define personality
Surfaces, foreground hierarchies, brand colors, fonts, semantic radii and the chart palette are expected to differ between products. Override these — and only these — to reskin.
Tunable
Knobs you may turn
Shadows, motion durations, overlay opacity, per-control surfaces, blur scale, link/code/kbd treatments. Touch as needed.
Token tier badge
LockedNever override per-project
BrandReskin lever
TunableFree to adjust
The 10-line override
:root {
  --primary: oklch(0.205 0.04 290);
  --secondary: oklch(0.86 0.07 50);
  --background: oklch(0.99 0.005 80);
  --card: oklch(1 0 0);
  --foreground: oklch(0.18 0 0);
  --border: oklch(0.92 0.01 80);
  --radius-card: 1.25rem;
  --radius-button: 0.75rem;
  --font-heading: var(--font-inter);
  --chart-1: oklch(0.65 0.13 50);
}

Token families

159 tokens across 13 families.

Open explorer
Blur

Backdrop blur scale

3
Color

Surfaces, brand, status, state layers, charts

90
Density

Comfortable vs compact mode mapping

3
Focus ring

Pinned to 3px

2
Font

Sans, mono, heading, display

4
Form

Field padding, label rhythm

2
Layout

Container widths, sidebar widths

6
Motion

Durations + easing curves

9
Opacity

Disabled, hover, pressed, overlay, loading

5
Radius

Generic scale + semantic radii per registry component

11
Shadow

Elevation tokens; --shadow-focus is locked

5
Sizing

Icon, avatar, control, touch-target sizes

11
Z-index

Cross-product layering — never override

8
For AI agents

Claude Code, claude.ai/design and other LLMs 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.