Spacing
Spacing is the distance around and between component and layout elements
Overview · Applying spacing · Tokens
Note
The spacing system tokens are only used on Jetpack Compose.
System spacing tokens
Design tokens
Token table
Machine-readable relationship table
Measurement tokens · 1 token set · 18 tokens · live token table · DSDB MEASUREMENT.20543ce18892f7d9
- Default context: none
- Not configurable here (group default used): Theme: Light · Platform: Android · Audience: 1P Baseline · Motion scheme: Standard · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
- Reference chain: aliases from the token to its source value (
token → alias → … → value). "—" means the token holds a literal value.
Spacing · md.sys.measurement · 18 tokens
For common spacing units that can be applied to components and layouts.
| Group | Token | Type | Reference chain | Resolved value |
|---|---|---|---|---|
| All tokens | md.sys.measurement.space0 | Length | — | 0dp |
| All tokens | md.sys.measurement.space25 | Length | — | 2dp |
| All tokens | md.sys.measurement.space50 | Length | — | 4dp |
| All tokens | md.sys.measurement.space75 | Length | — | 6dp |
| All tokens | md.sys.measurement.space100 | Length | — | 8dp |
| All tokens | md.sys.measurement.space125 | Length | — | 10dp |
| All tokens | md.sys.measurement.space150 | Length | — | 12dp |
| All tokens | md.sys.measurement.space175 | Length | — | 14dp |
| All tokens | md.sys.measurement.space200 | Length | — | 16dp |
| All tokens | md.sys.measurement.space250 | Length | — | 20dp |
| All tokens | md.sys.measurement.space300 | Length | — | 24dp |
| All tokens | md.sys.measurement.space400 | Length | — | 32dp |
| All tokens | md.sys.measurement.space450 | Length | — | 36dp |
| All tokens | md.sys.measurement.space500 | Length | — | 40dp |
| All tokens | md.sys.measurement.space600 | Length | — | 48dp |
| All tokens | md.sys.measurement.space700 | Length | — | 56dp |
| All tokens | md.sys.measurement.space800 | Length | — | 64dp |
| All tokens | md.sys.measurement.space900 | Length | — | 72dp |
System spacing tokens are a linear range of spacing values recommended by Material. They’re intended to cover the majority of spacing needs within the design system. The base unit of measurement md.sys.measurement.space100 is 8dp. Learn more about design tokens
The main spacing units are multiples of 8dp
Nested units
Values other than multiples of 8 are also used in layouts and Material components, like 2dp, 4dp, 6dp, and 10dp. Material only defines the most recommended nested units.
Material only defines nested units that are actively used in common layouts or Material components
Component spacing
Most Material component spacing attributes will map to system spacing tokens. Spacing logic, like adaptive design or density, should be applied to the component attribute.
Component attributes follow a new naming strategy:
Going forward, all component spacing attributes will use padding, margin, and gap, and positional language: horizontal, vertical, leading, trailing, top, and bottom
- Example: “Medium button: leading padding”
Past component spacing tokens use “space” to describe all padding, gaps, and margins, like leading-space, trailing-space, top-space, bottom-space, and between-space.
- Example: “Medium button: leading space”