System
A live design system
Every swatch below reads its value from a CSS variable. Change the palette in the theme widget and the whole site follows.
Principles
01
Colour is never the only signal. Confidence states differ by stroke style as well as hue.
02
One accent, one ink, one paper. The confidence ramp is reserved for what the machine knows.
03
One easing curve, four durations. Everything disables under reduced motion.
04
Body copy stays under a 66-character measure. Labels are monospace so structure reads as structure.
Confidence colour semantics
Auto-commit. Do not bother the human.
AI drafts. Human confirms in one keystroke.
Human leads. The editor hands over the pen.
No detection. Manual input.
Colour ramps
Accent
--c-accent-100
rgb(237, 242, 253)
--c-accent-200
rgb(214, 224, 250)
--c-accent-300
rgb(168, 191, 242)
--c-accent-500
rgb(63, 110, 224)
--c-accent-600
rgb(36, 80, 200)
--c-accent-700
rgb(28, 64, 168)
Paper
--c-paper-000
rgb(255, 255, 255)
--c-paper-100
rgb(252, 252, 251)
--c-paper-200
rgb(245, 245, 243)
--c-paper-300
rgb(236, 236, 234)
--c-paper-400
rgb(222, 222, 219)
Ink
--c-ink-300
rgb(184, 184, 178)
--c-ink-400
rgb(144, 144, 138)
--c-ink-500
rgb(107, 107, 99)
--c-ink-700
rgb(58, 58, 52)
--c-ink-800
rgb(31, 31, 26)
--c-ink-900
rgb(20, 20, 15)
Type specimen
Display
Ag — the quick brown fox
H1
Ag — the quick brown fox
H2
Ag — the quick brown fox
H3
Ag — the quick brown fox
H4
Ag — the quick brown fox
Body
Ag — the quick brown fox
Label
Ag — the quick brown fox
Micro
Ag — the quick brown fox
Spacing scale
--s-1
--s-2
--s-3
--s-4
--s-5
--s-6
--s-7
--s-8
--s-9
Motion
One easing curve: cubic-bezier(0.16, 1, 0.3, 1). Four durations: 120, 220, 380, 720 ms.
120ms
220ms
380ms
720ms