Foundations

Spacing

An 8px base unit, with a 4px micro-step for tight UI work. Every gap, padding, and margin in the system resolves to one of ten named steps — never an arbitrary pixel value.

Scale

Ten steps, one base unit

The about-page CSS shows padding and margin values clustering at 4, 8, 12, 16, 24, 32, 40, 48, 64, and 96px — confirming a standard 8px grid with a single 4px micro-step.

--space-1Micro4px

Icon breathing room, inline chip padding, sub-pixel separators

--space-2XS8px

Compact row gaps, tight label-to-icon spacing, badge insets

--space-3SM12px

List item internal padding, inline form element spacing

--space-4Base16px

The dominant padding unit — card insets, section inner padding, input horizontal padding

--space-5MD24px

Component group gaps, card-to-card rhythm, modal padding

--space-6LG32px

Section internal spacing, generous form field gaps

--space-7XL40px

Search input height, action row height — coincides with control-height tokens

--space-82XL48px

Prominent section breaks, sheet interior breathing room

--space-93XL64px

Navigation bar height (matches --header-height), major landmark spacing

--space-104XL96px

Brand-page section rhythm, full-bleed hero padding

Rhythm

8px base unit, 4px micro-step

The base unit is 8px. Step 1 (4px) is the only exception — it exists for sub-8 adjustments that would otherwise require arbitrary values. Anything below 4px should be a border, not a spacing step.

4px

8px

16px

24px

32px

Every step is an integer multiple of 4px. The 8px unit generates even steps (16, 24, 32…); odd multiples (12, 20, 28…) are the 4px micro-step in between, used only when the 8px increment is too coarse for the control in question.

Application

Which step for which context

Icon-only buttons, badge insets--space-1 / --space-24–8px

Chip / tag padding--space-2 / --space-38–12px

Input horizontal padding, card insets--space-416px

Card-to-card gap, modal padding--space-524px

Section inner breathing room--space-6 / --space-832–48px

Navigation bar height--space-9 / --header-height64px

Brand-page section rhythm--space-1096px

Usage

Do / Don't

Do

Choose the nearest scale step rather than splitting the difference — 20px is --space-3 rounded up, not a new token.
Use --space-4 (16px) as your default when in doubt — it is the dominant padding value in the evidenced system.
Treat --space-9 (64px) as the navigation-height anchor across all platform surfaces — it matches --header-height.

Don’t

Introduce arbitrary pixel values between steps — 14px, 18px, 22px are outside the scale.
Use spacing steps for control heights — those are size tokens (--search-box-height: 40px) and are separate from layout spacing.
Compose micro-gaps by multiplying --space-1 repeatedly — if you need 20px use --space-3 (12px) or --space-4 (16px) instead.

Implementation

Spacing in CSS

globals.css — spacing scale

/* 8px base unit, 4px micro-step */
--space-1:  4px;   /* micro */
--space-2:  8px;   /* xs    */
--space-3:  12px;  /* sm    */
--space-4:  16px;  /* base  */
--space-5:  24px;  /* md    */
--space-6:  32px;  /* lg    */
--space-7:  40px;  /* xl    */
--space-8:  48px;  /* 2xl   */
--space-9:  64px;  /* 3xl   */
--space-10: 96px;  /* 4xl   */