Create a professional light and dark mode design system in seconds.
Everything you need to know about using the Design System Generator.
What is the Design System Generator?
It's a free web utility that helps developers and designers quickly generate a full set of light and dark mode color tokens based on a few base colors or an image.
Is it free to use?
Yes, the tool is completely free to use. We provide the design tokens in multiple formats like CSS, Tailwind, and JSON for your convenience.
How does the image extraction work?
The tool analyzes the pixels of your uploaded image, groups similar colors using the LCH color space, and identifies the most dominant hues to create your base palette.
What are semantic tokens?
Semantic tokens are names given to colors based on their function (e.g., 'primary-hover' or 'success') rather than their appearance. This makes it much easier to maintain and update your design system.
Does it support accessibility standards?
Yes, the tool checks contrast ratios against WCAG AA standards and provides a badge to let you know if your colors are accessible.