# Amplitude — Marketing site Design Spec

> Source: amplitude.com (live DOM, computed styles), 2026-07-18.
> Coverage: home / product landing. Logged-in analytics app not captured (needs login).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text

| 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 |

### Surfaces & borders

| 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 |

### Accent & semantic

| 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 |

### Mono / terminal text ladder

`#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.

## 3. Typography Rules

- Display + UI: `Gellix, Arial, sans-serif`
- Body fallback: `__IBM_Plex_Sans, __IBM_Plex_Sans_Fallback` (IBM Plex Sans)
- Mono: `"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.

## 4. Component Stylings

**Nav** — 64px (`--head-nav-height: 4rem`) transparent bar over the white canvas, no border, no backdrop blur. Wordmark + 4 links at 16/600 black; right cluster is a text "Login", an outline pill and a filled pill. A black announcement bar sits above it with a small blue `#1e61f0` pill CTA.

**Buttons** — two sizes, both fully rounded:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Nav primary | `#000000` | `#ffffff` | 1px `#000000` | 9999px | 40px | 0 16px | 16/600 -0.04px |
| Nav outline | transparent | `#171717` | 1px `rgba(0,0,0,.20)` | 9999px | 40px | 0 16px | 16/600 -0.04px |
| Hero primary | `#000000` | `#ffffff` | 1px `#000000` | 30px | 54px | 16px 30px | 18/600 |
| Hero secondary | `#ffffff` | `#000000` | 1px `#000000` | 30px | 54px | 16px 30px | 18/600 |
| On-dark primary | `#ffffff` | `#171717` | 1px `#ffffff` | 9999px | 40px | 0 16px | 16/600 |
| On-dark outline | `#000000` | `#ffffff` | 1px `#ffffff` | 9999px | 40px | 0 16px | 16/600 |
| Accent chip | `#1e61f0` | `#ffffff` | none | 9999px | 32px | 0 16px | 13/600 |
| Menu item | `#1a1f23` | `#ffffff` | none | 6px | 56px | 16px | 16/600 |

Transition on all buttons: `0.3s cubic-bezier(0.4, 0, 0.2, 1)`; accent chips use `color 0.15s cubic-bezier(0.4, 0, 0.2, 1)`. Hover fills: not captured (no explicit hover colour resolved from computed styles).

**Signature terminal / MCP card** — `#0d0d0f` body, `#111113` chrome bar with 3 traffic dots (`#ff5f57` + amber + green) and an 11/28 `#444444` "Cursor — Chat" label; rounded window; content set entirely in IBM Plex Mono 12/22.8. Query bubbles right-aligned on a dark pill; response lines colour-coded (`#fbbf24` root cause, `#4ade80` result, `#3a3a3a` dim). A green `#4ade80` "via MCP" badge sits at 9px.

**Prompt rows** — stacked suggestion rows, `#000000` fill with a `#444444` `>` caret at rest; the active row switches to `#0b1424` fill, a **1.5px `#1e61f0`** border, 10px radius, 50px height, and a blue `→` on the right.

**Icon tiles** — 44×44, `#f5f4f0` cream, 10px radius.

**Inputs** — not captured (no form fields on the landing page).

## 5. Layout Principles

Centered hero: headline, 18px gray sub, a two-pill CTA row, then a single mono install line. Below, the page alternates white with full-bleed `#f2f4f8` / `#f1f4f9` bands and one inverted black band. Feature sections use a left-copy / right-artifact split at roughly 40/60. Radius census across the page: 6px (menu), 8px, 10px (tiles, prompt rows), 12px, 16px, 18px, 30px (hero buttons), 32px, 9999px. Nav height 64px; secondary filter bars also 64px.

## 6. Depth & Elevation

Radius scale: `6 / 8 / 10 / 12 / 16 / 18 / 30 / 32 / 9999px`.

Shadows are nearly absent — the page separates by fill and hairline, not elevation. Only two recipes observed:

- `rgba(0, 0, 0, 0.1) 0px 0px 15px 5px` — soft ambient halo on the floating product card
- `rgba(0, 0, 0, 0) 0px 4px 16px 0px` — transparent placeholder (hover-ready)

Inside dark panels, depth comes from `#444444` hairlines and fill steps (`#0d0d0f` → `#0b1424`), never shadow.

