Theme Lab

Unified playground for theme identity — pick a theme, border style, icon set, and color mode, then adjust type and space scales. Everything updates live.

Theme
Border
Icons
Mode

Card Title

Subtitle or meta text

Body text at the base font size. This paragraph shows how readable content looks at the current type scale.

Good design is as little design as possible. Less, but better.
NameRoleStatus
AliceEngineerActive
BobDesignerAway
CarolPMActive
Icons
Type & Space Scales

Type Scale

Token Current Calculated Preview

Space Scale

Token Current Calculated Visual
Border Style Gallery

Each card applies its own data-border-style so you can compare all 12 styles at once.

clean

Default

sharp

Crisp 2px, zero radius

soft

Large radius, thin

sketch

Wavy hand-drawn

rough

Heavy hand, dashed

marker

Marker strokes

kawaii

Scalloped cloud

pixel

Stepped staircase

neon

Glowing box-shadow

double

Classic double-line

organic

Wavy irregular

bubbly

Dotted + glow

Icon Set Comparison

Five representative icons across all five sets.

Name
Lucide
Phosphor
Tabler
Bold
Mage
home
heart
search
settings
zap
Theme Vignettes

Self-contained mini-layouts showing how themes, border styles, and icon sets work together. Click “Open in Composer” to load a theme as a starting point.

Swiss

Grid-based precision. Helvetica heritage. Red accent.

Brutalist

Raw structure. No polish. Zero compromise.

Cyber

Neon lights in the digital void. Future is now.

Terminal

root@system:~# Green phosphor on CRT black.

Organic

Soft curves, natural flow, warm earthy tones.

Editorial

Clean lines, sharp edges, timeless typography.

Kawaii

Everything is cuter with pastel pink and scalloped borders!

8-Bit

PRESS START TO CONTINUE. Chunky pixels ahead.

NES

4-color palette. Beveled frames. Console pixels.

Win9x

Classic desktop computing. 3D bevels. System gray.