Assertive product-analytics brand: a bright white canvas broken by cool-gray bands, headlines in a heavy Gellix geometric sans at 700 with hard negative tracking, every CTA a black or white full pill, and one Amplitude blue reserved for links and active-state borders — with all the colour saved for a near-black IBM Plex Mono MCP terminal card.
Browse Amplitude in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: amplitude.com (live DOM, computed styles), 2026-07-18. Coverage: home / product landing. Logged-in analytics app not captured (needs login).
A bright, unfussy white analytics canvas that gets its personality from one thing: a very heavy geometric display face (Gellix) set at 700 with aggressively negative tracking, so the headline reads as a confident statement rather than decoration. Everything supporting it is quiet — cool-gray section washes, gray body copy, black-and-white pill buttons — which reserves colour almost entirely for a single Amplitude blue. The signature moment is the inverse: a near-black IBM Plex Mono terminal/MCP chat card where syntax colour (blue prompt, amber root-cause, green result) finally appears, making the data feel live. It deliberately avoids gradients-as-decoration, drop shadows, and the rainbow chart palette most analytics vendors lean on. Feels: assertive, engineered, clean, matter-of-fact.
| Token | Hex | Role / usage |
|---|---|---|
ink | #000000 | Headlines (h1/h2/h3), nav links |
ink-soft | #0c0c0e | Alternate heavy headline ink |
text | #171717 | UI label text, button labels on light |
body | #373d42 | Body / paragraph copy |
muted | #697077 | Secondary copy |
muted-2 | #50565b | Tertiary copy |
faint | #868d95 | Eyebrows / h4 kickers |
on-dark | #ffffff | All text on black + dark sections |
| Token | Hex | Role / usage |
|---|---|---|
canvas | #ffffff | Page background |
wash | #f2f4f8 | Full-bleed cool-gray section band |
wash-2 | #f1f4f9 | Second cool-gray band |
wash-3 | #f8f9fb | Palest inset |
cream | #f5f4f0 | Warm 44×44 icon tiles (10px radius) |
dark | #000000 | Inverted full-bleed sections, announcement bar |
dark-panel | #0d0d0f | Terminal / MCP card body |
dark-panel-2 | #111113 | Terminal chrome bar |
dark-chip | #1a1f23 | Mega-menu / dropdown surface (6px radius) |
navy | #001a4f | Deep-navy feature panel (364×500) |
prompt | #0b1424 | Active prompt row fill inside the dark card |
border-soft | rgba(0,0,0,.20) | Outline-button border on light |
border-dark | #444444 | Hairlines inside dark panels |
| Token | Hex | Role / usage |
|---|---|---|
blue | #1e61f0 | THE accent — links, "Install via AI" pill, active prompt border, mono caret |
blue-alt | #0052f2 | Gradient stop used in overlay washes |
violet | #7c3aed | Second stop of the one blue→violet gradient |
orb | #a273ff | Large blurred 397px background orb only |
green | #4ade80 | "via MCP" badge + positive result lines in the terminal |
amber | #fbbf24 | "Root cause:" line in the terminal |
red | #ff5f57 | Traffic-light dot on the window chrome |
#ffffff active · #e8e8f0 idle prompt · #dddddd key figure · #9999bb echoed query · #888888 detail · #666666/#555555 chrome labels · #3a3a3a dim/muted line
Rules. Blue #1e61f0 is the only accent allowed on chrome — every primary CTA is black or white, never blue. Green/amber exist *only* as syntax colour inside the dark terminal card, never as UI status chips. The blue→violet gradient appears once, as a background wash, never on a button.
Gellix, Arial, sans-serif__IBM_Plex_Sans, __IBM_Plex_Sans_Fallback (IBM Plex Sans)"IBM Plex Mono", Menlo, monospace| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 60/70 | 700 | -1px |
| Section h2 | 44/50.6 | 600 | -0.22px |
| Statement h2/h3 | 38/41.8 | 700 | -1.14px |
| Feature h3 | 36/44 | 600 | -0.5px |
| Card h3 | 24/26 | 600 | -0.5px |
| Eyebrow / h4 | 16/21.6 | 600 | -0.04px (#868d95) |
| Body | 18/28 | 400 | normal |
| Nav link | 16 | 600 | normal |
| Button label (hero) | 18 | 600 | normal |
| Button label (nav) | 16 | 600 | -0.04px |
| Mono terminal | 12.5/18.75 · 12/22.8 | 400-500 | normal |
| Mono chrome label | 11/28 | 400-600 | normal |
Patterns: weight tops out at 700 and only for the two heaviest display roles; everything else sits at 600. Tracking tightens hard as size grows (-1px at 60px, -1.14px at 38px) and relaxes to normal at body size. No uppercase anywhere — eyebrows are sentence case in gray, not tracked caps.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.