Home
DESIGN.mdStar on GitHub

Amplitude

See what users do. Improve what matters — the AI analytics platform for modern digital analytics.

Analytics Funnels Segmentation Journeys Experiment Session Replay
Signature — Event Segmentation
0
▲ 0%
Event Totals · Last 30 days
Realtime · updated just now
Colors
Primary — brand blue
blue#1E61F0Primary, chart line
blue-deep#0052F2Hover, highlight
blue-light#3D6BFFDark-mode brand
navy#001A4FDeep gradient anchor
Data-viz — blue → purple
purple#A273FF2nd series, gradient top
purple-deep#7C3AEDPurple text/accents
indigo#6980FFGradient mid
indigo-light#8597FFSoft series
Neutrals — warm
ink#0C0C0EHeadings, body
grey#50565BSecondary text
muted#868D95Metadata, axes
warm-white#F5F4F0Page background
warm-border#E8E7E2Borders, dividers
Semantic
success#00875AUplift, positive delta
warning#B26A00Warning
error#D64545Decline, negative delta
info#1E61F0Info
Typography — Gellix · IBM Plex Sans · IBM Plex Mono
display
Gellix · 700
Amplitude
56px700
h1
Gellix · 700
See what users do
34px700
h2
Gellix · 600
Improve what matters
22px600
body-lg
IBM Plex Sans · 400
The AI analytics platform for modern digital analytics.
17px400
body-sm
IBM Plex Sans · 400
Track events, build funnels, and segment cohorts in seconds.
13px400
mono
IBM Plex Mono · 500
amplitude.track('Signup Completed', { plan: 'pro' })
12pxmono
Components
Buttons
Badges
Event Cohort ▲ 12.4% ▼ 3.2% Sampled
Track event
Radius
4px
8px
12px
Guardrails
DO
Use brand blue #1E61F0 for primary actions, links, and the main chart series
Fill chart areas with the blue → purple gradient at low opacity — the signature look
Set headings in Gellix, body/UI in IBM Plex Sans, code in IBM Plex Mono
Color deltas semantically: green for uplift, red for decline
Keep light surfaces warm (#F5F4F0) — the warmth is part of the identity
DON'T
Set the brand blue on dark at #1E61F0 — contrast fails; lift to #3D6BFF
Use purple as a primary action — it's a data-viz accent, not a CTA
Set body or UI in Gellix — it's display only; IBM Plex Sans owns the UI
Cool the light neutrals to pure grey — Amplitude's off-white is warm
Fabricate chart data — plot a real, deterministic series