Briefle words · UI design
Spacing scale
A small, fixed set of spacing values reused everywhere, so small gaps consistently mean related and large gaps mean separate.
Say it to an AI
Notification settings panel with three toggle rows. Be generous with whitespace: roomy padding around the panel and every row, all on an 8px spacing scale, so each label, description and toggle reads as its own calm touch target. Let the panel grow taller rather than tighten.
How an expert would brief the stronger version of “Settings panel”.
See it
Try it as a puzzle →Notification preferences panel in a team chat app's settings.
Why: A sticks to 16 and 24px steps for the header, rows and gaps. B shrinks everything to cramped values like 6 and 10px that don't follow a scale.
More ways experts use it
Signup card with name, email and password. Let proximity do the grouping: each label sits tight to its input, with a clearly bigger gap between field groups. Pull everything from a 4px spacing scale, roughly 4–6px label-to-input and 16px between groups.
Signup form · UI designCourse overview card laid out on a strict spacing scale for a steady vertical rhythm: 4px within a group, 8px from a heading to its content, 16px between sections (intro, learning outcomes, instructor, CTA). No one-off margins.
Course overview · UI design
Related words
Room 5 · Spacing & layout
Learn “Spacing scale” in a five-minute lesson