№ statsig-com

Statsig

Cool, spacious data visualization—crisp sans-serif, muted blues on stark, clean white.

Feature Stackminimalism swiss brutalism developer tools saaslight

The page uses a clean, spacious layout with a focus on functionality. Typography is clear and legible, with ample negative space creating a sense of calm and technical precision. The color palette is predominantly white and muted blues, emphasizing clarity and a modern feel. · saas product, metrics dashboard, data analytics, ai testing, product analytics, statsig overview, measurement platform

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#347cec
OKLCHoklch(60.2% 0.184 259)
RoleDominant
find sites →
Hex#0b3679
OKLCHoklch(34.9% 0.124 260)
RoleSurface
find sites →
Hex#7bacf4
OKLCHoklch(73.9% 0.117 258)
RoleInk
find sites →
Hex#968182
OKLCHoklch(62.3% 0.026 15)
RoleAccent
find sites →
Hex#c6d2d8
OKLCHoklch(85.6% 0.016 229)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Geist	65px	500	1.1	-2px	Aa Bb Cc
h2	Geist	40px	600	1.25	0	Aa Bb Cc
h3	Geist	32px	600	1.25	0	Aa Bb Cc
body	Geist	16px	400	1.5	0	Aa Bb Cc
button	Geist	14px	600	1.71	0	Aa Bb Cc

Spacing scale

80px

100px

Radius scale

10px

30px

50px

Export

:root {
  --color-dominant: #347cec;
  --color-surface: #0b3679;
  --color-ink: #7bacf4;
  --color-accent: #968182;
  --color-detail: #c6d2d8;
}

/* CSS variables exposed by source */
:root {
  --color-gray: #d4d7dc;
  --color-white: #fff;
  --font-family-body: 'Geist', Helvetica, 'Segoe UI', Arial;
  --font-size-h5: 20px;
  --border-button-radius: 30px;
  --font-weight-strong: 600;
  --color-background: #f6f6f6;
  --color-light-blue: #e5f0ff;
  --font-weight-body: 400;
  --font-weight-button: 600;
  --font-size-extra-small: 12px;
  --border-sharp-radius: 5px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --color-black: #1f2328;
  --border-standard-radius: 10px;
  --color-input-border: #d4d7dc;
  --color-blue: #367eed;
  --color-text-secondary: #535963;
  --font-weight-anchor: 600;
  --shadow-regular: 0 0 20px rgba(27, 37, 40, 0.05);
  --color-medium-blue: #accfff;
  --color-soft-white: #ededed;
  --font-size-h7: 14px;
  --font-size-h1: 60px;
  --font-size-h6: 16px;
  --color-dark-gray: #343941;
  --color-dark-blue: #1b63d2;
  --font-family-mono: 'Geist Mono', monospace;
  --font-size-smaller: 14px;
  --color-text-primary: #1f2328;
  --font-size-larger: 20px;
  --font-size-h4: 24px;
  --font-weight-headings: 600;
  --font-size-body: 16px;
  --font-family-headings: 'Geist', Helvetica, 'Segoe UI', Arial;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Statsig.
Reference design system (extracted from the live site):
- Palette: #347cec, #0b3679, #7bacf4, #968182, #c6d2d8
- Typefaces: Geist
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/statsig-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist

65px

500

1.1

-2px

Aa Bb Cc

Geist

40px

600

1.25

Aa Bb Cc

Geist

32px

600

1.25

Aa Bb Cc

body

Geist

16px

400

1.5

Aa Bb Cc

button

Geist

14px

600

1.71

Aa Bb Cc

:root { --color-dominant: #347cec; --color-surface: #0b3679; --color-ink: #7bacf4; --color-accent: #968182; --color-detail: #c6d2d8; } /* CSS variables exposed by source */ :root { --color-gray: #d4d7dc; --color-white: #fff; --font-family-body: 'Geist', Helvetica, 'Segoe UI', Arial; --font-size-h5: 20px; --border-button-radius: 30px; --font-weight-strong: 600; --color-background: #f6f6f6; --color-light-blue: #e5f0ff; --font-weight-body: 400; --font-weight-button: 600; --font-size-extra-small: 12px; --border-sharp-radius: 5px; --font-size-h2: 40px; --font-size-h3: 32px; --color-black: #1f2328; --border-standard-radius: 10px; --color-input-border: #d4d7dc; --color-blue: #367eed; --color-text-secondary: #535963; --font-weight-anchor: 600; --shadow-regular: 0 0 20px rgba(27, 37, 40, 0.05); --color-medium-blue: #accfff; --color-soft-white: #ededed; --font-size-h7: 14px; --font-size-h1: 60px; --font-size-h6: 16px; --color-dark-gray: #343941; --color-dark-blue: #1b63d2; --font-family-mono: 'Geist Mono', monospace; --font-size-smaller: 14px; --color-text-primary: #1f2328; --font-size-larger: 20px; --font-size-h4: 24px; --font-weight-headings: 600; --font-size-body: 16px; --font-family-headings: 'Geist', Helvetica, 'Segoe UI', Arial; }

Build a landing page in the visual style of Statsig. Reference design system (extracted from the live site): - Palette: #347cec, #0b3679, #7bacf4, #968182, #c6d2d8 - Typefaces: Geist - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/statsig-com