A calm, LIGHT product-analytics platform (not the dark data-surface the experimentation category implies), built on white and a soft #f6f6f6 band with a single ink #1f2328 doing nearly all the text work so hierarchy comes from size and whitespace. Type is Geist — an enormous ~65px headline at weight 500 with hard -3% tracking, grey #535963 subheads, 16px body, and Geist Mono for metrics and code. Chrome is strictly monochrome: EVERY CTA is a full pill at radius 30px — a black #1f2328 primary vs a white secondary with a 1px #d4d7dc inset-ring border, 36px nav / 44px hero, Geist 600. One blue #367eed (with a small data-viz family #1b63d2 / #accfff / #e5f0ff) is the only hue, reserved for the announcement band, links and the chart-dense experiment dashboards — never a button fill. Cards are white at radius 10px with a soft ambient shadow rgba(27,37,40,.05) 0 0 20px and 1px #d4d7dc inset-ring borders. Motion is opacity/box-shadow 0.4s ease-in-out; depth is soft ambient plus inset rings, not hard shadows.
Browse Statsig in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: statsig.com (live DOM, computed styles), 2026-07-23 (desktop 1400px). Coverage: marketing home (nav, hero, logo cloud). Dashboard:needs-dashboard(login required). The hero product/chart visual is animated/deferred and did not fully paint at capture; product colours inferred from the published--color-*blue family. Responsive: not deeply captured.
A calm, modern product-analytics platform — LIGHT and typographic, not the dark data-surface the "experimentation" category implies. The page is built on white and a soft #f6f6f6 band with a single ink #1f2328 doing nearly all the text work, so hierarchy comes from size and whitespace rather than colour. The signature move is an enormous Geist headline at a restrained weight 500 with hard negative tracking (65px at -2px), centered, over grey body copy. Chrome is monochrome: every CTA is a black-or-white full pill (30px radius), and one blue #367eed — with a small published blue data-viz family — is the only hue, reserved for the announcement band, links and the experiment charts. Depth is a whisper: soft ambient shadows and 1px inset-ring borders rather than hard lines. Feels: clean, precise, trustworthy, data-calm.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Page bg, cards |
| background | #f6f6f6 | Soft section band |
| soft-white | #ededed | Insets, subtle fills |
| gray / input-border | #d4d7dc | Hairline / input border (inset ring) |
| text-secondary | #535963 | Secondary text |
| dark-gray | #343941 | Strong secondary |
| black / text-primary | #1f2328 | Headings, body, black-pill CTA |
| muted | #808080 | Tertiary / captions |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #367eed | Announcement band, links, primary accent |
| dark-blue | #1b63d2 | Hover / active blue |
| medium-blue | #accfff | Chart / secondary data |
| light-blue | #e5f0ff | Tints, chart backgrounds, chips |
Rule: chrome is grayscale; blue #367eed and its family appear only on the announcement band, links and the product/experiment charts — never as a button fill.
Geist (Vercel's Geist) — a neutral geometric-grotesqueGeist Mono — code / numeric / technical labels| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Geist | 65 / 71.5 | 500 | -2px (-3%) |
| Section head | Geist | ~40 / 1.1 | 500 | negative |
| Sub-headline | Geist | ~18-20 | 400 | normal, #535963 |
| Body | Geist | 16 / 24 | 400 | normal |
| Button / UI | Geist | 14-16 | 600 | normal |
| Nav | Geist | 14 | 500-600 | normal |
| Mono / metrics | Geist Mono | 12-14 | 400-500 | normal |
Patterns: weight tops out at 500 for display / 600 for controls — hierarchy from size + tight negative tracking on the big headline. No uppercase eyebrows; kickers are sentence-case grey.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.