Basecamp

---
version: alpha
name: Basecamp landing-page reference
description: An editorial project-management landing page with a pale lavender canvas,
  a large project-board screenshot, blue underlined navigation copy, a bold plainspoken
  headline and letter-like storytelling panels.
colors:
  primary: '#1672DC'
  surface: '#FCF7FE'
  on-surface: '#29363D'
  secondary: '#FFFFFF'
typography:
  headline-sample:
    fontFamily: Graphik, sans-serif
    fontSize: 42.1285px
    fontWeight: 800
    lineHeight: 48.4477px
    letterSpacing: -1.10587px
  secondary-sample:
    fontFamily: Graphik, sans-serif
    fontSize: 38.2986px
    fontWeight: 800
    lineHeight: 44.0434px
    letterSpacing: -1.00534px
  mobile-heading-sample:
    fontFamily: Graphik, sans-serif
    fontSize: 27.5px
    fontWeight: 800
    lineHeight: 31.625px
    letterSpacing: -0.721875px
  paragraph-sample:
    fontFamily: Graphik, sans-serif
    fontSize: 19.1493px
    fontWeight: 400
    lineHeight: 28.7239px
    letterSpacing: -0.263303px
---

# Basecamp landing-page reference

## Overview

Observed at https://basecamp.com/ on 2026-09-19 at 1440px desktop and 390px mobile widths. An editorial project-management landing page with a pale lavender canvas, a large project-board screenshot, blue underlined navigation copy, a bold plainspoken headline and letter-like storytelling panels. This is an independent visual reference, not an official brand specification.

## Colors

These hex tokens are visual approximations of measured OKLCH values: primary oklch(0.5957 0.2005 256.64), surface oklch(0.9822 0.0118 313.22), text oklch(0.3209 0.0204 233.83). Use the measured values for a color-managed implementation.

## Typography

The first measured headline sample uses Graphik, sans-serif at 42.1285px, weight 800, line height 48.4477px and tracking -1.10587px. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Use a minimal top row with centered mountain mark and sign-in/signup utilities. The desktop hero places a large project dashboard on the left and a list of blue underlined links, trial action, video link and heavy headline on the right. Follow with a paper-like founder letter, customer film, testimonial board, another demonstration, a dark usage map, support-team portraits, customer logos and a final signup panel.

Simplify the top row to the mountain mark and menu icon. Reorder the hero: headline first, then trial/video actions and the project screenshot; the desktop link list is absent from the inspected opening viewport. The headline becomes 27.5px/31.625px within a 350px block at x=20. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Slightly rotated or stacked white letter sheets and soft screenshot shadows lend a paper-on-desk feeling. Keep the pale background continuous between editorial panels. Exact shadow values were not measured.

## Shapes

Favor clean rectangular blue actions, screenshot cards and paper sheets. Use the mountain logo and customer portraits as sparse organic accents rather than adding decorative blobs. Radius descriptions are visual estimates.

## Components

Preserve the deliberate desktop-to-mobile content reorder. Keep the founder letter and customer evidence readable; do not flatten this into a generic repeated feature-card grid. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.