Anti-pattern · Layout · Low
Mismatched Radius Across a Family
Mismatched radius across a family means sibling components — buttons, inputs, cards — each use a different corner radius instead of one scale.
The tell
Sibling components at similar sizes carrying visibly different corner radii.
Why it happens
Each component is generated from a different reference image, and nothing in the prompt ties their geometry together. Absent a scale, the model guesses per element.
The rule
One radius scale of two or three steps, assigned by component size.
- Define a scale — for example 6px for controls, 10px for cards, 16px for sheets.
- Assign each component the step matching its size, not its type.
- Grep the codebase for hard-coded radius values and map each to a step.
What is a Mismatched Radius Across a Family?
A page where buttons are fully rounded, inputs are 4px and cards are 16px has three unrelated corner languages. Corners are a system: pick a short scale — typically three steps keyed to component size — and let every element take the value its size implies. Small controls get the small step; large surfaces get the large one.
Paste this after your existing prompt to strip the pattern from the result.