Mixpanel
Brand System

Everything teams and AI agents need to create on-brand — strategy, voice, visual elements, and assets.

Brand Strategy

Our brand strategy guides all the decisions we make as a company — from product, marketing campaigns, sales, design, to cultures and values. It defines the DNA of our brand. It is comprised of different elements to create an identity, a personality. This framework defines the feeling we hope to imbue in every experience.

Our Mission

Help the world learn from its data.

Our Vision

Analytics everyone can use.

Our Impact

Make progress possible.

Our Story

We believe in builders — people who create and lead change. They need data to separate what works from what doesn't, but getting answers has always been painfully difficult. Mixpanel uses an event-based data model to help builders see clearly, make better decisions, and build remarkable things.

What We Do

We make analytics simple and powerful for everyone to use by designing an experience that is collaborative and intuitive. When people use analytics, they can tell compelling stories with data, know what's working or not, to make informed decisions together. All of this relies on us making it easy to be trusted.

Values

The foundation of our character, attitude, and behavior. We do not compromise on these values, ever. Even if it's painful.

Time

A builder's most precious resource. They have runways and maker schedules. We don't waste it.

Truth

Our customers seek reality, not reassurance. They rely on us to make critical decisions. We are truthful in everything we do.

Quality

Builders live in their tools. They make tools for a living. They appreciate craftsmanship. Everything we do must be insanely great.

Empathy

Building products is hard. We get it. Everything we do is in service of helping.

Fun

Building is creative, surprising, and collaborative. It cuts the bullshit and makes ideas real.

What's success look like?

Demystify Data

Qualitative and quantitative data has a bad rap. Society is woefully underdeveloped in understanding and using it well. What does a future look like where everyone is data-informed? How might we lead that conversation?

Encourage Building

More people are building products and companies. And more of them succeeding. Building is not only for engineers. Anyone can build because people have ideas and a desire to create change. Let's make it unintimidating and inclusive.

Scale from 2 to 2,000

When a startup grows — and we grow with them — it is a win-win. Everyone uses Mixpanel to make good decisions. It becomes an indispensable tool. We become an extension of their decision-making process.

Voice and Tone

Voice principles for anyone who writes at Mixpanel. Not everything requires all principles — most rely on one or two. If we do it thoughtfully and consistently, our brand voice becomes distinguishable.

Voice Principles

Be a Translator

We're builders using Mixpanel everyday. Be plainspoken. We know our stuff front and back. We make the complex simple. Brevity is beautiful.

Do

All the numbers you care about. In one place. For everyone to see.

Don't

"Whether you care about product adoption, retention, or other custom metrics, Mixpanel dashboards summarize how the things you ship move the numbers that matter."

Be Honest

Simple and direct. No need to over-explain or make promises we can't keep. We are honest because we think long-term.

Do

We are builders, too.

Don't

We Are Here To Support Builders.

Be Encouraging

Building is hard. Destigmatize failure. We encourage effort, grit, and resiliency.

Do

Let's start with the hard stuff first. What's not working?

Don't

How can we help?

Voice Quick Checklist

When writing for Mixpanel, ask yourself these three questions:

Am I being a translator?

Is this plainspoken? Could I make it simpler?

Am I being honest?

Am I over-promising? Is this direct?

Am I being encouraging?

Does this empower the reader? Am I showing I believe in them?

Voice vs. Tone

Voice stays consistent. Tone adapts to context.

Voice

High-level pillars defining how Mixpanel speaks. Stays consistent across all touchpoints.

Tone

Adapts voice to context, audience, and use-case. Flexible based on situation.

Finding the right tone: Put yourself in your person's shoes, be aware of context, and trust your gut. Ask: Who are you talking to? What does the writing do?

Tone by Audience

Adjust your tone based on who you're speaking to.

Beginners

New to product analytics or Mixpanel. Includes PMs, marketers, engineers, developers, analysts, and EPD teams.

