CURATED · OPEN · FREE

Statsig

A clean, high-trust SaaS platform for product experimentation and analytics.

saasdev

↓ Download design system (9 MB)Open in OpenDesign

Visit: https://www.statsig.com

📦 Browse pack contents →

Identity DNA

experimentationanalyticsmetricsdeveloper-focused

A modern enterprise data workbench for product teams.

Color

#367EEDAccent

#1F2328Ink

#535963Ink soft

#FFFFFFBG

#F6F6F6BG soft

#F2F2F2BG quiet

#808080Muted

rgba(31,35,40,0.1)Line

A high-contrast, neutral palette with a single vibrant blue accent for key interactive elements.

Typography

geometric-sans · monospace

display50px · 500
headline40px · 600
subhead24px · 400
body16px · 400
small14px · 400
micro12px · 400

Body text color is #1F2328 · Secondary text color is #535963 · Accent elements use #367EED

Spacing

4px

8px

16px

20px

24px

40px

60px

80px

Consistent 4px base grid with 20px, 40px, and 80px macro spacings for major sections.

Surfaces

sm · 4px

md · 10px

lg · 30px

pill · 999px

1px solid #1F2328

rgba(27, 37, 40, 0.05) 0px 0px 20px 0px · rgb(212, 215, 220) 0px 0px 0px 1px inset

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard top-navigation layout with a centered hero, followed by stacked content sections.

Motion & Interaction

200msmicro

400mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Hover states on buttons and navigation links · Smooth opacity transitions on focus or hover

Subtle background color shifts or opacity changes on interactive elements. · Immediate visual feedback with state changes.

Components

button Rounded pill shapes with either a dark background (#1F2328) or a bordered outline style.
card Clean white surfaces with subtle shadows and rounded corners.
chip Rounded borders with light gray backgrounds and thin borders.
input Light gray backgrounds or bordered fields with rounded corners.
hero Centered large-scale typography above an isometric product UI screenshot.

Voice & Don'ts

Tone Direct, technical, and confident.
Headlines Punchy, action-oriented statements focusing on measurement and shipping.
CTAs Clear and transactional, focusing on starting a free account or seeing how it works.

don't use heavy drop shadows — screenshot shows subtle, diffused box shadows instead
don't use rounded square corners — screenshot shows perfectly circular pill buttons
don't use a bright neon accent — screenshot shows a professional, muted blue (#367EED)
don't clutter the interface — screenshot shows generous whitespace and a clean, grid-based layout
don't use varied background colors — screenshot shows a strictly white and light-gray (#F6F6F6) background system
don't use decorative fonts — screenshot shows highly legible, neutral geometric sans-serif typography
Avoid: Vague marketing jargon
Avoid: Overly playful or casual language
Avoid: Cluttered or busy UI patterns

Inside the pack — real screenshots

Statsig — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

A clean, developer-focused B2B SaaS platform for product experimentation and analytics. The design features a neutral color palette dominated by white (#FFFFFF) and near-black (#1F2328), with a single vibrant blue accent (#367EED). Typography is a geometric sans-serif category, using a strong type scale with tight letter-spacing for display headlines. Critical donts: avoid cluttered layouts, heavy shadows, or playful typography. Maintain generous whitespace, use pill-shaped buttons, and keep the tone direct and technical. Ensure high contrast and a clear visual hierarchy.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko