What is Amplitude's primary brand color?

Amplitude's brand voltage is a saturated cobalt blue #1e61f0, with a deeper cobalt #0052f2 reserved for the gradient end-stops behind the embedded dashboard mock and a near-navy #001a4f used as the surface tone of the cobalt advantage tile below the fold. The cobalt appears just six times in the captured page — twice as text on the animated hero tagline, twice as a background fill inside the dashboard mock, twice as a border. The primary CTA pill is not cobalt; it is near-black ink #1a1f23. This reservation is the design move — the brand color belongs to the rotating verb in the headline, not to the call to action.

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

Amplitude's rendered marketing typography is Gellix, a contemporary geometric sans loaded inside a heavy fallback stack that walks Arial and system-ui. The CSS exposes IBM Plex Sans and IBM Plex Serif as the loaded webfonts (--font-ibm-plex-sans, --font-ibm-plex-serif), with Plex Sans active across body and labels. Display headlines sit at 60px in weight 700 with -1px tracking; section labels at 16-18px in weight 600; body at 14-16px in weight 400. Inter at the same weights is the closest open-source substitute for Gellix, and IBM Plex Sans itself is free under the OFL — so the loaded-font stack is already reproducible without any licensing work. Weight 600 is the system's emphasis tier; there is no 800+ moment anywhere on the page.

Why is Amplitude's primary CTA black instead of cobalt blue?

Amplitude inverts the dev-tools convention of filling the primary CTA with the brand color. The hero CTA is a 56px-tall near-black pill #1a1f23 with white text, sitting beside a transparent secondary button. The cobalt is reserved for the rotating headline word — the verb that completes the sentence 'The AI analytics platform for [faster answers].' Splitting the brand voltage and the call-to-action fill keeps both moments legible: the headline animation reads as the product's voice, and the CTA reads as a destination button rather than as a brand reinforcement. Stripe, Vercel, and Linear all use a similar split (their CTAs are also dark / monochrome rather than brand-colored).

What is Amplitude's corner-radius philosophy?

Amplitude runs a small-step radius scale anchored at 6px, with a fully-rounded pill for the primary CTA. 6px appears 55 times across cards, dropdowns, and feature cells; 8px is the secondary tier with 20 occurrences on slightly larger surfaces; 16px and 12px sit on the dashboard-mock chrome inside the hero. The pill (9999px / 30-32px) carries the primary CTA, the rotating-tagline highlight chip behind the animated word, and a handful of dashboard mock pills. There is no 4px tight tier — the smallest radius in the system is 6px, which keeps the surface language warmer than a typical dev-tools system.

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 Amplitude's specific moves: near-monochrome canvas with cobalt voltage reserved for a single animated headline word, black-pill primary CTA rather than a brand-colored fill, IBM Plex Sans across every typographic tier, embedded dashboard mock as the chromatic anchor instead of an abstract gradient, and a six-up advantage tile band in cobalt-indigo-violet-ink below the fold. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config. The one caveat: the rotating-headline move requires either real product motion or a Framer-Motion text-cycle component to land — a static cobalt word feels dead.

Amplitude Design System

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

About Amplitude DESIGN.md

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

Analytics & Data

Amplitude's marketing site does the opposite of what its category usually does. Where Mixpanel paints the hero violet and Segment fills its CDP page with deep navy, Amplitude sits on a near-monochrome canvas — a 60px IBM Plex Sans headline in pure black on white, with one cobalt-blue word that animates through "faster answers," "testing everything," "non-stop optimizations." The brand voltage is reserved entirely for that rotating verb. The primary CTA beneath the headline does not even use the cobalt — it is a 56px-tall near-black pill in ink #1a1f23 with white text, sitting next to a transparent secondary that opens a request-demo flow.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 18 color tokens drawn from a structural palette of near-blacks, cool grays, and a hairline cream, plus a brand tier of cobalt #1e61f0, deep cobalt #0052f2, navy #001a4f, and a single accent violet #a273ff that appears only in the "unfair advantage" band below the fold. 14 typography tokens span the Gellix display stack with IBM Plex Sans as the loaded body family — sizes go from 60px hero down to 12px metadata, with weight 600 doing the heading work and weight 400 the body. 16 components cover the black-pill primary, the dashboard-mock embed, the six-up advantage tile band, hairline cards, and the top-nav.

Feed this file to Claude or Cursor and it reproduces Amplitude's specific moves: near-monochrome canvas instead of brand-tinted gradient, cobalt voltage reserved for a single animated word, near-black pill CTA over the brand cobalt, and the embedded dashboard mock that does the chromatic job the hero itself refuses to do. The one move worth borrowing only if your product has a genuine analytics surface: the dashboard-as-hero embed. Most teams reach for an abstract brand gradient because they have nothing real to show.

What makes it distinct

Black CTA, blue voltagethe primary button fills with near-black #1a1f23 while cobalt #1e61f0 is reserved for the rotating tagline word
Animated word-swap headlinethe hero h1 cycles through four taglines, each rendered as a cobalt span inside a black sentence
Embedded dashboard herothe above-fold area shows a real-looking purple-tinted analytics mock rather than abstract brand chrome
Six-up advantage tile bandsaturated-fill cards in cobalt, indigo, violet, and ink build a horizontal advantage strip below the fold
IBM Plex Sans across every tierGellix is the visible display family but the loaded font variables walk IBM Plex Sans and IBM Plex Serif

Live at amplitude.com

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

amplitude.com

Explore Amplitude

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.

Amplitude design system FAQ

Common questions about Amplitude'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.

Amplitude — official site

Amplitude'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.