Reference

Design system.

Color tokens, typography scale, spacing system, component library, and icon showcase, all in one place.

Color tokensTypographySpacing & radiiButtonsForm elementsBadges & pillsIconsCardsStatusDropzoneFAQ

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.

3rem / 800Hero title
2.5rem / 700Page title
2rem / 700Section title
1.5rem / 700Card heading
1.25rem / 600Subheading
1.125rem / 500Body large
1rem / 400Body default
0.875rem / 400Body small
0.75rem / 600Label / 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
copy
globe
twitter
mail
external
spark
chevronDown
menu
close
x
folder
file
settings
sliders
heic
rotateCcw
gridTile
facebook
pinterest
linkedin
blog
bookmark
scan
eye

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

Dropzone

File-drop target used by every image tool. Accepts accept, label, sublabel, and formats props. Hover or drag a file over it to see the active state.

Default (all formats)

Drop images here

or browse files - PNG, JPG, WebP, AVIF and more

PNGJPGWebPAVIFHEICBMP

Custom label & formats

Drop your photo here

HEIC or JPG files only

HEICJPG

FAQ / Accordion

Collapsible Q&A block built with smooth height transitions and a rotating + icon. Supports allowMultiple to keep several items open at once (default is single-open).

Single-open (default)

Multi-open (allowMultiple)