Guidelines
Space may be invisible, but the concept is critical to great interface design in the way it creates relationships and enhances visual style.
Base unit
Our spacing system is based on multiples and divisions of 8px. This rule helps us to scale our spacing tokens which are a key driving force to all you see in the deploy platform. You can learn more about our spacing scales.
Spacing models
Spacing models help define which particular area the spacing is required. Our spacing models are broken into three categories:
Box
Box is the padding or margin around an object.
Inline
Inline are horizontal spacing layers.
Stack
Stacks are vertical spacing layers.
Whether it is padding, margin or gap, these models are likewise reflective of how they work in Figma in the Auto layout palette.
Code Usage Guidelines
The following guidelines outline the correct usage; spacing units can be used for CSS properties used to define a space, e.g. margin, padding and gap:
|
DO ✅ |
DON’T ❌ |
|---|---|
|
padding: `${space[16]} ${space[16]}` padding: space[16]paddingTop: space[16] margin: `${space[16]} 0` gap: space[16] |
padding: "16px 16px"paddingTop: 16px padding: 1rem padding: "16px 0" gap: 1rem |