An earthy, premium outdoor route-planner whose brand is drawn from earth and foliage, not screens: warm cream and sand surfaces (#f5f3ec / #ede9de) over white, warm near-black ink #1c1a18, and a published Theme UI palette of named moss/olive green, brown, acid-green, orange and purple ramps running 25 to 900. Green #4f6814 owns every primary action (darkening to #407500 on hover and :focus-visible) while a single hot orange #ee6b17 is the accent, reserved for the app link (on a peach #fce1d1 pill) and emphasis. Type is a three-face system: Nohemi, a geometric display set at one weight 500 with a consistent +0.72px tracking (72/90 hero, 40/43 sections), Satoshi carrying all UI and body at 14/500 and buttons at 700, and Boyrun, a hand-drawn script, for one playful line (“where will you explore next?”). Controls are rounded rectangles at a 16px radius and 43-44px height with warm 1px hairlines, soft shadows and generous rounding (12px cards, full 100px pills); atmosphere is full-bleed nature photography and a hero video darkened only by scrim gradients, with no CSS colour gradients, no canvas and no grain. Motion is a calm all-0.3s ease-in-out. One captured anti-pattern: the site suppresses the focus ring on secondary controls (outline:none), so only the primary button has a real focus treatment.
⚠ needs-dashboard
Browse Komoot in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: komoot.com (live DOM, computed styles), 2026-07-31. Cookie consent declined (Refuse) before capture. Coverage: logged-out homepage. All stylesheets readable (sheetsBlocked:0); the site publishes a full Theme UI token set (--theme-ui-colors-primitives-*) so §2 is the authoritative palette, not a census guess. No text/search inputs on the homepage (they live in the route planner behind login) — §4 inputs marked not captured for that reason. Reality check: the queue hint ("maps/travel — outdoor route-planning, topographic-map palette") is accurate and understated. The palette is a genuine earthy topographic system — named moss/olive green, warm brown/sand and cream ramps, an acid-green highlight and one hot orange accent — all shipped as Theme UI primitives. The other signature the hint misses is a three-face type system: a geometric display (Nohemi), a body grotesque (Satoshi) and a hand-drawn script (Boyrun) for one playful line.
Komoot feels like standing in a forest at golden hour: full-bleed nature photography and video carry the hero, warm cream and moss-green surfaces frame the content, and a single hot orange marks the app and key actions. It reads as outdoorsy and premium rather than techy — the palette is drawn from earth and foliage, not screens, and the type pairs a confident geometric display with a friendly hand-drawn script ("where will you explore next?"). Depth is gentle (soft shadows, warm hairlines, generous rounding), motion is calm 0.3s eases, and colour is disciplined: green for primary actions, orange for the app, the acid-green and purple accents rationed to highlights. It deliberately avoids cool greys, hard contrast, and any neon/tech gradient. Feels: earthy, warm, adventurous, premium.
Published as Theme UI primitives (--theme-ui-colors-primitives-<ramp>-<step>). Representative stops below; every ramp runs 25→900.
| Token | Hex | Role / usage |
|---|---|---|
| grey-900 (ink) | #1c1a18 | primary text (warm near-black, 2095×) |
| grey-700 | #4a4846 | secondary text |
| grey-500 | #787573 | muted |
| grey-300 | #a3a09f | faint / placeholder |
| cream-text | #faf9f4 | text over photography (nav, hero) |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | cards, Signup CTA fill |
| brown-25 (cream) | #f5f3ec | warm page/section bands |
| brown-50 (sand) | #ede9de | primary section fill (104×) |
| brown-100 (tan) | #e3d2b4 | warm inset panels |
| green-800 (band) | #212512 | dark forest chapter bands |
| green-600 (olive) | #404823 | olive fills / dark UI |
| Token | Hex | Role / usage |
|---|---|---|
| border | #edebe5 | warm hairline (grey-50) |
| border-alt | #e4e4e4 | neutral hairline |
| border-strong | #d1cdc4 | control/edge border (grey-75) |
| Token | Hex | Role / usage |
|---|---|---|
| green-400 | #4f6814 | primary CTA fill |
| green-hover | #407500 | primary hover / focus-visible + green links |
| orange-400 | #ee6b17 | the accent — App link, highlights |
| orange-100 | #fce1d1 | peach App-button fill |
| acid-green-400 | #c1c056 | logo mark, highlight fills |
| acid-green-600 | #9e9d23 | deeper acid-green |
| purple-400 | #8879e1 | secondary accent (product bits) |
| link-blue | #0065b8 | legacy link hover colour |
Rules: green is the primary-action colour; orange is the single hot accent (reserved for the app + emphasis). Every surface is warm (brown/cream/green) — never a cool grey. Acid-green and purple stay as small highlights, never chrome.
Three faces (all licensed — the preview substitutes open stand-ins): Nohemi (geometric display, 315×; stand-in Space Grotesk), Satoshi (body + UI grotesque, 3575×; stand-in Manrope), Boyrun (hand-drawn script, 5×; stand-in Caveat). Times appears only as a fallback.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display / h1 | 72px / 90px | 500 | +0.72px |
| Section / h2 | 40px / 43.2px | 500 | +0.72px |
| Sub / h3 | 40px / 43.2px | 500 | +0.72px |
| Body / nav | 14px / 18.9px | 500 | normal |
| Button | 14px | 700 | normal |
| Script accent | ~18px | 400 | normal (Boyrun) |
Note: Nohemi carries all display/heading roles at a single weight 500 with a consistent +0.72px tracking; Satoshi runs UI at 500 and buttons at 700. The Boyrun script is a deliberate one-line flourish, not a system role.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.