Foundations / Spacing and cornersOpen in Figma
Spacing and corners
Phone screens keep 16 from the edge, tablet 20. Most corners are 8.
Spacing scale
Screen spacing
| Between | Phone | Tablet |
|---|---|---|
| Screen edge and content | 16 | 20 |
| List items | 12 | 12 |
| Form sections | 16 | 16 |
| Inside a card | 12 | 16 |
| Label and field | 8 | 12 |
| Title bar height | 72 | 72 |
Corners
4Status labels, thumbnails
8Cards, fields, buttons
12Request card, animal card
16Sheets, add button, dialogs
24Sheet over a record header
100Avatars, pill tabs
Depth
Card
Header strip
Bottom bar
Add button
Menu
Border or shadow, never both. The backdrop behind a sheet is Navy at 50%.
Touch
Every tappable thing is at least 44 by 44.