---
version: alpha
name: Basecamp
description: Light design system extracted from basecamp.com (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#FFFFFF"
  on-surface: "#29353C"
  surface: "#00000026"
  primary: "#117AF3"
  outline: "#00000010"
  color-6: "#117AF31A"
  blue-deep: "#146DC7"
  color-8: "#FFDC7480"
  on-primary: "#FFFFFF"
  background-dark: "#1B2930"
  on-surface-dark: "#E1E5E8"
  surface-dark: "#131F25"
  primary-dark: "#117AF3"
  outline-dark: "#00000010"
typography:
  display-lg:
    fontFamily: Graphik
    fontSize: 49.79px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.026em
  headline-md:
    fontFamily: Graphik
    fontSize: 42.13px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.026em
  title-md:
    fontFamily: Graphik
    fontSize: 22.98px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: -0.014em
  body-md:
    fontFamily: Graphik
    fontSize: 19.15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.014em
  body-sm:
    fontFamily: Graphik
    fontSize: 15.32px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.014em
  label-md:
    fontFamily: Graphik
    fontSize: 17.23px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.014em
rounded:
  md: 7.5px
  full: 9999px
spacing:
  xxs: 5px
  xs: 8.5px
  sm: 10.5px
  md: 12px
  lg: 12.5px
  xl: 15.5px
  2xl: 18.5px
  3xl: 19px
  4xl: 21px
  5xl: 23px
  6xl: 28.5px
  7xl: 30.5px
  8xl: 32px
  9xl: 35px
  container: 1195px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    rounded: 0px
    padding: 19.1px
    height: 49.8px
    typography: "{typography.label-md}"
  button-secondary:
    backgroundColor: "#0067DE"
    textColor: "{colors.background}"
    rounded: 0px
    padding: 19.1px
    height: 49.8px
    typography: "{typography.label-md}"
  input:
    rounded: 0px
    padding: 12.7px
    height: 50px
---

# Basecamp

> Extracted from [https://basecamp.com/](https://basecamp.com/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Basecamp uses a light canvas (#FFFFFF) with a palette led by #117AF3. Type is set in **Graphik** (display + body), **Monaspace** (mono), with 19px body text. Layout: 1195px container, top-static+transparent navigation, 10 sections. Built with hotwire, posthog, cloudflare.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#FFFFFF` | 1 0 201.8 | bg | 73.5% | `--color-white` |
| `on-surface` | `#29353C` | 0.321 0.02 233.8 | text | 10.2% | `--color-ink` |
| `surface` | `#00000026` (on bg `#D9D9D9`) | 0 0 0 | surface | 11.8% | — |
| `primary` | `#117AF3` | 0.596 0.201 256.6 | accent | 0.30% | `--color-blue` |
| `outline` | `#00000010` (on bg `#EFEFEF`) | 0 0 0 | border | 0.06% | — |
| `color-6` | `#117AF31A` (on bg `#E7F2FE`) | 0.596 0.201 256.6 | other | 1.8% | — |
| `blue-deep` | `#146DC7` | 0.535 0.16 254.1 | other | 1.4% | `--color-blue-deep` |
| `color-8` | `#FFDC7480` (on bg `#FFEEB9`) | 0.903 0.129 91.1 | other | 0.62% | — |

Sparse chromatic highlights (not accents): `#FFDC7480`.

Contrast: text on background 12.59:1, accent 4.11:1.

Gradients in use: `linear-gradient(135deg, oklch(0.5357 0.2005 256.64), oklch(0.535 0.1602 254.08))`; `url("https://basecamp.com/assets/images/general/logo-mark.webp"), linear-gradient(135deg, oklch(0.5357 0.2005 256.64), oklch(0.535 0.1602 25`.

The site responds to `prefers-color-scheme: dark`; the `-dark` tokens hold the dark-mode roles.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Graphik** | display, body | 400, 500, 600, 800 | 99.6% | webfont |
| **Monaspace** | mono | 400 | 0.40% | webfont |

Declared in `@font-face` but not used to paint text on this page: Martian Mono, Sharpie. Don't treat these as the page's fonts.

Scale (px): 13.5, 15.5, 17, 19, 23, 38.5, 42, 50. Effective ratio ≈ 1.274 (close to a major third). Body 19px at line-height 1.5; display 49.79px with tracking -0.026em. Headings are sentence case. On a 390px viewport the body is 12.5px and display 27.5px.

## Layout

Spacing has no reliable single base unit; the most used steps are 5, 8.5, 10.5, 12, 12.5, 15.5, 18.5, 19, 21, 23, 28.5, 30.5, 32, 35px. Sections open with about 60px of space before their first line of text. Content sits in a 1195px container on a 3-column grid. Text density 0.123 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **hero** (92px, bg #FFFFFF)
2. **nav** (130px, bg #FFF9F5)
3. **section** — “Manage any project, coordinate every team. Master your company with Basecamp.” (2447px, bg #FFF9F5)
4. **section** — “Take a minute to meet some of our customers” (1267px, bg #FFFFFF)
5. **testimonials** — “We asked our customers: “What changed for the better since you switched to Basec” (841px, bg #FFFFFF)
6. **section** — “How about a quick demonstration?” (1078px, bg #FFFFFF)
7. **section** — “Big numbers. Highly-trusted. Rugged, reliable, ready.” (1245px, bg #FFFFFF)
8. **testimonials** — “Remember when companies cared about service?” (938px, bg #FFF9F5)
9. **section** — “Want to see a live demo and ask some questions first?” (568px, bg #FFFFFF)
10. **footer** — “Have day!” (807px, bg #FFFFFF)

## Elevation & Depth

Style: layered. Most used shadows:

- `oklch(0 0 0 / 0.04) 0px 3.82986px 30.6389px -9.57465px, oklch(0 0 0 / 0.04) 0px 5.74479px 38.2986px -11.4896px, oklch(0 0 0 / 0.04) 0px 5.74479px 15.3194px -13.4045px, oklch(0 0 0 / 0.04) 0px 9.57465px 22.9792px -17.2344px, oklch(0 0 0 / 0.04) 0px 13.4045px 30.6389px -21.0642px`
- `oklch(0 0 0 / 0.1) 0px 6.12778px 61.2778px -36.7667px, oklch(0 0 0 / 0.2) 0px 12.2556px 85.7889px -42.8944px, oklch(0 0 0 / 0.3) 0px 12.2556px 36.7667px -49.0222px, oklch(0 0 0 / 0.4) 0px 24.5111px 49.0222px -67.4055px, oklch(0 0 0 / 0.5) 0px 36.7667px 61.2778px -79.6611px`
- `oklch(0 0 0 / 0.25) 0px 2.24047px 11.2023px -3.44687px`

## Shapes

Dominant corner radius 0px; radii in use: 7.5px, pill. Borders: none.

## Components

- **button-primary**: backgroundColor `#117AF3`, textColor `#FFFFFF`, rounded `0px`, padding `19.1px 21.1px`, height `49.8px`, fontFamily `Graphik`, fontSize `19.15px`, fontWeight `500` (e.g. “Try Basecamp free”)
- **button-secondary**: backgroundColor `#0067DE`, textColor `#FFFFFF`, rounded `0px`, padding `19.1px 21.1px`, height `49.8px`, fontFamily `Graphik`, fontSize `19.15px`, fontWeight `500`, shadow `oklch(0 0 0 / 0.1) 0px 3.82986px 30.6389px -9.57465px, oklch(0 0 0 / 0.1) 0px 5.74479px 38.2986px -11.4896px, oklch(0 0 ` (e.g. “Try Basecamp free”)
- **input**: rounded `0px`, height `50px`, padding `12.7px 19px`

## Do's and Don'ts

- Do reserve `#117AF3` for primary actions and highlights; it covers only 0.30% of the painted page.
- Do set body copy in Graphik at 19px / 1.5.
- Do tighten large headlines (-0.026em at 49.79px).
- Don't introduce font weights beyond 400, 500, 600, 800.
- Do keep corners at 0px for most controls.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.base`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.