Reference
Design system.
Color tokens, typography scale, spacing system, component library, and icon showcase, all in one place.
Color tokens
All colors use oklch() notation for perceptual uniformity. The design system supports light and dark modes via CSS custom properties on :root and [data-theme="dark"].
--bgBackground
--bg-2Background 2
--bg-3Background 3
--fgForeground
--fg-2Foreground 2
--fg-3Foreground 3
--borderBorder
--border-2Border 2
--surfaceSurface
--surface-hiSurface Hi
--accentAccent
--accent-hiAccent Hi
--accent-loAccent Lo
Typography scale
UI text uses Geist Sans. Numbers and technical values use Geist Mono.
Hero title
Page title
Section title
Card heading
Subheading
Body large
Body default
Body small
Label / badge
Mono examples
14.2 PB2.4M72%3024×2016-4.2MB
Spacing & border radii
--r-sm6px - Small
--r-md10px - Medium
--r-lg14px - Large
--r-xl20px - X-Large
Spacing scale (--pad = 16px)
4
8
12
16
20
24
32
40
48
64
Button variants
Form elements
Please enter a valid email address
Segmented control
Range slider
Toggle switches
Badges, tags & pills
Eyebrow
100% browser-native
Badges
DefaultAccentHotSoon
Tags
PNGJPGWebPAVIFHEICDataURIPrivacyBatch1:116:9
Pills / filter
Icon showcase
All icons are inline SVG via the Icon component. Stroke-based, 24×24 viewBox, accepts size, strokeWidth, and className props.
compress
swap
shield
crop
drop
code
image
upload
download
check
arrow
arrowDown
lock
cpu
zap
github
search
sun
moon
plus
minus
layers
globe
twitter
mail
external
spark
chevronDown
menu
close
folder
file
settings
sliders
facebook
pinterest
Card variants
Default card
24px padding, 20px radius, border and surface background.
Small card
16px padding, 14px radius.
Tool card
Hover for gradient effect.
Status indicators
Operational
Processing
Warning
Error