Design System Generator User Guide

The tool lives at /tool/design-engine/. Everything happens in the browser — there is no account, no upload and nothing is generated on a server. Every change to the brief produces all of the following at once:

• Four colour ramps. Primary, secondary and accent at eleven steps (50 to 950), plus a neutral ramp at thirteen steps (0 to 1000) tinted very slightly towards the brand hue.
• Role tokens for light and dark. Background, surface, elevated, muted, subtle, text tiers, borders, primary fill and its label — each picked so it meets the contrast requirement you asked for.
• Four semantic colour sets. Success, warning, danger and info, each with a solid, a background wash, a border and a text colour.
• Typography. A curated heading / body / mono pairing, a thirteen-size modular scale and twelve named roles from display down to overline and code.
• An icon family recommendation with a stroke width tuned to the style, and a live preview set.
• Scales. Spacing, border radius, shadow, motion durations and easings, z-index and breakpoints.

In the default Light + Dark colour mode that adds up to 177 design tokens; in light-only mode, 163. The system is deterministic: the same inputs always produce the same system, which is why a share link can rebuild it byte for byte on someone else's machine.

It is aimed at anyone who wants a production-grade starting point plus the evidence that it passes contrast, without hand-tuning ramps in a colour picker. It is not a brand generator and it does not draw anything — the output is tokens and specimens.

Open /tool/design-engine/. You do not start from an empty screen: the page generates a system as soon as it loads. Which one depends on how you arrived.

• A share link — if the URL carries any of the config parameters, those are applied first and the system is built from them.
• Your last visit — otherwise the tool restores the last configuration you used in this browser.
• A fresh browser — otherwise the defaults: Auto, Modern, AAA.

The working loop is five steps.

1. Configure. Set Industry, Style and Contrast target in the brief on the left. The other overrides sit below them in the same rail.
2. Generate. There is no button: every change rebuilds every panel on the spot, and the audit rail on the right says what it cost.
3. Refine. Read the Colour, Type, Icons and Scales tabs; change an input and watch the system move.
4. Preview. Open Components and see the tokens on real UI.
5. Export. On the Tokens tab, copy or download in the format your project needs.

There is no stepper to follow: the tab rail and the Jump to card on Overview take you between the stages, in any order.

Regeneration is live, and it is destructive

There is no Generate button to press. Changing any of the configuration inputs regenerates after a short debounce of about 120 milliseconds (the token prefix waits for a pause in typing); the seed colour picker regenerates as you drag it, and the seed hex field regenerates when you commit the value. Every panel is rebuilt from scratch on each regeneration, so anything you had open or toggled inside a panel — an expanded card, an open modal in the playground, a typed value — disappears the moment you touch a control in the brief. Get the configuration right first, then explore.

Two shortcuts worth knowing

• Surprise randomises the industry, style and accessibility target, resets the seed to auto, and either leaves harmony on auto or picks one at random. It then generates. Note that it leaves your colour mode, density, type ratio and corner style alone, so advanced overrides survive a surprise.
• Expand, at the end of the tab rail, collapses both rails so the panel gets the full width. The choice is remembered in this browser.

These three controls sit at the top of the brief, the rail on the left, and are always visible. Between them they decide the hue, the saturation, the shape language, the fonts, the icons and every contrast decision.

Industry

Industry seeds the brand hue and how much chroma the system is willing to spend, plus a mood line and a set of tags used to score font pairings and icon families. Fifteen options: Auto, which assumes no vertical and lets a seed colour decide, and fourteen verticals:

Style

Style multiplies the saturation the industry asked for and sets the shape and movement of the system: corner family, shadow preset, heading and body weight, default type ratio and motion personality.

Contrast target

The accessibility target is the minimum contrast every text-on-background decision is solved against. It is not a filter applied afterwards — it changes which ramp steps become your text and fill colours.

One thing the target does not relax: the primary fill is always chosen so a black or white button label clears 4.5:1 on it, even on the AA Large setting. Buttons stay readable whatever you pick.

Every other control sits in the brief below the three core inputs. There is no Simple / Advanced switch: all of them are always on screen, and whatever you set stays in effect.

What "auto" harmony resolves to

If you leave Harmony on auto, the style picks for you: Minimal becomes monochrome; Corporate, Elegant, Modern, Classic and Organic become analogous; Bold and Brutalist become complementary; Playful becomes triadic; Futuristic becomes split-complementary.

Compare every style →, at the foot of the brief, runs the same brief through every style (or every industry) side by side, each with its score and a Use button.

Overview is where you decide whether to keep going or change an input. It holds four cards.

