Spacing

Overview

Spacing is driven by a fixed scale of CSS custom properties in css/base.css (:root) and consumed through the s-* spacing utilities (see Design Tokens and Utility Classes). Components never write raw margin/padding for layout rhythm — they apply an s-* class, which is responsive by design: a single class steps up at the breakpoints, so you don't write media queries for spacing.

The spacing scale is theme-independent — it does not change between light and dark mode.

Spacing scale (primitive tokens)

Token	Value	px
--space-xs	0.5rem	8
--space-sm	1rem	16
--space-md	1.5rem	24
--space-lg	2rem	32
--space-xl	3rem	48
--space-2xl	4rem	64
--space-3xl	7.5rem	120

The s-* spacing families

Family	What it sets	Use
s-margin-general-{small|medium|large}	margin-bottom	Gap below a whole component on the page
s-box-{small|medium|large}-{h|v}	padding-inline / padding-block	Padding inside a filled/bordered surface (add -top/-bottom for one side)
s-stack-{small|medium|large}	margin-bottom	Vertical rhythm between stacked child elements
s-inline-{small|medium|large}	margin-right	Horizontal rhythm (rare — prefer flex gap)
s-margin-heading-{small|medium|large}	margin-top + margin-bottom	Around a standalone heading
s-box-page-*, s-page-lock, s-center	page gutters, max-width: 1680px, margin: auto	The centered, gutter-padded page shell

Responsive behavior

Spacing utilities bump up one or two steps at the breakpoints so a single class scales:

• 768px — primary breakpoint; most s-box-* and stack utilities step up here. (e.g. s-box-medium-v = padding-block: --space-sm → --space-md at 768px.)
• 1024px / 1440px — used mainly by the page-level s-box-page-* gutters, which scale sm → xl → 2xl → 3xl across the breakpoints.
• 1680px — the page max-width cap (s-page-lock).

For guidance on which family to reach for when building a component (the "four spacing jobs"), see Building a Component.