Spacing

A single linear-then-modular scale drives every gap, pad and margin in the system. Use tokens — never raw pixels — so density stays consistent across components.

Spacing scale

Each bar is rendered at its real token width. Steps step up in 2–4px increments through the dense UI range, then jump to layout-scale spacing.

--spacing-050 0.125rem · 2px

--spacing-100 0.25rem · 4px

--spacing-150 0.375rem · 6px

--spacing-200 0.5rem · 8px

--spacing-250 0.625rem · 10px

--spacing-300 0.75rem · 12px

--spacing-400 1rem · 16px

--spacing-500 1.5rem · 24px

--spacing-600 2rem · 32px

--spacing-700 3rem · 48px

--spacing-800 4rem · 64px

--spacing-900 6rem · 96px

--spacing-950 7.5rem · 120px

--spacing-1000 15rem · 240px

Usage

Reference tokens directly in component SCSS. Reach for the dense steps (050–400) inside controls and cards; the larger steps (500+) for section and page-level rhythm.

.card {
  padding: var(--spacing-400);          /* 16px */
  gap: var(--spacing-300);              /* 12px */
}
.page-section + .page-section {
  margin-top: var(--spacing-700);       /* 48px */
}