Basecamp

Reference it for

• 100% OKLCH colour adoption — every value in CSS custom properties is oklch(L C H) or oklch(L C H / a). The library's leading edge for perceptually-uniform colour adoption.
• Two-keyframe motion budget — blink and status. Most sites ship 20-30 keyframes; Basecamp ships two.
• Bulleted-prose navigation in the hero margin — every nav item is one line with an em-dash explainer ("Pricing — Two paid plans, one free plan / Features — Remarkably simple, surprisingly usable / Reliable to the core — A multi-decade track record"). This is Jason Fried / DHH writing style.
• A literal product screenshot dominates the page — not a tilted angled mock or a 3D scene. The product UI rendered at full fidelity.
• 45 stylesheets, 23 scripts — heavy CSS, light JS. The 37signals discipline of doing as much as possible with CSS and as little as possible with JS.
• Graphik as the sole face — no display/body split, no mono. One typeface, three weights (400, 500, 600).
• A rem-based fractional pixel scale (12.95, 13.33, 15.24, 17.14, 19.05, 26.67, 27.43, 38.10, 41.91) — every size computed from a non-default root.
• An "*X is here*" announcement pattern for product launches ("Basecamp 5 is here — Major upgrade for 2026").

Do not copy

• Graphik Web is licensed (Commercial Type). Substitute with Inter or Helvetica Now Variable.
• The pure white background + slate-blue text on a brand that needs more visual energy — Basecamp's restraint suits 37signals's contrarian B2B position, not every project.
• The bulleted-prose nav pattern unless the team is genuinely comfortable writing it themselves. Jason Fried's prose is the signature; without that voice, the format reads as quirky.
• OKLCH-only if the team isn't comfortable thinking in perceptual colour space — staff training cost is non-trivial.
• 45 stylesheets — only works because the team are CSS specialists.
• "Tell me if this sounds about right." H1 — strongly Basecamp / DHH-coded conversational tone.