Foundations

Tokens

Every component draws from this single set of design tokens. Change a token in globals.css and the whole system updates — in both light and dark mode.

Color

Semantic tokens (oklch). Use the token name, never a raw hex — that is what keeps dark mode automatic.

Core surfaces

background

card

popover

muted

Brand & actions

primary

secondary

accent

destructive

Borders & lines

border

input

ring

sidebar

Chart palette

chart-1

chart-2

chart-3

chart-4

Typography

Plus Jakarta Sans for UI, Lora for editorial headings, IBM Plex Mono for code and data.

font-serif · Display

Survives real operations

font-sans · Heading

Dashboards that ship

font-sans · Body

The quick brown fox jumps over the lazy dog. Perpetuum builds AI automation that survives contact with real operations — the same principle applies to a component library.

font-mono · Data

const revenue = 128_400; // EUR, MRR

Radius

The Violet Bloom base radius is a soft 1.4rem, giving the whole system its rounded, friendly feel.

2xl

full

Elevation

Soft, low-opacity shadows keep surfaces calm and layered.

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl