Overview
These guidelines come in two forms: the pages below are written for people, and design.md is written for coding agents — the same tokens, component specs and design intent as a single file in the standard DESIGN.md format. Hand it straight to yours.
These are recommendations, not a review gate. Follow them and your generator reads as part of the platform rather than another website embedded inside it — nobody has to relearn what a control looks like or what happens when they click it. Ignore them and you can still publish; visual style does not decide the review.
The only chapter that is enforced is Platform constraints: export goes through the platform button, your generator gets only the region the platform allocates to it, the exported file is 1:1 actual size. Those are not matters of taste but of whether the thing runs and whether it passes review — a submission with no export hook registered is rejected automatically. Everything else below is advice.
A generator is a workbench, not a storefront. The reference point is the properties panel of a professional creative tool — the chrome is monochrome and unremarkable, so the thing being made is the only coloured object on screen.
Whoever is using this is in the middle of working. They will run the same generator twenty times in an afternoon, changing one value each time. At that repetition rate, the value of the interface is its predictability: controls stay in the same place, values stay legible, and the twentieth transition looks exactly like the first.
The tone is quiet and transparent. Hierarchy is built by taking weight away: labels fall back to a lighter secondary, and only values, the primary button and the artifact itself are dark. One stroke of red is held in reserve, marking the single action on screen with the heaviest consequences.
Field label 14 / 400 / 7.56:1 → value 14 / 500 / 17.74:1. What separates them is one step of weight plus one step of colour — not size. The label steps back, the value steps forward; the same 14px still has room for a section header (500 / primary) and helper text (12px / tertiary). When the hierarchy is unclear, lighten the label rather than heavying it — the panel as a whole gets lighter, not louder.
What it is not: not a marketing page, not a dashboard, not a consumer app. No hero moment, no gradients, no glass, no glow, no pill buttons, no illustrated empty state apologising for itself, and no entrance animation on load. Those belong to products that still have to convince you to stay. This one already has your attention.