What is Mixpanel's primary brand color?

Mixpanel's brand voltage is a chromatic range rather than a single color, anchored by deep eggplant purple #15003f and electric violet #7856ff. The eggplant fills the entire below-fold canvas and the testimonial card surface, the electric violet carries the product-mock highlights and the four-up feature tiles, and lavender #9074ff sits inside the gradient backgrounds behind the hero. The structural near-black ink #1f2023 carries the primary CTA fill and the body text. Coral #ff8e75 and peach #ffd7cf appear as a smaller accent pair inside the product mock. The brand discipline is to commit the page to the violet range rather than to hold one accent in reserve.

What typeface does Mixpanel use, and what should I use as a substitute?

Mixpanel runs Garnett Medium and Garnett Regular for every display, heading, body, and button surface. Garnett is a contemporary humanist sans by Connary Fagen — display headlines sit at 36-60px in weight 400, section displays at 48px in weight 400, body at 14-18px in weight 400. Apercu Pro Medium is the second voice, reserved for small-caps eyebrow labels at 12px with 2.4px letter-spacing (uppercase). The closest open-source substitute for Garnett is Inter at the same weights with slightly tighter tracking; for Apercu Pro Medium use JetBrains Mono Bold at uppercase for the small-caps labels. Weight 400 doing all display work is the typographic move — the system never reaches for 600+ even at the 60px hero tier.

Why does Mixpanel's CTA button look like a hyperlink?

Mixpanel's primary CTA — 'Get Started Free' — is a 28px-tall near-black pill in ink #1f2023 with cobalt-blue underlined text #0000ee. The cobalt is the browser default hyperlink color, and the underline makes it read as a link rather than as a button label. This dressing is deliberate — Mixpanel's CTA is presented as a low-friction in-line action, more like 'click here to sign up' than 'CONVERT NOW.' The pill shape (100px radius) softens it further. Combined with the modest 28px height and weight 400 type, the button reads as an invitation rather than as a sales moment.

Why does Mixpanel split its page between white and eggplant?

Mixpanel's marketing page divides into two distinct canvas zones. The above-fold hero, the customer-logo strip, and the introductory sections run on bright white with ink text. Mid-scroll the page drops into a full-bleed deep eggplant #15003f section that hosts the four-up product-feature band, the testimonial card in white-on-purple, and the bottom CTA. The split is the structural device — it pre-announces the shift from 'editorial introduction' to 'product depth,' and the chromatic break carries the visual rhythm that section dividers and surface tones would carry on a single-canvas page. The bottom of the page returns to a lighter gradient as the conversion / footer band.

Can I use this DESIGN.md to build my own analytics-platform marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Mixpanel's specific moves: deep-purple chromatic system as the structural device, two-canvas page split between white above and eggplant below, cobalt-link CTA text inside a near-black pill, Garnett Medium across every display tier at modest weight 400, and Apercu Pro Medium tracked at 2.4px for small-caps eyebrow labels. The tokens resolve cleanly without invention — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config. One caveat: the eggplant-canvas section only works if you have real product imagery to fill it. Dropping into a flat purple band with no embedded mock would feel hollow.

Mixpanel Design System

Mixpanel's marketing-system tokens as a DESIGN.md file.

About Mixpanel DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source mixpanel.com

Analytics & Data

Mixpanel's marketing site does what its peers in product analytics refuse to do: it commits to a deep violet chromatic system as the page's structural device. The hero opens on white with a 60px Garnett Medium display headline in near-black ink #1f2023 — "Product analytics for an AI-first world" — sitting above an embedded mock that already glows lavender and grape. Then the page drops, mid-scroll, into a full-bleed eggplant section in deep purple #15003f that hosts the four-up product-feature band, the testimonial card in white-on-eggplant, and a coral-orange #ff8e75 accent moment. Where Amplitude keeps a near-monochrome editorial canvas and lets one cobalt word do the brand work, Mixpanel commits the entire below-fold to its violet voltage.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 18 color tokens drawn from the eggplant-to-coral chromatic range — grape #472ba0, electric violet #7856ff, lavender #9074ff, deep eggplant #15003f, indigo gradient #2e1670, plus the coral #ff8e75 and peach #ffd7cf accent pair — alongside the structural near-black ink #1f2023, pure white #ffffff, and a single mint #7fe1d8 accent that appears as a chart-series color. 15 typography tokens run Garnett Medium and Garnett Regular across every display, body, and label tier, with Apercu Pro Medium reserved for the 2.4px-letter-spaced small-caps eyebrow labels. 15 components cover the cobalt-link primary CTA, the eggplant feature tile, the white-on-eggplant testimonial card, the four-up product-feature strip, and the top-nav.

Feed this file to Claude or Cursor and it reproduces Mixpanel's specific moves: deep-purple chromatic system as the structural device, two-canvas page split between white and eggplant, cobalt-link CTA text dressed as a button, Garnett Medium at modest weight 400 across every display tier, and Apercu Pro Medium tracked at 2.4px for small-caps labels. The one move worth borrowing only if your product has a real chromatic range to support it: the mid-page canvas inversion. A white-only or eggplant-only page would lose the structural rhythm; the inversion is the page.

What makes it distinct

Eggplant-to-coral chromatic rangethe system tracks from grape #472ba0 through lavender #9074ff to coral #ff8e75 across hero and feature bands
Cobalt-link CTA textthe primary button uses #0000ee #0000ee underlined text inside a near-black pill, dressing a hyperlink as a button
Two-canvas page splitbright white above the fold, eggplant #15003f below; the chromatic break carries the rhythm
Garnett Medium across every tierdisplay at 60px in weight 400, body at 14-16px, with Apercu Pro Medium reserved for small-caps eyebrow labels
Four-up product-feature bandInsights / Funnels / Experiments / Reports tiles in lavender on eggplant carry the product taxonomy below the fold

Live at mixpanel.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

mixpanel.com

Explore Mixpanel

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Mixpanel design system FAQ

Common questions about Mixpanel's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Mixpanel — official site

Mixpanel's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.