Once UI utilizes a spacing system based on a custom 8px grid to provide options for setting white spaces effortlessly and consistently.
Once UI relies on the type called SpacingToken to define static and responsive spaces. It's used for margins, paddings, gaps, and position distances. Static spaces are set in REMs and can be referenced with their pixel value calculated with a 16px root font size. For a more illustrative example, visit the Structure page. These spacings will slightly adjust based on your --font-scaling variables.
0
1
2
4
8
12
16
20
24
32
40
48
56
64
80
104
128
160
Responsive spaces are also set in REMs, but they are rescaled at the m and s breakpoints. They can be accessed through the T-shirt size model.
xs
s
m
l
xl
Once UI uses a custom PostCSS config with custom-media to define and use breakpoints globally. Breakpoints are defined in the styles/breakpoints.scss file.
Breakpoint | Variable | Value |
|---|---|---|
| --s | @custom-media --s (max-width: 768px) | max-width: 768px |
| --m | @custom-media --m (max-width: 1024px) | max-width: 1024px |
We recommend setting paddings and margins with the Flex and Grid components. Flex props are exposed on most Once UI components to prevent unnecessary nesting.
You can set the static and responsive spacing tokens for different margin properties on any element with utility classes or inline-styles.
Class | Variable | Value |
|---|---|---|
| margin | ||
| .m-0 | var(--static-space-0) | 0 |
| .m-1 | var(--static-space-1) | 1px |
| .m-2 | var(--static-space-2) | 0.125rem |
| .m-4 | var(--static-space-4) | 0.25rem |
| .m-8 | var(--static-space-8) | 0.5rem |
| .m-12 | var(--static-space-12) | 0.75rem |
| .m-16 | var(--static-space-16) | 1rem |
| .m-20 | var(--static-space-20) | 1.25rem |
| .m-24 | var(--static-space-24) | 1.5rem |
| .m-32 | var(--static-space-32) | 2rem |
| .m-40 | var(--static-space-40) | 2.5rem |
| .m-48 | var(--static-space-48) | 3rem |
| .m-56 | var(--static-space-56) | 3.5rem |
| .m-64 | var(--static-space-64) | 4rem |
| .m-80 | var(--static-space-80) | 5rem |
| .m-104 | var(--static-space-104) | 6.5rem |
| .m-128 | var(--static-space-128) | 8rem |
| .m-160 | var(--static-space-160) | 10rem |
| margin-left + margin-right | ||
| .mx-0 | var(--static-space-0) | 0 |
| .mx-1 | var(--static-space-1) | 1px |
| .mx-2 | var(--static-space-2) | 0.125rem |
| .mx-4 | var(--static-space-4) | 0.25rem |
| .mx-8 | var(--static-space-8) | 0.5rem |
| .mx-12 | var(--static-space-12) | 0.75rem |
| .mx-16 | var(--static-space-16) | 1rem |
| .mx-20 | var(--static-space-20) | 1.25rem |
| .mx-24 | var(--static-space-24) | 1.5rem |
| .mx-32 | var(--static-space-32) | 2rem |
| .mx-40 | var(--static-space-40) | 2.5rem |
| .mx-48 | var(--static-space-48) | 3rem |
| .mx-56 | var(--static-space-56) | 3.5rem |
| .mx-64 | var(--static-space-64) | 4rem |
| .mx-80 | var(--static-space-80) | 5rem |
| .mx-104 | var(--static-space-104) | 6.5rem |
| .mx-128 | var(--static-space-128) | 8rem |
| .mx-160 | var(--static-space-160) | 10rem |
| margin-top + margin-bottom | ||
| .my-0 | var(--static-space-0) | 0 |
| .my-1 | var(--static-space-1) | 1px |
| .my-2 | var(--static-space-2) | 0.125rem |
| .my-4 | var(--static-space-4) | 0.25rem |
| .my-8 | var(--static-space-8) | 0.5rem |
| .my-12 | var(--static-space-12) | 0.75rem |
| .my-16 | var(--static-space-16) | 1rem |
| .my-20 | var(--static-space-20) | 1.25rem |
| .my-24 | var(--static-space-24) | 1.5rem |
| .my-32 | var(--static-space-32) | 2rem |
| .my-40 | var(--static-space-40) | 2.5rem |
| .my-48 | var(--static-space-48) | 3rem |
| .my-56 | var(--static-space-56) | 3.5rem |
| .my-64 | var(--static-space-64) | 4rem |
| .my-80 | var(--static-space-80) | 5rem |
| .my-104 | var(--static-space-104) | 6.5rem |
| .my-128 | var(--static-space-128) | 8rem |
| .my-160 | var(--static-space-160) | 10rem |
| margin-top | ||
| .mt-0 | var(--static-space-0) | 0 |
| .mt-1 | var(--static-space-1) | 1px |
| .mt-2 | var(--static-space-2) | 0.125rem |
| .mt-4 | var(--static-space-4) | 0.25rem |
| .mt-8 | var(--static-space-8) | 0.5rem |
| .mt-12 | var(--static-space-12) | 0.75rem |
| .mt-16 | var(--static-space-16) | 1rem |
| .mt-20 | var(--static-space-20) | 1.25rem |
| .mt-24 | var(--static-space-24) | 1.5rem |
| .mt-32 | var(--static-space-32) | 2rem |
| .mt-40 | var(--static-space-40) | 2.5rem |
| .mt-48 | var(--static-space-48) | 3rem |
| .mt-56 | var(--static-space-56) | 3.5rem |
| .mt-64 | var(--static-space-64) | 4rem |
| .mt-80 | var(--static-space-80) | 5rem |
| .mt-104 | var(--static-space-104) | 6.5rem |
| .mt-128 | var(--static-space-128) | 8rem |
| .mt-160 | var(--static-space-160) | 10rem |
| margin-right | ||
| .mr-0 | var(--static-space-0) | 0 |
| .mr-1 | var(--static-space-1) | 1px |
| .mr-2 | var(--static-space-2) | 0.125rem |
| .mr-4 | var(--static-space-4) | 0.25rem |
| .mr-8 | var(--static-space-8) | 0.5rem |
| .mr-12 | var(--static-space-12) | 0.75rem |
| .mr-16 | var(--static-space-16) | 1rem |
| .mr-20 | var(--static-space-20) | 1.25rem |
| .mr-24 | var(--static-space-24) | 1.5rem |
| .mr-32 | var(--static-space-32) | 2rem |
| .mr-40 | var(--static-space-40) | 2.5rem |
| .mr-48 | var(--static-space-48) | 3rem |
| .mr-56 | var(--static-space-56) | 3.5rem |
| .mr-64 | var(--static-space-64) | 4rem |
| .mr-80 | var(--static-space-80) | 5rem |
| .mr-104 | var(--static-space-104) | 6.5rem |
| .mr-128 | var(--static-space-128) | 8rem |
| .mr-160 | var(--static-space-160) | 10rem |
| margin-bottom | ||
| .mb-0 | var(--static-space-0) | 0 |
| .mb-1 | var(--static-space-1) | 1px |
| .mb-2 | var(--static-space-2) | 0.125rem |
| .mb-4 | var(--static-space-4) | 0.25rem |
| .mb-8 | var(--static-space-8) | 0.5rem |
| .mb-12 | var(--static-space-12) | 0.75rem |
| .mb-16 | var(--static-space-16) | 1rem |
| .mb-20 | var(--static-space-20) | 1.25rem |
| .mb-24 | var(--static-space-24) | 1.5rem |
| .mb-32 | var(--static-space-32) | 2rem |
| .mb-40 | var(--static-space-40) | 2.5rem |
| .mb-48 | var(--static-space-48) | 3rem |
| .mb-56 | var(--static-space-56) | 3.5rem |
| .mb-64 | var(--static-space-64) | 4rem |
| .mb-80 | var(--static-space-80) | 5rem |
| .mb-104 | var(--static-space-104) | 6.5rem |
| .mb-128 | var(--static-space-128) | 8rem |
| .mb-160 | var(--static-space-160) | 10rem |
| margin-left | ||
| .ml-0 | var(--static-space-0) | 0 |
| .ml-1 | var(--static-space-1) | 1px |
| .ml-2 | var(--static-space-2) | 0.125rem |
| .ml-4 | var(--static-space-4) | 0.25rem |
| .ml-8 | var(--static-space-8) | 0.5rem |
| .ml-12 | var(--static-space-12) | 0.75rem |
| .ml-16 | var(--static-space-16) | 1rem |
| .ml-20 | var(--static-space-20) | 1.25rem |
| .ml-24 | var(--static-space-24) | 1.5rem |
| .ml-32 | var(--static-space-32) | 2rem |
| .ml-40 | var(--static-space-40) | 2.5rem |
| .ml-48 | var(--static-space-48) | 3rem |
| .ml-56 | var(--static-space-56) | 3.5rem |
| .ml-64 | var(--static-space-64) | 4rem |
| .ml-80 | var(--static-space-80) | 5rem |
| .ml-104 | var(--static-space-104) | 6.5rem |
| .ml-128 | var(--static-space-128) | 8rem |
| .ml-160 | var(--static-space-160) | 10rem |
Class | Variable | Value |
|---|---|---|
| margin | ||
| .m-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .m-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .m-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .m-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .m-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| margin-left + margin-right | ||
| .mx-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .mx-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .mx-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .mx-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .mx-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| margin-top + margin-bottom | ||
| .my-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .my-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .my-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .my-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .my-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| margin-top | ||
| .mt-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .mt-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .mt-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .mt-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .mt-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| margin-right | ||
| .mr-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .mr-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .mr-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .mr-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .mr-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| margin-bottom | ||
| .mb-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .mb-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .mb-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .mb-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .mb-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| margin-left | ||
| .ml-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .ml-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .ml-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .ml-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .ml-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
Every margin prop also takes "auto", at the base and in a breakpoint object: marginLeft="auto" pushes an item to the end of its row, and marginX="auto" centres a block with a width. The classes are .m-auto, .mx-auto, .my-auto, .mt-auto, .mr-auto, .mb-auto and .ml-auto, with an .s-ml-auto-style variant at each breakpoint. Padding and gap have no auto.
You can set the static and responsive spacing tokens for different padding properties on any element with utility classes or inline-styles.
Class | Variable | Value |
|---|---|---|
| padding | ||
| .p-0 | var(--static-space-0) | 0 |
| .p-1 | var(--static-space-1) | 1px |
| .p-2 | var(--static-space-2) | 0.125rem |
| .p-4 | var(--static-space-4) | 0.25rem |
| .p-8 | var(--static-space-8) | 0.5rem |
| .p-12 | var(--static-space-12) | 0.75rem |
| .p-16 | var(--static-space-16) | 1rem |
| .p-20 | var(--static-space-20) | 1.25rem |
| .p-24 | var(--static-space-24) | 1.5rem |
| .p-32 | var(--static-space-32) | 2rem |
| .p-40 | var(--static-space-40) | 2.5rem |
| .p-48 | var(--static-space-48) | 3rem |
| .p-56 | var(--static-space-56) | 3.5rem |
| .p-64 | var(--static-space-64) | 4rem |
| .p-80 | var(--static-space-80) | 5rem |
| .p-104 | var(--static-space-104) | 6.5rem |
| .p-128 | var(--static-space-128) | 8rem |
| .p-160 | var(--static-space-160) | 10rem |
| padding-left + padding-right | ||
| .mp-0 | var(--static-space-0) | 0 |
| .mp-1 | var(--static-space-1) | 1px |
| .mp-2 | var(--static-space-2) | 0.125rem |
| .mp-4 | var(--static-space-4) | 0.25rem |
| .mp-8 | var(--static-space-8) | 0.5rem |
| .mp-12 | var(--static-space-12) | 0.75rem |
| .mp-16 | var(--static-space-16) | 1rem |
| .mp-20 | var(--static-space-20) | 1.25rem |
| .mp-24 | var(--static-space-24) | 1.5rem |
| .mp-32 | var(--static-space-32) | 2rem |
| .mp-40 | var(--static-space-40) | 2.5rem |
| .mp-48 | var(--static-space-48) | 3rem |
| .mp-56 | var(--static-space-56) | 3.5rem |
| .mp-64 | var(--static-space-64) | 4rem |
| .mp-80 | var(--static-space-80) | 5rem |
| .mp-104 | var(--static-space-104) | 6.5rem |
| .mp-128 | var(--static-space-128) | 8rem |
| .mp-160 | var(--static-space-160) | 10rem |
| padding-top + padding-bottom | ||
| .py-0 | var(--static-space-0) | 0 |
| .py-1 | var(--static-space-1) | 1px |
| .py-2 | var(--static-space-2) | 0.125rem |
| .py-4 | var(--static-space-4) | 0.25rem |
| .py-8 | var(--static-space-8) | 0.5rem |
| .py-12 | var(--static-space-12) | 0.75rem |
| .py-16 | var(--static-space-16) | 1rem |
| .py-20 | var(--static-space-20) | 1.25rem |
| .py-24 | var(--static-space-24) | 1.5rem |
| .py-32 | var(--static-space-32) | 2rem |
| .py-40 | var(--static-space-40) | 2.5rem |
| .py-48 | var(--static-space-48) | 3rem |
| .py-56 | var(--static-space-56) | 3.5rem |
| .py-64 | var(--static-space-64) | 4rem |
| .py-80 | var(--static-space-80) | 5rem |
| .py-104 | var(--static-space-104) | 6.5rem |
| .py-128 | var(--static-space-128) | 8rem |
| .py-160 | var(--static-space-160) | 10rem |
| padding-top | ||
| .pt-0 | var(--static-space-0) | 0 |
| .pt-1 | var(--static-space-1) | 1px |
| .pt-2 | var(--static-space-2) | 0.125rem |
| .pt-4 | var(--static-space-4) | 0.25rem |
| .pt-8 | var(--static-space-8) | 0.5rem |
| .pt-12 | var(--static-space-12) | 0.75rem |
| .pt-16 | var(--static-space-16) | 1rem |
| .pt-20 | var(--static-space-20) | 1.25rem |
| .pt-24 | var(--static-space-24) | 1.5rem |
| .pt-32 | var(--static-space-32) | 2rem |
| .pt-40 | var(--static-space-40) | 2.5rem |
| .pt-48 | var(--static-space-48) | 3rem |
| .pt-56 | var(--static-space-56) | 3.5rem |
| .pt-64 | var(--static-space-64) | 4rem |
| .pt-80 | var(--static-space-80) | 5rem |
| .pt-104 | var(--static-space-104) | 6.5rem |
| .pt-128 | var(--static-space-128) | 8rem |
| .pt-160 | var(--static-space-160) | 10rem |
| padding-right | ||
| .pr-0 | var(--static-space-0) | 0 |
| .pr-1 | var(--static-space-1) | 1px |
| .pr-2 | var(--static-space-2) | 0.125rem |
| .pr-4 | var(--static-space-4) | 0.25rem |
| .pr-8 | var(--static-space-8) | 0.5rem |
| .pr-12 | var(--static-space-12) | 0.75rem |
| .pr-16 | var(--static-space-16) | 1rem |
| .pr-20 | var(--static-space-20) | 1.25rem |
| .pr-24 | var(--static-space-24) | 1.5rem |
| .pr-32 | var(--static-space-32) | 2rem |
| .pr-40 | var(--static-space-40) | 2.5rem |
| .pr-48 | var(--static-space-48) | 3rem |
| .pr-56 | var(--static-space-56) | 3.5rem |
| .pr-64 | var(--static-space-64) | 4rem |
| .pr-80 | var(--static-space-80) | 5rem |
| .pr-104 | var(--static-space-104) | 6.5rem |
| .pr-128 | var(--static-space-128) | 8rem |
| .pr-160 | var(--static-space-160) | 10rem |
| padding-bottom | ||
| .pb-0 | var(--static-space-0) | 0 |
| .pb-1 | var(--static-space-1) | 1px |
| .pb-2 | var(--static-space-2) | 0.125rem |
| .pb-4 | var(--static-space-4) | 0.25rem |
| .pb-8 | var(--static-space-8) | 0.5rem |
| .pb-12 | var(--static-space-12) | 0.75rem |
| .pb-16 | var(--static-space-16) | 1rem |
| .pb-20 | var(--static-space-20) | 1.25rem |
| .pb-24 | var(--static-space-24) | 1.5rem |
| .pb-32 | var(--static-space-32) | 2rem |
| .pb-40 | var(--static-space-40) | 2.5rem |
| .pb-48 | var(--static-space-48) | 3rem |
| .pb-56 | var(--static-space-56) | 3.5rem |
| .pb-64 | var(--static-space-64) | 4rem |
| .pb-80 | var(--static-space-80) | 5rem |
| .pb-104 | var(--static-space-104) | 6.5rem |
| .pb-128 | var(--static-space-128) | 8rem |
| .pb-160 | var(--static-space-160) | 10rem |
| padding-left | ||
| .pl-0 | var(--static-space-0) | 0 |
| .pl-1 | var(--static-space-1) | 1px |
| .pl-2 | var(--static-space-2) | 0.125rem |
| .pl-4 | var(--static-space-4) | 0.25rem |
| .pl-8 | var(--static-space-8) | 0.5rem |
| .pl-12 | var(--static-space-12) | 0.75rem |
| .pl-16 | var(--static-space-16) | 1rem |
| .pl-20 | var(--static-space-20) | 1.25rem |
| .pl-24 | var(--static-space-24) | 1.5rem |
| .pl-32 | var(--static-space-32) | 2rem |
| .pl-40 | var(--static-space-40) | 2.5rem |
| .pl-48 | var(--static-space-48) | 3rem |
| .pl-56 | var(--static-space-56) | 3.5rem |
| .pl-64 | var(--static-space-64) | 4rem |
| .pl-80 | var(--static-space-80) | 5rem |
| .pl-104 | var(--static-space-104) | 6.5rem |
| .pl-128 | var(--static-space-128) | 8rem |
| .pl-160 | var(--static-space-160) | 10rem |
Class | Variable | Value |
|---|---|---|
| padding | ||
| .p-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .p-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .p-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .p-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .p-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| padding-left + padding-right | ||
| .px-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .px-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .px-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .px-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .px-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| padding-top + padding-bottom | ||
| .py-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .py-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .py-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .py-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .py-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| padding-top | ||
| .pt-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .pt-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .pt-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .pt-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .pt-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| padding-right | ||
| .pr-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .pr-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .pr-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .pr-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .pr-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| padding-bottom | ||
| .pb-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .pb-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .pb-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .pb-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .pb-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
| padding-left | ||
| .pl-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .pl-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .pl-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .pl-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .pl-xl | var(--responsive-space-xl) | 12 / 8 / 4 |
You can set the static and responsive spacing tokens for different gap properties on any element with utility classes or inline-styles.
Class | Variable | Value |
|---|---|---|
| .g-0 | var(--static-space-0) | 0 |
| .g-1 | var(--static-space-1) | 1px |
| .g-2 | var(--static-space-2) | 0.125rem |
| .g-4 | var(--static-space-4) | 0.25rem |
| .g-8 | var(--static-space-8) | 0.5rem |
| .g-12 | var(--static-space-12) | 0.75rem |
| .g-16 | var(--static-space-16) | 1rem |
| .g-20 | var(--static-space-20) | 1.25rem |
| .g-24 | var(--static-space-24) | 1.5rem |
| .g-32 | var(--static-space-32) | 2rem |
| .g-40 | var(--static-space-40) | 2.5rem |
| .g-48 | var(--static-space-48) | 3rem |
| .g-56 | var(--static-space-56) | 3.5rem |
| .g-64 | var(--static-space-64) | 4rem |
| .g-80 | var(--static-space-80) | 5rem |
| .g-104 | var(--static-space-104) | 6.5rem |
| .g-128 | var(--static-space-128) | 8rem |
| .g-160 | var(--static-space-160) | 10rem |
Class | Variable | Value |
|---|---|---|
| .g-xs | var(--responsive-space-xs) | 80 / 64 / 40 |
| .g-s | var(--responsive-space-s) | 40 / 24 / 16 |
| .g-m | var(--responsive-space-m) | 24 / 16 / 12 |
| .g-l | var(--responsive-space-l) | 16 / 12 / 8 |
| .g-xl | var(--responsive-space-xl) | 12 / 8 / 4 |