Design system

The single source of truth for spacing, radii, and surface primitives. Everything here is driven by tokens in css-variables.liquid. Change a token, the whole theme reflows.

Spacing scale

Snap every margin / padding / gap to a step. New code uses var(--space-N) or a semantic alias, never a raw rem. Off-scale values are blocked at push time.

--space-1 0.15rem

--space-2 0.25rem

--space-3 0.4rem

--space-4 0.5rem

--space-5 0.6rem

--space-6 0.7rem

--space-7 0.85rem

--space-8 1rem

--space-9 1.25rem

--space-10 1.5rem

--space-11 2rem

--space-12 clamp(2rem, 5vw, 3.5rem)

Semantic aliases

Prefer these for their role so intent is legible. Fall back to --space-N only for genuine one-offs.

--stack-gap--space-8 · vertical flow between elements

--stack-gap-sm--space-4 · tight vertical flow

--cluster-gap--space-4 · pill / swatch / meta rows

--card-pad--space-9 · card inner padding

--card-gap--space-6 · gap inside a card

--section-gap--space-11 · below a section header

Radii

--radius-smthumbnails, chips

--radius-cardcards, tiles, panels

--radius-buttonbuttons

--radius-pillpills, badges

Primitives

Compose the shared primitives instead of hand-rolling spacing per section. Spacing inside them now comes from tokens.

.card + .card__body

Card surface Card radius, shadow, token padding.

.cluster + .chip

Sodium Potassium Magnesium Zero sugar

.btn

Primary Outline Ghost

Color tokens

--color-brand

--color-navy

--color-ink

--color-ink-2

--color-ink-3

--color-group

--color-background

--color-success

--color-star

--color-flavor-orange

--color-flavor-watermelon

--color-flavor-mango

--color-flavor-raw

Breakpoints

Media queries use only these four. The pre-push lint flags any other max-width.

480px · small phone 620px · phone 750px · tablet 900px · wide 990px · desktop