Statsig — design system & UI screens

Analytics · 1 screen · 10 sections · https://statsig.com/

Light hero over layered experiment dashboards and an OpenAI/Atlassian/Microsoft logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/statsig.

Decoded design system

Statsig's decoded design system: background #F6F6F6, text #1F2328, accent #1F2328, link #000000, primary #000000; type scale h1 65px / h2 40px / body 16px; 10px spacing base; 0px base radius. The single interactive/action color is #1F2328 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F6F6F6`
surface	`#E9E9E9`
border	`#D5D6D7`
text	`#1F2328`
text_muted	`#707376`
primary	`#000000`
accent	`#1F2328`
link	`#000000`
button_bg	`#1F2328`
button_text	`#FFFFFF`

Using these colors

Action color #1F2328 — the single interactive color; only on things you click or must notice, never large fills.
primary, link are all #000000 — one role, not several (the action color).
accent, button_bg are all #1F2328 — one role, not several (the action color).
accent #1F2328 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

Heading: Geist
Body: Geist
Mono: Geist Mono
h1: 65px
h2: 40px
body: 16px

Spacing

base unit: 10px
scale: 3px, 5px, 6px, 8px, 10px, 12px, 16px, 20px, 30px, 40px

Radii

base: 0px
button: 30px

Shadows (elevation)

card: rgba(27, 37, 40, 0.05) 0px 0px 20px 0px

Motion

Micro-interactions run at 400ms (dominant) with ease-in-out.

durations: 400ms · 200ms
easings: ease-in-out · ease
animated properties: opacity, box-shadow, border-bottom

Native design tokens

Token	Value
`--color-white`	`#fff`
`--color-soft-white`	`#ededed`
`--color-gray`	`#d4d7dc`
`--color-dark-gray`	`#343941`
`--color-black`	`#1f2328`
`--color-light-blue`	`#e5f0ff`
`--color-medium-blue`	`#accfff`
`--color-blue`	`#367eed`
`--color-dark-blue`	`#1b63d2`
`--color-background`	`#f6f6f6`

…and 26 more measured on the page.

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Motion choreography (measured)

Load order: div.vocColumnScroller×2 → div.vocColumnScroller

Scroll reveal: 3 elements rest at a pre-reveal state.

Responsive (measured)

breakpoints: 840px
mobile (390px): hero 40px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Measure what ships, ship what matters