CURATED · OPEN · FREE

Mixpanel

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

saasanalytics

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://mixpanel.com

📦 Browse pack contents →

Identity DNA

product analyticsAI-firstdata-drivengrowthengineering

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

Color

#7856FFAccent

#1F2023Ink

#525252Ink soft

#FFFFFFBG

#FAFAFABG soft

#F5F5F5BG quiet

#A3A3A3Muted

rgba(0,0,0,0.1)Line

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

Typography

geometric-sans · humanist-sans · monospace

display60px · 500
heading36px · 500
subheading18px · 400
body16px · 400

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

8px baseline grid with generous whitespace between sections.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(0,0,0,0.1) for cards and inputs.

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

300mssmall

600msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth hover transitions on interactive elements. · Subtle fade-in animations for modal and drawer appearances.

Subtle color shifts or background changes to indicate interactivity. · Immediate feedback via state changes or small scale animations.

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.

Voice & Don'ts

Tone Confident, professional, and slightly visionary.
Headlines Direct, active statements that emphasize speed, data, and intelligence.
CTAs Action-oriented and clear (e.g., 'Get Started Free', 'Book a Demo').

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.
Avoid: Jargon-heavy sentences
Avoid: Passive voice
Avoid: Overly playful language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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