▲

Explore beyond the map

Signup for FreeLogin

where will you explore next?

Components

Get inspired with the komoot community

Discover

Tap into shared community knowledge and recommendations for your next ride, hike or run.

Plan

Draw and edit routes on the map with turn-by-turn detail and surface data.

Navigate

Follow voice navigation offline, then share your adventure with the community.

Highlights near you · Bike Touring
▲
Alpine Ridge Loop
42.6 km · 1,120 m up · 4:15 h
Expert
▲
Forest Valley Trail
18.3 km · 340 m up · 1:40 h
Intermediate
▲
Lakeside Gravel Path
27.9 km · 210 m up · 2:05 h
Easy
Controls

Buttons, chips & fields

Login Signup for Free App Disabled Highlight Collection
Login Signup for Free Login ← hover & focus-visible (fill → #407500)
Search for a place… Search for a place… ← recommended focus ring (site suppresses it — anti-pattern)

Buttons are rounded rectangles at 16px radius, 43–44px, Satoshi 14/700. Primary green #4f6814 darkens to #407500 on hover and :focus-visible. The homepage ships no text input; the search/planner fields live behind login.

Typography

Nohemi · Satoshi · Boyrun

Display / h1 · Nohemi · 72/90 · 500 · +0.72pxExplore beyond the map
Section / h2 · Nohemi · 40/43.2 · 500 · +0.72pxGet inspired with the community
Sub / h3 · Nohemi · 40/43.2 · 500 · +0.72pxThe best route planner out there
Body / nav · Satoshi · 14/18.9 · 500Turn your next ride, hike or run into an adventure.
Button · Satoshi · 14 · 700Signup for Free
Script accent · Boyrun · ~18 · 400where will you explore next?
Palette

Theme UI primitives

Text
grey-900 ink#1c1a18
grey-700#4a4846
grey-500#787573
grey-300#a3a09f
cream-text#faf9f4
Surfaces
white#ffffff
brown-25 cream#f5f3ec
brown-50 sand#ede9de
brown-100 tan#e3d2b4
green-800 band#212512
green-600 olive#404823
Borders
border#edebe5
border-alt#e4e4e4
border-strong#d1cdc4
Accent & semantic
green-400 CTA#4f6814
green-hover#407500
orange-400#ee6b17
orange-100#fce1d1
acid-green-400#c1c056
acid-green-600#9e9d23
purple-400#8879e1
link-blue#0065b8
Depth & motion

Rounded, warm, soft

8px
12px dominant
16px button
24px card
100px pill
rest 0 1px 2px
raised 0 4px 8px
floating 0 8px 24px

House transition all 0.3s ease-in-out; entrance keyframes anim-fade-in / anim-fade-in-up and a rotate spinner. No animation library; atmosphere is photography + a hero video, not CSS effects.