--- version: alpha name: Mixpanel description: Product-intelligence clarity — a bright white canvas with near-black ink, a single confident electric-purple accent (#7856FF) carrying every CTA and data highlight, geometric sans headlines with tight tracking, generously rounded cards, and a restrained neutral gray scale that keeps the analytics story legible. colors: # Canvas + ink background: "#ffffff" surface: "#ffffff" surface-soft: "#f7f7fa" surface-ink: "#1c1c28" ink: "#16161e" ink-secondary: "#56565f" ink-muted: "#8a8a93" # Brand accent — electric purple primary: "#7856ff" primary-hover: "#6843f0" primary-soft: "#efebff" accent-violet: "#9b7bff" # Supporting data accents data-teal: "#21cda4" data-amber: "#ffb547" data-pink: "#ff5c8a" # Neutral scale gray-900: "#16161e" gray-700: "#3a3a44" gray-500: "#6b6b75" gray-300: "#c7c7cf" gray-200: "#e4e4ea" gray-100: "#f0f0f4" gray-50: "#f7f7fa" # On-color on-primary: "#ffffff" on-ink: "#ffffff" # Lines + tints border: "#e4e4ea" badge-bg: "#efebff" badge-text: "#5a3fd6" typography: display-hero: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 56px fontWeight: 600 lineHeight: 1.05 letterSpacing: -1.68px section-heading: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1.2px sub-heading: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.84px card-title: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.27 letterSpacing: -0.44px body-large: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.60 letterSpacing: 0px body: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 1.59 letterSpacing: 0px body-small: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px button-ui: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.15px caption: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.38 letterSpacing: 0px eyebrow: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 13px fontWeight: 600 lineHeight: 1.20 letterSpacing: 0.52px mono-body: fontFamily: "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 40px 3xl: 64px 4xl: 96px rounded: none: 0px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 22px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 22px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 22px borderColor: "{colors.gray-300}" button-secondary-hover: backgroundColor: "{colors.gray-50}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 22px borderColor: "{colors.gray-500}" button-dark: backgroundColor: "{colors.surface-ink}" textColor: "{colors.on-ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 12px 22px badge: backgroundColor: "{colors.badge-bg}" textColor: "{colors.badge-text}" typography: "{typography.eyebrow}" rounded: "{rounded.pill}" padding: 4px 12px card: backgroundColor: "{colors.background}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.border}" card-soft: backgroundColor: "{colors.surface-soft}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.gray-100}" card-metric: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.display-hero}" rounded: "{rounded.lg}" padding: 28px borderColor: "{colors.border}" input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-small}" rounded: "{rounded.sm}" padding: 10px 14px borderColor: "{colors.gray-300}" input-focus: backgroundColor: "{colors.background}" borderColor: "{colors.primary}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 16px 24px borderColor: "{colors.border}" --- # Mixpanel Design System ## Overview Mixpanel's site reads like the product it sells: a clean instrument panel for understanding behavior, where nothing distracts from the data story. The canvas is bright white (`{colors.background}`) with near-black ink (`{colors.ink}`), and the entire personality of the brand rides on a single, confident electric purple (`{colors.primary}`). That purple is disciplined — it carries primary CTAs, link emphasis, key data highlights, and the occasional metric, but it never floods the page. The result is a design that feels analytical and trustworthy while still having a clear point of view. Typography is geometric and tightly tracked. Headlines use a clean grotesque sans at heavy display sizes with negative letter-spacing (-1.2px to -1.68px), giving titles a compact, engineered confidence that suits a measurement company. Body copy relaxes to comfortable line-height for long-form feature explanations. The hierarchy is deliberately simple — display, section, card title, body — so marketing pages stay scannable. Shape language leans friendly. Cards and surfaces use generous rounding (`{rounded.lg}`, 16px), buttons sit at a softer 8px, and badges go full pill. This rounded warmth offsets the seriousness of analytics imagery (charts, funnels, retention curves) shown inside product screenshots. Supporting data accents — a teal, an amber, a pink — appear only inside chart contexts, never as UI chrome. **Key Characteristics:** - Bright white canvas with near-black `{colors.ink}` text - One signature electric purple (`{colors.primary}`) carrying CTAs and data emphasis - Geometric grotesque headlines with tight negative tracking (-1.2px to -1.68px) - Generously rounded cards (16px) with soft 8px buttons and pill badges - A restrained neutral gray scale for borders, secondary text, and soft surfaces - Multi-hue data accents (teal/amber/pink) reserved for chart contexts only - Light, quiet borders (`{colors.border}`) instead of heavy shadows ## Colors ### Primary - **Mixpanel Purple** (`{colors.primary}`): The signature accent — primary CTAs, links, data highlights. - **Purple Hover** (`{colors.primary-hover}`): Pressed/hover state for the primary button. - **Purple Soft** (`{colors.primary-soft}`): Tinted background for badges and highlight blocks. - **Ink** (`{colors.ink}`): Primary text and headings — near-black with a faint cool cast. ### Canvas & Surface - **White** (`{colors.background}`): Page background and card surfaces. - **Surface Soft** (`{colors.surface-soft}`): Alternating section / soft card fill. - **Surface Ink** (`{colors.surface-ink}`): Dark surfaces and the dark button variant. ### Data Accents (chart context only) - **Data Teal** (`{colors.data-teal}`): Positive metric / secondary series. - **Data Amber** (`{colors.data-amber}`): Warning / comparison series. - **Data Pink** (`{colors.data-pink}`): Tertiary series / callout. ### Neutral Scale - **Gray 900** (`{colors.gray-900}`): Headings, primary text. - **Gray 700** (`{colors.gray-700}`): Strong secondary text. - **Gray 500** (`{colors.gray-500}`): Muted labels. - **Gray 300** (`{colors.gray-300}`): Input borders, dividers. - **Gray 200** (`{colors.gray-200}`): Card outlines. - **Gray 100** (`{colors.gray-100}`): Soft dividers. - **Gray 50** (`{colors.gray-50}`): Subtle surface tint, secondary button hover. ### Tints - **Badge Bg** (`{colors.badge-bg}`): Pill badge background. - **Badge Text** (`{colors.badge-text}`): Pill badge text. - **Border** (`{colors.border}`): Default card and nav border. ## Typography ### Font Family - **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a clean geometric grotesque standing in for Mixpanel's house sans. - **Monospace**: `Roboto Mono` for code, query snippets, and technical labels. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.). | Token | Use | |---|---| | `display-hero` | 56px hero headline — billboard impact | | `section-heading` | Feature section titles | | `sub-heading` | Sub-sections, larger card headings | | `card-title` | Feature / pricing cards | | `body-large` | Hero subtitle, intros | | `body` | Standard reading text | | `body-small` | UI text, captions in cards | | `button-ui` | Buttons and nav links | | `caption` | Metadata, small labels | | `eyebrow` | Uppercase-ish section labels and badges | | `mono-body` | Code and query snippets | ### Principles - **Tight at the top, relaxed below**: Negative tracking compresses headlines (-1.68px at 56px) while body copy sits at 0 tracking for readability. - **One weight for emphasis**: 600 carries headings and buttons; 400 carries reading text. Sparse use of 500 for captions. - **Purple for emphasis, not decoration**: Inline purple highlights key phrases and numbers, never whole paragraphs. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a jump from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) for section rhythm. ### Grid & Container - Max content width approximately 1200px - Hero: centered single column with generous top padding - Feature sections: 2–3 column card grids - Product screenshots framed in rounded cards with a light border ### Whitespace Philosophy - **Calm and analytical**: Wide vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections lets dense charts breathe. - **Soft sectioning**: Alternating white and `{colors.surface-soft}` bands separate content without hard rules. - **Quiet borders over shadows**: Depth comes from 1px `{colors.border}` lines, not heavy elevation. ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Buttons - **`button-primary`** — Electric purple fill, white text, 8px radius. The default CTA. - **`button-secondary`** — White with a `{colors.gray-300}` border, ink text. - **`button-dark`** — Dark `{colors.surface-ink}` fill for high-contrast contexts. ### Pills & Badges - **`badge`** — Soft purple tint background, purple text, full pill, uppercase eyebrow type. ### Cards - **`card`** — White, 16px radius, light `{colors.border}` outline. - **`card-soft`** — Soft gray fill for alternating/secondary cards. - **`card-metric`** — Large purple display number over a description. ### Inputs - **`input`** — White surface, gray border. Focus shifts the border to `{colors.primary}`. ### Navigation - **`nav-bar`** — White header, ink links, purple primary CTA right-aligned, light bottom border. ## Do's and Don'ts ### Do - Keep purple as the single brand accent — CTAs, links, key data - Use generous 16px rounding on cards and surfaces - Use light 1px borders instead of heavy shadows - Apply negative tracking on display headlines (-1.2px to -1.68px) - Reserve teal/amber/pink for chart series only ### Don't - Don't introduce a second brand accent into UI chrome - Don't flood large areas with purple — it's emphasis, not background - Don't use heavy drop shadows for elevation - Don't put data-chart colors on buttons or nav - Don't use positive letter-spacing on headlines --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single column, stacked cards | | Tablet | 600–1024px | 2-column grids begin | | Desktop | 1024–1200px | Full card grids | | Large Desktop | >1200px | Centered, max content width | ### Collapsing Strategy - Hero: 56px → scales down, retains negative tracking - Navigation: horizontal links → hamburger menu - Feature cards: 3-column → 2-column → single column - Section spacing: 96px → 48px on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Primary CTA: Mixpanel Purple `{colors.primary}` - Background: White `{colors.background}` - Heading text: Ink `{colors.ink}` - Body text: `{colors.ink-secondary}` - Border: `{colors.border}` - Badge: `{colors.badge-bg}` bg / `{colors.badge-text}` text ### Example Component Prompts - "Create a hero on white. Headline 56px Inter weight 600, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Subtitle 20px weight 400 in `{colors.ink-secondary}`. Purple CTA (`{colors.primary}`, 8px radius, 12px 22px padding) plus a bordered secondary button." - "Design a card: white, 16px radius, 1px `{colors.border}`, 24px padding. Title 22px Inter weight 600 letter-spacing -0.44px. Body 17px weight 400 in `{colors.ink-secondary}`." - "Build a pill badge: `{colors.badge-bg}` background, `{colors.badge-text}` text, full pill, eyebrow type." --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Mixpanel. Brand names and trademarks belong to their respective owners.