Spacing
Spacing follows a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.
| Name | Min | Max | |
|---|---|---|---|
| XS | 7px | 8px | |
| S | 14px | 16px | |
| M | 21px | 24px | |
| L | 35px | 40px | |
| XL | 49px | 56px | |
| 2XL | 56px | 64px | |
| 3XL | 70px | 80px | |
| 4XL | 105px | 120px | |
| XS - L | 7px | 40px | |
| M - L | 21px | 40px | |
| 2XL - 4XL | 56px | 120px |
Usage
| Vertical Padding Utility | Horizontal Padding Utility | Margin Top Utility | Flow Space Utility | Gutter Utility | CSS Custom Property |
|---|---|---|---|---|---|
.py-xs
|
.px-xs
|
.mt-xs
|
.flow-space-xs
|
.gutter-xs
|
var(--space-xs)
|
.py-s
|
.px-s
|
.mt-s
|
.flow-space-s
|
.gutter-s
|
var(--space-s)
|
.py-m
|
.px-m
|
.mt-m
|
.flow-space-m
|
.gutter-m
|
var(--space-m)
|
.py-l
|
.px-l
|
.mt-l
|
.flow-space-l
|
.gutter-l
|
var(--space-l)
|
.py-xl
|
.px-xl
|
.mt-xl
|
.flow-space-xl
|
.gutter-xl
|
var(--space-xl)
|
.py-2xl
|
.px-2xl
|
.mt-2xl
|
.flow-space-2xl
|
.gutter-2xl
|
var(--space-2xl)
|
.py-3xl
|
.px-3xl
|
.mt-3xl
|
.flow-space-3xl
|
.gutter-3xl
|
var(--space-3xl)
|
.py-4xl
|
.px-4xl
|
.mt-4xl
|
.flow-space-4xl
|
.gutter-4xl
|
var(--space-4xl)
|
.py-xs-l
|
.px-xs-l
|
.mt-xs-l
|
.flow-space-xs-l
|
.gutter-xs-l
|
var(--space-xs-l)
|
.py-m-l
|
.px-m-l
|
.mt-m-l
|
.flow-space-m-l
|
.gutter-m-l
|
var(--space-m-l)
|
.py-2xl-4xl
|
.px-2xl-4xl
|
.mt-2xl-4xl
|
.flow-space-2xl-4xl
|
.gutter-2xl-4xl
|
var(--space-2xl-4xl)
|