our themes
Spacings
Spacing defines the space between elements, their relationships and hierarchy. If elements are closer together, it means they have a stronger or more direct relationship and are dense compositions; if we add more space between them, this relationship will be weaker, increasing the amount of white space.
The spacing sizes remain equal in the different subthemes of Wireframe (Vulcan, Astra and Root).
| Spacing | Spacing name | Pixels | Rem |
|---|---|---|---|
Spacing name: spacing_00 | Pixels:0 | Rem:0 | |
Spacing name: spacing_50 | Pixels:2 | Rem:0.125 | |
Spacing name: spacing_100 | Pixels:4 | Rem:0.25 | |
Spacing name: spacing_150 | Pixels:8 | Rem:0.5 | |
Spacing name: spacing_200 | Pixels:10 | Rem:0.625 | |
Spacing name: spacing_250 | Pixels:12 | Rem:0.75 | |
Spacing name: spacing_300 | Pixels:16 | Rem:1 | |
Spacing name: spacing_350 | Pixels:20 | Rem:1.25 | |
Spacing name: spacing_400 | Pixels:24 | Rem:1.5 | |
Spacing name: spacing_450 | Pixels:32 | Rem:2 | |
Spacing name: spacing_500 | Pixels:40 | Rem:2.5 | |
Spacing name: spacing_550 | Pixels:48 | Rem:3 | |
Spacing name: spacing_600 | Pixels:56 | Rem:3.5 | |
Spacing name: spacing_650 | Pixels:64 | Rem:4 | |
Spacing name: spacing_675 | Pixels:72 | Rem:4.5 | |
Spacing name: spacing_700 | Pixels:80 | Rem:5 | |
Spacing name: spacing_740 | Pixels:120 | Rem:7.5 | |
Spacing name: spacing_750 | Pixels:128 | Rem:8 | |
Spacing name: spacing_800 | Pixels:136 | Rem:8.5 |