---
name: Mixpanel
description: "This site is an excellent example of balancing high-end brand aesthetics with clear B2B SaaS utility."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F2023"
  secondary: "#525252"
  tertiary: "#7856FF"
  neutral: "#A3A3A3"
  bg-soft: "#FAFAFA"
  bg-quiet: "#F5F5F5"
  muted-soft: "#E5E5E5"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  subheading:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

Proactive AI-powered product analytics for modern engineering and growth teams.

*A sophisticated, data-driven command center for product teams.*

## Colors

Clean, high-contrast typography on white with vibrant purple accent gradients.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F2023`)** — uses `ink` token
- **Secondary text (`#525252`)** — uses `ink-soft` token
- **Accent (`#7856FF`)** — uses `accent` token
- **Muted (`#A3A3A3`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Headlines use tight letter-spacing and 500 weight.
- Body text relies on a highly legible humanist sans-serif.
- Monospace is reserved strictly for code snippets.

## Layout

Max-width centered container with stacked sections and a grid-based feature layout.

*Rhythm:* 8px baseline grid with generous whitespace between sections.

## Elevation & Depth

- rgba(0,0,0,0.05) 0px 0px 0px 1px
- rgba(0,0,0,0.08) 0px 4px 16px 0px
- rgba(0,0,0,0.12) 0px 8px 32px 0px
- Borders: 1px solid rgba(0,0,0,0.1) for cards and inputs.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid primary buttons with pill-radius (999px) and high-contrast ink on white; ghost buttons for secondary actions.
- **card:** Light background with subtle 1px border, 12px border-radius, and 16px-24px padding.
- **chip:** Small, rounded 16px radius tags used for categorization and filtering.
- **input:** Clean bordered inputs with 8px border-radius and clear focus states.
- **hero:** Centered headline with large geometric type, supporting subtext, and a row of horizontal feature toggles.

## Do's and Don'ts

**Don't:**
- Don't use playful or rounded display fonts — screenshot shows geometric, medium-weight sans-serif for headlines.
- Don't use neon or overly saturated colors — screenshot shows a sophisticated purple accent paired with a neutral dark palette.
- Don't use heavy borders on cards — screenshot shows subtle 1px borders with soft shadows.
- Don't use dense, cramped layouts — screenshot shows generous whitespace and clear vertical rhythm.
- Don't use italic text for emphasis — screenshot shows weight variation (500 vs 400) instead.
- Don't use rounded squares for buttons — screenshot shows strictly pill-shaped (999px radius) primary CTAs.

---

## System Prompt (paste into AI agent)

```
Mixpanel is a premium B2B SaaS platform for product analytics, utilizing a clean white background, sophisticated dark neutrals (#1F2023), and a vibrant purple accent (#7856FF). Typography relies on geometric-sans for display and humanist-sans for body text, with tight letter-spacing on headlines. Primary buttons use a distinct pill-shape (999px radius). Critical don'ts: never use playful fonts, avoid neon colors, maintain generous whitespace, never use heavy borders, use weight instead of italics, and always use pill-shaped buttons. Positioning: High-end, reliable, and AI-forward product intelligence.
```