Tokens
Semantic tokens built on the OKLCH primitive palette. Reference them via var(--token-name) or the generated Tailwind utility classes.
Surfaces
Background layers — canvas to elevated.
bg-neutral-1
html background
bg-neutral-2
cards, panels
bg-neutral-3
modals, dropdowns
surface-glass
glass overlays
Accents
Interactive colors. Each has a soft variant for text.
color-group-primary
Primary / soft
color-group-secondary
Secondary / soft
color-group-success
Success / soft
color-group-warning
Warning / soft
color-group-danger
Danger / soft
Borders
Three levels of border opacity.
border-neutral-5
Resting state
border-neutral-7
Hover state
glass border
Glass elements
Typography
Montserrat for display, Nunito for UI.
Display — Montserrat
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Body — Nunito
Body text, descriptions, paragraphs.
Labels, captions, UI elements.
Helper text, metadata, badges.
Mono — Fira Code
const total = items?.length ?? 0 => true;
Ligatures enabled for code, kbd, pre and .font-mono.
Text colors
text-primary — Headings, values, primary content
text-secondary — Descriptions, supporting info
text-muted — Hints, placeholders, disabled
text-primary-11 — Highlighted, active links
text-secondary-11 — Secondary accent text
Shadows & Glow
Neomorphic depths and 3-level glow system.
neo-raised
Default surface lift
neo-raised-strong
Elevated panels
neo-inset
Pressed / filled state
glow-strong
CTA strong
Blur levels
Three intensities for glass effects.
blur-glass-sm
8px
Tooltips, small overlays
blur-glass-md
16px
Cards, panels
blur-glass-lg
32px
Modals, drawers
Radius
Four border-radius levels.
radius-sm
6px
radius-md
10px
radius-lg
16px
radius-xl
24px
radius-full
9999px
Motion
All transitions respect prefers-reduced-motion.
Micro
150ms
Hover color, opacity changes
Standard
250ms
Position, scale, shadow
Exit
200ms
Closing modals, fade out