Basecamp design system

What font does Basecamp use?

Basecamp’s website uses Graphik for headings and body text. Graphik is not on Google Fonts; the closest free match is Inter Tight.

Basecamp colour palette

Basecamp’s home page is light (#FFFFFF background, #29353C text) and uses #2377D2 for its main actions. Its palette: #FFFFFF, #FFF9F5, #29353C, #0B151B, #146DC7, #FFDC74.

• #FFFFFF
  64.8% · backgrounds
• #FFF9F5
  28.4% · backgrounds
• #29353C
  4% · text
• #0B151B
  1.8% · backgrounds
• #146DC7
  0.5% · text
• #FFDC74
  0.2% · backgrounds
• #117AF3
  0.1% · backgrounds, text
• #FCF8F3
  Surface
• #6D767B
  Text muted
• #E3E5E5
  Border

Type scale

Each size the page sets text in, with its weight and line height. Basecamp’s largest type is 42.13px at weight 800.

Spacing and shape

Spacing steps the page leans on: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 92px.

Corner radii: 1.32353px, 2.36552px, 2.64706px, 4.73104px, 5.29412px, 7.65972px, 7.94118px, pill. 29 shadow levels measured.

What makes Basecamp look like Basecamp

Almost entirely neutral: 99% of the page is painted in #FFFFFF and #FFF9F5.

#146DC7 is an accent: 0.5% of the page, used for text only. Don't fill large areas with it.

#FFDC74 is an accent: 0.2% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (42.13px Graphik) is bold (800), tracked to -0.026em.

Basecamp DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Basecamp’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Basecamp’s product, so use your own name, words and images.

Download Basecamp DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Basecamp’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #FCF8F3; /* Surface */
  --color-text: #29353C; /* Text */
  --color-text-muted: #6D767B; /* Text muted */
  --color-border: #E3E5E5; /* Border */
  --color-action: #2377D2; /* Action */
  --color-on-action: #000000; /* On action */
  --color-positive: #19874D; /* Positive */
  --color-negative: #A42D1E; /* Negative */
  --color-fff9f5: #FFF9F5; /* 28.4% of the page, as fills */
  --color-0b151b: #0B151B; /* 1.8% of the page, as fills */
  --font-body: "Graphik", "Inter Tight", sans-serif; /* Graphik on the site; Inter Tight renders */
  --type-display-large: 42.13px; /* Display Large, weight 800 */
  --type-display-large-leading: 48.4477px;
  --type-display-large-tracking: -0.026em;
  --type-display-small: 38.3px; /* Display Small, weight 800 */
  --type-display-small-leading: 44.0434px;
  --type-display-small-tracking: -0.026em;
  --type-headline-large: 30.64px; /* Headline Large, weight 400 */
  --type-headline-large-leading: 39.8305px;
  --type-headline-large-tracking: -0.026em;
  --type-headline-small: 27.58px; /* Headline Small, weight 400 */
  --type-headline-small-leading: 27.575px;
  --type-headline-small-tracking: -0.014em;
  --type-title-large: 22.98px; /* Title Large, weight 400 */
  --type-title-large-leading: 29.8729px;
  --type-title-large-tracking: -0.014em;
  --type-title-medium: 21.29px; /* Title Medium, weight 700 */
  --type-title-medium-leading: 24.4831px;
  --type-title-medium-tracking: -0.024em;
  --type-title-small: 19.15px; /* Title Small, weight 400 */
  --type-title-small-leading: 28.7239px;
  --type-title-small-tracking: -0.014em;
  --type-body-large: 17.23px; /* Body Large, weight 500 */
  --type-body-large-leading: 17.2344px;
  --type-body-large-tracking: -0.014em;
  --type-body-medium: 16.76px; /* Body Medium, weight 600 */
  --type-body-medium-leading: 25.1335px;
  --type-body-medium-tracking: -0.014em;
  --type-body-small: 15.32px; /* Body Small, weight 500 */
  --type-body-small-leading: 19.9153px;
  --type-body-small-tracking: -0.014em;
  --type-label-1: 13.4px; /* Label 1, weight 600 */
  --type-label-1-leading: 20.1068px;
  --type-label-1-tracking: -0.014em;
  --type-label-2: 10.64px; /* Label 2, weight 500 */
  --type-label-2-leading: 14.1931px;
  --type-label-2-tracking: -0.006em;
  --type-label-3: 8.28px; /* Label 3, weight 400 */
  --type-label-3-leading: 12.419px;
  --type-label-3-tracking: -0.007em;
  --type-label-4: 7.1px; /* Label 4, weight 400 */
  --type-label-4-leading: 9.58036px;
  --type-label-4-tracking: -0.008em;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;

How this was measured

PikSpec’s scanner read the basecamp.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Basecamp is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Basecamp.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.