---
version: alpha
name: Basecamp
description: A clean, confident project management canvas where a signature cobalt blue anchors every call-to-action against a white or mint-tinted ground, Graphik grotesk keeps copy direct and human, and generously rounded corners plus hand-drawn accents give a rock-solid tool an unexpectedly warm, approachable character.

colors:
  # Surface / canvas
  background: "#ffffff"          # white page canvas
  surface: "#ffffff"             # card / panel fill
  surface-mint: "#f5faf6"        # soft mint-green tint — hero bands, footer, section alternates

  # Ink / text
  ink: "#263340"                 # dark navy near-black — headings + body (from dembrandt normalized link)
  ink-secondary: "#4a5568"       # medium slate — supporting copy /* estimated */
  ink-muted: "#718096"           # quiet gray — captions, metadata /* estimated */
  on-dark: "#ffffff"             # text on cobalt / dark surfaces

  # Brand accent — the Basecamp cobalt blue
  primary: "#0465be"             # signature cobalt CTA blue (dembrandt normalized from oklch(0.5687 0.1602 254.08))
  primary-hover: "#0354a1"       # deeper cobalt for hover / pressed /* estimated from interactive delta */
  on-primary: "#ffffff"          # white text on blue buttons

  # Secondary / nav
  secondary: "#263340"           # dark navy fill for secondary actions and nav links
  on-secondary: "#ffffff"        # white text on dark secondary

  # Semantic
  success: "#1ba151"             # Basecamp product green — completion, healthy states /* estimated */
  error: "#d93025"               # warning / destructive red /* estimated */

  # Borders
  border: "#e5e7eb"              # light gray hairline dividers /* estimated */
  border-medium: "#d1d5db"       # medium gray — input outlines /* estimated */

  # Shadow tints (opaque approximations — originals were oklch with opacity)
  shadow-soft: "#000000"         # was oklch(0 0 0 / 0.1125) inset + oklch(0 0 0 / 0.04) layers — Google format requires hex
  shadow-light: "#f0f4f8"        # was oklch(0 0 0 / 0.04) at ~4% — Google format requires hex

typography:
  display-hero:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.26px
  display:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 51px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.14px
  heading:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.8px
  heading-sub:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.48px
  body-large:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.38px
  body:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.38px
  body-small:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.19px
  label-uppercase:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.5px
  button:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.43px
  caption:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.15px
  handwritten:
    fontFamily: "SharpiePro, 'Caveat', cursive"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 30px
  xl: 41px
  2xl: 61px
  3xl: 89px
  4xl: 122px

rounded:
  sm: 8px
  md: 10px
  lg: 15px
  xl: 17px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 28px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 30px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 16px
    border: "1px solid {colors.border-medium}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  badge:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 16px 30px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-accent:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
---

# Basecamp Design System

## Overview

Basecamp's marketing site makes a bold, disarming statement: project management doesn't have to feel like enterprise software. The canvas is pure white with sections that flip to a soft mint green (`{colors.surface-mint}`), producing a clean, airy rhythm without resorting to heavy dividers or dark contrast banding. Against that restrained backdrop, a single cobalt blue (`{colors.primary}`) does all the persuasive work — it appears exactly where the action is ("Try Basecamp free", "Sign up free") and nowhere else. The discipline is its own signal: this product knows what it wants you to do.

The typeface is Graphik with OpenType features `liga` and `ss05` active throughout — a humanist grotesk that stays friendly at every size. Headings hit up to 600 weight with strong negative tracking (as tight as -1.26px at the hero), giving the copy a decisive, self-assured stance. Then, scattered through the page, a custom handwritten font (`SharpiePro`) surfaces in annotations, callouts, and product screenshots — hand-drawn stars, circled items, margin notes. It's a deliberate roughness, a human fingerprint pressed into an otherwise polished surface, and it's the detail that separates Basecamp from every other SaaS marketing page.

