Foundations

Aliases

Gaps

Gaps by purpose: split, card, grid and more.

--gap-sectionvar(--size-4xl)48 → 64px

--gap-cardvar(--size-lg)20 → 24px

--gap-stackvar(--size-sm)14 → 16px

--gap-gridvar(--size-xl)24 → 32px

--gap-headervar(--size-xl)24 → 32px

--gap-footervar(--size-2xl)32 → 40px

--gap-navvar(--size-lg)20 → 24px

--gap-formvar(--size-md)16 → 20px

--gap-splitvar(--space-md)32 → 80px

Padding for sections, cards, buttons and inputs.

--padding-badge-xvar(--size-3xs)4 → 8px

--padding-badge-yvar(--size-4xs)3 → 6px

--padding-section-xvar(--space-sm)16 → 40px

--padding-section-yvar(--space-lg)48 → 120px

--padding-header-xvar(--space-md)32 → 80px

--padding-header-yvar(--space-sm)16 → 40px

--padding-footer-xvar(--space-md)32 → 80px

--padding-footer-yvar(--space-lg)48 → 120px

--padding-cardvar(--space-sm)16 → 40px

--padding-button-xvar(--space-sm)16 → 40px

--padding-button-yvar(--space-xs)8 → 20px

--padding-button-compact-xvar(--space-2xs)6.4 → 16px

--padding-button-compact-yvar(--space-3xs)4.8 → 12px

--padding-input-xvar(--space-xs)8 → 20px

--padding-input-yvar(--space-xs)8 → 20px

Radius by purpose: images, cards, buttons, inputs.

--radius-imagevar(--radius-md)4 → 8px

--radius-cardvar(--radius-lg)6 → 12px

--radius-buttonvar(--radius-sm)3 → 6px

--radius-inputvar(--radius-sm)3 → 6px

The site container, logo and avatar sizes.

--site-content-widthvar(--layout-width-1440)1440px