Design System

Notion-inspired. Semantic tokens mapped through Tailwind — swap the theme class on html and everything re-skins.

Colours

background

foreground

card

muted

primary

secondary

accent

destructive

border

input

ring

Ten named colours, each with a background and foreground value. Both shift automatically in dark mode.

Gray Brown Orange Yellow Green Blue Purple Pink Red

Aa font-sans · Inter

text-4xl2.25rem

text-3xl1.875rem

text-2xl1.5rem

text-xl1.25rem

text-lg1.125rem

text-base1rem

text-sm0.875rem

text-xs0.75rem

font-mono · JetBrains Mono code · numbers

Instrument Serif headings · display

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-sunken

shadow-pressed

2xl

3xl

border-border · default hairline

border-ring · focus outline