Extract design tokens from any live website with one command, then track token drift, WCAG contrast and changes over time.
Design SystemsCLIWeb+1
dembrandt.com
Kigen
kigen.design
A color generator for design systems — build 50–950 shade scales with contrast control and export straight to Tailwind CSS, CSS or design tokens.
What is Kigen?
Kigen generates the color ramps design systems actually need: pick one color and it produces a full 50–950 scale with algorithmic shading, contrast shifts and naming patterns. Output switches between CSS, Tailwind and token formats in HEX, RGBA, HSL or OKLCH, and an SVG/Figma mode moves results into design tools. A Figma plugin extends the same workflow.
Best for
- Design-system palettes from a single hue
- Tailwind CSS scales with contrast control
- OKLCH and token-ready color exports
Key features
- 50–950 shade scales from one base color
- CSS, Tailwind and token export formats
- HEX, RGBA, HSL and OKLCH output
- Figma plugin and SVG export
Related resources
dembrandt.com
A curated gallery of 120 real-world design systems with evidence-linked guides, plus free interactive token, color and accessibility tools.
Design SystemsInspirationFree+1
designsystems.one
A comparison site ranking 104 design tools by role and capability, with scores, pricing context and copyable agent instructions.
AIToolsFigma+1
designtools.fyi
Visitopens in a new tab