• System summary — the score ring, the industry and style, the mood line, and badges for the seed, the number of contrast pairings needing review, the font pairing and the icon set. Under it, eight headline swatches: primary, secondary, accent, the four semantic solids and the body text colour.
• At a glance — ramp count, number of type sizes, base size, scale ratio, spacing unit, corner family, shadow level count and the total token count.
• Generation recipe — every input written back to you in full, including the resolved primary hue and the exact secondary and accent hue angles harmony produced. This is the row to screenshot when you want to tell someone how a system was made.
• Jump to — four shortcuts into Color, Type, Components and Export.

Reading the score

The ring shows a number from 40 to 100 and turns green at 85 and above, amber from 65, red below that. It is a weighted blend of four things:

Two things move the number in practice. Vibrancy follows the brand chroma alone, so a saturated style or a chromatic seed buys points a quiet one does not. Text hierarchy is all-or-nothing: it pays 12 only when body, muted and subtle text land on three different neutral steps, and 5 when two of them collide.

Relaxing the accessibility target does not raise the score — it usually lowers it, because lighter text tiers are more likely to collide and the headroom margin shrinks. If the score disappoints, reach for a bolder style or a seed with more chroma rather than a looser target.

The score is computed from the light role set. It says nothing about your dark theme.

The Colour tab has four cards. Everything on it is click-to-copy: any ramp cell, any swatch, any gradient. A copy flashes the cell and shows a short confirmation.

Ramps

Primary, secondary and accent run 50 100 200 300 400 500 600 700 800 900 950. Neutral runs 0 50 100 200 300 400 500 600 700 800 900 950 1000, with step 0 pinned to pure white. Steps are placed on perceptual lightness anchors in OKLCH rather than by mixing towards black, so the visual jump between 400 and 500 is roughly the jump between 700 and 800. Chroma peaks in the middle of the ramp and tapers at both ends, which is what stops the pale and dark steps looking muddy.

No step is ever clipped. If a computed colour would fall outside sRGB, its chroma is reduced until it fits. That is also why a very saturated seed can come back looking calmer than you expected: what you see is the part of the colour that can actually be displayed.

The neutral ramp is not pure grey. It carries a trace of the brand hue, so your greys feel warm or cool in the same direction as the brand.

Semantic colours

Success, warning, danger and info are built at fixed, canonical hues — roughly green, amber, red and blue — rather than derived from your brand, because a red danger state that has drifted towards your brand hue stops reading as danger. Each one gives you four values: a solid, a background wash, a border and a text colour. The label colour on the solid is chosen automatically as whichever of black or white reads better.

Surfaces and roles

This is the card most people should copy from. Roles are the tokens you actually build with — background, surface, elevated, muted and subtle surfaces, three text tiers, two border strengths, the primary fill and its label. They are chosen by scanning the neutral ramp for the lightest step that still meets the requirement: your target for body text, 4.5:1 for muted text, 3:1 for subtle text. The primary fill is picked from a preference order starting at step 600 so that it clears 3:1 against the background and takes a readable label.

A dark role block sits below the light one, built against neutral step 950 — a tinted near-black, not the darkest step in the ramp. It only appears when the colour mode includes dark.

Gradients

The Gradients card starts collapsed — click its header to open it. Five are generated: brand, brand-soft, sunrise, mesh and subtle. Clicking one copies its CSS. Several cards across the tool start collapsed this way, including Available weights on the Type tab, Shadow values on the Scales tab, and On brand color and Size ramp on Icons.

The font pairing

There are sixteen curated pairings, each with a heading family, a body family, a mono family and a short note on why it works. The tool does not pick at random: each pairing carries tags, and the winner is the one with the most tags in common with your industry and style. Luxury and Elegant tend to land on a high-contrast serif over a clean sans; SaaS and Minimal on a neutral geometric sans, usually Inter. Because the industry and style tags are pooled, one style can land differently in different industries: Brutalist gives Gaming the wide Archivo Expanded but leaves Fintech on Inter.

The Font pairing card shows three specimens with the pairing's note, and a Browse in Font Library ↗ button that opens the Font Library searching for your heading family. Fonts load from the Auric font CDN first, with Google Fonts as a fallback. If both are unreachable, the specimens fall back to system stacks — the names and weights shown are still correct, the rendering is not.

The type scale

Thirteen sizes, named 2xs xs sm base md lg xl 2xl 3xl 4xl 5xl 6xl 7xl, generated from the modular ratio around the base size your density chose. The scale card lists them largest first with px and rem values and a specimen line. Two details worth knowing:

• Sizes of 28px and above also carry a fluid clamp() value, so display type scales with the viewport instead of stepping at breakpoints.
• Line height is computed per size — tight for headlines, generous for body — rather than being one number for the whole scale.

The Roles card is the practical one: twelve bindings of size, weight, line height, letter spacing and which family to use, covering display, h1 to h5, body-lg, body, small, caption, overline and code. Each is rendered in its own settings, so you are reading the decision, not a description of it.

