# Komoot — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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.

## 3. Typography Rules

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.

## 4. Component Stylings

Buttons (rounded rectangles, 16px radius, 43–44px, Satoshi 14/700):

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary (green) | #4f6814 fill / #f5f3ec text, 16px, 43px | #407500 fill | #407500 fill+border (:focus-visible) | not captured | not captured |
| Signup (white) | #ffffff fill / #1c1a18 text, 16px, 43px | not captured | outline:none¹ | — | — |
| App (peach) | #fce1d1 fill / #ee6b17 text, 16px, 44px | #fce1d1 / #ee6b17 (steady) | same | — | — |
| Nav link | transparent / #faf9f4 text on hero, 12px, 35px | color shift | outline:0¹ | — | rgba(255,255,255,.22) |

¹ Anti-pattern: `.c-btn:focus{outline:none}` and `.c-link:focus{outline:0}`
suppress the ring on secondary controls. Only `.c-btn--primary:focus-visible`
has a real treatment (fill+border → #407500). Recommended replacement for the
rest: a 3px `#407500` (or orange #ee6b17) outer ring.

Inputs: not captured — the homepage ships no text/search field (route-planner
inputs are behind login).

Cards/panels: warm white or sand surfaces at 12–24px radius with 1px warm
hairlines and soft shadows. Nav: transparent bar over the hero photo — logo,
Routes / Planner / Features / Updates links in cream, then the peach "App" pill
and green "Login or Signup" pill.

## 5. Layout Principles

Full-bleed hero (photo/video) with centred display type and two stacked CTAs;
content below alternates cream (#f5f3ec/#ede9de) and dark-forest (#212512) bands.
Generous vertical rhythm and rounded cards. Nav is a transparent overlay that
presumably solidifies on scroll. Spacing leans roomy; the mood is editorial-
outdoor rather than dense-utility.

## 6. Depth & Elevation

Radius scale is generous and rounded: **12px dominant (112×)**, 8px (60×),
24px (55×), 16px buttons (28×), plus 100px / 9999px pills (26×) and 100% circles
(logo/avatars), with a rare 6px.

Shadows (soft, warm-neutral):

- `rgba(0,0,0,.1) 0 -10px 20px` — upward glow (sticky nav / bottom bars, 11×)
- `rgba(0,0,0,.2) 0 1px 2px` — resting card
- `rgba(0,0,0,.1) 0 4px 8px` — raised
- `rgba(0,0,0,.2) 0 8px 24px` — floating

Borders are warm 1px hairlines (#edebe5 / #e4e4e4 / #d1cdc4 / #ede9de).
Philosophy: soft shadow + warm hairline + generous radius, never hard elevation.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.3s | ease-in-out | house transition (142×) |
| all | 0.2s | ease | small controls (30×) |
| color | 0.2s | ease-in-out | links/text (30×) |
| opacity | 0.2s | ease | fades (17×) |
| transform, opacity | 0.4s/0.3s | cubic-bezier(0.32,0.72,0,1) | reveals |

House transition: **`all 0.3s ease-in-out`**. Keyframes: `anim-appear`,
`anim-fade-in`, `anim-fade-in-up`, `anim-disappear` (scroll/entrance reveals) and
`rotate` (3s linear infinite loading spinner). Easings include material
`cubic-bezier(0.4,0,0.2,1)`, iOS `cubic-bezier(0.32,0.72,0,1)` and ease-out-circ
`cubic-bezier(0.075,0.82,0.165,1)`. No animation library detected. **Anti-pattern:
no `prefers-reduced-motion` block despite an autoplaying hero video** — recommend
adding one that pauses the video/reveals.

## 8. Backgrounds, Effects & WebGL

Photography- and video-led: **24 raster background layers** plus **1 hero video**
(a forest). Depth over imagery is dark scrim gradients only —
`linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,.2))` and a top-edge
`rgba(0,0,0,.4)→transparent` legibility fade. **No decorative colour gradients,
no canvas/WebGL, no grain, no backdrop-filter.** All richness comes from the
nature imagery, not CSS effects.

## 9. Do's and Don'ts

### Do
- Pull every colour from the Theme UI ramps — warm brown/cream surfaces, moss/
  olive greens, one orange accent.
- Use green (#4f6814) for primary actions and orange (#ee6b17) for the app/emphasis.
- Set display in Nohemi 500 (+0.72px), UI in Satoshi 500/700; keep a hand-drawn
  Boyrun line as an occasional flourish.
- Round generously (12px cards, 16px buttons, full pills) with soft shadows.
- Let full-bleed nature photography/video carry the atmosphere.

### Don't
- Don't introduce cool greys or pure-white cold surfaces — everything is warm.
- Don't add tech/neon gradients; gradients only darken photos for legibility.
- Don't spread orange around — it is the single hot accent.
- Don't suppress focus (the site's own outline:none is a bug to fix, not copy).
- Don't set headings above weight 500 or drop the +0.72px display tracking.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 380px | small-phone tuning |
| 540px | phone → large-phone |
| 720px | tablet: nav + grid reflow |
| 1024px | desktop nav, multi-column |
| 1280 / 1440 / 1680 / 1920px | progressive widening / hero scale |

A dense device-targeted ladder (min + max pairs at 380/540/720/1024/1280/1440/
1680/1920). `darkSchemeBlocks: 0`, no dark toggle — no dark theme; the "dark"
sections are green chapter bands, not a scheme. 0 container queries.

## 11. Agent Prompt Guide

- Canvas `#ffffff`/cream `#f5f3ec` · Text `#1c1a18` · Muted `#787573` · Border `#edebe5` · Accent green `#4f6814` / orange `#ee6b17`
- Font: Nohemi (display 500) / Satoshi (UI 500-700) / Boyrun (script) · Body: 14px · Radius: 16px button / 12px card · Control height: 43–44px
- Focus: primary `#407500` fill+border on :focus-visible (add a ring for the rest) · Hover: primary → `#407500`

<komoot_design_language>
Komoot marketing is an earthy, premium outdoor route-planner: 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. Green #4f6814 owns primary actions (hover #407500) and
orange #ee6b17 is the single hot accent (the app link + emphasis, on a peach
#fce1d1 pill). Type is three faces: Nohemi geometric display at weight 500 with
+0.72px tracking (72/90 hero, 40/43 sections), Satoshi grotesque for UI/body at
14/500 and buttons at 700, and a Boyrun hand-drawn script for one playful line.
Controls are rounded rectangles (16px radius, 43-44px) with warm 1px hairlines,
soft shadows (rgba(0,0,0,.2) 0 1px 2px) and generous rounding (12px cards, full
pills). Atmosphere is full-bleed nature photography and a hero video with dark
scrim gradients — no CSS colour gradients, no canvas, no grain. Motion is calm
all-0.3s ease-in-out. Feels: earthy, warm, adventurous, premium. Avoid: cool
greys or cold white, tech/neon gradients, spreading orange around, weights above
500 on headings, or suppressing the focus ring.
</komoot_design_language>