Rules

The conclusions of the previous chapters, compressed into something you can check line by line. The first part is the contract at the top of design.md; the second is the self-check at the end of it, which an agent should run against its own output and fix before submitting.

Ten rules

1The layout starts from one of the five templates. Refine it and combine blocks across layouts freely — but keep the skeleton: rails are fixed-width, the canvas takes everything else.

2The parameters rail is 320px; parameters live in property cards; export is pinned to the rail's bottom.

3View tabs sit top-centre of the canvas, the tips button top-end, the zoom cluster bottom-start.

4Controls are 28 (inputs, selects), 32 (buttons, segmented, icon buttons), 40 (the one big call to action).

5Radii are 6 on controls, 8 on cards and panels, 12 on dialogs. No pills except the switch track and the Tips button.

6Inputs are grey-filled with no border; focus draws a 1px stroke-active border. Selection is a 2px brand ring, never colour alone.

7Panel text is 12px; only buttons and rail headings are 14px. No raw hex — every colour is a --color-* variable.

8Export goes through data-atomm-export-button and the export hook. No top bar of your own.

9Icons are inline stroked SVG. Every interactive target is at least 24×24 and shows a pointer cursor. Nothing conveys meaning by colour or motion alone.

10Nothing exceeds 200ms, nothing bounces, nothing animates on load.

These ten cover most rejections. The skeleton (layout and sizes, as they render) must match; the skin (colour, type sizes) is a default you may replace as a set — changing values, never names; what the generator does is not the spec's business.

Self-check

The page is one of the five layouts; every rail width is 64 / 320 / 360 and the parameters rail is 320.
View tabs are top-centre of the canvas, the Tips capsule top-end, the zoom cluster bottom-start; export is in the rail footer or the canvas's bottom-end corner and stays put while content scrolls.
There is no top bar of your own and no second overlay layer; z-index never exceeds 3.
Every control height is 24, 28, 32 or 40; inputs and selects are 28, buttons 32, the one large call to action 40.
Every radius is 4, 6, 8, 12 or a true circle, except the bottom two corners of an expanded property card's header row, which are square; the switch track and the Tips button are the only capsules.
Inputs are grey-filled with no border at rest, white with a 1px stroke-active border on focus, 92px wide; selects 110px.
Parameters are inside property cards with a disclosure header; rows are label ⋯ control with 8/16 padding.
No raw colour appears in component CSS; every colour is a --color-* variable and every hex in :root is in the palette (or your declared reskin).
Panel text is 12px, buttons and rail headings 14px, thumbnail labels 11px, rail labels 10px (or your declared scale applied consistently).
Selected states have a 2px brand ring or a checkmark, not colour alone; every error has a message beside its control.
Every interactive target is at least 24×24; every icon-only button has an aria-label; every decorative icon is aria-hidden.
Every control that reacts to a click shows cursor: pointer, every text field a caret, everything disabled not-allowed; a value readout keeps the default arrow.
Icons are inline SVG with stroke: currentColor; no icon font is loaded.
Sliders show their value as a number; switches are real checkboxes with pointer-events: none on their decoration; selects follow the combobox contract or are native.
Nothing animates longer than 200ms, nothing animates on load, and prefers-reduced-motion zeroes every duration.
data-atomm-export-button exists and the export lifecycle hook is registered; the exported file is 1:1 in mm.
The flow works with dir="rtl": rails, overlays, slider fill and switch knob all mirror; the canvas content does not.
Below 960px the regions stack, the canvas comes first, export stays pinned, and there is no horizontal scrolling.

Do's and don'ts

Layout

Do pick one of the five templates and keep its regions and widths.
Do put export where the template puts it — rail footer, or bottom-end of the canvas.
Don't add a top bar, a second overlay layer, or a column for derived results.
Don't put a Generate button on a live-preview generator.

Controls

Do group parameters into property cards with a disclosure header and label ⋯ control rows.
Do keep the state set closed; a control that seems to need a ninth state needs rethinking.
Do write out the keyboard and screen-reader contract before replacing a native control, then repay it item by item.
Don't give inputs a border at rest, and don't use native spinners.
Don't fill a destructive button with red; use the secondary shell with red-default text and a confirmation.
Don't let a decorative layer take pointer events away from the control underneath it.

Colour and type

Do reference --color-* variables everywhere; a raw hex in a component is a bug.
Do keep the ground (bg-editor) darker than the panels, and white cards on the panels.
Do recompute the text steps against every surface if you reskin.
Don't invent a size between the export's steps; move the whole field register from 12-regular to 14-regular, or leave it.
Don't convey state by colour alone — a selected thumbnail has a ring, an error has a message.

Engineering

Do give a panel that fills its space and scrolls both flex: 1 and min-height: 0 — one without the other is the overflow bug.
Do mount popovers on body with position: fixed.
Do inline icons as stroked SVG and inherit their colour.
Don't rely on a classic scrollbar taking no space; use a thin one.
Don't animate a layout property (width, height, inset); opacity, transform and colour are the safe set.