Generate Design System with AI

Generate design system with AI, it turns one brand colour and a typeface into a complete, documented design system - saving you days of setup.

💡 How to use Groundwork?

Pick your inputs: a brand colour and a typeface, or start from a reference file.

Choose your components: 15 available, all selected by default.

Generate: variables, components and documentation are built in one pass.

🎯 Key Features:

Variables: primitives, semantic tokens with light and dark modes, plus spacing, radius and typography scales.

15 components: Button, Input, Select, Checkbox, Radio, Switch, Badge, Alert, Avatar, Tooltip, Accordion, Tabs, Toast, Modal and Card - every value bound to a variable.

20 documentation pages: anatomy diagrams, properties, states, specs, do's and don'ts and accessibility notes for every component.design.md: the whole system as one markdown file for engineering, with CSS variables and JSON.

Accessible by default: colours generated in OKLCH, every primary action checked to clear WCAG AA.

Live preview in light and dark before you generate.

✨ Upcoming Updates:

More components - table, date picker, menu and paginationMotion tokens and documented transitionsDensity and breakpoint scalesGroundwork is free until November 2026 - every feature, no account needed.

Got ideas on how we can improve Groundwork? We'd love to hear from you. Drop us an email at hello@kalki.design. Thank you!