---
name: Statsig
description: "A highly polished, trust-building B2B SaaS design that balances technical credibility with a clean, modern aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F2328"
  secondary: "#535963"
  tertiary: "#367EED"
  neutral: "#808080"
  bg-soft: "#F6F6F6"
  bg-quiet: "#F2F2F2"
  muted-soft: "#D4D7DC"
  line: "rgba(31,35,40,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2px"
  headline:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.25
    fontWeight: 600
    letterSpacing: "0"
  subhead:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  micro:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.667
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 10px
  lg: 30px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 40px
  3xl: 60px

---

## Overview

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

*A modern enterprise data workbench for product teams.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F2328`)** — uses `ink` token
- **Secondary text (`#535963`)** — uses `ink-soft` token
- **Accent (`#367EED`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(31,35,40,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

- rgba(27, 37, 40, 0.05) 0px 0px 20px 0px
- rgb(212, 215, 220) 0px 0px 0px 1px inset
- Borders: 1px solid #1F2328

## Shapes

- `sm`: 4px
- `md`: 10px
- `lg`: 30px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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