Mixpanel
MIT
Modern analytics platform design system with deep purple and gold accents, frosted glass elements, and precise token-based spacing—built for data-driven SaaS products
Published by Layout3 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install mixpanel# layout.md — Mixpanel Design System
---
## 0. Quick Reference
**Stack:** Framer-built marketing site · Token source: extracted CSS custom properties (140 vars, high confidence) · Styling: CSS custom properties + Framer runtime vars
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
:root {
/* ── Surfaces ── */
--mixpanel-bg-surface: rgb(21, 0, 64); /* Deep navy-purple hero/section bg */
--mixpanel-accent: rgb(51, 0, 31); /* Deep crimson secondary surface */
--mixpanel-bg-app: #ffffff1a; /* Frosted white overlay (10% opacity) */
/* ── Text ── */
--mixpanel-text-primary: #000000b3; /* Body text, 70% black */
--mixpanel-text-secondary: #515151; /* Secondary/muted text */
/* ── Brand accents ── */
--mixpanel-accent-cool: #7856ff; /* Purple CTA / interactive */
--mixpanel-accent-warm: #f8bc3c; /* Gold highlight / decorative */
--mixpanel-accent-hover: #33001f; /* Dark crimson hover state */
/* ── Status ── */
--mixpanel-success: #5eb88d;
--mixpanel-warning: #ff7557;
--mixpanel-error: #ffa693;
/* ── Radius ── */
--mixpanel-radius-sm: 6px; /* Select / small inputs */
--mixpanel-radius-md: 16px; /* Cards, modals, secondary buttons */
--mixpanel-radius-lg: 100px; /* PRIMARY pill buttons (Learn More, Get Started) */
/* ── Spacing ── */
--mixpanel-space-xs: 10px;
--mixpanel-space-sm: 32px;
--mixpanel-space-md: 40px;
--mixpanel-space-lg: 104px;
--mixpanel-space-xl: 160px;
/* ── Motion ── */
--mixpanel-ease-default: ease;
}
```
```tsx
// Primary CTA pill button — correct token usage
<a
href="/signup"
className="mixpanel-btn-primary"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '8px',
padding: '14px 28px',
borderRadius: 'var(--mixpanel-radius-lg)', // 100px — pill shape
background: 'var(--mixpanel-accent-cool)', // #7856ff
color: '#fff',
fontFamily: '"DM Sans", sans-serif',
fontSize: '16px',
fontWeight: 500,
transition: 'background var(--mixpanel-ease-default) 0.2s',
}}
onMouseEnter={e => (e.currentTarget.style.background = 'var(--mixpanel-accent-hover)')}
onMouseLeave={e => (e.currentTarget.style.background = 'var(--mixpanel-accent-cool)')}
>
Get Started Free
</a>
```
**NEVER rules:**
- NEVER use `border-radius` values other than `6px`, `16px`, or `100px` on brand components
- NEVER use `Inter` or `Arial` as the primary font — use `"Garnett Medium"` for headings, `"DM Sans"` for UI
- NEVER use spacing values outside `10px / 32px / 40px / 104px / 160px` without explicit reason
- NEVER use square or rounded-rectangle buttons for primary CTAs — **pill shape (`border-radius: 100px`) is required**
- NEVER hardcode hex colours — always reference `var(--mixpanel-*)` or original `--token-*` vars
- NEVER invent a new purple — `#7856ff` is the sole interactive accent colour
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Mood
Mixpanel's marketing site is **bold, dark, and analytically confident**. The dominant surface is a deep purple-navy (`rgb(21, 0, 64)`) that signals authority and data-richness. Crimson-black secondary surfaces (`rgb(51, 0, 31)`) create visual depth without introducing a third neutral. Bright purple (`#7856ff`) and warm gold (`#f8bc3c`) act as high-contrast accent signals against these dark fields.
Typography is editorial: **Garnett** (a custom serif-adjacent typeface) drives headings with tight negative letter-spacing (`-1.2px` at 60px), communicating precision. **DM Sans** handles UI chrome and body — geometric, legible, neutral.
### Aesthetic Intent
- Dark-first: sections sit on saturated dark surfaces, not white
- Pill buttons only: primary CTAs are always `border-radius: 100px`, never rectangular
- Restrained palette: only two accent hues in interactive contexts (purple, gold) — the extended colour palette is for data visualisation / illustration only
- Motion is minimal: `transition: all ease` is present but animations are subtle scroll/caret keyframes — not decorative
### What This Design Explicitly Rejects
- Warm, friendly pastel palettes — every warm tone (salmon, peach, orange) is status or data-illustration only, not UI chrome
- High-radius cards with soft drop shadows — depth comes from colour contrast, not shadows
- Default system fonts (`Inter`, `Roboto`, `Arial`) in any hero or heading context
- Rectangular primary buttons — the rounded-rectangle treatment (`border-radius: 16px`) is reserved for secondary/tertiary actions (cookie banners, consent UI), NOT brand CTAs
- Light/white hero sections — the hero is always dark surface
---
## 2. Colour System
### Tier 1: Primitives (original CSS variable names preserved)
```css
/* ── Neutrals / Greyscale ── */
--token-0e21f178-f274-4352-9c9b-1843aa8f96ac: #fafafa; /* Lightest surface */
--token-53169d3b-ef02-446d-b74e-ba99b5631f33: #f4f4f4; /* Near-white surface */
--token-d13d971c-755e-41ed-8756-d8bff28b51c7: #eaeaea; /* Divider / subtle border */
--token-5020ef9c-5b71-44d4-bd5f-d2a9bd21f756: #dfdfdf; /* Disabled surface */
--token-40b757b4-43be-43ca-be8c-24266f5b85e7: #d5d5d5; /* Input border default */
--token-3bbcbef0-a217-487e-ba28-f7bae939503d: #cacaca; /* Muted border */
--token-03ecf91b-5c34-4747-b23a-cb9f50717baf: #a2a2a2; /* Placeholder text */
--token-b2477f13-2734-44dc-8345-60e794b73be9: #797979; /* Caption text */
--token-1df091b1-845d-4e5b-8c87-2a4b568aafb6: #515151; /* Secondary text */
--token-7232f098-3b4b-4255-a43b-49b617b91f06: #1f2023; /* Dark text / near-black */
--token-ee9dd0b5-61bd-4144-80b2-f91e153af98d: #000000; /* Pure black */
/* ── Black alphas (overlays) ── */
--token-b3f7fca7-b129-4023-9398-b200d3aa374a: #00000012; /* 7% black */
--token-48690339-bf16-430a-9697-1bd55aab4129: #00000033; /* 20% black */
--token-47d98113-dd72-46a2-8f44-340a2660d94c: #00000080; /* 50% black */
--token-0272af3b-6cfb-42b4-b18a-5fa30333328a: #00000099; /* 60% black */
--token-5e6f0f1d-6bf1-4220-9323-3d853ae92047: #000000b3; /* 70% black */
--token-2ea9e44a-9d25-4377-a10c-7c522ecbd08c: #000000cc; /* 80% black */
--token-3c8353da-b79a-41f9-820e-dcd3a1cb2238: #000000e6; /* 90% black */
--token-bd3d1d95-251e-4083-bbf9-f5d12be57000: #000000b3; /* Text primary alpha */
/* ── White alphas (frosted overlays) ── */
--token-6764a1fd-57f2-472f-b533-ddc0490cee8f: #ffffff1a; /* 10% white — bg-app overlay */
--token-c84791c8-4c0b-4859-a261-4a6a94ff7efc: #ffffff33; /* 20% white */
--token-88775f33-ebee-4131-9bf9-91797685cf14: #ffffff4d; /* 30% white */
--token-75e06adb-961c-4b73-abd5-2e28e1462e19: #ffffff66; /* 40% white */
--token-84c4b85c-26fa-4a1c-a363-29d072947058: #ffffff80; /* 50% white */
--token-61930e01-5681-4131-8dc8-84bf4136e86b: #ffffffb3; /* 70% white */
--token-1d3b2d93-ac26-4eb9-beae-35ab62ee5b1f: #ffffff14; /* 8% white */
--token-e006cb29-962d-4571-b5c1-b85b4d02ffaa: #ffffff; /* Pure white */
/* ── Purple scale (primary brand) ── */
--token-b82b6552-5c75-4430-9d04-98a927f84335: #f2eeff; /* Purple 50 */
--token-01d89e3a-d0e8-4281-86d9-49a5916819b6: #dad0ff; /* Purple 100 */
--token-c87549d1-7f8a-4eb2-8c39-b920e430497b: #c1b1ff; /* Purple 200 */
--token-8112c33d-0521-441e-abaa-5a3b53404976: #a993ff; /* Purple 300 */
--token-aee2db48-b9ad-45f2-a599-e51f50573d3e: #9074ff; /* Purple 400 */
--token-56e37a13-9ae4-4ac2-9327-6460449e8c2b: #7856ff; /* Purple 500 — PRIMARY interactive */
--token-9c7ae297-c1fd-4753-b389-797cda840a3d: #5f41cf; /* Purple 600 */
--token-d2b35def-1d27-40e3-9eab-fbdaa808e40c: #472ba0; /* Purple 700 */
--token-6716e5f2-19ad-4e12-b849-4ff85ca2f24c: #2e1670; /* Purple 800 */
--token-c6f0fad5-626e-4404-ab04-f579f6d1d84c: #150040; /* Purple 900 — bg-surface base */
/* Purple alphas */
--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4: #7856ff1a; /* 10% purple */
--token-a976f64b-a3bd-4090-8aac-4f33c2f78abc: #7856ff33; /* 20% purple */
--token-a7a2b07a-c19d-4df5-8306-e6aff1fa5444: #7856ff4d; /* 30% purple */
--token-32b9004f-5995-4c71-8f1f-b8c8bff0dc32: #7856ff66; /* 40% purple */
--token-2698940e-6dae-49b5-a23f-f7ba9836d95f: #7856ff80; /* 50% purple */
/* ── Coral/Red scale (status & illustration) ── */
--token-63c6cad7-0b5c-4cb8-984f-db563ce50cb4: #fff0ed; /* Coral 50 */
--token-1f04fc5e-25a0-46c3-a070-0292f376998a: #ffd7cf; /* Coral 100 */
--token-ea5767b4-1445-4aea-9912-712afa64338b: #ffbfb1; /* Coral 200 */
--token-5f0f29b4-f453-48dd-9288-c29b2877825e: #ffa693; /* Coral 300 — error token */
--token-0af8cdbc-7123-4ebc-a4f3-d6e6cdfdb6d1: #ff8e75; /* Coral 400 */
--token-77665dd2-a0b8-41a7-b815-ae73c0304a73: #ff7557; /* Coral 500 — warning token */
--token-b34b719e-5aa9-4047-857f-d1b3c3db4427: #cc5849; /* Coral 600 */
--token-847f599f-2c35-48bf-924c-a99852eb5d64: #993c3b; /* Coral 700 */
--token-7e1ad347-2655-4b89-9dd0-c1b2ba35d639: #661d2d; /* Coral 800 */
--token-381ceba4-805d-4c58-a48d-3423c1bd780b: #33001f; /* Coral 900 — accent-hover */
/* Coral alphas */
--token-89beaa91-e6e0-4698-8188-92e76861da74: #ff75571a; /* 10% coral */
--token-d3729d27-9761-43f6-9ecd-e349328ca59b: #ff755733; /* 20% coral */
--token-06ad1f4e-d57c-4f88-89d5-2840c338bd95: #ff75574d; /* 30% coral */
--token-67ff3a66-17f0-4807-91c9-ef0b812a9511: #ff755766; /* 40% coral */
--token-7ebc6f27-1cec-409a-ad76-e2f76db3e616: #ff755780; /* 50% coral */
/* ── Amber/Orange scale (illustration) ── */
--token-1cecf042-dd98-4d2e-8d03-66e07eb8718a: #fff7f2; /* Amber 50 */
--token-204638d8-90da-4e20-b6e9-330c969bdd2e: #ffb27a; /* Amber 400 */
--token-858143d2-ff20-46f0-af19-a8210c7f02e1: #cc8c5e; /* Amber 600 */
/* Amber alphas */
--token-0639df16-760d-4c32-ba18-9f0f75289111: #ffb27a1a; /* 10% amber */
--token-34115f95-e365-4bd0-8e4d-0998167d86cc: #ffb27a80; /* 50% amber */
/* ── Gold scale (brand-warm accent) ── */
--token-98e92a13-89e8-480b-8ccd-095ec9bab12d: #fef8eb; /* Gold 50 */
--token-331613de-5958-429b-80e2-cbf0035c2572: #f9c85f; /* Gold 400 */
--token-41f750ab-d855-459d-9c11-215330d2869c: #f8bc3c; /* Gold 500 — accent-warm */
--token-9142a197-4ff0-42ed-9899-71d675459945: #ca9430; /* Gold 600 */
--token-a89749e6-d0dc-4875-a64b-1cd6662215a6: #401a0d; /* Gold 900 */
/* Gold alphas */
--token-442f5755-6102-40d2-8774-217102ab8361: #f9c85f1a; /* 10% gold */
--token-a1c99728-1e22-42a5-b9c7-bfe6aac84856: #f9c85f80; /* 50% gold */
/* ── Blue scale (illustration/data) ── */
--token-6b5ff142-1be7-4ade-b88e-68098c8b3d19: #f0f9fe; /* Blue 50 */
--token-c08039b2-fffa-441b-9ef0-a605f082840c: #72bef4; /* Blue 400 — brand-mark-1 */
--token-28826242-9d78-46de-81b8-3a9c4c98ba42: #5698c7; /* Blue 500 */
--token-d657287f-da17-4dd8-8de2-b77995c86ac3: #002540; /* Blue 900 */
/* Blue alphas */
--token-ed71f7b1-a4e9-432f-ab26-7737244f1615: #72bef41a; /* 10% blue */
--token-3c78440a-36e4-41d5-93c2-e407a33347d0: #72bef480; /* 50% blue */
/* ── Teal scale (illustration/data) ── */
--token-8edeae9f-73cf-4fe6-9c09-b6b3acfb8342: #f2fcfb; /* Teal 50 */
--token-35c3a07a-4909-4d03-860a-d014048ef951: #7fe1d8; /* Teal 400 — brand-mark-4 */
--token-22b2eb26-1336-4200-bb6c-672a7d714ca1: #5fb6ac; /* Teal 500 */
--token-341b86a1-9f72-47fb-ba1f-01ad4ba6a009: #00332a; /* Teal 900 */
/* Teal alphas */
--token-1d930f62-deb5-4769-bf31-794daf6a6664: #7fe1d81a; /* 10% teal */
--token-b691b4a6-d9da-4ef2-a503-3357122b1c05: #7fe1d880; /* 50% teal */
/* ── Green scale (success/illustration) ── */
--token-fb75a0f1-ef0d-4cd0-b035-52b0a66597a5: #ebf6f1; /* Green 50 */
--token-ea1d2417-970c-429a-96cf-61d313b27201: #5eb88d; /* Green 400 — success */
--token-01fcf22c-25b5-4041-b6b4-914c9a27d97d: #3ba974; /* Green 500 */
--token-4c6e8f76-99ed-4388-8d63-743a8329eb06: #002614; /* Green 900 */
/* Green alphas */
--token-2d3b885a-b79c-4060-95e2-74f684f501c9: #3ba9741a; /* 10% green */
--token-fef45202-2a56-43db-b877-d99e43cf709b: #3ba97480; /* 50% green */
```
### Tier 2: Semantic Aliases
```css
:root {
/* Surfaces */
--mixpanel-bg-surface: rgb(21, 0, 64); /* alias: brand-surface-1 — hero & dark sections */
--mixpanel-accent: rgb(51, 0, 31); /* alias: brand-surface-2 — secondary dark surface */
--mixpanel-bg-app: #ffffff1a; /* alias: --token-6764a1fd — frosted overlay */
/* Text */
--mixpanel-text-primary: #000000b3; /* alias: --token-bd3d1d95 — body on light bg */
--mixpanel-text-secondary: #515151; /* alias: --token-1df091b1 — secondary body */
--mixpanel-text-dark: #1f2023; /* alias: --token-7232f098 — near-black for headings on light */
/* Interactive / CTA */
--mixpanel-accent-cool: #7856ff; /* alias: --token-56e37a13 — primary interactive purple */
--mixpanel-accent-warm: #f8bc3c; /* alias: --token-41f750ab — gold highlight */
--mixpanel-accent-hover: #33001f; /* alias: --token-381ceba4 — CTA hover state */
/* Status */
--mixpanel-success: #5eb88d; /* alias: --token-ea1d2417 */
--mixpanel-warning: #ff7557; /* alias: --token-77665dd2 */
--mixpanel-error: #ffa693; /* alias: --token-5f0f29b4 */
/* Border radius */
--mixpanel-radius-sm: 6px; /* small inputs, selects */
--mixpanel-radius-md: 16px; /* cards, secondary buttons, modals */
--mixpanel-radius-lg: 100px; /* PRIMARY pill CTA buttons */
}
```
### Tier 3: Component Applications
```css
/* Primary Button */
--btn-primary-bg: var(--mixpanel-accent-cool); /* #7856ff */
--btn-primary-bg-hover: var(--mixpanel-accent-hover); /* #33001f */
--btn-primary-text: var(--token-e006cb29-962d-4571-b5c1-b85b4d02ffaa); /* #fff */
--btn-primary-radius: var(--mixpanel-radius-lg); /* 100px — pill */
/* Secondary / Ghost Button */
--btn-secondary-radius: var(--mixpanel-radius-md); /* 16px — rounded rect */
/* Nav */
--nav-bg: transparent; /* backdrop-filter: blur(10px) */
--nav-text: var(--token-e006cb29-962d-4571-b5c1-b85b4d02ffaa); /* white on dark */
/* Input focus ring */
--input-focus-ring: var(--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4); /* #7856ff1a — 4px ring */
/* Status backgrounds */
--status-success-bg: var(--token-fb75a0f1-ef0d-4cd0-b035-52b0a66597a5); /* #ebf6f1 */
--status-warning-bg: var(--token-63c6cad7-0b5c-4cb8-984f-db563ce50cb4); /* #fff0ed */
--status-error-bg: var(--token-1cecf042-dd98-4d2e-8d03-66e07eb8718a); /* #fff7f2 */
```
### Accent / Brand Mark Subgroup
| Token | Value | Use |
|---|---|---|
| `brand-mark-1` | `#72bef4` | SVG brand mark — sky blue segment |
| `brand-mark-2` | `#f8bc3c` | SVG brand mark — gold segment |
| `brand-mark-3` | `#a993ff` | SVG brand mark — lilac segment |
| `brand-mark-4` | `#5fb6ac` | SVG brand mark — teal segment |
| `--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4` | `#7856ff1a` | Purple tinted tile bg |
| `--token-89beaa91-e6e0-4698-8188-92e76861da74` | `#ff75571a` | Coral tinted tile bg |
> **These are illustration / data-visualisation colours only.** NEVER use them for interactive states, text, or surface fills in brand UI.
---
## 3. Typography System
### Font Stack
```css
/* Heading typeface */
--font-heading: "Garnett Medium", "Garnett Medium Placeholder", sans-serif;
--font-heading-italic: "Garnett Regular", "Garnett Regular Placeholder", sans-serif;
--font-heading-semi: "Garnett Semibold", "Garnett Semibold Placeholder", sans-serif;
/* UI / body typeface */
--font-ui: "DM Sans", "DM Sans Placeholder", sans-serif;
/* Monospace (data tables, code) */
--font-mono: "Apercu Mono Pro Regular", "Apercu Mono Pro Medium", monospace;
/* Fallback body (third-party / consent UI only — NOT brand UI) */
--font-consent: "Source Sans Pro", sans-serif;
```
> **Garnett** is loaded from Framer CDN. It is the exclusive heading font. DM Sans is the UI font for nav, buttons, captions. Inter is present in Framer runtime but is NOT a brand font — do not use it in brand components.
### Composite Type Groups
```css
/* ── Display / Hero ── */
.type-display {
font-family: var(--font-heading);
font-size: 60px; /* --mixpanel-font-size-3xl */
font-weight: 400; /* Garnett Medium renders as medium at weight 400 */
line-height: 72px; /* --mixpanel-line-height-loose */
letter-spacing: -1.2px;
/* Used: h1 hero headline */
}
/* ── Section Heading / H2 ── */
.type-h2 {
font-family: var(--font-heading);
font-size: 48px; /* --mixpanel-font-size-2xl */
font-weight: 400;
line-height: 57.6px; /* 1.2× size */
letter-spacing: -0.96px;
/* Used: feature section headings */
}
/* ── Sub-section Heading / H3 ── */
.type-h3 {
font-family: var(--font-heading);
font-size: 36px; /* --mixpanel-font-size-xl */
font-weight: 400;
line-height: 43.2px; /* 1.2× size */
letter-spacing: -0.72px;
/* Used: sub-feature headers, stat labels */
}
/* ── Large Body / Feature ── */
.type-lg {
font-family: var(--font-ui);
font-size: 18px; /* --mixpanel-font-size-lg */
font-weight: 400;
line-height: 25.2px; /* --mixpanel-line-height-normal */
letter-spacing: 0px;
/* Used: feature card body, h6 section labels */
}
/* ── Body / Default ── */
.type-body {
font-family: var(--font-ui);
font-size: 16px; /* --mixpanel-font-size-md */
font-weight: 400;
line-height: 25.6px; /* 1.6× size */
letter-spacing: 0.32px;
/* Used: paragraph body text */
}
/* ── Small / UI Labels ── */
.type-sm {
font-family: var(--font-ui);
font-size: 14px; /* --mixpanel-font-size-sm */
font-weight: 400;
line-height: 21px; /* --mixpanel-line-height-tight */
letter-spacing: 0px;
/* Used: nav items, tag labels, secondary captions */
}
/* ── Caption / Micro ── */
.type-xs {
font-family: var(--font-ui);
font-size: 12px; /* --mixpanel-font-size-xs */
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
/* Used: legal text, breadcrumbs, meta */
}
/* ── Button Label ── */
.type-button {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 500; /* --mixpanel-font-weight-medium */
line-height: 1;
letter-spacing: 0px;
/* Used: all CTA and button text */
}
```
### Weight Scale
| Token | Value | Use |
|---|---|---|
| `--mixpanel-font-weight-regular` | `400` | All headings (Garnett reads as Medium at 400), body text |
| `--mixpanel-font-weight-medium` | `500` | Button labels, nav CTA items |
> **Note:** Garnett Medium is loaded as `font-weight: normal / 400`. The visual weight comes from the typeface, not the numeric weight declaration. DM Sans 500 is used for interactive chrome.
---
## 4. Spacing & Layout
### Base Unit & Scale
```css
:root {
/* Spacing scale — anchored to extracted tokens */
--mixpanel-space-xs: 10px; /* Tight component gap (nav items gap: 10px) */
--mixpanel-space-sm: 32px; /* Section inner padding, card gap */
--mixpanel-space-md: 40px; /* Section content padding */
--mixpanel-space-lg: 104px; /* Section vertical rhythm (large) */
--mixpanel-space-xl: 160px; /* Hero / full-bleed section padding */
}
```
> **Note on grid:** `--mixpanel-space-xs` is `10px` (not a strict 4px multiple). This is an extracted value — use it as-is for nav gaps. For all other spacing, prefer multiples of 8px (`32px`, `40px`, `104px`, `160px` are all 8px-grid).
### Grid & Breakpoints
The site uses a fluid Framer canvas with many breakpoints. Treat these as the canonical responsive tiers:
| Tier | Breakpoint | Notes |
|---|---|---|
| Mobile S | 360px | Smallest confirmed breakpoint |
| Mobile L | 469px | Small phone landscape |
| Tablet | 767px | iPad portrait |
| Tablet L | 991px | iPad landscape / small desktop |
| Desktop | 1200px | Standard desktop |
| Wide | 1439px | Large desktop |
| Ultra | 1921px | 4K+ |
```css
/* Container max-widths (inferred from breakpoints) */
--container-sm: 600px;
--container-md: 991px;
--container-lg: 1200px;
--container-xl: 1439px;
```
### Layout Primitives
```css
/* Navigation layout (from computed styles) */
.layout-nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--mixpanel-space-xs); /* 10px */
backdrop-filter: blur(10px);
}
/* CTA / button row layout */
.layout-cta-row {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0px;
}
/* Inline link layout */
.layout-link {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1px;
}
```
---
## 5. Page Structure & Layout Patterns
> No page screenshots available. All rows inferred from LAYOUT DIGEST, component inventory, and computed structural styles. Inferred rows are marked "(inferred)".
### 5.1 Section Map
| # | Section | Layout Type | Key Elements | Confidence |
|---|---|---|---|---|
| 1 | Navigation / Header | Flex column, centered, blur | Logo, nav links, "Log In", "Get Started Free" pill CTA, "Contact Sales" link | extracted |
| 2 | Hero | Full-bleed dark surface (`rgb(21,0,64)`) | H1 display text (60px/Garnett), sub-headline, dual CTAs, product screenshot/animation | inferred |
| 3 | Logo / Social Proof Bar | Horizontal flex, centered | Customer logo lockup, marquee/scroll animation | inferred |
| 4 | Feature Grid | 2-col or 3-col grid, dark surface | H2 section heading, feature cards with icon + h6 + body | inferred |
| 5 | Stats / Metrics | 3-col flex, `rgb(21,0,64)` bg | H2 large numerics (48px), label below, e.g. "15", "5", "10" | inferred |
| 6 | Mixpanel AI Feature | 2-col split, `rgb(51,0,31)` surface | H3 heading, body text, screenshot/UI demo | inferred |
| 7 | "Why teams choose" | Dark section, H3, feature list | Testimonial or benefit bullets | inferred |
| 8 | Enterprise-Ready | Dark `rgb(21,0,64)` bg | H3, copy, 3-col feature cards (perf / ecosystem / security) | inferred |
| 9 | Case Study Carousel | Horizontal scroll animation | Customer logos, case study cards — `spzCaseStudyScroll` keyframe | extracted |
| 10 | Pricing / CTA Banner | Full-bleed, pill CTA | Headline + "Get Started Free" + "Contact Sales" | inferred |
| 11 | Footer | Multi-col grid, dark | Nav links, legal, social icons | inferred |
### 5.2 Layout Patterns
**Navigation:** `display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; backdrop-filter: blur(10px)`. Items are `font-size: 14px` DM Sans. CTA "Get Started Free" is a pill button (`border-radius: 100px`, bg: `#7856ff`). "Contact Sales" is a ghost/link button.
**Hero Section:** Full-bleed `background-color: rgb(21, 0, 64)`. H1 is `font-size: 60px`, `line-height: 72px`, `letter-spacing: -1.2px`, `text-align: center`. CTA row is `display: flex`, centered, gap `~32px`. Section vertical padding: `var(--mixpanel-space-xl)` (160px) top, `var(--mixpanel-space-lg)` (104px) bottom.
**Feature Grid:** `display: grid`, inferred 3-column at ≥1200px, 1-column at ≤767px. Card gap: `var(--mixpanel-space-sm)` (32px). Each card: `border-radius: var(--mixpanel-radius-md)` (16px), coloured tinted background (e.g. `#7856ff1a` for purple tiles, `#ff75571a` for coral tiles).
**Stats Section:** `display: flex; flex-direction: row; justify-content: center; gap: var(--mixpanel-space-md)` (40px). Numbers at `font-size: 48px` / Garnett, labels at `font-size: 16px` / DM Sans.
**Case Study Carousel:** CSS keyframe `spzCaseStudyScroll` — `translateX(0px → -2453px)` desktop, `translateX(0px → -1893px)` mobile. Infinite loop scroll.
### 5.3 Visual Hierarchy
- **Primary CTA:** "Get Started Free" — pill shape, `background: #7856ff`, white text, `font-weight: 500`
- **Secondary CTA:** "Contact Sales" — ghost/link style, `color: #ffffff`, no fill
- **Heading prominence:** Display hierarchy strictly follows `60px → 48px → 36px → 18px`, all Garnett Medium
- **Whitespace rhythm:** Sections separated by `104px` or `160px` vertical padding — generous breathing room
- **Image position:** Product UI screenshots appear right-aligned in 2-col splits (inferred from common SaaS pattern + Framer canvas signals)
- **Dark-on-dark depth:** `rgb(51,0,31)` accent surface used to lift the Mixpanel AI feature block above the main `rgb(21,0,64)` surface
### 5.4 Content Patterns
**Repeating pattern — Feature Card:**
```
[Tinted tile bg]
[Icon / illustration]
[h6: 18px / Garnett]
[body: 16px / DM Sans]
```
**Repeating pattern — Stat Block:**
```
[Large number: 48px / Garnett, white]
[Descriptor: 16px / DM Sans, white 70%]
```
**Repeating pattern — Section Header:**
```
[H2 or H3: Garnett, white or light]
[Subtitle: 16–18px DM Sans, white 70%]
[Optional: pill CTA below]
```
---
## 6. Component Patterns
### 6.1 Primary CTA Button
**Anatomy:** `<a>` or `<button>` → `[label text]` + optional `[arrow icon]`
| State | Background | Text | Border | Transform |
|---|---|---|---|---|
| Default | `#7856ff` | `#ffffff` | none | none |
| Hover | `#33001f` + `rgba(255,255,255,0.3)` overlay | `#ffffff` | none | none |
| Focus-visible | same as hover | `#ffffff` | none | outline: none (custom ring) |
| Active | same as hover | `#ffffff` | none | none |
| Disabled | `#7856ff66` (40% opacity) | `#ffffff80` | none | none |
| Loading | `#7856ff` + spinner overlay | — | none | none |
```tsx
import { useState } from 'react';
interface CTAButtonProps {
label: string;
href?: string;
onClick?: () => void;
disabled?: boolean;
loading?: boolean;
variant?: 'primary' | 'secondary';
}
export function CTAButton({
label,
href,
onClick,
disabled = false,
loading = false,
variant = 'primary',
}: CTAButtonProps) {
const [hovered, setHovered] = useState(false);
const baseStyles: React.CSSProperties = {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
padding: '14px 28px',
borderRadius: variant === 'primary'
? 'var(--mixpanel-radius-lg)' // 100px — pill
: 'var(--mixpanel-radius-md)', // 16px — secondary
fontFamily: '"DM Sans", sans-serif',
fontSize: '16px',
fontWeight: 500,
lineHeight: 1,
textDecoration: 'none',
cursor: disabled || loading ? 'not-allowed' : 'pointer',
transition: `background ${var_('--mixpanel-ease-default')} 0.2s`,
outline: 'none',
border: 'none',
// State-driven colours
background: disabled
? '#7856ff66'
: hovered
? 'linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 100%), #33001f'
: '#7856ff',
color: disabled ? '#ffffff80' : '#ffffff',
opacity: loading ? 0.8 : 1,
};
const Tag = href ? 'a' : 'button';
return (
<Tag
href={href}
onClick={!disabled && !loading ? onClick : undefined}
style={baseStyles}
disabled={Tag === 'button' ? disabled || loading : undefined}
aria-disabled={disabled || loading}
onMouseEnter={() => !disabled && setHovered(true)}
onMouseLeave={() => setHovered(false)}
onFocus={() => !disabled && setHovered(true)}
onBlur={() => setHovered(false)}
>
{loading ? (
<span
style={{
display: 'inline-block',
width: '16px',
height: '16px',
border: '2px solid rgba(255,255,255,0.4)',
borderTopColor: '#ffffff',
borderRadius: '50%',
animation: '__framer-loading-spin 0.7s linear infinite',
}}
aria-label="Loading"
/>
) : (
<>
{label}
{/* Arrow icon reveals on hover — from extracted hover CSS */}
<span
style={{
display: hovered ? 'inline' : 'none',
transition: 'transform 0.2s ease',
}}
aria-hidden
>
→
</span>
</>
)}
</Tag>
);
}
// Helper to pass CSS vars as strings in style objects
function var_(name: string) { return `var(${name})`; }
```
---
### 6.2 Navigation Bar
**Anatomy:** `<nav>` → `[logo]` + `[nav links]` + `[log in link]` + `[Contact Sales ghost]` + `[Get Started Free pill CTA]`
| State | Background | Backdrop |
|---|---|---|
| Default | transparent | `blur(10px)` |
| Scrolled (inferred) | `rgba(21,0,64,0.85)` | `blur(10px)` |
```tsx
export function NavBar() {
return (
<nav
role="navigation"
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
gap: 'var(--mixpanel-space-xs)', // 10px
padding: '0 var(--mixpanel-space-sm)', // 0 32px
backdropFilter: 'blur(10px)',
position: 'sticky',
top: 0,
zIndex: 100,
background: 'transparent',
}}
>
{/* Logo */}
<a href="/" aria-label="Mixpanel home">
{/* SVG logo here */}
</a>
{/* Nav links */}
<ul style={{ display: 'flex', gap: 'var(--mixpanel-space-xs)', listStyle: 'none', margin: 0, padding: 0 }}>
{['Platform', 'Solutions', 'Pricing', 'Blog'].map((item) => (
<li key={item}>
<a
href={`/${item.toLowerCase()}`}
style={{
fontFamily: '"DM Sans", sans-serif',
fontSize: '14px',
fontWeight: 400,
color: '#ffffff',
textDecoration: 'none',
}}
>
{item}
</a>
</li>
))}
</ul>
{/* Auth CTAs */}
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--mixpanel-space-xs)' }}>
<a href="/login" style={{ color: '#ffffff', fontSize: '14px', fontFamily: '"DM Sans", sans-serif', textDecoration: 'none' }}>
Log In
</a>
<CTAButton label="Get Started Free" href="/signup" />
</div>
</nav>
);
}
```
---
### 6.3 Text Input
**Anatomy:** `<label>` → `<input>` with focus ring
| State | Border | Box-Shadow | Background |
|---|---|---|---|
| Default | `1px solid #d5d5d5` | none | `#ffffff` |
| Hover | `1px solid #a2a2a2` | none | `#ffffff` |
| Focus | `1px solid #7856ff` | `0px 0px 0px 4px #7856ff1a` | `#ffffff` |
| Error | `1px solid #ff7557` | none | `#fff7f2` |
| Error focus | `1px solid #ff7557` | none | `#fff7f2` |
| Disabled | `1px solid #dfdfdf` | none | `#f4f4f4` |
| Autofill | — | `0 0 0 56px #fff inset` | overridden by inset shadow |
```tsx
interface TextInputProps {
label: string;
error?: string;
disabled?: boolean;
placeholder?: string;
value?: string;
onChange?: (v: string) => void;
}
export function TextInput({ label, error, disabled, placeholder, value, onChange }: TextInputProps) {
return (
<label
data-framer-name={error ? 'Error' : 'Default'}
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
>
<span style={{
fontFamily: '"DM Sans", sans-serif',
fontSize: '14px',
fontWeight: 400,
color: 'var(--mixpanel-text-secondary)', // #515151
}}>
{label}
</span>
<input
className="framer-form-input"
disabled={disabled}
placeholder={placeholder}
value={value}
onChange={e => onChange?.(e.target.value)}
style={{
fontFamily: '"DM Sans", sans-serif',
fontSize: '16px',
padding: '12px 16px',
borderRadius: 'var(--mixpanel-radius-sm)', // 6px
border: error ? '1px solid #ff7557' : '1px solid #d5d5d5',
background: error ? '#fff7f2' : disabled ? '#f4f4f4' : '#ffffff',
color: 'var(--mixpanel-text-primary)',
outline: 'none',
transition: 'box-shadow var(--mixpanel-ease-default) 0.15s, border-color var(--mixpanel-ease-default) 0.15s',
}}
onFocus={e => {
if (!error) e.target.style.boxShadow = '0px 0px 0px 4px var(--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4)';
}}
onBlur={e => { e.target.style.boxShadow = 'none'; }}
/>
{error && (
<span style={{ fontSize: '12px', color: '#ff7557', fontFamily: '"DM Sans", sans-serif' }}>
{error}
</span>
)}
</label>
);
}
```
---
### 6.4 Feature Card
**Anatomy:** `[tinted bg container]` → `[icon/illustration]` + `[h6 title]` + `[body text]`
```tsx
interface FeatureCardProps {
title: string;
body: string;
icon?: React.ReactNode;
tint?: 'purple' | 'coral' | 'gold' | 'teal';
}
const TINT_COLOURS = {
purple: 'var(--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4)', // #7856ff1a
coral: 'var(--token-89beaa91-e6e0-4698-8188-92e76861da74)', // #ff75571a
gold: 'var(--token-442f5755-6102-40d2-8774-217102ab8361)', // #f9c85f1a
teal: 'var(--token-1d930f62-deb5-4769-bf31-794daf6a6664)', // #7fe1d81a
};
export function FeatureCard({ title, body, icon, tint = 'purple' }: FeatureCardProps) {
return (
<div style={{
background: TINT_COLOURS[tint],
borderRadius: 'var(--mixpanel-radius-md)', // 16px
padding: 'var(--mixpanel-space-sm)', // 32px
display: 'flex',
flexDirection: 'column',
gap: '16px',
}}>
{icon && <div aria-hidden>{icon}</div>}
<h6 style={{
fontFamily: '"Garnett Medium", sans-serif',
fontSize: '18px',
fontWeight: 400,
lineHeight: '25.2px',
color: '#ffffff',
margin: 0,
}}>
{title}
</h6>
<p style={{
fontFamily: '"DM Sans", sans-serif',
fontSize: '16px',
fontWeight: 400,
lineHeight: '25.6px',
color: 'var(--token-61930e01-5681-4131-8dc8-84bf4136e86b)', // #ffffffb3 — 70% white
margin: 0,
}}>
{body}
</p>
</div>
);
}
```
---
### 6.5 Stat Block
**Anatomy:** `[large number]` + `[descriptor label]`
```tsx
export function StatBlock({ value, label }: { value: string; label: string }) {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
<span style={{
fontFamily: '"Garnett Medium", sans-serif',
fontSize: '48px',
fontWeight: 400,
lineHeight: '57.6px',
letterSpacing: '-0.96px',
color: '#ffffff',
}}>
{value}
</span>
<span style={{
fontFamily: '"DM Sans", sans-serif',
fontSize: '16px',
fontWeight: 400,
lineHeight: '25.6px',
color: 'var(--token-61930e01-5681-4131-8dc8-84bf4136e86b)', // #ffffffb3
}}>
{label}
</span>
</div>
);
}
```
---
## 7. Elevation & Depth
```css
/* ── Shadow tokens ── */
:root {
/* Consent modal — NOT brand UI */
--shadow-modal: rgba(0, 0, 0, 0.1) 0px 0px 18px 0px;
/* Carousel nav button hover */
--shadow-carousel-btn: rgba(31, 32, 35, 0.1) 0px 4px 8px -2px,
rgba(31, 32, 35, 0.06) 0px 2px 4px -2px;
/* Mixpanel brand UI uses ZERO box-shadows for elevation.
Depth is achieved through colour contrast:
- Dark surface #150040 (base)
- Accent surface #33001f (lifted)
- Tinted tile overlays (#7856ff1a, #ff75571a etc.) for card depth
*/
}
/* ── Border tokens ── */
:root {
--border-subtle: 1px solid var(--token-d13d971c-755e-41ed-8756-d8bff28b51c7); /* #eaeaea */
--border-default: 1px solid var(--token-40b757b4-43be-43ca-be8c-24266f5b85e7); /* #d5d5d5 */
--border-strong: 1px solid var(--token-b2477f13-2734-44dc-8345-60e794b73be9); /* #797979 */
}
/* ── Z-index scale ── */
:root {
--z-base: 0;
--z-raised: 10;
--z-nav: 100; /* Sticky nav with backdrop blur */
--z-modal: 1000;
--z-overlay: 2000;
}
```
**Layering principle:** Mixpanel uses colour-contrast depth, not shadow-based elevation. The deep purple surface (`#150040`) is ground. The crimson surface (`#33001f`) is level 1. Tinted overlays (`#7856ff1a`) are level 2. Shadows are reserved for third-party consent UI only.
---
## 8. Motion
```css
/* ── Easing ── */
:root {
--mixpanel-ease-default: ease; /* All transitions — extracted from 60 elements */
--ease-modal: opacity 0.35s; /* Modal fade — extracted from consent modal */
}
/* ── Duration scale (inferred — no explicit duration tokens extracted) ── */
:root {
--duration-fast: 150ms; /* Button hover colour */
--duration-normal: 200ms; /* State transitions */
--duration-slow: 350ms; /* Modal open/close */
}
/* ── Keyframes (extracted) ── */
/* Text caret blink — typewriter hero effect */
@keyframes caret-move {
0% { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}
@keyframes caret-line {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Case study card marquee — desktop */
@keyframes spzCaseStudyScroll {
0% { transform: translateX(0px); }
100% { transform: translateX(-2453px); }
}
/* Case study card marquee — mobile */
@keyframes spzCaseStudyScrollMobile {
0% { transform: translateX(0px); }
100% { transform: translateX(-1893px); }
}
/* Framer loading spinner */
@keyframes __framer-loading-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
```
### Motion Rules
- **Button hover:** `background` transition only — `200ms ease` — no scale, no translate
- **Link hover:** colour/text-decoration change, no motion
- **Modal:** `opacity 0.35s ease` — no slide, no scale
- **Carousel marquee:** CSS keyframe only, `animation-timing-function: linear`, infinite — NEVER JS-driven scroll for this effect
- **No decorative motion:** Do not add entrance animations, parallax, or page transitions not present in the extracted keyframes
---
## 9. Anti-Patterns & Constraints
1. **NEVER use rectangular or rounded-rect buttons for primary CTAs → Why:** AI agents default to `border-radius: 8px` or `border-radius: 4px` on buttons. On Mixpanel, every primary CTA observed in the page (`Learn More`, `Contact Sales`, `Get Started Free`) has `border-radius: 100px` — the pill shape is a brand signature. Using `8px` destroys brand recognition immediately. → **What to do instead:** Always apply `border-radius: var(--mixpanel-radius-lg)` (100px) to primary buttons. Reserve `var(--mixpanel-radius-md)` (16px) for secondary/utility buttons (cookie banners, consent UI, non-brand elements).
2. **NEVER use `Inter` as a heading or body font in brand components → Why:** Inter is present in Framer's runtime bundle but is NOT a Mixpanel brand font. AI agents frequently default to Inter because it appears in font declarations. Using Inter for headings makes the UI look generic — Garnett is the visual differentiator. → **What to do instead:** Use `"Garnett Medium", "Garnett Medium Placeholder", sans-serif` for ALL headings (h1–h3, display text). Use `"DM Sans", "DM Sans Placeholder", sans-serif` for all UI body text and labels.
3. **NEVER hardcode hex colour values in component styles → Why:** With 139+ colour tokens extracted, AI will reach for the raw hex (`#7856ff`, `#33001f`) and embed it directly in JSX or CSS, bypassing the token layer. When brand colours update, every hardcoded value must be hunted down manually. → **What to do instead:** Always use `var(--mixpanel-accent-cool)` or `var(--token-56e37a13-9ae4-4ac2-9327-6460449e8c2b)` — even in inline styles.
4. **NEVER use spacing values not in the extracted scale → Why:** AI will invent plausible-looking values like `24px`, `48px`, `80px` for section padding. These are off-scale for Mixpanel's actual rhythm (`32px / 40px / 104px / 160px`) and create visual inconsistency between sections. → **What to do instead:** Map every spacing decision to `var(--mixpanel-space-xs/sm/md/lg/xl)`. If the value isn't in the scale, use the nearest token and flag for design review.
5. **NEVER apply `box-shadow` for card elevation in brand UI → Why:** AI agents apply `box-shadow: 0 4px 12px rgba(0,0,0,0.1)` to cards by default, which is correct for light-mode SaaS UIs. Mixpanel's dark surface design uses tinted alpha overlays (`#7856ff1a`, `#ff75571a`) for depth — shadows on dark backgrounds look muddy and wrong. → **What to do instead:** Use `background: var(--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4)` (purple tint) or the appropriate hue's `1a` alpha token as the card background. No box-shadow.
6. **NEVER use warm brand colours (salmon, peach, orange, gold) for interactive states → Why:** The extended palette (`#ff7557`, `#ffb27a`, `#f8bc3c`) exists for data visualisation, illustration, and status indicators. AI agents will reach for these warm tones as hover/active colours because they look like brand colours. Using them on interactive elements confuses status signals (coral = error/warning) with interaction signals (purple = clickable). → **What to do instead:** All interactive hover states use `var(--mixpanel-accent-hover)` (`#33001f`) or the `rgba(255,255,255,0.3)` overlay pattern on the purple base.
7. **NEVER construct dynamic Tailwind class names with template literals → Why:** `bg-[var(--${tokenName})]` is undetectable at build time and will be purged by Tailwind's JIT compiler, producing invisible elements with no background. → **What to do instead:** Either use the full static class `bg-[var(--mixpanel-accent-cool)]` or apply tokens via `style={{ background: 'var(--mixpanel-accent-cool)' }}`.
8. **NEVER skip disabled and loading states on buttons → Why:** AI generates only default+hover states, shipping interactive components that go visually silent when disabled or submitting. On Mixpanel's dark surfaces, a disabled button with no visual treatment is indistinguishable from an enabled one. → **What to do instead:** Implement all 6 states: default, hover, focus, active, disabled (`opacity` + `cursor: not-allowed` + `#7856ff66` bg), loading (spinner from `__framer-loading-spin` keyframe).
9. **NEVER use `!important` overrides on token values → Why:** Framer's runtime injects many `--framer-*` variables and `!important` overrides break the cascade for Framer's own component state management (hover vars, link vars etc.) — the site will behave unpredictably in Framer preview. → **What to do instead:** Increase CSS specificity via class chaining (`.section .btn`) rather than `!important`.
10. **NEVER use `position: absolute` to lay out sections or grid columns → Why:** AI agents sometimes reach for absolute positioning to replicate pixel-precise designs from screenshots. On a responsive Framer site with 22 breakpoints, absolute positioning causes catastrophic layout breakage below 1200px. → **What to do instead:** Use `display: flex` (for nav, button rows, stat blocks) or `display: grid` (for feature cards) anchored to the spacing tokens. Let the flex/grid handle responsive reflow.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (165) */
--token-0e21f178-f274-4352-9c9b-1843aa8f96ac: #fafafa;
--token-53169d3b-ef02-446d-b74e-ba99b5631f33: #f4f4f4;
--token-d13d971c-755e-41ed-8756-d8bff28b51c7: #eaeaea;
--token-5020ef9c-5b71-44d4-bd5f-d2a9bd21f756: #dfdfdf;
--token-40b757b4-43be-43ca-be8c-24266f5b85e7: #d5d5d5;
--token-bd3d1d95-251e-4083-bbf9-f5d12be57000: #000000b3;
--token-3bbcbef0-a217-487e-ba28-f7bae939503d: #cacaca;
--token-b2477f13-2734-44dc-8345-60e794b73be9: #797979;
--token-1df091b1-845d-4e5b-8c87-2a4b568aafb6: #515151;
--token-7232f098-3b4b-4255-a43b-49b617b91f06: #1f2023;
--token-03ecf91b-5c34-4747-b23a-cb9f50717baf: #a2a2a2;
--token-b82b6552-5c75-4430-9d04-98a927f84335: #f2eeff;
--token-01d89e3a-d0e8-4281-86d9-49a5916819b6: #dad0ff;
--token-c87549d1-7f8a-4eb2-8c39-b920e430497b: #c1b1ff;
--token-8112c33d-0521-441e-abaa-5a3b53404976: #a993ff;
--token-aee2db48-b9ad-45f2-a599-e51f50573d3e: #9074ff;
--token-9c7ae297-c1fd-4753-b389-797cda840a3d: #5f41cf;
--token-d2b35def-1d27-40e3-9eab-fbdaa808e40c: #472ba0;
--token-6716e5f2-19ad-4e12-b849-4ff85ca2f24c: #2e1670;
--token-56e37a13-9ae4-4ac2-9327-6460449e8c2b: #7856ff;
--token-c6f0fad5-626e-4404-ab04-f579f6d1d84c: #150040;
--token-6b5ff142-1be7-4ade-b88e-68098c8b3d19: #f0f9fe;
--token-91c739bf-15b9-4633-8b6a-e0d585eeda8a: #d7edfc;
--token-2af103ed-2c89-4ff9-b567-060eb24784c8: #bee1fa;
--token-56ad35ca-5655-4bc9-a49f-e4c0cc2a523a: #a4d6f8;
--token-80c214e6-0b6f-4efe-b6e3-1b9be5e86b93: #8bccf6;
--token-c08039b2-fffa-441b-9ef0-a605f082840c: #72bef4;
--token-28826242-9d78-46de-81b8-3a9c4c98ba42: #5698c7;
--token-c3c6c23a-11f7-44d8-92dd-c2dd441b8fb0: #39729a;
--token-e3a3431a-c013-4492-80bc-0e6b8f062b77: #1d4b6d;
--token-d657287f-da17-4dd8-8de2-b77995c86ac3: #002540;
--token-8edeae9f-73cf-4fe6-9c09-b6b3acfb8342: #f2fcfb;
--token-865b31df-1e24-426f-8ebf-46cae24d6cbe: #dbf7f4;
--token-088316cc-a2a1-460b-8f7a-3de56f5cdc03: #c4f1ed;
--token-c2732af4-f34b-4391-a9c1-e021e382bcb5: #adece6;
--token-55659554-cd88-4f13-b2a3-3c96c18c3330: #96e6df;
--token-35c3a07a-4909-4d03-860a-d014048ef951: #7fe1d8;
--token-22b2eb26-1336-4200-bb6c-672a7d714ca1: #5fb6ac;
--token-43e4d9e8-2170-46a7-9b65-455c157ec9e5: #408a81;
--token-0f8f7cd1-eecc-4be6-94af-b798554ba1ac: #205f56;
--token-341b86a1-9f72-47fb-ba1f-01ad4ba6a009: #00332a;
--token-63c6cad7-0b5c-4cb8-984f-db563ce50cb4: #fff0ed;
--token-1f04fc5e-25a0-46c3-a070-0292f376998a: #ffd7cf;
--token-ea5767b4-1445-4aea-9912-712afa64338b: #ffbfb1;
--token-5f0f29b4-f453-48dd-9288-c29b2877825e: #ffa693;
--token-0af8cdbc-7123-4ebc-a4f3-d6e6cdfdb6d1: #ff8e75;
--token-77665dd2-a0b8-41a7-b815-ae73c0304a73: #ff7557;
--token-b34b719e-5aa9-4047-857f-d1b3c3db4427: #cc5849;
--token-847f599f-2c35-48bf-924c-a99852eb5d64: #993c3b;
--token-7e1ad347-2655-4b89-9dd0-c1b2ba35d639: #661d2d;
--token-381ceba4-805d-4c58-a48d-3423c1bd780b: #33001f;
--token-1cecf042-dd98-4d2e-8d03-66e07eb8718a: #fff7f2;
--token-6b2eddd7-974c-4512-8bb7-e79c45249d98: #ffe9da;
--token-bb7990dc-592a-43b8-a56d-af8323d80f7e: #ffdbc2;
--token-e7c59f6d-79ce-40e6-bc99-3d2b23d36b5d: #ffceaa;
--token-991a5b62-cd9d-44e9-8476-8a73a988b073: #ffc092;
--token-204638d8-90da-4e20-b6e9-330c969bdd2e: #ffb27a;
--token-858143d2-ff20-46f0-af19-a8210c7f02e1: #cc8c5e;
--token-1dfec4d5-2951-452c-b8d5-2810cea61cbb: #996642;
--token-b36f7e99-1edc-4887-825a-ea162b31d165: #664126;
--token-5431ff97-5459-4a1a-ad8e-c951e46db33d: #331b0a;
--token-98e92a13-89e8-480b-8ccd-095ec9bab12d: #fef8eb;
--token-08a8f956-bb25-4d1b-8055-2d99daa645fb: #fdecc8;
--token-7e748185-105c-445a-90bb-dd483eae925f: #fce0a5;
--token-a4ab18c1-3d69-4815-82d6-b65022e41b04: #fad482;
--token-331613de-5958-429b-80e2-cbf0035c2572: #f9c85f;
--token-41f750ab-d855-459d-9c11-215330d2869c: #f8bc3c;
--token-9142a197-4ff0-42ed-9899-71d675459945: #ca9430;
--token-5d97baa2-6eb7-46a8-85a3-1dddadabbf23: #9c6b25;
--token-dfcd2128-aa91-4ede-b436-8b25d7c3877e: #6e4319;
--token-a89749e6-d0dc-4875-a64b-1cd6662215a6: #401a0d;
--token-fb75a0f1-ef0d-4cd0-b035-52b0a66597a5: #ebf6f1;
--token-ab8e3c8c-72a0-4a19-9b52-2be3f8b94619: #c8e7d8;
--token-0de6d67e-2555-405d-aed7-3006f92ef650: #a5d7bf;
--token-8df0a3dc-5945-4caf-9479-82f0fa643896: #81c8a6;
--token-ea1d2417-970c-429a-96cf-61d313b27201: #5eb88d;
--token-01fcf22c-25b5-4041-b6b4-914c9a27d97d: #3ba974;
--token-432be826-c4fa-4d31-b601-e53e35a60318: #2c885c;
--token-25363588-18a9-4225-83ce-d879dc95e357: #1e6844;
--token-77c1a879-242b-4e55-8fb4-899bc76c103c: #0f472c;
--token-4c6e8f76-99ed-4388-8d63-743a8329eb06: #002614;
--token-b3f7fca7-b129-4023-9398-b200d3aa374a: #00000012;
--token-48690339-bf16-430a-9697-1bd55aab4129: #00000033;
--token-47d98113-dd72-46a2-8f44-340a2660d94c: #00000080;
--token-0272af3b-6cfb-42b4-b18a-5fa30333328a: #00000099;
--token-2ea9e44a-9d25-4377-a10c-7c522ecbd08c: #000000cc;
--token-3c8353da-b79a-41f9-820e-dcd3a1cb2238: #000000e6;
--token-ee9dd0b5-61bd-4144-80b2-f91e153af98d: #000000;
--token-6764a1fd-57f2-472f-b533-ddc0490cee8f: #ffffff1a;
--token-c84791c8-4c0b-4859-a261-4a6a94ff7efc: #ffffff33;
--token-88775f33-ebee-4131-9bf9-91797685cf14: #ffffff4d;
--token-75e06adb-961c-4b73-abd5-2e28e1462e19: #ffffff66;
--token-84c4b85c-26fa-4a1c-a363-29d072947058: #ffffff80;
--token-e006cb29-962d-4571-b5c1-b85b4d02ffaa: #ffffff;
--token-6e5e0bbf-5f9c-4969-aa07-f96a8cbf6af4: #7856ff1a;
--token-a976f64b-a3bd-4090-8aac-4f33c2f78abc: #7856ff33;
--token-a7a2b07a-c19d-4df5-8306-e6aff1fa5444: #7856ff4d;
--token-32b9004f-5995-4c71-8f1f-b8c8bff0dc32: #7856ff66;
--token-2698940e-6dae-49b5-a23f-f7ba9836d95f: #7856ff80;
--token-ed71f7b1-a4e9-432f-ab26-7737244f1615: #72bef41a;
--token-52776c39-efe9-4ed5-a1a2-59381cef7927: #72bef433;
--token-00265d9a-0f9c-4971-afff-981c0e297e54: #72bef44d;
--token-9974ab88-c3c7-4313-a9bb-cf14958efba5: #72bef466;
--token-3c78440a-36e4-41d5-93c2-e407a33347d0: #72bef480;
--token-1d930f62-deb5-4769-bf31-794daf6a6664: #7fe1d81a;
--token-038adbc5-564c-4ab8-a4f5-4c1420943576: #7fe1d833;
--token-087c12d6-85c7-4c94-855e-03b8684ad450: #7fe1d84d;
--token-1452e645-1fe5-470c-93cd-51e65e51b266: #7fe1d866;
--token-b691b4a6-d9da-4ef2-a503-3357122b1c05: #7fe1d880;
--token-89beaa91-e6e0-4698-8188-92e76861da74: #ff75571a;
--token-d3729d27-9761-43f6-9ecd-e349328ca59b: #ff755733;
--token-06ad1f4e-d57c-4f88-89d5-2840c338bd95: #ff75574d;
--token-67ff3a66-17f0-4807-91c9-ef0b812a9511: #ff755766;
--token-7ebc6f27-1cec-409a-ad76-e2f76db3e616: #ff755780;
--token-0639df16-760d-4c32-ba18-9f0f75289111: #ffb27a1a;
--token-0165c1e4-ea9a-466d-b3fe-886111792f84: #ffb27a33;
--token-d6aad835-0640-4994-8d28-a45bdbdeab1f: #ffb27a4d;
--token-01fe5457-ba60-4b4d-90d8-61d55e19bae7: #ffb27a66;
--token-34115f95-e365-4bd0-8e4d-0998167d86cc: #ffb27a80;
--token-442f5755-6102-40d2-8774-217102ab8361: #f9c85f1a;
--token-cdc06564-0c07-44bf-b408-e2014e8f65a4: #f9c85f33;
--token-fd9947d6-0cb6-4bb6-a9bb-c54a324d9f46: #f9c85f4d;
--token-d7099fc2-49ca-4c72-aa97-fa1709ed6250: #f9c85f66;
--token-a1c99728-1e22-42a5-b9c7-bfe6aac84856: #f9c85f80;
--token-2d3b885a-b79c-4060-95e2-74f684f501c9: #3ba9741a;
--token-ecb75364-44a3-4b41-a6fc-e4822e7d60c3: #3ba97433;
--token-0715e586-d504-4dfc-b6bd-4dc495a03c26: #3ba9744d;
--token-10ec0bd3-de37-41be-87e7-4d026dc6f30b: #3ba97466;
--token-fef45202-2a56-43db-b877-d99e43cf709b: #3ba97480;
--token-61930e01-5681-4131-8dc8-84bf4136e86b: #ffffffb3;
--token-004347a0-aa40-4566-b9d9-d7054ee6fb78: #00000005;
--token-0204e829-83d3-4f4e-a9e8-447393a1d160: #0000001a;
--token-1d3b2d93-ac26-4eb9-beae-35ab62ee5b1f: #ffffff14;
--brand-surface-1: rgb(21, 0, 64); /* Brand surface, dominant on 2 elements — e.g. "Enterprise-ready. Without the" /* mined from computed styles */ */
--brand-surface-2: rgb(51, 0, 31); /* Brand surface, dominant on 1 element — e.g. "Mixpanel AIAlways-on product i" /* mined from computed styles */ */
--brand-mark-1: rgb(114, 190, 244); /* Brand mark fill on 3 svg shapes — e.g. "rect" /* mined from svg fill */ */
--brand-mark-2: rgb(248, 188, 60); /* Brand mark fill on 1 svg shape — e.g. "path" /* mined from svg fill */ */
--brand-mark-3: rgb(169, 147, 255); /* Brand mark fill on 1 svg shape — e.g. "path" /* mined from svg fill */ */
--brand-mark-4: rgb(95, 182, 172); /* Brand mark fill on 1 svg shape — e.g. "path" /* mined from svg fill */ */
--mixpanel-bg-surface: rgb(21, 0, 64);
--mixpanel-accent: rgb(51, 0, 31);
--mixpanel-bg-app: #ffffff1a;
--mixpanel-text-primary: #000000b3;
--mixpanel-text-secondary: #515151;
--mixpanel-accent-cool: #7856ff;
--mixpanel-accent-warm: #f8bc3c;
--mixpanel-accent-hover: #33001f;
--mixpanel-success: #5eb88d;
--mixpanel-warning: #ff7557;
--mixpanel-error: #ffa693;
--token-5e6f0f1d-6bf1-4220-9323-3d853ae92047: #000000b3;
--mixpanel-text-dark: #1f2023;
--btn-primary-bg: var(--mixpanel-accent-cool);
--btn-primary-bg-hover: var(--mixpanel-accent-hover);
--nav-bg: transparent;
--status-success-bg: var(--token-fb75a0f1-ef0d-4cd0-b035-52b0a66597a5);
--status-warning-bg: var(--token-63c6cad7-0b5c-4cb8-984f-db563ce50cb4);
--status-error-bg: var(--token-1cecf042-dd98-4d2e-8d03-66e07eb8718a);
--border-subtle: 1px solid var(--token-d13d971c-755e-41ed-8756-d8bff28b51c7);
--border-default: 1px solid var(--token-40b757b4-43be-43ca-be8c-24266f5b85e7);
--border-strong: 1px solid var(--token-b2477f13-2734-44dc-8345-60e794b73be9);
--token-b5009146-1947-4c64-90c0-7d4a9a8addc9: #7856ff;
--token-83d403fd-78e6-4315-bbd6-91f605996145: #ffffff;
--token-5bd4258e-dc5f-4462-80e5-5a59ddc86803: #1f2023;
--token-812f0fdc-5f58-4679-b3f5-b6feb6c242d6: #ffd7cf;
/* Typography (32) */
--font-size-xs: 12px; /* 65 elements — e.g. p "Learn More", p "Log In", p "Contact Sales" /* mined from computed styles */ */
--font-size-sm: 14px; /* 27 elements — e.g. p "Introducing your alw", p "Platform", p "Solutions" /* mined from computed styles */ */
--font-size-md: 16px; /* 22 elements — e.g. p "Mixpanel AI", p "Give product, engine", p "Book a Demo" /* mined from computed styles */ */
--font-size-lg: 18px; /* 16 elements — e.g. h6 "Performance that sca", h6 "An open ecosystem", h6 "Secure by default" /* mined from computed styles */ */
--font-size-xl: 36px; /* 6 elements — e.g. h3 "Always-on product in", h3 "Why teams choose Mi", h3 "Enterprise-ready. W" /* mined from computed styles */ */
--font-size-2xl: 48px; /* 5 elements — e.g. h2 "15", h2 "5", h2 "10" /* mined from computed styles */ */
--font-size-3xl: 60px; /* 41 elements — e.g. h1 "Product analytics fo", span "Product", span "P" /* mined from computed styles */ */
--font-weight-regular: 400; /* 172 elements — e.g. h1 "Product analytics fo", h2 "15", h2 "5" /* mined from computed styles */ */
--font-weight-medium: 500; /* 14 elements — e.g. p "Learn More", p "Contact Sales", p "Get Started Free" /* mined from computed styles */ */
--line-height-tight: 21px; /* 17 elements — e.g. p "Introducing your alw", p "Learn what your user", p "Go beyond pageviews " /* mined from computed styles */ */
--line-height-normal: 25.2px; /* 16 elements — e.g. h6 "Performance that sca", h6 "An open ecosystem", h6 "Secure by default" /* mined from computed styles */ */
--line-height-loose: 72px; /* 41 elements — e.g. h1 "Product analytics fo", span "Product", span "P" /* mined from computed styles */ */
--btn-primary-text: var(--token-e006cb29-962d-4571-b5c1-b85b4d02ffaa);
--nav-text: var(--token-e006cb29-962d-4571-b5c1-b85b4d02ffaa);
--font-heading: "Garnett Medium", "Garnett Medium Placeholder", sans-serif;
--font-heading-italic: "Garnett Regular", "Garnett Regular Placeholder", sans-serif;
--font-heading-semi: "Garnett Semibold", "Garnett Semibold Placeholder", sans-serif;
--font-ui: "DM Sans", "DM Sans Placeholder", sans-serif;
--font-mono: "Apercu Mono Pro Regular", "Apercu Mono Pro Medium", monospace;
--font-consent: "Source Sans Pro", sans-serif;
--mixpanel-font-weight-regular: 400;
--mixpanel-font-weight-medium: 500;
--mixpanel-font-size-xs: 12px;
--mixpanel-font-size-sm: 14px;
--mixpanel-font-size-md: 16px;
--mixpanel-font-size-lg: 18px;
--mixpanel-font-size-xl: 36px;
--mixpanel-font-size-2xl: 48px;
--mixpanel-font-size-3xl: 60px;
--mixpanel-line-height-tight: 21px;
--mixpanel-line-height-normal: 25.2px;
--mixpanel-line-height-loose: 72px;
/* Spacing (14) */
--space-xs: 10px; /* 3 elements — e.g. nav .framer-vafqL, nav .framer-vafqL, nav .framer-vafqL /* mined from computed styles */ */
--space-sm: 32px; /* 3 elements — e.g. footer .framer-UjN3Y, footer .framer-UjN3Y, footer .framer-UjN3Y /* mined from computed styles */ */
--space-md: 40px; /* 3 elements — e.g. footer .framer-UjN3Y, footer .framer-UjN3Y, footer .framer-UjN3Y /* mined from computed styles */ */
--space-lg: 104px; /* 2 elements — e.g. section, section /* mined from computed styles */ */
--space-xl: 160px; /* 1 element — e.g. footer .framer-UjN3Y /* mined from computed styles */ */
--mixpanel-space-xs: 10px;
--mixpanel-space-sm: 32px;
--mixpanel-space-md: 40px;
--mixpanel-space-lg: 104px;
--mixpanel-space-xl: 160px;
--container-sm: 600px;
--container-md: 991px;
--container-lg: 1200px;
--container-xl: 1439px;
/* Radius (8) */
--radius-sm: 6px; /* 1 element — e.g. select .languageSelectorAccessible /* mined from computed styles */ */
--radius-md: 16px; /* 11 elements — e.g. button .trustarc-secondary-btn "Manage Options", button .trustarc-primary-btn "Accept All", button "Functional Only" /* mined from computed styles */ */
--radius-lg: 100px; /* 17 elements — e.g. a .framer-jt2bf "Learn More", a .framer-T4KPo "Contact Sales", a .framer-T4KPo "Get Started Free" /* mined from computed styles */ */
--mixpanel-radius-sm: 6px;
--mixpanel-radius-md: 16px;
--mixpanel-radius-lg: 100px;
--btn-primary-radius: var(--mixpanel-radius-lg);
--btn-secondary-radius: var(--mixpanel-radius-md);
/* Effects (4) */
--framer-will-change-override: none;
----backdrop-filter-role_navigation: backdrop-filter: blur(10px); /* Backdrop filter from role_navigation /* reconstructed */ */
--shadow-modal: rgba(0, 0, 0, 0.1) 0px 0px 18px 0px;
--shadow-carousel-btn: rgba(31, 32, 35, 0.1) 0px 4px 8px -2px,
rgba(31, 32, 35, 0.06) 0px 2px 4px -2px;
/* Motion (6) */
----motion-caret-move: @keyframes caret-move {
0% { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}; /* @keyframes caret-move */
----motion-caret-line: @keyframes caret-line {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes caret-line */
----motion-spzCaseStudyScroll: @keyframes spzCaseStudyScroll {
0% { transform: translateX(0px); }
100% { transform: translateX(-2453px); }
}; /* @keyframes spzCaseStudyScroll */
----motion-spzCaseStudyScrollMobile: @keyframes spzCaseStudyScrollMobile {
0% { transform: translateX(0px); }
100% { transform: translateX(-1893px); }
}; /* @keyframes spzCaseStudyScrollMobile */
----motion-__framer-loading-spin: @keyframes __framer-loading-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}; /* @keyframes __framer-loading-spin */
--ease-default: ease; /* 60 elements — e.g. a, a, a /* mined from computed styles */ */
```
## Appendix B: Token Source Metadata
```
tokenSource: extracted-css-vars
confidence: high
properties-found: 140 CSS custom properties
properties-mapped: 32 curated tokens mapped to standard semantic roles
extraction-method: Live DOM inspection of mixpanel.com
site-builder: Framer (confirmed — Framer runtime vars present)
Font sources:
- Garnett Medium, Regular, Semibold → Framer CDN (framerusercontent.com)
- DM Sans → Google Fonts CDN (fonts.gstatic.com)
- Apercu Pro (Medium, Regular, Bold), Apercu Mono Pro → Framer CDN
- Inter → Framer CDN (runtime dependency, NOT brand font)
- Source Sans Pro → TrustArc consent CDN (consent UI only)
Token naming:
- Original --token-{uuid} names PRESERVED exactly as extracted
- --mixpanel-* prefixed curated tokens are SYNTHETIC aliases
pointing to extracted values. Both names are valid;
--mixpanel-* names are preferred for new component code.
- --brand-surface-1, --brand-surface-2, --brand-mark-*
are mined from computed styles (not raw CSS vars) —
annotated "medium confidence" because they represent
dominant colours on specific elements, not explicit token assignments.
Near-duplicate flag:
506 near-duplicate colour pairs detected. The extended
token system is a full Framer design-token colour palette
with opacity scale variants (1a/33/4d/66/80) for every
accent hue. These are intentional, not duplicates —
they power tinted backgrounds and frosted overlays.
Do not merge. Reference the semantic alias tokens
(--mixpanel-*) which already select the canonical value
per hue.
Radius note:
--mixpanel-radius-md (16px) appears on 11 elements —
PREDOMINANTLY consent/cookie UI buttons (TrustArc).
Brand CTAs use --mixpanel-radius-lg (100px) exclusively.
Do not confuse the two contexts.
```More from the gallery
Browse all kits →You may also like
Contra
MITPlayful yet professional design system with teal and purple accents, bold typography, and vibrant accent surfaces—built for modern SaaS platforms and landing pages
Layout03
lightboldsaaslanding-page
DoorDash
MITClean, accessible food-delivery system with DoorDash's signature red accent, light neutral palette, and system-font typography—built for rapid product development
Layout03
lightecommsaasmobile
Mercedes-Benz
MITLuxe, minimalist design system with sharp black-and-white contrast and serif typography, crafted for premium automotive and lifestyle brands
Layout05
darkminimalboldecomm