By Bob Poláček, updated
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.
By Bob Poláček, updated
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.
| iOS | Android (Material 3) | 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/screen-padding |
In the kit
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 |
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.
- Android Developers: Grids and units, read October 13, 2026
- Apple Human Interface Guidelines: Layout, read October 13, 2026