Your Design System · v0.1
Built with Claude Design

Your design system,
in one file.

Fork this. Change the CSS variables at the top. The whole visual language shifts with you. That's it — that's the starter.

Color

9 tokens
ink#151311
ink-2#2A2623
mute#7A7066
cream-2#EBE3D2
cream#F3EEE3
accent#C2543A
accent-ink#8A3520
accent-2#E8B36A

Type

3 families · 6 roles
Display
Instrument Serif
H1
Inter Tight · Semibold · 48
H2
Inter Tight · Medium · 32
Body
Inter Tight · Regular · 18. The quick brown fox jumps over the lazy dog, with pretty text-wrap and generous line height.
Small
Inter Tight · Regular · 14 — captions and helper text.
Mono
JetBrains Mono · 14 — tokens, labels, code.

Space

9 steps
4
8
12
16
24
32
48
64
96

Radius

6 steps
xs · 4
sm · 8
md · 14
lg · 22
xl · 36
full

Components

Starter set

Buttons

Three variants: primary, ink, ghost.

Badges

Status labels with semantic color pairs.

Shipped Draft Beta

Inputs

Single-line field and placeholder.

Dark surface

Same tokens, inverted application.