Draft
Foundations

Spacing & layout.

One grid underneath everything. Spacing runs on an 8pt rhythm with 1rem = 16px as the base unit, plus two sub-steps for compact UI. Radius and border width sit on the same footing — every value is a token, and nothing in between is legal.

Pick a topic

Three sets of constants. Open one below.

10 steps
Spacing

Gaps, padding and margins. 2px through 64px on an 8pt rhythm.

Open ↓
Style · width · radius
Borders & radius

How an edge looks, how thick it is, and how round the corner gets.

Open →
4 breakpoints
Layout constants

Breakpoints, container widths, columns and gutters — all built from space tokens.

Open →

Spacing

10 tokens · 8pt grid · 1rem = 16px

The system is built on the 8pt grid with 1rem = 16px as the base unit, which keeps spacing consistent and easy to scale across web and mobile. Two smaller steps — 2px and 4px — exist for compact elements like buttons and icons, where 8px is already too much.

ExampleToken & valueUse case
--space-3xs
2px (0.125rem)
Tiny adjustments, divider lines
--space-2xs
4px (0.25rem)
Between small UI elements (tags, pills) · icon spacing
--space-xs
8px (0.5rem)
Between labels & inputs, controls in buttons
--space-s
12px (0.75rem)
Form field vertical spacing
--space-m
16px (1rem)
Layout & components
Default spacing between sections and components · inner card spacing · chip padding · form row spacing
--space-m
16px (1rem)
Mobile
📱 Wrapper spacing for the mobile app
--space-l
24px (1.5rem)
Section and grid spacing
--space-xl
32px (2rem)
Modal and panel padding · section spacing
--space-2xl
40px (2.5rem)
Page layout spacing · grid row and image block margin
--space-3xl
48px (3rem)
Page gutters · extra whitespace between large sections
--space-4xl
64px (4rem)
Hero banners, full-width cards. Rarely used on mobile
These names are confirmed against the variables. The Sprout spacing collection defines exactly these ten, space-3xs through space-4xl, with the same values — so this table and the variables agree.
Why 12px exists on an 8pt grid. 2, 4 and 12 are deliberate half-steps, not mistakes. 8pt keeps large rhythm predictable, but a 28px control cannot be padded in 8s — so the scale carries 4px and 12px for the inside of components, and reserves the 8-multiples for the space between them.

Rule of thumb: 8-multiples between components, half-steps within one.

Do & Don't

The three mistakes spacing and radius actually attract in review.

✓ Do
gap: var(--space-m)
Use a token, always.

Every gap, padding and margin comes from the scale. If the value you want is not in the scale, the answer is a different token — not a new number.

✕ Don't
gap: 13px · margin: -2px · 4px
Don't nudge with arbitrary values.

13px, 7px and −2px are how a system dies. They survive review because each one is individually invisible and collectively unfixable.

✓ Do
8 · 16 · 24 · 32 — between components
8-multiples between components, half-steps within one.

Keep the large rhythm on 8s so screens stack predictably, and reserve 2, 4 and 12 for the inside of a control.

✕ Don't
12 · 12 · 12 · 12 — between sections
Don't build page rhythm out of half-steps.

12px between sections is legal CSS and a broken grid. The half-steps exist for component interiors, not for laying out a screen.

✓ Do
radius-full — on a rectangle and on a square
Use radius-full for anything fully rounded.

One token covers both shapes — the box decides whether you get a pill or a circle.

✕ Don't
radius-l · 14px — almost round
Don't approximate a pill with a large radius.

16px on a 32px-tall element is nearly round but not quite, and it stops being round the moment the element grows. Fully rounded is a different intent, so use the token that says so.

← PreviousTypography
Sprout · Aceve Design System · v3.22.0