Topographic Journal
A field-guide aesthetic built for outdoor gear nerds. Warm paper surfaces, forest primary, ember accent, and index-contour textures that read like a topographic map — calm enough to live next to long gear lists, distinct enough to feel handmade.
Palette
The OKLCH scales from DESIGN.md: warm paper surfaces, neutral ink text, forest primary, ember accent.
Paper — surfaces
paper-50
paper-100
paper-200
paper-300
Ink — text
ink-900
ink-700
ink-500
ink-300
Forest — primary
forest-100
forest-300
forest-500
forest-700
forest-900
Ember — accent
ember-100
ember-500
ember-700
Typography
Fraunces carries the display voice; Geist handles body and UI; Geist Mono is reserved for numbers and technical labels.
Display — Fraunces
Body — Geist. The quick brown fox packs gear for a long thru-hike across the ridge, then settles in by the campfire glow.
Mono — Geist Mono · 1234.56 g · 12.4 kg · lat 47.42 lon 11.09
Topo Pattern
The signature index-contour texture at three densities, plus a forest-tinted card background sample.
Card / hero background tint
Icons
BackpackIcon
TentIcon
SleepingBagIcon
StoveIcon
HeadlampIcon
CompassIcon
MapIcon
CarabinerIcon
FirstAidIcon
WaterDropIcon
TrailIcon
MountainIcon
TopoLineIcon
PaddleIcon
TrekkingPolesIcon
Motion
Motion explains state changes — it is never decoration.
A global prefers-reduced-motion guard neutralizes every animation.
Sample card surface
Hover on desktop to feel the lift. The motion is subtle on purpose — it confirms interactivity without distracting from the gear.
Desktop hover lift (gs-card-interactive). Touch devices and reduced-motion users see the resting state.
Click replay to fire the stroke-dashoffset draw-in (gs-checkmark-draw).
Click open to fire the central modal spring (gs-modal-enter).
Click fire to launch a success toast with the draining progress line (gs-toast-progress).