Define your brand's visual DNA — colors, typography, spacing, and shadows. Export as CSS Custom Properties, JSON Design Tokens, or Tailwind config. Preview live in a component showcase.
Export tokens directly into UI Kit Generator — hand off your design system to generate a complete component library with one click.
Primary, secondary, accent, neutral scales, semantic colors (success, warning, error, info), and auto-generated 50–950 shade scales.
Google Fonts selection, type scale ratios (Minor Third to Perfect Fifth), weights, and line heights.
Base unit system, named stops (xs–3xl), and radius presets from none to full pill.
CSS Custom Properties, JSON Design Tokens (W3C), and Tailwind config — ready for your stack.
Set colors, typography, spacing, radii, and shadows. Try starter themes or build from scratch.
See your tokens applied live to buttons, cards, forms, alerts, and typography.
Copy or download as CSS, JSON, or Tailwind — or send directly to the UI Kit Generator.