Statsig Design System

Statsig's marketing site is built with the same typeface Vercel ships its own product on — Geist — but the resemblance stops at the font stack. Where Vercel uses its brand identity on a dark canvas, Statsig uses Geist on a light off-white ground and replaces Vercel's white button with a charcoal-ink primary CTA. The hero headline reads "Measure what ships. Ship what matters." at 65px with -2px letter-spacing and weight 500. No chromatic voltage anywhere above the fold: the single registered brand color, a medium blue, appears once in the captured page as a background fill. The system communicates through density and typographic precision, not through saturated accent.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 15 color tokens drawn from the charcoal ink palette, the near-white canvas, and a declared-but-scarce blue accent family; 12 typography tokens spanning Geist at five size tiers and Geist Mono in two uppercase label contexts; 5 radius tokens centered on 10px standard and 30px pill; 8 spacing values on a 20px-dominant scale; and 18 component definitions covering the ink-fill primary button, the tag chips at 30px radius, the section-feature cards, and the monochrome logo wall.

Feed this file to Claude or Cursor and it reproduces Statsig's specific moves: structural-ink primary CTA instead of a chromatic accent, Geist at tight display tracking, 10px card rounding with pill-shaped interactive elements, and a pure off-white canvas rather than stark white. The one discipline worth borrowing even if you have a strong brand color: holding the blue in reserve creates more perceived confidence than spending it on every link and button. Statsig's system is the clearest example in the dev-tools category of trust signaled by chromatic restraint.