Icons

Seven families are scored by the same tag overlap: Feather, Lucide, Heroicons, Phosphor, Tabler, Remix Icon and Material Symbols. The recommendation card explains why the winner won, and gives the stroke width, the 24px grid, the corner join and suggested sizes. Stroke width is nudged thinner for Minimal and Elegant systems and thicker for Bold and Brutalist ones, so the icons match the weight of your type.

The preview grid renders at the recommended stroke. When the Auric icon CDN is available the previews are upgraded in place to the actual recommended family; otherwise you see the built-in line icons, which is a fair approximation of weight and grid but not of the family's character. Browse … in the Icon Library ↗, named for the recommended family, opens the Icon Library on the recommended set.

One Scales tab, in four columns, one scale each. All four are driven by inputs you have already set, so there is nothing to configure here — they exist to be read and copied.

The shadow preset follows the style directly. Hard, used by Brutalist, emits offset-only shadows with no blur. Glow, used by Futuristic, adds a brand-hued glow to the two largest levels. The exact CSS for every level is in the Shadow values card, which starts collapsed.

Two more scales are generated but have no tab of their own; you will find them in the Tokens table and in every export.

The Components tab renders a full UI gallery from your tokens, and it genuinely works. Tabs switch, dropdowns open and close, steppers count, ratings set, switches toggle with the mouse or with Enter and Space, modals and drawers open, toasts stack, accordions expand, loading buttons spin, banners dismiss. This is the fastest way to find out that your muted text is too light or your primary is too close to your info colour.

Nine categories, filtered by the chips above the stage:

• Navigation, Buttons, Forms, Feedback, Data, Overlays, Commerce, Marketing, and an Industry showcase.
• The Industry showcase is a small on-brand app surface — app name, navigation labels, a headline metric, a call to action, data rows and a trust chip — written by hand for each of the fourteen industries. Its own chip row lets you switch scene independently of the industry you generated with, which is useful for checking that a fintech palette still reads on a wellness layout.

The preview controls

The bar above the stage re-skins the preview without touching the generated system. These are view settings, not design decisions: they are not saved, not shared and not exported.

↺ Reset returns density, corners, elevation, button shape and viewport to their defaults. It deliberately keeps your theme and your category filter, so resetting does not throw you out of the dark-mode check you were in the middle of.

Remember that touching any input in the brief rebuilds this panel from scratch. If you have a modal open and a form half filled in, changing the style will wipe it.

The audit rail on the right is the evidence, and it stays on screen unless you Expand the panel. It checks twelve pairings — eight named text and UI pairings plus the four semantic solids with their labels — and each is judged against the requirement that actually applies to it, not one blanket number.

Each row shows the WCAG 2.1 ratio, coloured by pass or fail, the APCA Lc value and the requirement it was held to; the full audit adds a PASS or CHECK badge. The count of failing rows also sits at the top of the rail, so you can see from any panel whether something needs attention. Clicking the score opens the whole audit: the same twelve pairings for either theme, every foreground against every surface, and — for anything failing — the ramp step that would clear it.

The APCA number is there for context, not as a gate. It is a perceptual contrast measure that handles light-on-dark and mid-tones better than the WCAG ratio does. The tool prints the magnitude of Lc, so the polarity of the pairing is not shown — treat a high Lc as reassurance and a low one as a prompt to look at the pairing with your own eyes.

Colour-vision preview

Below the matrix, the core palette — primary, secondary, accent and the three loudest semantic solids — is drawn four times: normal vision, deuteranopia, protanopia and tritanopia. What you are looking for is two strips that stay distinguishable in the first row and merge in a later one. If success and danger become the same colour under deuteranopia, your interface needs to carry that meaning with an icon or a word as well as a colour.

What this audit does not cover

• The rail lists the light pairings, and its failing count and the score cover the light role set only. The dark roles are audited too — the rail gives their failing count, and the full audit switches between Light and Dark — but they do not move the score.
• It checks the token pairings the system defines, not your layout. Text over an image, a disabled state, a focus ring on a coloured button and hover states are all yours to verify.
• It says nothing about font size or weight, which change what a given ratio means in practice.

If a row says CHECK, the quickest fixes are: lower the accessibility target by one step, choose a less saturated style, or supply a different seed. Changing the target regenerates the roles and usually clears the row outright.

The Tokens tab

Every token in the system, grouped by category — Color · Primary, Color · Secondary, Color · Accent, Color · Neutral, Color · Semantic, Color · Roles (light), Color · Roles (dark), Color · Gradients, Typography, Typography · Size, Typography · Leading, Typography · Tracking, Spacing, Radius, Shadow, Motion, Z-index and Breakpoints — each headed by its own count, with a colour chip on anything colour-valued. Clicking a token copies its value.

