Mixpanel — design system & UI screens

Analytics · 2 screens · 16 sections · mixpanel.com

A dark indigo-to-violet gradient hero anchors a giant two-line serif-ish headline ("The product intelligence system for the AI era") above four pill-style use-case selector chips, with the signature element being layered floating product-UI panels: a left chat/notes card, a central purple funnel chart, and a right "Mixpanel Assistant" AI agent panel overlapping the dashboard screenshot. Below, a three-column feature grid sits on deep navy, followed by a maroon "Always-on product intelligence" band with an orbiting integration-logo cluster around a glowing orange X mark. The page closes with a purple enterprise-ready section, a Docusign testimonial with bold KPI stats, and a light pastel-gradient CTA plus a dense dark mega-footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/mixpanel.

Decoded design system

Mixpanel's decoded design system: background #FFFFFF, text #122124, accent #0000EE, link #0000EE, primary #150040; type scale h1 60px / h2 48px / body 16px; 4px spacing base; 8px base radius. The single interactive/action color is #EDEDED — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F1F1`
border	`#DBDDDE`
text	`#122124`
text_muted	`#6C7577`
primary	`#150040`
accent	`#0000EE`
link	`#0000EE`
secondary	`#122124`
button_bg	`#EDEDED`
button_text	`#0000EE`

Using these colors

Action color #EDEDED — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #0000EE — one role, not several (the action color).
accent #0000EE — accent for emphasis — keep it rare on the page.
primary #150040 — a brand color — but the call-to-action uses #EDEDED, not this.
secondary #122124 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Garnett
Body: Garnett
h1: 60px
h2: 48px
body: 16px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 6px, 8px, 10px, 14px, 16px, 24px, 40px

Radii

base: 8px
button: 100px

Shadows (elevation)

subtle: rgba(218, 208, 255, 0.5) 1px 1px 4px 0px
card: rgba(96, 65, 207, 0.3) 0px 0px 20px 0px
overlay: rgba(218, 208, 255, 0.5) 0px 40px 24px -32px

Motion

Micro-interactions run at 350ms (dominant) with ease.

durations: 350ms
easings: ease
animated properties: opacity

Button states (measured)

primary hover: background rgba(31, 32, 35, 0.8)
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1220px
nav: 64px relative, backdrop blur(10px)

Motion choreography (measured)

Scroll reveal: 7 elements rest at opacity 0, translateY(80px), animate in over 400ms.

Overlay recipe (measured)

dialog panel: #FFFFFF · radius 24px

Responsive (measured)

breakpoints: 950px
mobile (390px): hero 36px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →