A model draws clean UI when a few numbers are fixed before it starts. Left open, it picks a new padding for every card, a new radius for every corner, and a new weight for every label, and the screen reads as generated. Fix the numbers first, then let the model spend its judgement on the parts that need it: the composition, the copy, and the imagery.
This doc is the starting set. A project's design system overrides every value here. The point is that some value is fixed, not that this value is right for every brand.
Fix Six Numbers Before the Model Draws
Give the model these constraints in its instructions, and check the rendered result against them.
grid: 8px base. Every gap, margin, padding, and control height is a multiple of 8.
padding: 24px inside every surface (card, panel, dialog, sheet). Not 20, not 28.
radius: 24px on every surface. One value, so peers read as one family.
families: 2 at most. Inter for the interface, one serif for display or editorial text.
weights: 2, or 3 when a third marks a level the first two cannot.
sizes: about 3 per view (see typography.md, "Establish a Type Scale").
8px base grid
Put every spacing value on a multiple of 8: 8, 16, 24, 32, 48, 64. The 4 and 12 half steps are allowed inside a control (icon-to-label gap, badge padding) and nowhere else. The full scale in layout-spacing.md ("Establish a Spacing and Sizing System") still lists those small steps; this set reserves them for controls. A model that is free to choose 13px will choose 13px, and two neighbouring cards at 13px and 17px is the most common tell in generated layout.
24px padding, strictly
One padding for every surface. A model drifts toward a different inset per card because each card was generated in a different turn; the fix is to name the number, not to ask for "consistent padding". Inner groups keep the grid: 8px between a label and its field, 16px between fields, 24px between sections. More space between groups than within them is what shows what belongs together (see layout-spacing.md, "Avoid Ambiguous Spacing").
24px corner radius, consistently
Surfaces share one radius. With 24px padding the nested-corner rule (inner radius = outer radius minus padding) gives an inner radius of zero, so content inside a surface is square. A nested surface that sits closer to the edge, with an 8px or 16px gap, takes 16px or 8px from the same maths, never a guessed value (see depth-and-surfaces.md, "Concentric Radius for Nested Elements"). Controls keep their system's control radius, and a pill button is a pill. What the rule bans is three different radii on three peer cards.
depth-and-surfaces.md tiers the radius by component size, with cards a step below modals. This set collapses the surface tiers on purpose: cards, panels, dialogs and sheets all take 24px, so a model has one number to hold. The control tier still sits below it.
Two font families: Inter plus one serif
Inter carries every interface role: labels, body, controls, tables. The serif carries display and editorial text: the page title, a pull quote, a marketing headline. A model handed a third family will use it, so do not hand it one. A monospace face is allowed only for code and tabular figures, and it does not count as a family for display.
Two or three weights
Models over-index on weight. Handed the full range they render 400, 500, 600, 700, and 800 on one screen, and the hierarchy flattens into texture. Give them two: the body weight (400) and one heavier weight for headings and a single lead figure (600 or 700). Allow a third only when it marks a level the first two cannot, and name which level. review-rules.md ("Mixed font families and weights") fails a view past three.
Start From Great References
Fixed numbers stop the drift; they do not supply taste. Give the model two or three reference screens that already have the quality you want, and say what to take from each: the density of one, the type pairing of another, the way a third handles empty space. Read the reference with the method in reading-a-reference.md: extract the brand tokens with the extractor, then read the technique by eye and name it.
A reference is a floor, not a target. The model starts from it and the first pass will sit close to it; that is the point.
Fine-Tune From There
Treat the first render as a draft and adjust one axis at a time: spacing, then type, then colour, then imagery. A change to two axes at once hides which one helped. Keep the six numbers fixed through every pass, so the fine-tuning lands on composition and copy rather than on the numbers drifting back.
Stop fine-tuning when the screen passes the three tests in review-rules.md ("Comprehension"): the mom test, the 15 second test, and the screenshot test.
Hand-Select Imagery and Set the Art Direction
Do not let the model choose the images. A generated or stock-default image is the fastest way for a clean layout to read as generated, and the model cannot judge a photo the way a person can. Pick every image by hand, and write the art direction down before generation starts:
- the subject and what it must not show
- the crop and the aspect ratio, on the same grid as the layout
- the palette the image must sit inside, so it does not fight the tokens
- the treatment: overlay, desaturation, or none (see
images.md, "Text Needs Consistent Contrast") - the order, when there is more than one (see
product-imagery.md)
Hand the model the files and the direction. It places them; it does not choose them.
Checklist
- Every spacing value is a multiple of 8, with 4 and 12 only inside a control
- Every surface has 24px padding
- Every surface has a 24px radius; nested corners follow the concentric rule
- Two font families at most, and the serif only on display text
- Two weights, or three with the third level named
- About three type sizes on the view: a title, a section, and body
- Two or three references given, with what to take from each
- Fine-tuning changed one axis at a time and left the numbers alone
- Every image chosen by hand, with the art direction written before generation