Topographic Journal
Un'estetica da guida di campo pensata per chi ha la passione dell'attrezzatura outdoor. Superfici di carta calda, forest come colore primario, ember come accento e texture a curve di livello che si leggono come una mappa topografica — abbastanza sobrie per convivere con lunghe liste di attrezzatura, abbastanza particolari per sembrare fatte a mano.
Palette
Le scale OKLCH di DESIGN.md: superfici di carta calda, testo ink neutro, forest come colore primario, ember come accento.
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
Tipografia
Fraunces dà voce ai titoli display; Geist gestisce testo e interfaccia; Geist Mono è riservato a numeri ed etichette tecniche.
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
La texture distintiva a curve di livello in tre densità, più un esempio di sfondo per card con tinta forest.
Card / hero background tint
Icone
BackpackIcon
TentIcon
SleepingBagIcon
StoveIcon
HeadlampIcon
CompassIcon
MapIcon
CarabinerIcon
FirstAidIcon
WaterDropIcon
TrailIcon
MountainIcon
TopoLineIcon
PaddleIcon
TrekkingPolesIcon
Movimento
Il movimento spiega i cambi di stato — non è mai decorazione.
Una protezione globale prefers-reduced-motion neutralizza ogni animazione.
Sample card surface
Hover on desktop to feel the lift. The motion is subtle on purpose — it confirms interactivity without distracting from the gear.
Sollevamento al passaggio del mouse su desktop (gs-card-interactive). Sui dispositivi touch e per chi ha attivato reduced-motion resta lo stato di riposo.
Clicca su replay per avviare il tracciamento con stroke-dashoffset (gs-checkmark-draw).
Clicca su apri per avviare lo spring centrale della modale (gs-modal-enter).
Clicca su avvia per lanciare un toast di successo con la linea di avanzamento che si svuota (gs-toast-progress).