Approach: Translate product features into clear benefits: measure change, see clearly, know what's working or not working.

Style: Be authentic. Stand out with clear and simple language. No jargon. Be good-humored.

Experts

Advanced product builders. Used other platforms. Not the first rodeo.

Approach: Don't over-translate or talk down to these builders.

Style: Use known terms. Surprise with interesting analogies/metaphors. Be real. Poke fun at things all builders know.

Tone by Purpose

Adjust your tone based on what the writing needs to accomplish.

Engage, Entertain, Entice

Marketing campaigns, headlines, brand, social media, blog, captions.

Approach: Make it fun and real. Subvert expectations and context with wit and humor.

Style: Use metaphors and storytelling. Let the illustration/animation do the talking.

Inform, Assure, Educate

In-product, sales pages, content platform, knowledge base, press release, memos.

Approach: Translate for people: if something has gone wrong, what should they know? How should they act?

Style: Clear, direct, helpful. Focus on actionable information.

Writing Style

Consistent writing mechanics reinforce our voice. These rules apply across all Mixpanel content.

Oxford Comma

Always use it. "Events, users, and funnels" not "Events, users and funnels."

No Exclamation Points

Never use them. Excitement comes from substance, not punctuation.

Active Voice

Write directly. "Track events" not "Events can be tracked."

Sentence Case

For headlines and buttons. "Get started" not "Get Started."

Short Sentences

If a sentence has a comma, consider splitting it. Brevity is beautiful.

Logo

Our logo comes in two forms: the full wordmark and the logomark. Use the wordmark when space permits. Maintain clear space around the logo equal to the height of the "M".

Wordmark

Black

Download SVG ↓

Purple

Download SVG ↓

White

Download SVG ↓

Logomark

Black

Download SVG ↓

Purple

Download SVG ↓

White

Download SVG ↓

Colors

A full spectrum of named palettes, each running 01–10 from lightest to darkest. Click any swatch to copy its hex value.

Purple

Mixpanel's signature color. The anchor of our visual identity.

01

02

03

04

05

06#7856FF

07

08

09

10

Gray

01

02

03

04

05

06

07

08

09

10#1F2023

Mint

01

02

03

04

05

06#7FE1D8

07

08

09

10

Pool

01

02

03

04

05

06#72BEF4

07

08

09

10

Lava

01

02

03

04

05

06#FF7557

07

08

09

10

Peach

01

02

03

04

05

06#FFB27A

07

08

09

10

Mustard

01

02

03

04

05

06#F8BC3C

07

08

09

10

Grass

01

02

03

04

05

06#3BA974

07

08

09

10

Color Usage Modes

Every surface falls into one of three modes. The mode determines which colors are appropriate for text and elements on that surface.

Light — White

Default page and section surfaces.

bg: white
text: gray-10
body: black · 70%

Light — Gray

Cards and inset surfaces on light backgrounds.

bg: gray-01
text: gray-10
body: black · 70%

Tinted

Color-02 surfaces with matching color-09 headlines.

bg: [color]-02
text: [color]-09
body: black · 70%

Dark

Color-10 surfaces with matching color-03 headlines.

bg: [color]-10
text: [color]-03
body: white · 70%

Pool Body text sample

bg: pool-02
text: pool-09
body: black · 70%

Pool Body text sample

bg: pool-10
text: pool-03
body: white · 70%

Mint Body text sample

bg: mint-02
text: mint-09
body: black · 70%

Mint Body text sample

bg: mint-10
text: mint-03
body: white · 70%

Lava Body text sample

bg: lava-02
text: lava-09
body: black · 70%

Lava Body text sample

bg: lava-10
text: lava-03
body: white · 70%

Peach Body text sample

bg: peach-02
text: peach-09
body: black · 70%

Peach Body text sample

bg: peach-10
text: peach-03
body: white · 70%

Mustard Body text sample

bg: mustard-02
text: mustard-09
body: black · 70%

