Topographic Journal
Eine Feldführer-Ästhetik für Outdoor-Gear-Nerds. Warme Papier-Oberflächen, Forest als Primärfarbe, Ember als Akzent und Indexkontur-Texturen, die wie eine topografische Karte wirken — ruhig genug für lange Packlisten, markant genug, um handgemacht zu wirken.
Palette
Die OKLCH-Skalen aus DESIGN.md: warme Papier-Oberflächen, neutraler Ink-Text, Forest als Primärfarbe, Ember als Akzent.
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
Typografie
Fraunces trägt die Display-Stimme; Geist übernimmt Body und UI; Geist Mono ist Zahlen und technischen Labels vorbehalten.
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
Die markante Indexkontur-Textur in drei Dichten, plus eine Forest-getönte Karten-Hintergrundprobe.
Card / hero background tint
Icons
BackpackIcon
TentIcon
SleepingBagIcon
StoveIcon
HeadlampIcon
CompassIcon
MapIcon
CarabinerIcon
FirstAidIcon
WaterDropIcon
TrailIcon
MountainIcon
TopoLineIcon
PaddleIcon
TrekkingPolesIcon
Motion
Motion erklärt Zustandswechsel — sie ist nie Dekoration.
Ein globaler prefers-reduced-motion-Schutz neutralisiert jede 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-Geräte und Reduced-Motion-Nutzer sehen den Ruhezustand.
Klicke Replay, um das Stroke-Dashoffset-Draw-in auszulösen (gs-checkmark-draw).
Klicke Öffnen, um den zentralen Modal-Spring auszulösen (gs-modal-enter).
Klicke Auslösen, um einen Success-Toast mit der ablaufenden Fortschrittslinie zu starten (gs-toast-progress).