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.
| Spacing | Spacing name | Pixels | Rem |
|---|---|---|---|
Spacing name: spacing_00 | Pixels:0 | Rem:0 | |
Spacing name: spacing_25 | Pixels:1 | Rem:0.063 | |
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 |