Mustard Body text sample

bg: mustard-10
text: mustard-03
body: white · 70%

Grass Body text sample

bg: grass-02
text: grass-09
body: black · 70%

Grass Body text sample

bg: grass-10
text: grass-03
body: white · 70%

Gradients

Our gradient system provides rich, vibrant backgrounds and accents. Click any gradient to copy the CSS variable.

Large Background Gradients

Full spectrum gradients for hero sections and large backgrounds

Purple

Pool

Mint

Lava

Mustard

Grass

Small Background Gradients

Subtle fade effects for overlays and cards

Purple

Pool

Mint

Lava

Mustard

Grass

Product Card Gradients

Vibrant gradients for product cards and feature highlights

Purple

Pool

Mint

Lava

Mustard

Grass

Color Palette & Gradient Tokens

              
                /* Tag text — primary brand color */
                --purple-01: #F2EEFF;
                --purple-02: #DAD0FF;
                --purple-03: #C1B1FF;
                --purple-04: #A993FF;
                --purple-05: #9074FF;
                --purple-06: #7856FF;
                --purple-07: #5F41CF;
                --purple-08: #472BA0;
                --purple-09: #2E1670;
                --purple-10: #150040;
                --purple-06-10pct: rgba(120, 86, 255, 0.1);
                --purple-06-20pct: rgba(120, 86, 255, 0.2);
                --purple-06-30pct: rgba(120, 86, 255, 0.3);
                --purple-06-40pct: rgba(120, 86, 255, 0.4);
                --purple-06-50pct: rgba(120, 86, 255, 0.5);
                /* Gray */
                --gray-01: #FAFAFA;
                --gray-02: #F4F4F4;
                --gray-03: #EAEAEA;
                --gray-04: #DFDFDF;
                --gray-05: #D5D5D5;
                --gray-06: #CACACA;
                --gray-07: #A2A2A2;
                --gray-08: #797979;
                --gray-09: #515151;
                --gray-10: #1F2023;
                /* Tag text */
                --pool-01: #F0F9FE;
                --pool-02: #D7EDFC;
                --pool-03: #BEE1FA;
                --pool-04: #A4D6F8;
                --pool-05: #8BCCF6;
                --pool-06: #72BEF4;
                --pool-07: #5698C7;
                --pool-08: #39729A;
                --pool-09: #1D4B6D;
                --pool-10: #002540;
                --pool-06-10pct: rgba(114, 190, 244, 0.1);
                --pool-06-20pct: rgba(114, 190, 244, 0.2);
                --pool-06-30pct: rgba(114, 190, 244, 0.3);
                --pool-06-40pct: rgba(114, 190, 244, 0.4);
                --pool-06-50pct: rgba(114, 190, 244, 0.5);
                /* Tag text */
                --mint-01: #F2FCFB;
                --mint-02: #DBF7F4;
                --mint-03: #C4F1ED;
                --mint-04: #ADECE6;
                --mint-05: #96E6DF;
                --mint-06: #7FE1D8;
                --mint-07: #5FB6AC;
                --mint-08: #408A81;
                --mint-09: #205F56;
                --mint-10: #00332A;
                --mint-06-10pct: rgba(127, 225, 216, 0.1);
                --mint-06-20pct: rgba(127, 225, 216, 0.2);
                --mint-06-30pct: rgba(127, 225, 216, 0.3);
                --mint-06-40pct: rgba(127, 225, 216, 0.4);
                --mint-06-50pct: rgba(127, 225, 216, 0.5);
                /* Tag text */
                --lava-01: #FFF0ED;
                --lava-02: #FFD7CF;
                --lava-03: #FFBFB1;
                --lava-04: #FFA693;
                --lava-05: #FF8E75;
                --lava-06: #FF7557;
                --lava-07: #CC5849;
                --lava-08: #993C3B;
                --lava-09: #661D2D;
                --lava-10: #33001F;
                --lava-06-10pct: rgba(255, 117, 87, 0.1);
                --lava-06-20pct: rgba(255, 117, 87, 0.2);
                --lava-06-30pct: rgba(255, 117, 87, 0.3);
                --lava-06-40pct: rgba(255, 117, 87, 0.4);
                --lava-06-50pct: rgba(255, 117, 87, 0.5);
                /* Tag text */
                --peach-01: #FFF7F2;
                --peach-02: #FFE9DA;
                --peach-03: #FFDBC2;
                --peach-04: #FFCEAA;
                --peach-05: #FFC092;
                --peach-06: #FFB27A;
                --peach-07: #CC8C5E;
                --peach-08: #996642;
                --peach-09: #664126;
                --peach-10: #331B0A;
                --peach-06-10pct: rgba(255, 178, 122, 0.1);
                --peach-06-20pct: rgba(255, 178, 122, 0.2);
                --peach-06-30pct: rgba(255, 178, 122, 0.3);
                --peach-06-40pct: rgba(255, 178, 122, 0.4);
                --peach-06-50pct: rgba(255, 178, 122, 0.5);
                /* Tag text */
                --mustard-01: #FEF8EB;
                --mustard-02: #FDECC8;
                --mustard-03: #FCE0A5;
                --mustard-04: #FAD482;
                --mustard-05: #F9C85F;
                --mustard-06: #F8BC3C;
                --mustard-07: #CA9430;
                --mustard-08: #9C6B25;
                --mustard-09: #6E4319;
                --mustard-10: #401A0D;
                --mustard-06-10pct: rgba(249, 200, 95, 0.1);
                --mustard-06-20pct: rgba(249, 200, 95, 0.2);
                --mustard-06-30pct: rgba(249, 200, 95, 0.3);
                --mustard-06-40pct: rgba(249, 200, 95, 0.4);
                --mustard-06-50pct: rgba(249, 200, 95, 0.5);
                /* Tag text */
                --grass-01: #EBF6F1;
                --grass-02: #C8E7D8;
                --grass-03: #A5D7BF;
                --grass-04: #81C8A6;
                --grass-05: #5EB88D;
                --grass-06: #3BA974;
                --grass-07: #2C885C;
                --grass-08: #1E6844;
                --grass-09: #0F472C;
                --grass-10: #002614;
                --grass-06-10pct: rgba(59, 169, 116, 0.1);
                --grass-06-20pct: rgba(59, 169, 116, 0.2);
                --grass-06-30pct: rgba(59, 169, 116, 0.3);
                --grass-06-40pct: rgba(59, 169, 116, 0.4);
                --grass-06-50pct: rgba(59, 169, 116, 0.5);
                /* Large background gradients */
                --gradient-bg-lg-purple: linear-gradient(0deg, #150040, #472BA0, #7856FF, #FFD7CF, #FFF);
                --gradient-bg-lg-pool: linear-gradient(0deg, #002540, #1D4B6D, #5698C7, #DBF7F4, #FFF);
                --gradient-bg-lg-mint: linear-gradient(0deg, #00332A, #205F56, #5FB6AC, #D7EDFC, #FFF);
                --gradient-bg-lg-lava: linear-gradient(0deg, #33001F, #993C3B, #FF7557, #FAD482, #FFF);
                --gradient-bg-lg-mustard: linear-gradient(0deg, #401A0D, #9C6B25, #F8BC3C, #FFE9DA, #FFF);
                --gradient-bg-lg-grass: linear-gradient(0deg, #002614, #1E6844, #3BA974, #FFE9DA, #FFF);
                /* Small background gradients */
                --gradient-bg-sm-purple: linear-gradient(180deg, rgba(193,177,255,0) 25%, #A993FF 100%);
                --gradient-bg-sm-pool: linear-gradient(180deg, rgba(190,225,250,0) 25%, #A4D6F8 100%);
                --gradient-bg-sm-mint: linear-gradient(180deg, rgba(196,241,237,0) 25%, #ADECE6 100%);
                --gradient-bg-sm-lava: linear-gradient(180deg, rgba(255,200,188,0) 25%, #FFA693 100%);
                --gradient-bg-sm-mustard: linear-gradient(180deg, rgba(252,228,177,0) 25%, #FAD482 100%);
                --gradient-bg-sm-grass: linear-gradient(180deg, rgba(165,215,191,0) 25%, #81C8A6 100%);
                /* Product card gradients */
                --gradient-product-card-purple: linear-gradient(180deg, #FFF0ED, #FFBFB1, #7856FF, #5F41CF);
                --gradient-product-card-pool: linear-gradient(180deg, #F2FCFB, #C4F1ED, #72BEF4, #5698C7);
                --gradient-product-card-mint: linear-gradient(180deg, #F0F9FE, #BEE1FA, #5FB6AC, #5FB6AC);
                --gradient-product-card-lava: linear-gradient(180deg, #FEF8EB, #FAD482, #FF7557, #CC5849);
                --gradient-product-card-mustard: linear-gradient(180deg, #FFF7F2, #FFDBC2, #F8BC3C, #CA9430);
                --gradient-product-card-grass: linear-gradient(180deg, #FFF7F2, #FFDBC2, #5EB88D, #2C885C);
              
            

Typography

Two typefaces. Garnett carries all brand and editorial voice — headlines, body, everything readers see. Apercu Mono is reserved strictly for technical content: code, data values, and measurement labels.

Garnett

Primary Sans

Headlines, body copy, and all brand communication. Garnett leads every layout.

Apercu Mono

Technical details

Data, code, labels, spacing values, grid specs. Never editorial copy.

Headlines

heading-xl-60 Medium, 60px / 120%, -2%

From signal to story.

heading-lg-48 Medium, 48px / 120%, -2%

From signal to story.

heading-md-36 Medium, 36px / 120%, -2%

From signal to story.

heading-sm-28 Medium, 28px / 120%, -1%

From signal to story.

heading-xs-22 Medium, 22px / 140%

From signal to story.

heading-xxs-18 Medium, 18px / 140%

From signal to story.

Body Text

body-xxl-36 Regular, 36px / 150%, +2%

We believe in builders — people who endeavor to create and lead change.

body-xl-28 Regular, 28px / 160%, +2%

We believe in builders — people who endeavor to create and lead change.

body-lg-22 Regular, 22px / 160%, +2%

We believe in builders — people who endeavor to create and lead change.

body-md-18 Regular, 18px / 160%, +2%

We believe in builders — people who endeavor to create and lead change.

body-sm-16 Regular, 16px / 160%, +2%

We believe in builders — people who endeavor to create and lead change.

Captions

caption-lg-14 Regular, 14px / 168%, +2%

Small text for labels, metadata, and supporting information.

caption-lg-14-medium Medium, 14px / 168%, +2%

Small text for labels, metadata, and supporting information.

caption-sm-12 Regular, 12px / 168%, +2%

Small text for labels, metadata, and supporting information.

caption-sm-12-medium Medium, 12px / 168%, +2%

Small text for labels, metadata, and supporting information.

Eyebrows

eyebrow-lg-14 Medium, 14px, +20%, Uppercase

Product Update

eyebrow-sm-12 Medium, 12px, +20%, Uppercase

Product Update

Mono / Code

Apercu Mono 400 Details / Code / Notes

retention 94% · DAU/MAU 0.42 · events 2.4M

Type Scale Tokens

              
                /* Font families */
                --font-sans: 'Garnett', sans-serif;
                --font-mono: 'Apercu Mono', monospace;
                
                /* Headings — each has -size, -weight, -line-height, -letter-spacing */
                --heading-xl-60-size: 60px; /* 500, 1.2, -0.02em */
                --heading-lg-48-size: 48px; /* 500, 1.2, -0.02em */
                --heading-md-36-size: 36px; /* 500, 1.2, -0.02em */
                --heading-sm-28-size: 28px; /* 500, 1.2, -0.01em */
                --heading-xs-22-size: 22px; /* 500, 1.4, 0 */
                --heading-xxs-18-size: 18px; /* 500, 1.4, 0 */
                
                /* Body */
                --body-xxl-36-size: 36px; /* 400, 1.5, +0.02em */
                --body-xl-28-size: 28px; /* 400, 1.6, +0.02em */
                --body-lg-22-size: 22px; /* 400, 1.6, +0.02em */
                --body-md-18-size: 18px; /* 400, 1.6, +0.02em */
                --body-sm-16-size: 16px; /* 400, 1.6, +0.02em */
                
                /* Captions */
                --caption-lg-14-size: 14px; /* 400 or 500, 1.68, +0.02em */
                --caption-sm-12-size: 12px; /* 400 or 500, 1.68, +0.02em */
                
                /* Eyebrows */
                --eyebrow-lg-14-size: 14px; /* 500, 0.20em, uppercase */
                --eyebrow-sm-12-size: 12px; /* 500, 0.20em, uppercase */
              
            

Layout

Spacing, grid systems, and visual hierarchy for consistent layouts.

Spacing

A spacing scale rooted in 8px increments. Use --space-4 and --space-12 for fine-grain UI detail — gaps within components, icon padding, tight list spacing.

--space-4 4px

--space-8 8px

--space-12 12px

--space-16 16px

--space-24 24px

--space-32 32px

--space-40 40px

--space-48 48px

--space-64 64px

--space-80 80px

--space-160 160px

Whitespace Guide

Spacing recommendations for common layout scenarios.

Border Radius

Consistent corner rounding for UI elements.

Buttons, inputs

--radius-4 4px

Pill shapes

--radius-40 40px

Standard cards

--radius-8 8px

Large cards, modals

--radius-16 16px

Feature cards

--radius-24 24px

Hero cards

--radius-32 32px

Grid System

Responsive column layouts for different screen sizes.

Desktop Plus 1440px+

12 columns 48px margins 16px gutter

Desktop 1200–1439px

12 columns 40px margins 16px gutter

Tablet 808–1199px

6 columns 32px margins 16px gutter

Phone 384–807px

2 columns 16px margins 16px gutter

Spacing & Layout Tokens

              
                /* Spacing */
                --space-4: 4px;
                --space-8: 8px;
                --space-12: 12px;
                --space-16: 16px;
                --space-24: 24px;
                --space-32: 32px;
                --space-40: 40px;
                --space-48: 48px;
                --space-64: 64px;
                --space-80: 80px;
                --space-160: 160px;
                
                /* Border Radius */
                --radius-4: 4px; /* buttons, inputs */
                --radius-8: 8px; /* standard cards */
                --radius-16: 16px; /* large cards, modals */
                --radius-24: 24px; /* feature cards */
                --radius-32: 32px; /* hero cards */
                --radius-40: 40px; /* pill shapes */
              
            

Components

Core UI components: buttons, tags, and cards — each with light and dark variants. For additional components, refer to the Heliograph design system.

Buttons

Pill-shaped buttons in two sizes — large (40px) and small (28px) — each with primary and secondary styles. Tertiary buttons are text-only with an animated arrow.

Large

Small

Tertiary

Large — Dark

Small — Dark

Tertiary — Dark

Primary — Default CTA on any light surface. On dark backgrounds, invert to a white button with gray-10 text — never a dark or muted treatment on a dark surface.

Secondary — Supporting actions and secondary CTAs. Uses purple-06 on light surfaces, white on dark.

Tertiary (ghost) — Low-emphasis inline actions where a full button would be too heavy.

Cards

Resource, product, and content cards across multiple sizes and modes pulled from the Heliograph design system.

Large Card — Purple Tint (radius-24)

Feature