Theme Preview

Tweak your brand colours, spacing, shadows and typography and see how a realistic app layout would look.

Theme settings

Brand colours

These drive buttons, pills and alert states. Success / warning / danger feed into the preview, not fixed colours.

Surface / text colours

Mode & typography

Dark mode preview
Toggle between dark and light theme styles.

Spacing & elevation

Border radius
12px
Shadow strength
Medium
Spacing scale
Normal

Export tokens

Generate design tokens from the current preview and paste them into your project.

Live preview

A sample dashboard UI that uses your tokens for buttons, pills, alerts and layout.

QuickToolkit
Design system preview

Buttons

Primary, secondary and ghost buttons wired to your tokens.

Status pills

Uses success / warning / danger tokens so you can tune states.

Deployed Needs review Failed check Archived

Alerts

All four alert variants respond to your colour changes.

Deployment successful
All checks passed and your build is now live.
Information
A new update is available for the CLI tools.
Attention needed
Some environments have not been configured yet.
Error
The last run failed. Check your error logs and try again.

Cards & layout

See spacing, radius and shadows across content.

Project overview

Healthy

12 active components, 4 in review and 1 flagged for refactor.

Activity

Last 24 hours

8 deployments, 23 commits and 4 pull requests merged.