A brief in, a system out

Foundations, semantic roles, component recipes and a documented export — validated against the criteria that apply, and honest about the exceptions.

Home › Professions › Design › Design system

A brief in, a system out

Foundations, semantic roles, component recipes and a documented export — generated from six answers, validated against the criteria that apply, and honest about the exceptions.

Local tool — nothing you make here is uploaded
What a contrast check does and does not prove. Meeting a ratio satisfies one WCAG success criterion. It does not make an interface accessible, and it says nothing about focus order, labelling, motion, or whether the thing is usable at all. Automated checks find a minority of real barriers.

Foundations

Starter components

Built from the semantic roles, not from raw values. Changing the brand colour moves all of it.

Validation

Token dependencies

What breaks if a primitive changes. A semantic token is a reference, so the answer is knowable.

The export bundle

Nothing here leaves this browser. Colours, images, SVG and generated code are processed on your own device. No file is uploaded, nothing you enter is stored on a server, and none of it is passed to the analytics or advertising scripts on this page.
What is generated, and in what order

Primitives first. Brand, accent, neutral and four status ramps in OKLCH, each 50–950.

Then semantic roles, chosen by measurement rather than by fixed step: the ramp is walked from the end nearest the canvas until a step actually meets the contrast target. That is why an unusual brand colour still produces a system that passes.

Then scales — type, spacing, radii, shadows — from the ratio and density you chose.

Then component recipes, which reference only the semantic layer. No component names a ramp step, which is what makes the whole system move together.

Then validation, which checks contrast, state distinction, focus visibility, target size and whether every reference resolves. Anything it cannot fix is listed as an exception in the README rather than quietly dropped.

A generated system is a starting point

What a generator can do is make the arithmetic consistent: even lightness steps, roles that meet their thresholds, states that are actually distinguishable, scales that relate. That is a real amount of work and it is the part most hand-built systems get wrong.

What it cannot do is know your product. The naming, which components exist, what the brand should feel like, and every decision that depends on the domain — those are yours, and nothing here pretends otherwise.

The exceptions matter more than the passes

Any generator can produce a system that passes when the brand colour is a mid-tone blue. The interesting output is what happens with a pale yellow or a near-black: which roles cannot reach their target, and what the honest options are.

Those go in the README, so whoever inherits the system knows what was compromised and why rather than discovering it in an audit.

Everything stays in your browser

No account, no upload, no server. The bundle is generated here and downloaded from here, and the workspace that carries it between tools is a single record in this browser's local storage.