StoneWave design system

Every page on this storefront reads from the same tokens.

Compose sections at --spacing-block stacks, not at page-default rhythm — equipment-grade, not SaaS.

Active: light · sample --brand-500 = …

Palette

Slate primary, sandstone, ember, off-white.

Type

Fraunces (display) · IBM Plex Sans (body).

Type ramp
9 sizes · use the named class
Display
text-display

Gear for the long way out.

H1
text-h1

A small catalogue, chosen one item at a time.

H2
text-h2

Pre-launch — the catalogue is being assembled.

H3
text-h3

Selected, not stockpiled.

H4
text-h4

What a listing looks like when it ships.

Body lg
text-body-lg

A short catalogue of outdoor and overlanding kit.

Body
text-body

A plain sentence about the catalogue and how it is built.

Small
text-small

Catalogue lists one maker per category at launch.

Caption
text-caption

STONEWAVE · CATALOGUE · PRE-LAUNCH

Spacing

Equipment-grade rhythm.

Stack

--spacing-stack

tight row rhythm · 0.75rem

…

Block

--spacing-block

component-internal · 1.5rem

…

Gutter

--spacing-gutter

page side gutter · clamp(1rem, 5vw, 2rem)

…

Section

--spacing-section

vertical section rhythm · clamp(3.5rem, 7vw, 6rem)

…
For future tasks

Reach for bg-brand-* and text-brand-* for primary surfaces — the FRAMEWORK owns the ramp. bg-sandstone and text-ember are SECONDARY accents (one CTA or section per page, never both). Spacing: compose sections at --spacing-block stacks; do not hand-tune text-4xl font-bold tracking-tight — use the named scale instead.