Playground · Design Systems Tooling

Theme Tool: one brand color into a complete, contrast-safe design system

White-label theming is part of my day-to-day. I built this open version to explore the problem end to end.

Standard shadcn tokens
Light + dark derived
WCAG contrast checked
4 formats to export
Theme Tool editor — colors panel deriving a violet theme with a live dashboard preview
Theme Tool editor — colors panel deriving a violet theme with a live dashboard preview
Generated brand guide — logo, OKLCH color palette, and typography in one view
Generated brand guide — logo, OKLCH color palette, and typography in one view
View Live AppView Code

Under the Hood

OKLCH derivation engine

Every standard shadcn slot, derived for light and dark with contrast pairs picked automatically — math done in OKLCH so lightness stays even across hues.

Live preview & brand guide

Edits apply instantly to real components — buttons, cards, forms, charts — and a generated brand guide summarizes palette, type, and contrast.

Four ways out

Tailwind v4 CSS vars, JSON tokens, a visual brand guide, and an AI scaffold prompt so an agent can bootstrap a project on-brand.