What font does Basecamp use?

Basecamp’s website uses four typefaces: Graphik (headings and body text), self-hosted; Martian Mono, self-hosted; Monaspace, self-hosted; Sharpie, self-hosted.

What are Basecamp’s brand colours?

The main colours on basecamp.com are Cornflower Blue (#5DA1F8), Deep Orange (#E79335), Hot Pink (#DE6CB5), Light Orange (#F58E02), Medium Sea Green (#56B66F) and Khaki (#FFE88B).

What colour is Basecamp’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Basecamp’s logo from?

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

Is this Basecamp’s official style guide?

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

Basecamp Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Basecamp; ● 8 / 60 characters
Meta description: Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organized way to manage projects, work with clients, and communicate company-wide.; ▲ 183 / 160 characters
Site name: Basecamp
og:title: Basecamp
og:description: Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organized way to manage projects, work with clients, and communicate company-wide.
Language: en

In search results

Basecamphttps://basecamp.com/

Basecamp

Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organized way to manage projects, work with clients, and com…

When shared

basecamp.com

Basecamp

Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organize…

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 197 × 30.

Logo

On white

On black

On Cornflower Blue

Favicons

4 found

512 px · PNG apple-touch-icon
64 px · ICO icon
32 px · SVG icon
32 px · SVG mask-icon

Basecamp

Light browser tab

Basecamp

Dark browser tab

Back to top ↑

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 (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 19%
Cool Off White 11.6%
Warm Off White 8.7%
Cornflower Blue 8.7%
Deep Orange 8.7%
Hot Pink 8.7%
Cool Charcoal 5.8%
Light Orange 5.8%
Medium Sea Green 5.8%
Khaki 5.8%
Gold 5.8%
Medium Purple 5.8%

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
21.00:1 AAA

On white
—

Background · .project__tiles figure, --browser-bar
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
2 3 0 0

On text
19.73:1 AAA

On white
1.06:1 Fail

Used · --column-light, --app-ct-purple-tint
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 8 1

On text
19.84:1 AAA

On white
1.06:1 Fail

Used · --app-today, --app-ct-orange-tint
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
32 12 0 76

On text
1.67:1 Fail

On white
12.58:1 AAA

Used · --browser-ink, --app-ink

Colours

Brand colours and accents, most used first

Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
63 35 0 3

On text
7.92:1 AAA

On white
2.65:1 Fail

Used · --app-hill-blue, --app-ct-blue
Deep Orange

HEX

RGB

HSL

OKLCH

CMYK
0 36 77 9

On text
8.62:1 AAA

On white
2.44:1 Fail

Used · --app-hill-orange, --app-ct-orange
Hot Pink

HEX

RGB

HSL

OKLCH

CMYK
0 51 18 13

On text
6.92:1 AA

On white
3.04:1 AA large

Used · --app-ct-pink, --folder
Light Orange

HEX

RGB

HSL

OKLCH

CMYK
0 42 99 4

On text
8.75:1 AAA

On white
2.40:1 Fail

Used · --app-star, --column
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
53 0 39 29

On text
8.32:1 AAA

On white
2.53:1 Fail

Used · --app-green, --column
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 9 45 0

On text
17.17:1 AAA

On white
1.22:1 Fail

Used · --app-star, --app-highlight
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 15 62 2

On text
14.61:1 AAA

On white
1.44:1 Fail

Used · --app-star, --app-cal-marker
Medium Purple

HEX

RGB

HSL

OKLCH

CMYK
32 47 0 3

On text
7.18:1 AAA

On white
2.93:1 Fail

Used · --app-ct-purple, --column

Gradients

linear-gradient(135deg, oklch(0.5357 0.2005 256.64), oklch(0.535 0.1602 254.08))
linear-gradient( 180deg, oklch(0 0 0 / 0.6), oklch(0 0 0 / 0.15) 80% )
radial-gradient( 8em circle at 50% 50%, oklch(1 0 0 / 0.1), oklch(1 0 0 / 0) )

Back to top ↑

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.

Graphik

Aa 400 Aa 900

Graphik

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

Aa 100 Aa 800

Martian Mono

Self-hosted · weights 100, 300, 350, 800 · buttons · shown in a stand-in if you don’t have it

Aa 500

Monaspace

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

Aa 400

Sharpie

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

Body max(1.25rem, 2.225vw) · 20 px / 1.5 weight 400 · Graphik

Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organized way to manage projects, work…

Paragraph 100%

Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organized way to manage projects, work…

Small 75%

Trusted by millions, Basecamp puts everything you need to get work done in one place. It’s the calm, organized way to manage projects, work…

Button 100% weight 400

Get started

Link 100% weight 600

Sizes in use

Most common across the site

22pxline 1 · 1 rules
20pxline 1 · 10 rules
18pxline 0 · 1 rules
16px1 rules
14px1 rules
13pxline 1.5 · 1 rules
11px1 rules
8px1 rules

Back to top ↑

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

100% · 17×
50% · 14×
inherit · 2×

Shadows

0 0 0 1px

Back to top ↑

Layout

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

Grid

Breakpoints

399

432

480

568

576

768

1023

1024

On a scale of 0 to 1440 px.

Back to top ↑

Notes

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

Notes

● FineThe title is 8 characters, short enough to show in full in search results.
▲ CheckThe description is 183 characters. Search results usually show about 160.

Back to top ↑

Questions

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

Questions

What font does Basecamp use?: Basecamp’s website uses four typefaces: Graphik (headings and body text), self-hosted; Martian Mono, self-hosted; Monaspace, self-hosted; Sharpie, self-hosted.
What are Basecamp’s brand colours?: The main colours on basecamp.com are Cornflower Blue (#5DA1F8), Deep Orange (#E79335), Hot Pink (#DE6CB5), Light Orange (#F58E02), Medium Sea Green (#56B66F) and Khaki (#FFE88B).
What colour is Basecamp’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Basecamp’s logo from?: The logo shown in this guide was found on basecamp.com’s homepage. For official logo files and usage rules, check Basecamp’s own brand or press page.
Is this Basecamp’s official style guide?: No. SiteStyleGuide made it from basecamp.com’s public web pages on 5 November 2026, and isn’t affiliated with Basecamp. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

basecamp-com-tokens.css

Download

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

/* basecamp.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/basecamp.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-off-white: #F8F7FE;
  --colour-warm-off-white: #FCF9E7;
  --colour-cool-charcoal: #29353C;
  --colour-cornflower-blue: #5DA1F8;
  --colour-deep-orange: #E79335;
  --colour-hot-pink: #DE6CB5;
  --colour-light-orange: #F58E02;
  --colour-medium-sea-green: #56B66F;
  --colour-khaki: #FFE88B;
  --colour-gold: #F9D45E;
  --colour-medium-purple: #A782F7;
  --gradient-1: linear-gradient(135deg, oklch(0.5357 0.2005 256.64), oklch(0.535 0.1602 254.08));
  --gradient-2: linear-gradient( 180deg, oklch(0 0 0 / 0.6), oklch(0 0 0 / 0.15) 80% );
  --gradient-3: radial-gradient( 8em circle at 50% 50%, oklch(1 0 0 / 0.1), oklch(1 0 0 / 0) );

  /* Typefaces */
  --font-body: 'Graphik', sans-serif;
  --font-buttons: 'Martian Mono', monospace;
  --font-other: 'Monaspace', monospace;

  /* Type scale */
  --text-body: max(1.25rem, 2.225vw);
  --leading-body: 1.5;
  --text-p: 100%;
  --text-small: 75%;
  --text-button: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 100%;
  --radius-2: 50%;
  --radius-3: inherit;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 399px;
  --breakpoint-2: 432px;
  --breakpoint-3: 480px;
  --breakpoint-4: 568px;
  --breakpoint-5: 576px;
  --breakpoint-6: 768px;
  --breakpoint-7: 1023px;
  --breakpoint-8: 1024px;
}

{
    "site": "basecamp.com",
    "source": "https://sitestyleguide.com/basecamp.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#F8F7FE",
            "rgb": [
                248,
                247,
                254
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#FCF9E7",
            "rgb": [
                252,
                249,
                231
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#29353C",
            "rgb": [
                41,
                53,
                60
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#5DA1F8",
            "rgb": [
                93,
                161,
                248
            ]
        },
        {
            "name": "Deep Orange",
            "hex": "#E79335",
            "rgb": [
                231,
                147,
                53
            ]
        },
        {
            "name": "Hot Pink",
            "hex": "#DE6CB5",
            "rgb": [
                222,
                108,
                181
            ]
        },
        {
            "name": "Light Orange",
            "hex": "#F58E02",
            "rgb": [
                245,
                142,
                2
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#56B66F",
            "rgb": [
                86,
                182,
                111
            ]
        },
        {
            "name": "Khaki",
            "hex": "#FFE88B",
            "rgb": [
                255,
                232,
                139
            ]
        },
        {
            "name": "Gold",
            "hex": "#F9D45E",
            "rgb": [
                249,
                212,
                94
            ]
        },
        {
            "name": "Medium Purple",
            "hex": "#A782F7",
            "rgb": [
                167,
                130,
                247
            ]
        }
    ],
    "fonts": [
        {
            "name": "Graphik",
            "stack": "'Graphik', sans-serif",
            "weights": [
                400,
                500,
                600,
                700,
                800,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Martian Mono",
            "stack": "'Martian Mono', monospace",
            "weights": [
                100,
                300,
                350,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Monaspace",
            "stack": "'Monaspace', monospace",
            "weights": [
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Sharpie",
            "stack": "'Sharpie', sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run basecamp.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/basecamp.com" title="Basecamp style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Basecampstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Off White

Warm Off White

Cool Charcoal

Colours

Cornflower Blue

Deep Orange

Hot Pink

Light Orange

Medium Sea Green

Khaki

Gold

Medium Purple

Gradients

Graphik

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Free Podcast Hosting

TNW

Lavazza

COLLINS

ReverbNation

Gismeteo

ticketportal.cz

GetResponse

Basecampstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Off White

Warm Off White

Cool Charcoal

Colours

Cornflower Blue

Deep Orange

Hot Pink

Light Orange

Medium Sea Green

Khaki

Gold

Medium Purple

Gradients

Graphik

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run basecamp.com?

Also set in Graphik

Free Podcast Hosting

TNW

Lavazza

COLLINS

Similar colours

ReverbNation

Gismeteo

ticketportal.cz

GetResponse

Title &
description