Rule checklist

Gradients, glass, pills, hero glows — the reference point set out in the overview already rules those out. The 26 rules below cover what a reference point cannot carry, and every one of them comes from measuring this system.

Colour

• 01Keep the neutral ramp's cool cast consistent and committed. Low-chroma greys land in the ambiguous zone and read as dirty.
• 02Make each of the four text steps about half the one above. Four steps bunched at one end are really two.
• 03Recompute the key pairings every time the ramp changes, including the worst case of a small size on a light background.
• 04Keep the board lighter than the panels. The artifact is the only thing on screen that should be loud.
• 05Judge by measured contrast. At the same ratio, elements that work through area (tracks, bands) and elements that work through line (strokes, ticks) are not equally visible.

Hierarchy

• 06Build hierarchy by taking weight away: let the label fall back to a lighter secondary, and the value steps forward.
• 07Separate three layers within one size using weight plus colour, rather than adding another size.
• 08Give structural labels and helper text their own registers: one is the skeleton, the other is a footnote.
• 09When the hierarchy is unclear, lighten the label first — the panel gets lighter overall and the hierarchy gets clearer.

Shape and space

• 10Put the uniformity in the shape — identical fill, stroke, radius and height.
• 11Let width follow content, and leave the right edge to the layout's alignment.
• 12Group with dividers inside an already-enclosed panel; save cards for things that genuinely leave the plane.
• 13Let elements that never appear together share one slot (the unit suffix and the drag handle).
• 14Take every value from the 8px scale. A layout that only looks right at 14px has an alignment problem.

Controls

• 15Spend the red emphasis step on exactly one action per screen, or on none at all.
• 16Treat the state set as closed. A control that seems to need a ninth state actually needs rethinking.
• 17Before rebuilding a native control, write out the keyboard and screen-reader contract you now owe, then repay it item by item.
• 18Put pointer-events: none on decorative layers and leave the clicks to the real control underneath.
• 19Give destructive actions the secondary shell with error text plus a confirmation step.
• 20Put one drag affordance on a row, never two.
• 21Label buttons with verbs: Generate, Export, Regenerate.

Engineering

• 22Write flex: 1 on panels that must fill, not just min-height: 0.
• 23Ship icons as inline stroke SVGs and depend on no icon font.
• 24Run a dangling-variable check after every token change: deleting a neutral step without updating the semantic token that references it makes some state fail silently.
• 25Use a thin scrollbar so a panel's left and right padding stay symmetrical.
• 26Mount overlays on body with position: fixed so scroll containers cannot clip them.