Spacing
Padding, margins and white-space between elements.
Overview
Spacing is commonly referred to as white space. It is the space between elements and defines the value for common properties such as padding and margin.
Scale
Nebula spacing is based on a 4px scale. This means each token is a multiple of 4. A pixel value can easily be converted to its token form by dividing by 4. For example, a 32px space is space.8.
Additionally we also include some "semantic" values for specific cases - between form fields for example.
Theme tokens
| Token | Default Value |
|---|---|
| space.1 | 0.4rem |
| space.2 | 0.8rem |
| space.3 | 1.2rem |
| space.4 | 1.6rem |
| space.5 | 2rem |
| space.6 | 2.4rem |
| space.7 | 2.8rem |
| space.8 | 3.2rem |
| space.9 | 3.6rem |
| space.10 | 4.0rem |
| space.11 | 4.4rem |
| space.12 | 4.8rem |
| space.betweenCards | 2.4rem |
| space.betweenComponents | 2.4rem |
| space.betweenFormFields | 1.6rem |
| space.betweenButtons | 0.8rem |
| space.betweenChips | 0.8rem |
| space.betweenParagraphs | 0.8rem |
| space.cardPadding | 1.6rem |
| space.popoverPadding | 1.2rem |