Spacing

A single linear-then-modular scale drives every gap, pad and margin. Inherited from Ecology unchanged — use tokens, never raw pixels, so density stays consistent.

Spacing scale

Each bar is rendered at its real token width. Steps climb 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-650 2.5rem · 40px

--spacing-700 3rem · 48px

--spacing-800 4rem · 64px

--spacing-900 6rem · 96px

Usage

Reach for the dense steps (050–400) inside controls and cards; the larger steps (500+) for section and page rhythm.

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