Design System

The foundation every KATA component is cast from: color, type, spacing, radius, motion. One accent, hairline borders, flat surfaces — and tokens for everything, so the system survives every theme.

tokens.css tokens.json Browse components

Color — Zinc

The dominant scale. Interfaces are built from zinc first; color is the exception.

zinc-50
#fafafa

zinc-100
#f4f4f5

zinc-200
#e4e4e7

zinc-300
#d4d4d8

zinc-400
#a1a1aa

zinc-500
#71717a

zinc-600
#52525b

zinc-700
#3f3f46

zinc-800
#27272a

zinc-900
#18181b

zinc-950
#09090b

Color — Teal (the one accent)

A single accent, used sparingly: links, highlights, the core of the mark. If everything is teal, nothing is.

teal-50
#effaf9

teal-100
#d7f2f0

teal-200
#b0e5e2

teal-300
#7fd1cd

teal-400
#3fb3ae

teal-500
#0e9594

teal-600
#0b7a78

teal-700
#0b7372

teal-800
#0a5c5b

teal-900
#083f3e

Color — Roles

--ink — #18181b (zinc-900) — primary text, primary actions

--ink-2 — #52525b (zinc-600) — secondary text

--ink-3 — #a1a1aa (zinc-400) — muted text, placeholders

--line — #e4e4e7 (zinc-200) — hairline borders

--accent — #0e9594 (teal-500) — the single accent: links, success-adjacent highlights, the core of the mark

--danger — #dc2626

--amber — #f59e0b

--success — #34d399 (on dark) — confirmations

--core — #eb471f (vermillion) — the signature: the center of the mark, and the center of active controls (switch knob, radio dot). Never a surface, never text.

Typography

Sans: Inter, Hiragino Sans, Noto Sans JP, system-ui, sans-serif
Mono: Geist Mono, ui-monospace, monospace
Tracking: headings -0.02em to -0.03em; labels uppercase +0.08em to +0.14em

xs · 11pxDesign, cast in a mold

sm · 12.5pxDesign, cast in a mold

base · 13.5pxDesign, cast in a mold

md · 14pxDesign, cast in a mold

lg · 16.5pxDesign, cast in a mold

xl · 19pxDesign, cast in a mold

2xl · 24pxDesign, cast in a mold

3xl · 30pxDesign, cast in a mold

display · 44pxDesign, cast in a mold

Spacing

A 4px base. If a gap is not on this scale, it is a mistake.

space-14px

space-28px

space-312px

space-416px

space-624px

space-832px

space-1248px

space-1664px

Radius

sm · 6

md · 8

lg · 12

xl · 16

full · 99

Heights

Controls come in three heights — 32 / 38 / 44px. Shared heights are what make separate components look like one system.

Motion

Fast and small. No bounce, no overshoot. Motion explains a change; it never performs. Hover the cards:

fast · 130ms

base · 180ms

slow · 220ms

Elevation

Flat by default. Borders before shadows; shadows only for overlays and focus.