Spacing scale
A spacing scale is the fixed set of distances every padding and gap in an interface is taken from, usually multiples of 4 or 8. Picking from a scale instead of typing numbers keeps a whole app on one rhythm.
Why it matters
A scale turns spacing into a choice among a few steps, so screens made by different people still match.
It also makes a handoff a name and not a number, which survives a change of the scale.
Spacing scale on iOS and Android
Also called 4pt grid, 8pt grid. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | No named scale; layout margins and spacing are set per component | An 8 dp grid for layout and a 4 dp grid for small elements | dimensions/spacing/*, a 4 pt scale |
| Screen side padding | 16 pt | 16 dp | platform/ |
In Appetite UI
The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.
| Token | Value | Drawn at size |
|---|---|---|
spacing/0 | 0 | |
spacing/px | 1 | |
spacing/0-5 | 2 | |
spacing/1 | 4 | |
spacing/1-5 | 6 | |
spacing/2 | 8 | |
spacing/2-5 | 10 | |
spacing/3 | 12 | |
spacing/4 | 16 | |
spacing/5 | 20 | |
spacing/6 | 24 | |
spacing/7 | 28 | |
spacing/8 | 32 | |
spacing/9 | 36 | |
spacing/10 | 40 | |
spacing/11 | 44 | |
spacing/12 | 48 | |
spacing/14 | 56 | |
spacing/16 | 64 | |
spacing/20 | 80 | |
spacing/24 | 96 | |
spacing/30 | 120 | |
spacing/32 | 128 | |
spacing/40 | 160 |
In practice
An 8 point grid and a 4 point grid are the same idea at two resolutions: the 8 point steps carry layout, the 4 point steps the inside of small components. Android’s guidance says the same, an 8 dp grid for layout and a 4 dp grid for icons and type.
Appetite UI uses a 4 point scale named by multiples, dimensions/spacing/4 is 16, with half steps of 2, 6 and 10 for tight spots. The same tokens set spacing on iOS and Android, and a screen’s side padding is one Platform variable, 16 on both.
| Token | Value | Used by |
|---|---|---|
dimensions/spacing/0 | 0 | No gap |
dimensions/spacing/px | 1 | Hairline |
dimensions/spacing/0-5 | 2 | Icon to label |
dimensions/spacing/1 | 4 | Tight gap |
dimensions/spacing/1-5 | 6 | Chip padding |
dimensions/spacing/2 | 8 | Label to control |
dimensions/spacing/2-5 | 10 | Compact row |
dimensions/spacing/3 | 12 | Field padding |
dimensions/spacing/4 | 16 | Card padding |
dimensions/spacing/5 | 20 | Row gap |
dimensions/spacing/6 | 24 | Card to card |
dimensions/spacing/7 | 28 | Header padding |
dimensions/spacing/8 | 32 | Block gap |
dimensions/spacing/9 | 36 | Wide block gap |
dimensions/spacing/10 | 40 | Section padding |
dimensions/spacing/11 | 44 | Tap target |
dimensions/spacing/12 | 48 | Section gap |
dimensions/spacing/14 | 56 | Wide section gap |
dimensions/spacing/16 | 64 | Screen block gap |
dimensions/spacing/20 | 80 | Screen padding, table action column |
dimensions/spacing/24 | 96 | Empty state |
dimensions/spacing/30 | 120 | Scroll clearance under a floating bar, default table column |
dimensions/spacing/32 | 128 | Hero spacing |
dimensions/spacing/40 | 160 | Full bleed, table lead column |
Common mistakes
- Typing an off-scale value such as 13 to make something fit. Change the layout.
- Using one gap for related and unrelated items. Use a smaller step inside a group.
- Mixing an 8 point layout grid with arbitrary inner spacing.
Questions
Should I use a 4 point or an 8 point grid?
Both: lay out screens on 8 point steps and use the 4 point steps inside small components. Appetite UI’s scale is 4 point, so every 8 point step is in it, and the half steps of 2, 6 and 10 cover icon to label gaps and chip padding.
How much padding should a mobile screen have at its edges?
Appetite UI gives every screen 16 points of side padding on iOS and 16 dp on Android, one Platform variable, so content lines up with the bars above and below it.
Sources
The pages the facts above rest on, each read October 31, 2026.