How Trailwise looks, sounds and moves. Calm and premium on the surface, instrument-grade where the data lives. Forest and cream carry the brand; alpenglow is a highlighter, never the headline.
Overlapping ridgelines, the alpenglow sun, a snow cap and a switchback trail. The icon is fixed: never recolour, restretch or rearrange it. Pair it with the wordmark in Hanken Grotesk 700, “trail” in forest, “wise” in alpenglow.
A compact monogram for square spaces the wordmark cannot fill: app icons, favicons, avatars and loading states. A bold forest “T” with an upward-tilted crossbar for momentum, a small “w”, and the alpenglow sun as the single accent, a direct echo of the icon.
Forest and cream carry it; the sun is the one warm note, never a second accent. Keep clear space equal to the sun on all sides. Legible to about 24px; on dark surfaces the letters go cream and the sun warms to alpenglow 400.
Forest and cream do the heavy lifting. Alpenglow is reserved: one primary action per view, live data, or a single accent word. Treat orange like a trail blaze, you should always be able to find the one on the page.
Hanken Grotesk is the single family for display and body. JetBrains Mono carries every label, kicker, counter and metric. Headings get hierarchy from weight, not a second face. Emphasis is colour, never italic.
The values that build everything. Spacing follows an 8px rhythm; radii step from controls to cards to heroes; motion stays calm and consistent.
| --tw-r-sm | 8px | chips, small controls |
| --tw-r-md | 12px | buttons, inputs |
| --tw-r-lg | 16px | cards |
| --tw-r-xl | 22px | hero panels |
| spacing | 8px base | 4 / 8 / 16 / 24 / 32 / 48 |
| --tw-shadow-sm | 0 1px 2px /6% | resting cards |
| --tw-shadow-md | 0 6px 24px /10% | popovers, hover |
| micro | 180ms ease | interactions |
| page | 320ms ease-out | transitions |
| focus ring | 3px /14% | forest, all inputs |
Line icons, 1.7px stroke, rounded joins. Outdoor and physiological metaphors over generic UI glyphs where it makes sense. One set, one weight.
One primary action per view, set in forest. Alpenglow buttons are for the single highest-intent moment only. Ghost and quiet buttons carry everything secondary.
Mono, uppercase, tracked. Brand chips are cream; status uses a dot plus colour so meaning never rests on colour alone.
Labels are always visible, set in mono above the field. Helper text is persistent. Focus is a soft forest ring. Inputs are never below 44px tall on touch.
Where the instrument language lives inside the calmer shell. Numbers are mono and tabular so columns never shift. Metric cards, telemetry grids and tables share one language.
| Session | Type | Distance | Avg pace | Load |
|---|---|---|---|---|
| Mon | Easy | 8.0 km | 5:38 | 44 |
| Wed | Intervals | 10.2 km | 4:21 | 92 |
| Sat | Long | 24.0 km | 5:55 | 176 |
The coach speaks in plain language and always gives the why. Notes are warm cream by default; the accent variant is reserved for the rare moment that needs attention.
The flagship hero. Full-bleed trail footage carries the outdoor feel; a forest scrim keeps copy legible without dimming the footage, heaviest behind the text and fading to transparent on the right. Footage is the moment, not a backdrop.
A coach that adapts every day. Bring any wearable, keep your whole story in one place.
| layer 1 | 100deg, forest-900 .62 → 0, left to right |
| layer 2 | 0deg, forest-900 .30 → 0, anchors the base |
| text | shadow 0 2px 18px /.55 |
| accent | one accent word only, in alpenglow |
Fluid and in the reader's control, never decorative. Media holds while content moves through it, reveals stay calm, and the one signature is the trail rail: a logo-shaped switchback that climbs as you scroll, summiting at 4,808 m (Mont Blanc), a quiet nod to the UTMB. Everything degrades cleanly under reduced-motion.
| reveal | 800ms | opacity + 24px translateY |
| easing | cubic-bezier(.22,.61,.36,1) | calm ease-out everywhere |
| hero scrub | scale 1.02 → 1.14 | tied to scroll, not time |
| chart draw | 1.9s | stroke-dashoffset on enter |
| count-up | 1.4s | cubic ease, on enter |
| reduced-motion | respected | reveals + draws resolve instantly |
Expert, but plain-spoken. Calm under pressure. We explain the reasoning behind every call, celebrate showing up, and protect people from overdoing it. We are our own thing and never measure ourselves against anyone else.
The full guidelines as a PDF, and a brand kit with the logo, the lettermark, icons and the Trailly avatar.