## 7. Motion

Standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on buttons and interactive surfaces; a faster `color 0.15s cubic-bezier(0.4, 0, 0.2, 1)` on accent chips and mono rows. The terminal card types its answer out line by line with a block cursor. A `(prefers-reduced-motion: reduce)` query is present, so motion is opt-out aware. No scroll-jacking library detected.

## 8. Backgrounds, Effects & WebGL

Mostly flat solid fills. Three effects observed:

- A large 397px `#a273ff` block used as a heavily blurred violet orb behind dark sections.
- `linear-gradient(to right bottom, rgb(30, 97, 240), rgb(124, 58, 237))` — the single blue→violet brand gradient.
- Fade-to-black scrims over media: `linear-gradient(rgba(0,0,0,0), rgb(0,0,0) 80%, rgb(0,0,0))` and `linear-gradient(rgba(0,82,242,0) 0%, rgb(0,82,242) 100%)`.

Background `<video>` is used for the product demo. No canvas/WebGL, no grain, no backdrop-filter on the nav.

## 9. Do's and Don'ts

### Do
- Set headlines in Gellix at 600-700 with tracking tightened to -1px at large sizes.
- Keep every primary CTA black-on-white or white-on-black; make it a full pill (9999px, or 30px at the 54px hero size).
- Use `#1e61f0` only for links, small accent chips, and the active-state border.
- Break the page with full-bleed `#f2f4f8` bands rather than card shadows.
- Put all syntax colour (green/amber/blue) inside the dark IBM Plex Mono terminal card.
- Use gray `#868d95` sentence-case kickers instead of tracked uppercase eyebrows.

### Don't
- Don't make the primary button blue — blue is a link/accent colour here, not a CTA fill.
- Don't add drop shadows to cards; use fill steps and 1px hairlines.
- Don't introduce a multi-hue chart palette on the marketing surface.
- Don't set eyebrows in uppercase with positive tracking.
- Don't use the violet `#a273ff` as a foreground colour — it exists only as a blurred orb.
- Don't put the blue&rarr;violet gradient on text or buttons.

## 10. Responsive Behavior

Breakpoints observed in the site's media queries: `380px`, `480px`, `768px`, `769px`, `992px`, `1024px`, `1130px`, `1342px`. The primary desktop switch is `min-width: 992px` (mega-menu vs. mobile drawer, with a matching `not all and (min-width: 992px)` mobile rule). `prefers-reduced-motion: reduce` is honoured. Exact mobile type scale-down: not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#000000` · Body `#373d42` · Muted `#868d95` · Border `rgba(0,0,0,.20)` · Accent `#1e61f0`
- Font: Gellix (display/UI), IBM Plex Sans (body), IBM Plex Mono (code) · Body: 18px · Radius: 9999px control / 10-16px card · Control height: 40px nav, 54px hero
- Focus: not captured · Hover fill: not captured (transition `0.3s cubic-bezier(0.4,0,0.2,1)`)

<amplitude_design_language>
A bright white analytics canvas (#ffffff) broken by full-bleed cool-gray bands (#f2f4f8) and one inverted black section. Headlines are Gellix geometric sans at 700 with hard negative tracking — 60/70 at -1px for the hero, 44/50.6 at 600 for sections — over 18px body copy in gray #373d42 and sentence-case gray #868d95 kickers (never tracked caps). Every CTA is a full pill: black #000000 fill or white with a 1px black border, 40px in the nav (9999px) and 54px in the hero (30px radius, 16/30px padding, 18px/600). One accent, Amplitude blue #1e61f0, is reserved for links, small 32px chips and active-state 1.5px borders — never a button fill. Surfaces are flat: separation comes from fill steps and hairlines, not shadow. The signature element is a near-black #0d0d0f terminal/MCP chat card set in IBM Plex Mono 12/22.8, where amber #fbbf24 and green #4ade80 syntax colour is the only colour on the page. Transitions are 0.3s cubic-bezier(0.4,0,0.2,1). Feels: assertive, engineered, clean, matter-of-fact. Avoid: blue primary buttons, card drop shadows, uppercase tracked eyebrows, multi-hue chart palettes, and using the violet #a273ff for anything but a blurred background orb.
</amplitude_design_language>