The Find token field at the top of the Tokens tab filters by substring. Two things to know about it: it only searches this tab, and it only matches elements the tool has marked as searchable. It is a way to narrow a long list, not a site-wide search. Clear restores everything.

Export

Twelve format pills across the top; picking one re-renders the code block below it, with the filename and language in the header bar. Three buttons: Copy takes the visible text, Download saves it under the format's own filename, and Download all writes every format into one file.

Coverage differs by format — check before you commit

Not every export carries every token. This is the part that most often surprises people:

• Tailwind v3 has no role tokens. You get the ramps, semantic solids, fonts, sizes, spacing, radius and shadow, but no background, surface, text or border roles. Use Tailwind v4 or the CSS export if you want the roles.
• The Figma / W3C export covers colour ramps, semantic solids, font families and sizes, spacing, radius and shadow. Roles, gradients, motion, z-index and breakpoints are not in it.
• The four native exports carry colours and a subset of dimensions only — spacing, radius, type sizes and breakpoints. No shadows, gradients, motion, font stacks, line heights, letter spacing or z-index.
• Native exports also drop anything that is not a plain hex. The focus ring is always a translucent colour, and in dark mode the two border roles are translucent white, so those tokens are simply absent from the Android, SwiftUI, Flutter and Compose output. Define them by hand on those platforms.
• Two roles never reach CSS. The primary "active" and "subtle" variants are present in the JSON and TypeScript exports but not in CSS, SCSS, Tailwind v4 or any native export.
• Download all is a text file, not an archive. It concatenates all twelve exports with comment separators into design-system-bundle.txt. The button label says as much. Split it by hand, or download the formats you need individually.

For a production system, take the CSS or JSON export as your source of truth and generate the rest from it, rather than mixing exports with different coverage.

Share

Share encodes every input into the URL, copies it to your clipboard and rewrites the address bar to match. Anything left on auto, and an empty token prefix, is left out:

https://auricartisan.com/tool/design-engine/?industry=wellness&rampSpan=default&rampPeak=default&tokenCase=kebab&style=elegant&a11y=AA&mode=both&density=spacious

Opening that link applies the parameters and generates before anything else — which is why a share link beats a screenshot in a design review. It carries the recipe, not a picture of the result. The ramp shape and token naming come back too: a link can set them only to values the controls offer, and a token prefix keeps letters, digits, hyphens and underscores, up to 40 characters.

Save and the Saved panel

Save stores the system in your Auric Library workspace with a name, a colour preview strip, a short score summary and the complete input configuration. The Saved panel, in the Workspace view that the Workspace button opens, lists what you have stored, updates itself when you add or remove something, and gives each entry three actions:

• Restore re-applies every input, regenerates, and drops you back on Overview. Because the system is deterministic, restoring gives you what you saved, ramp shape and token naming included.
• Open shows the asset in the library.
• Delete removes it.

Saving depends on the library being loaded on the page. If it is not, Save shows a short message instead of failing loudly, and the Saved panel explains that the workspace is unavailable rather than pretending you have nothing stored.

Connect

The Connect section of the Workspace view hands the system to the rest of the toolkit. It has four cards:

• Colour tools — Harmony Studio, Gradient Library, Accessibility Lab, Contrast System, Color Spaces and Color Psychology, each opened seeded with your primary. Where the in-page colour toolkit is loaded, these open as a side panel without leaving the tool.
• Full generators — four tools: Personalization Generator, Color Science Lab, Color Blindness Simulator and the URL Analyzer. Each opens carrying your seed and palette.
• Libraries and workspace — the Font Library on your heading family, the Icon Library on your recommended set, Save, and Open workspace.
• Copy palette (collapsed by default) — the twelve-colour palette as a HEX list, as a JSON array, or as a dash-joined slug for pasting into a URL.

Limits worth carrying into your project

• The quality score is computed against the light roles only, in every colour mode. The dark roles are audited, but open the full audit and switch to Dark to check them.
• Preview overrides in the playground — theme, density, corners, elevation, button shape, viewport — are view-only. They are never saved, shared or exported. If you like what a preview override does, set the matching real control in the brief; the system regenerates on its own.
• Regeneration rebuilds every panel, so in-panel state is disposable by design.
• The generated names are structural (primary-600, space-4). Rename them to your product's vocabulary before they enter a codebase, or you will be arguing about numbers for a year.
• Font and icon previews depend on the Auric font and icon CDNs, with Google Fonts as the font fallback. Offline, the type specimens use system stacks and the icons stay generic. The token values are unaffected.
• An accessible token set is a starting point, not a finished accessible product. Contrast is one of many requirements; focus order, target size, motion preferences and semantics are not in scope here. The Accessibility Library guide covers the wider ground, and Understanding your accessibility report explains how findings are graded elsewhere on the site.