Workspace
Saved systems, and sending this palette on to another tool. Neither is about the system on screen, which is why they are here rather than in the tab rail.
How this works
Three choices seed a whole design system, and every value stays editable afterwards. The maths is deterministic: the same brief always produces the same system, which is what lets a shared link reproduce one exactly rather than approximately.
What the defaults do
- Industry — Auto
- Assumes no vertical. It takes a balanced hue and an unweighted tag set, so the font and icon pick is not nudged toward anyone’s idea of what a fintech looks like. Give it a brand seed and Auto steps aside entirely — the seed drives hue and chroma. Pick a vertical when you want its opinion.
- Harmony, corner style, type ratio — Auto
- Derived from the style. The rail shows what each resolved to (“auto → analogous”), so Auto is never a black box; set any of them explicitly to pin it.
- Contrast target — AAA
- The strictest of the three: body text must clear 7:1. Lower it to AA (4.5:1) or AA Large (3:1) and the engine re-picks the text and primary steps to match — it does not simply stop complaining.
- Ramp shape — Even / Natural
- The perceptual curve the tool has always used. Changing it reshapes the brand families only.
- Token naming — kebab, no prefix
--color-primary-500. Set a prefix or another case and all twelve export targets follow.
If you write the code
Set Token naming to your codebase’s convention before exporting and the file drops in without a rename pass. Share copies a link that regenerates the exact system, so a token file and the brief that produced it can live in the same commit. The audit rail counts how many tokens moved on your last change — that is the diff you are about to commit.
If you own the accessibility
Requirements follow WCAG by content type rather than one
blanket number: body text holds your target, muted text holds AA body,
button labels hold 4.5, UI and large elements hold 3, decorative borders
1.4. Both themes are audited — open the audit and switch between them.
Anything failing comes with the ramp step that would clear it, worked out
with the engine’s own pick logic run backwards. APCA Lc is
reported beside every ratio.
If you choose the colour
The seed is the whole brand: paste a hex, or take one of the twelve hues under it. Harmony decides where the secondary and accent hues land relative to it. Ramp shape is the colourist’s control — how far each family travels in lightness, and whether its chroma stays level or peaks mid-ramp. The semantic families ignore it on purpose: a warning is read as a signal before it is read as colour. Compare runs the same brief through every style at once.
What the score means
Four weighted measurements, not a verdict on taste. Accessibility (55) is the share of the twelve pairings that pass. Vibrancy (18) is how much brand chroma survived gamut mapping and the contrast requirements. Headroom (15) is the margin body text has above its target. Hierarchy (12) checks the three text tiers read as three tiers. A brutalist system and a minimal one can score the same and mean entirely different things.
Getting around
Seven panels across the top; the brief on the left; the audit on the right, always. Expand collapses both rails when you would rather read the panel than turn dials. Compare, Workspace and the full audit are views — they open over the panel and hand it back.