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

Curated. Field-tested. Warrantied.

H2
text-h2

One category open. More to follow.

H3
text-h3

The 20-point evaluation

H4
text-h4

Why this gear earns a listing

Body lg
text-body-lg

A vetted roster, not a marketplace.

Body
text-body

A short, honest write-up from the trip that produced the catalogue.

Small
text-small

Sierra test loop · Aug 2026 · 1,800 km

Caption
text-caption

FIELD LOG · 04 / 03 — TWO WEEKS IN THE HIGH SIERRA

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.