# Statsig · Design system migration spec

> Source: https://www.statsig.com  ·  Curated by OpenDesign  ·  en

> A highly polished, trust-building B2B SaaS design that balances technical credibility with a clean, modern aesthetic.

## 1. Identity DNA

Statsig's design system is architected like a modern enterprise data workbench—precise, high-trust, and built for clarity under load. Its identity is rooted in experimentation, analytics, and metrics, serving developer-focused product teams with a clean, authoritative aesthetic.

**One-liner:** A clean, high-trust SaaS platform for product experimentation and analytics.
**Keywords:** experimentation · analytics · metrics · developer-focused
**Analogy:** A modern enterprise data workbench for product teams.

## 2. Color

The color system operates on a high-contrast neutral foundation of white and near-black, with a single vibrant blue accent reserved for key interactive moments. This restraint ensures the interface recedes, letting data and action come forward.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F6F6F6` | card background |
| `--bg-quiet` | `#F2F2F2` | quiet area |
| `--ink` | `#1F2328` | body text |
| `--ink-soft` | `#535963` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `#D4D7DC` | weak hint |
| `--accent` | `#367EED` | single accent |
| `--line` | `rgba(31,35,40,0.1)` | divider |

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

The principle is clarity through contrast: a neutral field that makes the blue signal unmistakable where it matters.

## 3. Typography

Typography employs a geometric sans-serif category chosen for its legibility and technical neutrality. The scale supports a clear hierarchy, from punchy hero headlines to dense data labels, with a body text color of #1F2328 and secondary text in #535963.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.0 | 500 | -2px | Main hero headline |
| headline | 40px | 1.25 | 600 | 0 | Section headings |
| subhead | 24px | 1.25 | 400 | 0 | Sub-section titles |
| body | 16px | 1.5 | 400 | 0 | General text |
| small | 14px | 1.5 | 400 | 0 | Secondary text and UI elements |
| micro | 12px | 1.667 | 400 | 0 | Captions and labels |

**Type rules:**
- Body text color is #1F2328
- Secondary text color is #535963
- Accent elements use #367EED

## 4. Spacing

Spacing follows a consistent 4px base grid, creating a predictable atomic rhythm that scales up to major section divisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 40 / 60 / 80 px
- **Rhythm:** Consistent 4px base grid with 20px, 40px, and 80px macro spacings for major sections.

## 5. Surfaces

- **Radius:** sm 4px · md 10px · lg 30px · pill 999px
- **Shadows:**
  - rgba(27, 37, 40, 0.05) 0px 0px 20px 0px
  - rgb(212, 215, 220) 0px 0px 0px 1px inset
- **Borders:** 1px solid #1F2328

## 6. Layout

The layout skeleton is a standard top-navigation structure with a centered content column. A centered hero sits above stacked content sections, maintaining generous whitespace to frame each piece of information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes functional feedback over decoration. Transitions are smooth and fast, typically between 0.2s and 0.4s, applied to opacity and color changes on hover, focus, and click states.

- **Durations:** micro 200ms · small 400ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Hover states on buttons and navigation links
  - Smooth opacity transitions on focus or hover

- **Hover:** Subtle background color shifts or opacity changes on interactive elements.
- **Click:** Immediate visual feedback with state changes.
- **Transition:** Smooth 0.2s to 0.4s transitions for color and opacity changes.
- **Keyboard:** Focus outlines are handled via ring styles.

## 8. Voice & Don'ts

The voice is direct, technical, and confident, with headlines as punchy, action-oriented statements focused on measurement and shipping. It avoids vague marketing jargon and overly playful language.

- **Tone:** Direct, technical, and confident.
- **Headline style:** Punchy, action-oriented statements focusing on measurement and shipping.
- **CTA style:** Clear and transactional, focusing on starting a free account or seeing how it works.
- **Avoid:** Vague marketing jargon / Overly playful or casual language / Cluttered or busy UI patterns

### Don'ts
- ❌ 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

The system deliberately avoids cluttered interfaces, heavy shadows, and decorative typography to maintain its high-trust, developer-focused credibility.

## System Prompt (paste into AI tool)

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