The geometry is soft but purposeful. Buttons and cards round to 8-17px (`{rounded.sm}` through `{rounded.xl}`) — generous enough to read as approachable, controlled enough to feel serious. Shadows are multi-layered and feather-light, a five-stop system with a 1px inset ring at ~11% opacity that gives panels a subtle contained quality, then receding outward diffuse layers at just 4% black. Nothing is harsh; depth is implied rather than declared. The overall impression is a product that is genuinely confident in its simplicity — unhurried, a little witty, built to last.

**Key Characteristics:**
- White canvas alternating with soft mint-green bands (`{colors.surface-mint}`) — calm, never clinical
- A **single cobalt blue** (`{colors.primary}`) reserved for the one "go" action per view
- Dark navy near-black ink (`{colors.ink}`) for all text — warm enough to feel human, authoritative enough to feel solid
- **Graphik** grotesk with `liga` + `ss05` OpenType features — friendly legibility at every scale
- Tightly tracked headings (up to -1.26px at hero size) — confident and deliberate, not decorative
- **SharpiePro** handwritten font for annotations, arrows, and margin notes — the signature human touch
- Buttons sized generously with ~28px padding; the CTA is notably large and easy to reach
- Multi-layered feather-soft shadows — five layers, 4-11% black, never harsh or high-contrast
- Border radius range of 8-17px — soft and approachable, consistent across buttons, cards, and panels
- Uppercase 600-weight label tracks (`{typography.label-uppercase}`) for section eyebrows and feature labels
- Plain-spoken, opinionated copy ("rock-solid and easy to use") that matches the honest visual tone

## Colors

### Surface & Canvas
- **White** (`{colors.background}` / `{colors.surface}`): The base page canvas and card fill — clean and direct.
- **Soft Mint Green** (`{colors.surface-mint}`): The signature section tint, pulled from the Basecamp logo palette. Alternates with white to create a calm page rhythm without hard dividers.

### Ink / Text
- **Dark Navy** (`{colors.ink}`): The primary text color for headings and body — a cool-leaning near-black, not pure black. Anchors all content with authority.
- **Slate** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, placeholder text.

### Brand Accent
- **Cobalt Blue** (`{colors.primary}`): The singular CTA color — "Try Basecamp free", "Sign up free". Never diluted across the page.
- **Cobalt Hover** (`{colors.primary-hover}`): A slightly deeper blue for hover and pressed states on the primary button.

### Secondary Action
- **Dark Navy** (`{colors.secondary}`): Used for secondary buttons and "Sign in" navigation links — keeps secondary actions visually heavy relative to the cobalt primary.

### Semantic
- **Product Green** (`{colors.success}`): Basecamp's signature green from within the product — completion markers, healthy status indicators.
- **Warning Red** (`{colors.error}`): Destructive actions and error states.

### Borders & Shadows
- **Hairline Gray** (`{colors.border}`): Quiet dividers and panel edges.
- **Medium Gray** (`{colors.border-medium}`): Input field outlines and stronger separators.
- **Shadow Soft** (`{colors.shadow-soft}`): The opaque stand-in for the multi-layer 4-11% black shadows (originals used oklch with opacity — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Graphik` — a refined, humanist neo-grotesk used across the entire hierarchy. Self-hosted in Cyrillic+Greek variants (`Graphik-Regular-Cy-Gr-Web.woff2`, `Graphik-Semibold-Cy-Gr-Web.woff2`, `Graphik-Medium-Cy-Gr-Web.woff2`). Fallbacks: `-apple-system, Helvetica Neue, Helvetica, Arial, sans-serif`.
- **Handwritten accent**: `SharpiePro` — a custom marker/felt-pen font used for annotations, hand-drawn arrows, margin notes, and product overlay text. Fallback: `Caveat, cursive`. Applied sparingly for maximum impact.
- **OpenType Features**: `liga` (standard ligatures) and `ss05` (stylistic set 5) active site-wide on Graphik.
- **Weights**: 400 (Regular), 500 (Medium), 600 (Semibold). No bold or black weights — 600 is the ceiling.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 56px / 600 / -1.26px — the marquee headline ("The refreshingly straightforward...") |
| `display` | 51px / 600 — major section headlines |
| `heading` | 36px / 600 / -0.8px — feature headings |
| `heading-sub` | 25px / 600 — sub-section headings, feature names |
| `body-large` | 23px / 400 — lead paragraphs, hero support copy |
| `body` | 20px / 400 — standard body copy and UI labels |
| `body-small` | 17px / 400 — dense supporting copy, nav items |
| `label-uppercase` | 17px / 600 / +0.5px — uppercase eyebrows and section labels |
| `button` | 23px / 500 — primary CTA labels |
| `caption` | 15px / 400 — captions, badges, fine print |
| `handwritten` | SharpiePro — product annotations, hand-drawn UI overlays |

### Principles
- **Tight display tracking**: headings pull inward sharply (-0.8 to -1.26px) — reads as deliberate authorial confidence, not decoration.
- **Semibold ceiling**: 600 is the loudest weight. The system avoids 700-900 heaviness; mass comes from size, not weight.
- **Humanist warmth**: Graphik's subtle humanist details (vs a pure geometric grotesk) keep large text from feeling corporate.
- **Handwritten punctuation**: SharpiePro annotations add imperfection and wit — use sparingly for genuine emphasis only.
- **Uppercase sparingly**: `{typography.label-uppercase}` with +0.5px tracking is reserved for eyebrows and feature labels; never for body or CTA text.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Basecamp uses a proportional spacing scale roughly anchored at ~15px (the most common repeating unit across the UI — 15px, 30px, 61px, 122px). Sections breathe with generous 89-122px gaps (`{spacing.3xl}`–`{spacing.4xl}`), while card internals sit at 24-30px.

### Grid & Container
- Centered content with a comfortable max width; hero pairs left-aligned copy with a live product panel showing a message board, docs, and task views
- Feature sections alternate between white and mint-green backgrounds, each with centered copy above a wide product screenshot or illustration
- "How it works" flows as a single narrative column — deliberately linear, like reading an argument
- Testimonial and logo sections run full-width with a calm horizontal rhythm

### Whitespace Philosophy
- **Generous, unhurried rhythm**: large section gaps (89-122px) keep a feature-rich product story from feeling dense
- **Mint-green zoning**: background alternation does the sectioning work that many sites delegate to cards or borders
- **Direct alignment**: Basecamp resists the pull toward complex grid choreography — most hero sections are simply copy-left / screenshot-right

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Most page content, nav at rest |
| Inset Ring (Level 1) | `0 0 0 1px inset` at ~11% black (`{colors.shadow-soft}`) | Feature panel edges, contained cards |
| Card (Level 2) | Five-layer diffuse at 4% black — `0 4px 33px -10px` through `0 14px 33px -22px` | Resting product panels and cards |
| Elevated (Level 3) | Five-layer diffuse at 10% black — same geometry, higher opacity | Prominently lifted modals and dialogs |
| Focus Ring | `0 0 0 3px` cobalt (`{colors.primary}`) at low opacity | Keyboard-focused controls |

**Shadow Philosophy**: Basecamp's elevation system is a five-stop, concentric diffuse pattern — each shadow is five separate layers with progressively larger offsets and negative spreads, creating a natural "cloud" of depth rather than a discrete drop. The inset ring (a 1px inner stroke at ~11% black) is the signature detail that gives panels a gently contained, slightly physical quality — like a paper card lifted from a surface. No tinted shadows, no warm glow; the palette is kept neutral-black to stay out of the brand's way.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Input fields, secondary buttons, small chips |
| `md` | 10px | Feature-list items, definition lists |
| `lg` | 15px | Primary CTA buttons, standard cards |
| `xl` | 17px | Large hero panels and elevated feature cards |
| `pill` | 9999px | Count badges, avatar circles |

The radius system is consistent and slightly generous — no sharp corners anywhere on interactive elements. Buttons land at 15px (`{rounded.lg}`), which reads as friendly and approachable rather than corporate. The step from `sm` to `xl` is narrow (8-17px), so the overall character stays coherent across component sizes.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Cobalt blue (`{colors.primary}`) fill, white text, 15px radius (`{rounded.lg}`), generously padded at 28px. The single "go" action per view. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — Dark navy (`{colors.secondary}`) fill, white text, 10px radius. Used for prominent but non-primary actions. Hover shifts to pure `{colors.ink}`.
- **`button-ghost`** — Transparent fill, dark navy text, 10px radius. Low-emphasis or nav-adjacent actions. Hover fills with mint tint (`{colors.surface-mint}`).

### Cards
- **`card`** — White surface, 15px radius, 24px padding, feather-soft diffuse shadow.
- **`card-elevated`** — White surface, 17px radius, 30px padding, higher-opacity five-layer shadow for hero product panels.

### Inputs
- **`input`** — White fill, `{colors.border-medium}` 1px outline, 10px radius. **`input-focus`** swaps the border to cobalt (`{colors.primary}`) — the accent reinforces focus.

### Badges
- **`badge`** — Soft mint fill (`{colors.surface-mint}`) with dark navy text — a quiet, brand-tinted chip for feature tags and status labels.

### Navigation
- **`nav-bar`** — Sits flush on white with dark navy text; the primary CTA ("Sign up free") appears as the cobalt primary button in the nav.

### Links
- **`link`** — Dark navy text, underlined by default. **`link-accent`** uses cobalt (`{colors.primary}`) for explicit call-out links.

## Do's and Don'ts

### Do
- Reserve cobalt blue (`{colors.primary}`) for the **single** primary CTA per view — one blue action, never two
- Alternate sections between white (`{colors.background}`) and mint green (`{colors.surface-mint}`) for calm page rhythm
- Use dark navy (`{colors.ink}`) for body text — not pure black, not a mid-gray
- Apply SharpiePro handwriting to product annotations, diagram callouts, and margin notes — then stop; use it sparingly
- Round all interactive elements to at least 8px (`{rounded.sm}`) — nothing sharp on buttons, inputs, or cards
- Size primary buttons generously (~28px padding) — they are the most important element on every view
- Pair Graphik headlines with tight negative tracking (-0.8 to -1.26px) for display sizes
- Use the five-layer diffuse shadow formula for product panels — never a simple one-layer drop shadow
- Use `{typography.label-uppercase}` with +0.5px tracking for eyebrows and feature section labels only

### Don't
- Don't introduce a second brand accent color for CTAs — cobalt is the only action color
- Don't make corner radii sharp (0px) on any interactive control — the 8-17px range is the system
- Don't use bold or black font weights — 600 (semibold) is the loudest Graphik goes
- Don't add warm-tinted or colored shadows — the elevation system uses neutral black only
- Don't use SharpiePro for UI copy, labels, or nav text — it's a decorative accent, not a legibility font
- Don't crowd sections — the page's calm comes from the 89-122px breathing room between features
- Don't substitute the mint-green band (`{colors.surface-mint}`) with a dark or saturated background — Basecamp stays light throughout
- Don't use inline red for emphasis in body text — `{colors.error}` is semantic only

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column; hero type scales 56px → ~28px; product panel stacks below copy |
| Mobile | 375–639px | Single column; nav collapses to hamburger; cobalt CTA goes full-width |
| Tablet | 640–1023px | Two-column feature sections begin; mint bands persist |
| Desktop | 1024–1279px | Full layout; copy-left / product-panel-right hero |
| Large Desktop | ≥1280px | Centered max-width container; generous section padding (`{spacing.4xl}`) |

### Touch Targets
- Primary CTA buttons have ~28px vertical padding — very comfortable thumb targets
- Nav links and secondary actions maintain generous vertical padding at all breakpoints

### Collapsing Strategy
- **Navigation**: horizontal nav collapses to a menu toggle on mobile; the cobalt "Sign up free" CTA persists and may go full-width
- **Hero**: copy and product panel stack vertically; panel goes full-width; mint band intact
- **Feature sections**: two-column copy-plus-screenshot layouts collapse to single stacked column
- **Type**: hero scales 56px → ~28px proportionally; tight tracking maintained
- **Spacing**: section gaps compress from 122px toward ~48px at mobile

### Image Behavior
- Product screenshot panels (the message board, docs, task views) reflow as flex children inside their rounded, soft-shadowed frames
- Handwritten SharpiePro annotations inside product screenshots scale with the panel

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Section tint: Soft Mint (`{colors.surface-mint}`)
- Text: Dark Navy (`{colors.ink}`)
- Brand accent: Cobalt Blue (`{colors.primary}`)
- Secondary text: Slate (`{colors.ink-secondary}`)
- Border: Light Gray (`{colors.border}`)
- Primary CTA: Cobalt Blue (`{colors.primary}`) — exactly one per view

### Example Component Prompts

- "Create a hero section on white (`{colors.background}`) with a 56px dark navy headline in Graphik weight 600 letter-spacing -1.26px (`{typography.display-hero}`), a lead paragraph in `{typography.body-large}`, and a single cobalt CTA button (`{colors.primary}` fill, white text, `{rounded.lg}` 15px radius, 28px padding). Right of the copy, show a product screenshot in a rounded panel (`{rounded.xl}`) with a five-layer diffuse shadow."
- "Build a primary button: cobalt (`{colors.primary}`) fill, white text, Graphik 500 at 23px (`{typography.button}`), `{rounded.lg}` 15px radius, 28px padding on all sides; hover deepens to `{colors.primary-hover}`"
- "Create a feature card: white (`{colors.surface}`) fill, `{rounded.xl}` 17px radius, a five-layer neutral diffuse shadow (4% black, spreading from 4px to 14px vertical offset), 30px padding. Inside: an uppercase 600-weight eyebrow in `{typography.label-uppercase}`, then a heading in `{typography.heading-sub}`."
- "Design an input: white fill, 1px `{colors.border-medium}` outline, `{rounded.md}` 10px radius, 10px 16px padding; on focus swap the border to cobalt (`{colors.primary}`)"
- "Build a section with a soft mint green background (`{colors.surface-mint}`), centered heading in `{typography.display}` dark navy (`{colors.ink}`), a two-column grid of feature cards below, and a SharpiePro annotation overlaid on a product screenshot pointing to a key UI element."

### Iteration Guide

1. Start on white (`{colors.background}`). Use mint green (`{colors.surface-mint}`) for section alternation — if a section feels flat, flip it to mint before adding decoration.
2. Place exactly **one** cobalt button (`{colors.primary}`) as the primary CTA per view. If two actions compete, make the secondary one dark navy (`{colors.secondary}`) or ghost.
3. Set display headings in Graphik at 600 with strong negative tracking (-0.8 to -1.26px depending on size). Body copy stays 400 / -0.38px for comfortable reading.
4. Use the five-layer diffuse shadow formula for product panels: `0 4px 33px -10px`, `0 6px 41px -12px`, `0 6px 16px -14px`, `0 10px 24px -18px`, `0 14px 33px -22px` — all at 4% black. Add a 1px inset ring at 11% black for contained panels.
5. Keep border radii in the 8-17px range (`{rounded.sm}`–`{rounded.xl}`). No sharp corners on interactive elements.
6. Add a SharpiePro annotation to one element per major section — a circled label, an arrow callout, a hand-underlined word. Then stop.
7. Keep sections breathing: 89-122px vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) between major features. The calm is in the air.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Basecamp. Brand names and trademarks belong to their respective owners.