Spacing

A unified spacing scale to keep layouts, padding, and gaps predictable.

Global Spacing Var

Open in Figma
Spacing
1.spacing {
2  display: flex;
3  flex-direction: column;
4  gap: var(--spacing);
5}

Global Spacing Var Usage

Open in Figma
Spacing
1.spacing {
2  display: flex;
3  flex-direction: column;
4  gap: calc(var(--spacing) / 2);
5}

Grid Spacing

Open in Figma
Spacing
1.grid {
2  display: grid;
3  gap: calc(var(--spacing) / 5);
4}