Design system
A design system with the part most systems skip: the rules. Colour, type, spacing and components, each with what it is for and when not to use it, checked for contrast, and exportable as tokens so the system in the code and the system in the file are the same system.
- Asks for
- Your brand, if you have one — colours, type, a logo, or a site to read it from
- What you are building: a product interface, a marketing site, both
- Any constraints you already have, like a required typeface
- Gives back
- Colour with roles and rules: ground, surface, text, accent, state
- A type scale and a spacing scale, each with what it is for
- Components with the rules for using them, and the counter-examples
- Contrast checked, and tokens to export so code and design agree
- Plan
- Pro and Max
- Use next
- Design, Design review
What it gives you
Citron — the accent. Use: one primary action per screen. Large areas of ground where the page should feel like the brand rather than the product. Do not: use it for a second button on the same screen, for body text (fails contrast on ground: 2.1:1), or to mean "success". Type — body 16/1.6. Below 16 is not used for anything a person reads in prose. Export: --pk-color-accent, --pk-space-4, --pk-font-body-md …
How it works
A palette is not a design system. What makes a system usable by somebody who was not in the room is the rules: which colour is a ground and which is an accent, what the one primary action per screen is allowed to look like, which type size is for what, why the spacing scale has the steps it has. Without those, five people produce five designs that share a hex code.
So every decision here carries its rule and its counter-example. Contrast is checked rather than asserted, because a palette that fails on text is a palette that gets quietly overridden in the first week. The scale is a scale with a reason, not eleven values somebody liked.
It exports as tokens, which is what keeps it honest. A system that lives only in a design file drifts from the code within a month and nobody can say which is right. Tokens are the shared artefact; the file and the build read the same names.
Who it is for
A team without a designer that needs consistency, or a PM who has been handed a brand and has to turn it into something buildable.
Where it stops
It builds the system and its rules; it does not police them — that is a linter’s job in your codebase, and a system without one drifts. It also cannot give you a brand: it works from what you have, and where you have nothing it proposes something defensible rather than something distinctive.
Questions people ask
What makes a design system more than a palette?
The rules about use. A palette tells you the hex codes; a system tells you which colour is a ground, which is the single accent, what the one primary action per screen may look like, and which combinations fail contrast and are therefore not available. Without those rules five people produce five different designs that happen to share colours, which is the state most teams mistake for having a system.
Can it read my existing brand?
Yes. Give it your colours and type directly, or point it at a site and it will read what is actually used there, which is often different from what the brand document says. Where the existing brand has gaps — no state colours, no spacing scale, a palette that fails contrast on text — those are reported as gaps with a proposal, rather than silently replaced with something new.
How does the system reach my code?
As tokens: named values you can export and use in CSS or your component library, so the design file and the build refer to the same names rather than to the same colours by coincidence. That is the only arrangement that survives a few months. A system that exists only as a picture drifts from the code quickly, and when they disagree nobody can say which one is wrong.
Tools people use next
Run it on your own work
Design system needs an account, because it writes against what you give it and remembers what you have told it before. It is part of Pro and Max. Or see what the plans cost first.