# Statsig — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Neutrals
| 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 |

### Accent — blue family (single hue)
| 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.

## 3. Typography Rules

- Display + body: `Geist` (Vercel's Geist) — a neutral geometric-grotesque
- Mono: `Geist 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.

## 4. Component Stylings

### Buttons (all full pills, radius 30px)
- **Primary ("Create a free account" / "Contact Us")**: bg `#1f2328`, text `#ffffff`, radius `30px`, hero h `44px` (nav `36px`), Geist 16/600 (nav 14/600), padding `10px 20px`.
- **Secondary ("See how it works" / "Sign In")**: bg `#ffffff`, text `#1f2328`, 1px `#d4d7dc` inset-ring border, radius `30px`, same heights.
- Hover: soft opacity / box-shadow shift over 0.4s.

### Inputs
- White fill, 1px `#d4d7dc` border (as an inset ring `rgb(212,215,220) 0 0 0 1px inset`), radius ~10px, placeholder grey. Focus: blue `#367eed` accent.

### Cards / panels
- bg `#ffffff`, radius `10px` (dominant), soft ambient shadow `rgba(27,37,40,.05) 0 0 20px`, sometimes a 1px `#d4d7dc` inset ring. Small radii 4px on nested chips.

### Nav
- White bar: STATSIG wordmark (mark + uppercase) left, dropdown links (Products, Solutions, Resources, Docs, Pricing) center, Sign-In (white pill) + Contact-Us (black pill) right. Blue `#367eed` announcement strip below ("Statsig is part of the Amplitude family").

### Experiment / chart component (signature)
- Product surfaces are chart-dense: metric cards, experiment result tables and time-series lines drawn in the blue family (`#367eed` / `#1b63d2` / `#accfff`) over `#e5f0ff` tints, on white cards with `#d4d7dc` gridlines.

## 5. Layout Principles

- Centered container; hero is centered (headline → grey sub → CTA pair → product/chart visual).
- Grayscale customer logo cloud beneath the hero (OpenAI, Brex, Microsoft, Atlassian…).
- Spacing on a 4px grid; generous vertical rhythm; sections separated by the `#f6f6f6` band and hairlines.

## 6. Depth & Elevation

- Radius scale: `4px` (chips), `5px`, `10px` (cards — dominant), `30px` (pills), `50%` (avatars), `100px`.
- Control heights: 36px nav, 44px hero.
- Elevation: soft — ambient `rgba(27,37,40,.05) 0 0 20px` and 1px inset-ring borders (`#d4d7dc`) rather than hard shadows or lines.

## 7. Motion

- Micro-transitions: `opacity 0.4s ease-in-out, box-shadow 0.4s ease-in-out` on cards/buttons; `0.25s ease-in-out` general; `opacity 0.2s, border-bottom 0.2s` on nav links.
- Hero product/chart visual is animated/deferred (staggered reveals).

## 8. Backgrounds, Effects & WebGL

- Flat white / `#f6f6f6` canvas; no gradients on chrome except the solid blue `#367eed` announcement band.
- Depth is soft ambient shadow + inset-ring borders; the atmosphere is the product's own chart-dense dashboards rendered in the blue family. No WebGL/grain observed on the home.

## 9. Do's and Don'ts

### Do
- Build on white / `#f6f6f6` with a single ink `#1f2328`; get hierarchy from size + tight -3% tracking on a big Geist headline.
- Cap display weight at 500, controls at 600.
- Make every CTA a full pill (radius 30px): black `#1f2328` primary vs white secondary with a `#d4d7dc` inset-ring border.
- Reserve blue `#367eed` (and its `#1b63d2` / `#accfff` / `#e5f0ff` family) for the announcement band, links and charts — never a button fill.
- Use 10px cards with soft ambient shadow and inset-ring borders; keep logo clouds grayscale.

### Don't
- Don't make the marketing surface dark — it is light and typographic.
- Don't use blue as a button fill or introduce a second accent hue.
- Don't use hard drop shadows or heavy borders; depth is soft ambient + inset rings.
- Don't round cards into pills — pills are for controls, cards stay at 10px.

## 10. Responsive Behavior

- Centered hero and CTA pair reflow to a single column; nav collapses. Not deeply captured — desktop 1400px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` / band `#f6f6f6` · Text `#1f2328` · Muted `#535963` · Border `#d4d7dc` · Accent `#367eed`
- Fonts: Geist (display+body), Geist Mono · Body 16px · Radius 10px card / 30px pill · Control height 36-44px
- Focus: blue `#367eed` · Primary pill `#1f2328`/white · Secondary white + `#d4d7dc` inset-ring border

<statsig_design_language>
Use the Statsig design language: a calm, light product-analytics platform 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/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; small chips 4px. Motion is opacity/box-shadow 0.4s ease-in-out. Feels: clean, precise, trustworthy, data-calm. Avoid: a dark marketing surface, blue as a button fill or a second accent hue, hard drop shadows, and rounding cards into pills.
</statsig_design_language>