Spacing – Once UI

Once UI utilizes a spacing system based on a custom 8px grid to provide options for setting white spaces effortlessly and consistently.

Spacing system

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.

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.

Breakpoints

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.

Margin

You can set the static and responsive spacing tokens for different margin properties on any element with utility classes or inline-styles.

Static margin

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

Responsive margin

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

Padding

You can set the static and responsive spacing tokens for different padding properties on any element with utility classes or inline-styles.

Static padding

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

Responsive padding

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

Gap

You can set the static and responsive spacing tokens for different gap properties on any element with utility classes or inline-styles.

Static gap

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

Responsive gap

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