# 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.

Page: https://www.appetiteui.com/academy/glossary/spacing-scale. Spacing scale: 4pt and 8pt grids for mobile apps. Also called 4pt grid, 8pt grid.

## At a glance

|  | 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 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.


Tokens, token, value, used by:

| 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

1. [Android Developers: Grids and units](https://developer.android.com/design/ui/mobile/guides/layout-and-content/grids-and-units)
2. [Apple Human Interface Guidelines: Layout](https://developer.apple.com/design/human-interface-guidelines/layout)

## Related

- Docs: [Dimensions](https://www.appetiteui.com/docs/dimensions)
- Article: [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma)
- Glossary: [Corner radius](https://www.appetiteui.com/academy/glossary/corner-radius)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Design tokens](https://www.appetiteui.com/academy/glossary/design-tokens)