Foundations / Spacing

Spacing

Spacing has two layers. Component spacing is fixed — a card’s padding shouldn’t shrink on a phone. Layout spacing is fluid — space between sections breathes with the viewport. Prefer these tokens over magic numbers.

Component fixed

Padding and gaps inside components. Same at every screen size.

--space-xs8px

--space-sm12px

--space-md16px

--space-lg24px

--space-xl32px

--space-2xl48px

--space-3xl64px

--space-4xl96px

Layout fluid

Section padding and space between blocks. Each scales with the viewport via clamp() — the table shows the computed value at each breakpoint (1920 is the design reference).

Token 360px680px768px1080px1280px1920px Use

--layout-section-sm —————— Compact section padding

--layout-section —————— Default section padding

--layout-section-lg —————— Generous section padding

--layout-gap —————— Gap between large blocks

Values are measured live in your browser, so they’re exact. A fluid token holds at its floor on small screens, scales through the middle, and caps at 1920.