Pick fonts and colors, check WCAG contrast and preview components live. Then export ready-made CSS variables, a Tailwind config, JSON tokens or an AI prompt.
01 · Typography
Fonts and type scale
02 · Colors
Color palette
Primary
Accent
Neutral
WCAG contrast
03 · Components
Live preview — light and dark
Light mode
Dark mode
04 · Export
Configuration and export
Before you write your first line of CSS
What is a design system and why generate one?
A design system is one coherent set of design decisions — colors, typography, spacing, radii — captured as design tokens that the whole interface draws from. Without it, every button and card gets its colors "by eye," and after a few weeks the project looks like a patchwork of five different websites.
This generator shortens the first step to a few minutes: you pick two Google Fonts, a primary and an accent color, and the tool builds full shade scales (50–700), a neutral gray scale and a mapping for light and dark mode. The contrast of every key color pair is checked instantly against WCAG 2.1 (AA and AAA thresholds), and the component preview shows how the system looks in practice.
You take the result in the format you use daily: CSS variables ready to paste, a Tailwind config, JSON tokens (W3C Design Tokens format) or an AI prompt — e.g. for Claude — that generates components consistent with your system. Everything runs in your browser; no data is sent anywhere.
Frequently asked questions
How do I generate a color palette for a website?
Choose one of the preset palettes or pick your own primary and accent color. The generator builds full 50–700 shade scales plus a neutral gray scale, mapped to light and dark mode. Every key color pair is checked for WCAG contrast.
Is the generated design system accessible (WCAG)?
The generator computes the contrast ratio for text on the primary and accent colors and for body text on light and dark backgrounds, labelling results with AA (4.5:1), AA Large (3:1) and AAA (7:1) badges. If a pair fails, just nudge the base color — results recalculate live.
Which export formats are available?
Four formats: CSS variables (custom properties with light and dark mode support), a Tailwind CSS config, JSON tokens in the W3C Design Tokens format, and an AI prompt that describes the whole system and asks for matching components.
Is the tool free, and what happens to my data?
Yes — the tool is completely free and requires no sign-up. All logic runs in your browser: your configuration is stored only locally (localStorage), and the share link encodes settings in the URL. Nothing is sent to any server.