Theme Generator

Studio

A full design-token studio: start from a preset or a base colour, tune colours, typography, radius, shadows and motion, check WCAG contrast live, then copy the CSS, share a link, or apply it across the site.

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

Default Secondary Destructive Outline

Form controls

Notifications

Feedback

Heads up. This alert uses the themed surface and border tokens.

Something went wrong. Destructive tokens drive this state.

Card surface

Cards use bg-card and the radius + shadow scales.

Acme Analytics

Workspace overview

Pro

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 paid
2h ago
Trial started
2h ago
Plan downgraded
2h ago

Upgrade

Unlock advanced analytics and unlimited seats.

74% of your quota used

Presets

Generate from a base colour

Derives a coherent brand palette (primary, accent, muted + readable foregrounds) for light & dark.

Contrast

Live WCAG text-contrast for the light & dark palettes. AA needs 4.5:1 (3:1 large), AAA 7:1.

Non-text contrast — informational

WCAG 2.2 SC 1.4.11: a UI component / form-control boundary (border, input) needs 3:1 against its background.

Heads up: Brok's default borders are intentionally faint — decorative, not the primary affordance. Interaction is carried by the focus ring (which does meet 3:1), so the boundaries below reading under 3:1 is a design choice, not a defect. Treat these as informational; raise a token's contrast here only if you want borders to do more visual work in your theme.

Test it everywhere

A custom theme is active across the docs site. Reset to restore the default.