What font does komoot use?

komoot’s website uses three typefaces: Satoshi (headings and body text), self-hosted; Nohemi, self-hosted; Boyrun, self-hosted.

What are komoot’s brand colours?

The main colours on komoot.com are Light Olive Green (#4F6814), Chocolate (#EE6B17), Dark Slate Grey (#2B3117), Olive Drab (#889753), Dim Grey (#736554) and Deep Olive Green (#404823).

What colour is komoot’s text and background?

Body text is #1C1A18 on a #F5F3EC background.

Where is komoot’s logo from?

The logo shown in this guide was found on komoot.com’s homepage. For official logo files and usage rules, check komoot’s own brand or press page.

Is this komoot’s official style guide?

No. SiteStyleGuide made it from komoot.com’s public web pages on 30 October 2026, and isn’t affiliated with komoot. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from komoot.com’s public web pages. Not affiliated with or endorsed by komoot. The real site is komoot.com ↗

Unofficial style guide

komootstyle guide

komoot’s website (komoot.com) uses Satoshi for its headings and body text. Its palette is led by Light Olive Green (#4F6814), Chocolate (#EE6B17) and Dark Slate Grey (#2B3117), with #1C1A18 text on #F5F3EC. Captured from the live site on 30 October 2026.

Website: komoot.com
Typefaces: Satoshi, Nohemi, Boyrun
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 30 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the komoot.com homepage on a desktop screen — Screenshot of komoot.com on a 1440 px desktop screen, 30 Oct 2026.

Screenshot of the komoot.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Komoot | Find, plan and share your adventures; ● 45 / 60 characters
Meta description: Turn your next ride, hike, or run into an adventure with komoot. Get inspired by tapping into shared community knowledge and recommendations, then bring your adventures to life with the easy route planner.; ▲ 205 / 160 characters
Site name: komoot
og:title: Komoot | Find, plan and share your adventures
og:description: Turn your next ride, hike, or run into an adventure with komoot. Get inspired by tapping into shared community knowledge and recommendations, then bring your adventures to life with the easy route planner.
Language: en
Theme colour: #4f6814

In search results

komoothttps://www.komoot.com/

Komoot | Find, plan and share your adventures

Turn your next ride, hike, or run into an adventure with komoot. Get inspired by tapping into shared community knowledge and recommendations, then bring your adv…

When shared

komoot.com

Komoot | Find, plan and share your adventures

Turn your next ride, hike, or run into an adventure with komoot. Get inspired by tapping into shared communit…

Logo & favicons

Found as: SVG in the header. SVG, 40 × 40.

Logo

On white

On black

On Light Olive Green

Favicons

8 found

350 px · SVG icon
350 px · SVG mask-icon
350 px · PNG manifest
256 px · ICO manifest
192 px · PNG manifest
180 px · PNG manifest
120 px · PNG manifest
96 px · PNG icon

Komoot | Find, plan and share your adventures

Light browser tab

Komoot | Find, plan and share your adventures

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#1C1A18) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 20.9%
Near Black 12.3%
Light Olive Green 11.3%
Chocolate 10%
Warm Off White 9.7%
Off White 8%
Dark Slate Grey 6.4%
Olive Drab 5.5%
Dim Grey 3.6%
Deep Olive Green 3%
Coral 2.4%
Green 1.8%
Medium Purple 1.4%
Royal Blue 1.4%
Dark Khaki 1.2%
Red 1.1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
17.35:1 AAA

On white
—

Background, text, border · html, .u-bg-desk-column
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 7 14 89

On text
—

On white
17.35:1 AAA

Text, border, background · html, .c-guide-content h1
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 4 4

On text
15.63:1 AAA

On white
1.11:1 Fail

Text, background, border · html, .u-gradient-top-beige
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 6

On text
15.23:1 AAA

On white
1.14:1 Fail

Background, border, text · .c-background-image, .tw-bg-grey-light

Colours

Brand colours and accents, most used first

Light Olive Green

HEX

RGB

HSL

OKLCH

CMYK
24 0 81 59

On text
2.75:1 Fail

On white
6.32:1 AA

Text, background, border · .c-btn--primary, .c-or-separator--inverted .c-or-separator__text
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 55 90 7

On text
5.58:1 AA

On white
3.11:1 AA large

Text, background, border · .tw-bg-forest, .tw-bg-magenta
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
12 0 53 81

On text
1.28:1 Fail

On white
13.51:1 AAA

Background, border · .tw-bg-difficulty-moderate, --theme-ui-colors-tourlinePlanSelected
Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
10 0 45 41

On text
5.45:1 AA

On white
3.18:1 AA large

Text, background, border · .c-btn--primary-inv, .tw-bg-green-inverted
Dim Grey

HEX

RGB

HSL

OKLCH

CMYK
0 12 27 55

On text
3.07:1 AA large

On white
5.65:1 AA

Text, border · --theme-ui-colors-primitives-brown-500, .css-cwqyse:hover .titleIcon
Deep Olive Green

HEX

RGB

HSL

OKLCH

CMYK
11 0 51 72

On text
1.79:1 Fail

On white
9.68:1 AAA

Background, text · .tw-bg-\[\#404823\], --theme-ui-colors-primitives-green-600
Coral

HEX

RGB

HSL

OKLCH

CMYK
0 48 63 0

On text
7.20:1 AAA

On white
2.41:1 Fail

Background, text, border · .c-btn--orange, .tw-bg-orange
Green

HEX

RGB

HSL

OKLCH

CMYK
45 0 100 54

On text
3.11:1 AA large

On white
5.58:1 AA

Background, border, text · .tw-bg-green-dark, .c-btn--primary:active
Medium Purple

HEX

RGB

HSL

OKLCH

CMYK
40 46 0 12

On text
4.85:1 AA

On white
3.58:1 AA large

Text, background · .tw-bg-silver, --theme-ui-colors-expert
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
90 51 0 5

On text
4.10:1 AA large

On white
4.23:1 AA large

Background, border, graphic · .c-btn--facebook, .c-btn--facebook:active
Dark Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 1 55 24

On text
9.04:1 AAA

On white
1.92:1 Fail

Background, text · .tw-bg-gold, --theme-ui-colors-pioneer
Red

HEX

RGB

HSL

OKLCH

CMYK
0 69 80 11

On text
4.31:1 AA large

On white
4.03:1 AA large

Used · --theme-ui-colors-negative, --theme-ui-colors-dangerHigh

Gradients

linear-gradient(180deg,transparent 0,rgba(0,0,0,.66) 80%)
linear-gradient(to right,rgba(#1c1a18,0) 0,rgba(#1c1a18,1) 66%)
linear-gradient(to left,rgba(#1c1a18,0) 0,rgba(#1c1a18,1) 66%)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Satoshi

Aa 400 Aa 700

Satoshi

Self-hosted · weights 400, 500, 700 · body · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Nohemi

Self-hosted · weights 400, 500, 700 · shown in a stand-in if you don’t have it

Aa 400

Boyrun

Self-hosted · weights 400 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Paragraph .875rem · 14 px

Turn your next ride, hike, or run into an adventure with komoot. Get inspired by tapping into shared community knowledge and recommendation…

Button 100% none

Get started

Sizes in use

Most common across the site

40pxline 2.7rem · 11 rules
24pxline 1.95rem · 10 rules
20pxline normal · 4 rules
18pxline 1.51875rem · 16 rules
16pxline 1.35rem · 17 rules
14pxline 1.18125rem · 28 rules
12pxline 1.0125rem · 15 rules
10pxline 1 · 4 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

24px · 24×
8px · 16×
16px · 11×
12px · 5×
4px · 4×
100% · 3×

Shadows

0 0 transparent,0 0 transparent,
0 0 0 3px rgba(66, 153, 225, 0.5)
0 -10px 20px 0 rgba(0, 0, 0, 0.10)
0 0 transparent,0 0 transparent,0 8px 24px rgba(0,0,0,.2)

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

380

540

720

1024

1280

1440

1680

1920

On a scale of 0 to 1920 px.

Content widths (max-width)

1440 px

1120 px

800 px

640 px

480 px

320 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 45 characters, short enough to show in full in search results.
▲ CheckThe description is 205 characters. Search results usually show about 160.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does komoot use?: komoot’s website uses three typefaces: Satoshi (headings and body text), self-hosted; Nohemi, self-hosted; Boyrun, self-hosted.
What are komoot’s brand colours?: The main colours on komoot.com are Light Olive Green (#4F6814), Chocolate (#EE6B17), Dark Slate Grey (#2B3117), Olive Drab (#889753), Dim Grey (#736554) and Deep Olive Green (#404823).
What colour is komoot’s text and background?: Body text is #1C1A18 on a #F5F3EC background.
Where is komoot’s logo from?: The logo shown in this guide was found on komoot.com’s homepage. For official logo files and usage rules, check komoot’s own brand or press page.
Is this komoot’s official style guide?: No. SiteStyleGuide made it from komoot.com’s public web pages on 30 October 2026, and isn’t affiliated with komoot. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

komoot-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* komoot.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/komoot.com) */
:root {
  /* Colours */
  --text: #1C1A18;
  --background: #F5F3EC;
  --colour-white: #FFFFFF;
  --colour-near-black: #1C1A18;
  --colour-warm-off-white: #F5F3EC;
  --colour-off-white: #F0F0F0;
  --colour-light-olive-green: #4F6814;
  --colour-chocolate: #EE6B17;
  --colour-dark-slate-grey: #2B3117;
  --colour-olive-drab: #889753;
  --colour-dim-grey: #736554;
  --colour-deep-olive-green: #404823;
  --colour-coral: #FF845F;
  --colour-green: #407500;
  --colour-medium-purple: #8879E1;
  --colour-royal-blue: #1877F2;
  --colour-dark-khaki: #C1C056;
  --colour-red: #E4462D;
  --gradient-1: linear-gradient(180deg,transparent 0,rgba(0,0,0,.66) 80%);
  --gradient-2: linear-gradient(to right,rgba(#1c1a18,0) 0,rgba(#1c1a18,1) 66%);
  --gradient-3: linear-gradient(to left,rgba(#1c1a18,0) 0,rgba(#1c1a18,1) 66%);

  /* Typefaces */
  --font-body: 'Satoshi', system-ui, sans-serif;
  --font-other: 'Nohemi', system-ui, sans-serif;

  /* Type scale */
  --text-p: .875rem;
  --text-button: 100%;

  /* Shape */
  --radius-1: 24px;
  --radius-2: 8px;
  --radius-3: 16px;
  --radius-4: 12px;
  --radius-5: 4px;
  --radius-6: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 380px;
  --breakpoint-2: 540px;
  --breakpoint-3: 720px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1280px;
  --breakpoint-6: 1440px;
  --breakpoint-7: 1680px;
  --breakpoint-8: 1920px;
  --max-width-1: 1440px;
  --max-width-2: 1120px;
  --max-width-3: 800px;
  --max-width-4: 640px;
  --max-width-5: 480px;
  --max-width-6: 320px;
}

{
    "site": "komoot.com",
    "source": "https://sitestyleguide.com/komoot.com",
    "text": "#1C1A18",
    "background": "#F5F3EC",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1C1A18",
            "rgb": [
                28,
                26,
                24
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#F5F3EC",
            "rgb": [
                245,
                243,
                236
            ]
        },
        {
            "name": "Off White",
            "hex": "#F0F0F0",
            "rgb": [
                240,
                240,
                240
            ]
        },
        {
            "name": "Light Olive Green",
            "hex": "#4F6814",
            "rgb": [
                79,
                104,
                20
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#EE6B17",
            "rgb": [
                238,
                107,
                23
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#2B3117",
            "rgb": [
                43,
                49,
                23
            ]
        },
        {
            "name": "Olive Drab",
            "hex": "#889753",
            "rgb": [
                136,
                151,
                83
            ]
        },
        {
            "name": "Dim Grey",
            "hex": "#736554",
            "rgb": [
                115,
                101,
                84
            ]
        },
        {
            "name": "Deep Olive Green",
            "hex": "#404823",
            "rgb": [
                64,
                72,
                35
            ]
        },
        {
            "name": "Coral",
            "hex": "#FF845F",
            "rgb": [
                255,
                132,
                95
            ]
        },
        {
            "name": "Green",
            "hex": "#407500",
            "rgb": [
                64,
                117,
                0
            ]
        },
        {
            "name": "Medium Purple",
            "hex": "#8879E1",
            "rgb": [
                136,
                121,
                225
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#1877F2",
            "rgb": [
                24,
                119,
                242
            ]
        },
        {
            "name": "Dark Khaki",
            "hex": "#C1C056",
            "rgb": [
                193,
                192,
                86
            ]
        },
        {
            "name": "Red",
            "hex": "#E4462D",
            "rgb": [
                228,
                70,
                45
            ]
        }
    ],
    "fonts": [
        {
            "name": "Satoshi",
            "stack": "Satoshi, system-ui, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Nohemi",
            "stack": "Nohemi, system-ui, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Boyrun",
            "stack": "Boyrun, Satoshi, system-ui, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to komoot’s

xbox.com

xbox.com · 3 days ago
Save
Common Sense Media

commonsensemedia.org · 4 days ago
Save
GitHub

github.com · 1 day ago
Save
Consumer Reports

consumerreports.org · 5 days ago
Save

Captured from komoot.com on 30 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by komoot; this guide describes the public website for reference.

komootstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Warm Off White

Off White

Colours

Light Olive Green

Chocolate

Dark Slate Grey

Olive Drab

Dim Grey

Deep Olive Green

Coral

Green

Medium Purple

Royal Blue

Dark Khaki

Red

Gradients

Satoshi

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run komoot.com?

Similar colours

xbox.com

Common Sense Media

GitHub

Consumer Reports

Title &
description