Spacing

Spacing follows a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.

Space scale

Name	Min	Max
3xs	4px	5px
2xs	8px	9px
xs	12px	14px
s	16px	18px
m	24px	27px
l	32px	36px
xl	48px	54px
2xl	64px	72px
3xl	96px	108px
3xs-xs	4px	9px
2xs-xs	8px	14px
xs-s	12px	18px
s-m	16px	27px
m-l	24px	36px
l-xl	32px	54px
xl-2xl	48px	72px
2xl-3xl	64px	108px
2xs-s	8px	18px
xs-m	12px	27px
s-l	16px	36px
m-xl	24px	54px
l-2xl	32px	72px
xl-3xl	48px	108px

Usage

Vertical Padding Utility	Horizontal Padding Utility	Margin Top Utility	Flow Space Utility	Gutter Utility	CSS Custom Property
`.py-3xs`	`.px-3xs`	`.mt-3xs`	`.flow-space-3xs`	`.gutter-3xs`	`var(--spacing-3xs)`
`.py-2xs`	`.px-2xs`	`.mt-2xs`	`.flow-space-2xs`	`.gutter-2xs`	`var(--spacing-2xs)`
`.py-xs`	`.px-xs`	`.mt-xs`	`.flow-space-xs`	`.gutter-xs`	`var(--spacing-xs)`
`.py-s`	`.px-s`	`.mt-s`	`.flow-space-s`	`.gutter-s`	`var(--spacing-s)`
`.py-m`	`.px-m`	`.mt-m`	`.flow-space-m`	`.gutter-m`	`var(--spacing-m)`
`.py-l`	`.px-l`	`.mt-l`	`.flow-space-l`	`.gutter-l`	`var(--spacing-l)`
`.py-xl`	`.px-xl`	`.mt-xl`	`.flow-space-xl`	`.gutter-xl`	`var(--spacing-xl)`
`.py-2xl`	`.px-2xl`	`.mt-2xl`	`.flow-space-2xl`	`.gutter-2xl`	`var(--spacing-2xl)`
`.py-3xl`	`.px-3xl`	`.mt-3xl`	`.flow-space-3xl`	`.gutter-3xl`	`var(--spacing-3xl)`
`.py-3xs-xs`	`.px-3xs-xs`	`.mt-3xs-xs`	`.flow-space-3xs-xs`	`.gutter-3xs-xs`	`var(--spacing-3xs-xs)`
`.py-2xs-xs`	`.px-2xs-xs`	`.mt-2xs-xs`	`.flow-space-2xs-xs`	`.gutter-2xs-xs`	`var(--spacing-2xs-xs)`
`.py-xs-s`	`.px-xs-s`	`.mt-xs-s`	`.flow-space-xs-s`	`.gutter-xs-s`	`var(--spacing-xs-s)`
`.py-s-m`	`.px-s-m`	`.mt-s-m`	`.flow-space-s-m`	`.gutter-s-m`	`var(--spacing-s-m)`
`.py-m-l`	`.px-m-l`	`.mt-m-l`	`.flow-space-m-l`	`.gutter-m-l`	`var(--spacing-m-l)`
`.py-l-xl`	`.px-l-xl`	`.mt-l-xl`	`.flow-space-l-xl`	`.gutter-l-xl`	`var(--spacing-l-xl)`
`.py-xl-2xl`	`.px-xl-2xl`	`.mt-xl-2xl`	`.flow-space-xl-2xl`	`.gutter-xl-2xl`	`var(--spacing-xl-2xl)`
`.py-2xl-3xl`	`.px-2xl-3xl`	`.mt-2xl-3xl`	`.flow-space-2xl-3xl`	`.gutter-2xl-3xl`	`var(--spacing-2xl-3xl)`
`.py-2xs-s`	`.px-2xs-s`	`.mt-2xs-s`	`.flow-space-2xs-s`	`.gutter-2xs-s`	`var(--spacing-2xs-s)`
`.py-xs-m`	`.px-xs-m`	`.mt-xs-m`	`.flow-space-xs-m`	`.gutter-xs-m`	`var(--spacing-xs-m)`
`.py-s-l`	`.px-s-l`	`.mt-s-l`	`.flow-space-s-l`	`.gutter-s-l`	`var(--spacing-s-l)`
`.py-m-xl`	`.px-m-xl`	`.mt-m-xl`	`.flow-space-m-xl`	`.gutter-m-xl`	`var(--spacing-m-xl)`
`.py-l-2xl`	`.px-l-2xl`	`.mt-l-2xl`	`.flow-space-l-2xl`	`.gutter-l-2xl`	`var(--spacing-l-2xl)`
`.py-xl-3xl`	`.px-xl-3xl`	`.mt-xl-3xl`	`.flow-space-xl-3xl`	`.gutter-xl-3xl`	`var(--spacing-xl-3xl)`