Clarity over decoration

Remove anything that doesn't help the user understand or act.

Systematic consistency

Tokens drive all decisions. No one-off values ship.

Accessible by default

All pairings meet WCAG 2.1 AA. We test with real assistive technology.

Progressive density

Start spacious. Tighten as users gain expertise.

Six semantic groups, each with an 11-step tonal range from 50 to 950.

• Primary — actions, links
• Secondary — accents, tags
• Neutral — text, borders
• Success / Warning / Error — system feedback

Token	Hex	Role
Primary	#2E5CFF	Interactive elements
Secondary	#7C3AED	Accent, emphasis
Neutral	#64748B	Text, chrome
Success	#059669	Positive feedback
Warning	#D97706	Caution states
Error	#DC2626	Destructive / errors

Two fonts, no exceptions.

• Inter for all UI text
• JetBrains Mono for code and data

Scale ratio: 1.250 (Major Third)

Base size: 16px (comfortable) / 14px (compact)

Level	Size	Weight
Display	39.1px	700
H1	31.3px	700
H2	25.0px	600
H3	20.0px	600
Body	16.0px	400
Caption	12.8px	400
Overline	10.2px	600

Token	Value	Use
space-1	4px	Tight gaps
space-2	8px	Inline gaps
space-4	16px	Component padding
space-6	24px	Card padding
space-8	32px	Section gaps
space-16	64px	Page margins

Why 4px?

• Pixel-perfect on 1x, 2x, and 3x displays
• Simple mental math (multiply the token number by 4)
• Consistent vertical rhythm across all components

Passing pairs

• Ink on White — 15.39:1
• Primary on White — 4.62:1
• White on Secondary — 5.26:1
• Error on White — 4.63:1

Watch list

• Warning on White — 3.35:1 (large text only)
• Never use Warning for body copy on light backgrounds
• Pair Warning text with neutral-900 backgrounds instead