Theme Generator
Start from a preset or a brand colour, tune every token with the preview re-theming live, then copy the CSS or install the preset with one command.
Brand colour
Derives the primary, secondary, accent and muted tokens for light and dark from one colour.
Presets
Each preset is a full identity: palette, corners and type. Cards render in the mode you are previewing.
The preview follows this switch. Pills show each foreground against its surface: AA is 4.5:1, borders and the focus ring need 3:1.
Typography
The quick brown fox jumps
Body copy, labels and controls read in this face.
ui:add button --dry-run
Weights
Corners
One base radius shapes every tier: cards use it as is, controls take three quarters, chips a half.
Shadows
Cast from the shadow tint (edit it under Colours). Each step is a raw box-shadow value.
The scales behind the layout grid, control sizes, type ramp, motion and stacking order.
The quick brown fox
Body copy renders in foreground over the themed background, with the type scale and weights you set.
Muted secondary text — captions, hints and metadata.
Buttons
Badges
Form controls
Feedback
Card surface
Cards use bg-card and the radius + shadow scales.
Acme Analytics
Workspace overview
Revenue
$48.2k
▲ 12.4% vs last week
Active users
12,480
▲ 12.4% vs last week
Conversion
3.8%
▲ 12.4% vs last week
Recent activity
-
Invoice paid2h ago
-
Trial started2h ago
-
Plan downgraded2h ago
Upgrade
Unlock advanced analytics and unlimited seats.
74% of your quota used
Export
Paste into resources/css/themes/custom.css and import it after ui.css. Light, dark and forced-light layers included.
This preset ships as a registry theme. Install it as an editable CSS layer:
A custom theme has no registry item. Copy the CSS tab into your project, or download the JSON to keep the token map.
The token map, light and dark values per colour.
Contrast report
WCAG 2.2: text needs 4.5:1 (AA) or 7:1 (AAA); an input border and the focus ring need 3:1. The decorative --border hairline is exempt by design.
- A