Amplitude Design System: Minimalist Data-Focused UI

1. Brand Overview

Amplitude’s design system is what happens when enterprise analytics meets clean, controlled minimalism. This isn’t a “loud” tech brand — it’s confident, but understated. Their site is built on Tailwind CSS + DaisyUI, which means utility-first classes everywhere, but wrapped in a consistent design language.

The vibe: modern B2B SaaS with a bias towards clarity over decoration. Dark grays and neutral tones dominate, with a few sharp accents in deep blue for interactive states. Primary CTAs are often solid black or white pills with absurdly high border radii (9999px) — a deliberate choice to make them stand out in a mostly flat environment. Typography leans sans-serif (Gellix via Twemoji Country Flags fallback stack) for headings and UI, with weights chosen to create crisp hierarchy without screaming at you.

Amplitude’s layout system is clearly built on an 8px grid, but they’re not religious about it — there’s a couple of oddball values like 7px and 17px sprinkled in. Breakpoints are broad and numerous, covering everything from small mobile (380px) up to ultra-wide (2560px).

If you’re building with this system, the philosophy is:

Keep it neutral until you need attention — then go bold with solid fills and crisp typography.
Don’t clutter. Space is part of the brand’s voice.
Interactions are subtle — hover states scale slightly and add a soft shadow, but nothing flashy.
Consistency is everything: colors, radius tokens, and spacing values are reused relentlessly.

I love that they’ve resisted the temptation to over-brand. The result is a system that feels grown-up — perfect for data-heavy products where trust and clarity matter.

2. Color System

2.1 Primary Colors

The primary “brand” color here isn’t a single bright hue — it’s actually context-dependent. In CTAs, black (#000000) and white (#ffffff) dominate. Interactive states sometimes pull in a saturated blue (rgb(23, 9, 233)), but it’s not a global primary. The psychological effect is seriousness and trust — black for authority, white for clarity, blue for action. Compared to competitors like Mixpanel (which leans purple) or Heap (bright pink), Amplitude’s palette says “we’re here to help you make decisions, not entertain you.”

2.2 Complete Palette

Color Name	Hex	Role	Usage
Black	#000000	Core text / primary CTA background	Buttons, headings, body text
Dark Gray	#373d42	Secondary text / subtle UI elements	Labels, icons
Very Dark Gray	#171717	Text on light backgrounds / secondary buttons	Button text
Medium Gray	#50565b	UI borders / muted icons	Dividers, labels
Light Gray	#868d95	Disabled states / secondary text	Captions, placeholders
Transparent Gray	#697077 @20% opacity	Overlay / subtle backgrounds	Hover overlays
Off-White	#f3f3f3 @53% opacity	Hover surfaces	Light hover background
Soft White	#f2f4f8 (~70–77% opacity)	Panel backgrounds	Cards, section backgrounds
Pure White	#ffffff	Primary text on dark / CTA text	Buttons, page background
Accent Blue	#1709e9 (rgb(23, 9, 233))	Interactive hover/focus text	Link hover, active button
Ring Blue	rgba(59,130,246,.5)	Focus outlines	Focus rings

2.3 Color Relationships

This palette is high-contrast by default. Black on white easily meets WCAG AA and AAA standards. The accent blue on white is also safe — deep saturation ensures readability. Potential accessibility issue: light gray text (#868d95) on white can fall below AA for small text. The transparent grays are fine for overlays but should be avoided for critical text.

Dark mode isn’t evident from the extracted data — the palette reads as light-mode-first with dark text.

2.4 Usage Guide

Best combos:
- Black text on white backgrounds — maximum readability
- Accent blue text only for interactive elements — don’t overuse
- Soft white (#f2f4f8) backgrounds for cards against white page — subtle separation
Avoid:
- Gray-on-gray for body text — hurts accessibility
- Using accent blue for non-interactive text — confuses the user
- Transparent grays for text — they’re for overlays

3. Typography

3.1 Font Families

Amplitude’s typography stack is eclectic because of how it’s implemented:

Primary: "Twemoji Country Flags" (likely a misconfiguration pulling Gellix as fallback)
Fallbacks: Gellix, Arial, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
Body/UI alt: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
Other sources: IBM Plex Sans, IBM Plex Serif (Google Fonts)
Custom: WistiaPlayerInter for embedded video headings

It’s all sans-serif in practice, with weights from 400 to 700 used to signal hierarchy.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
H1	Twemoji Country Flags (Gellix fallback)	60px	700	1.17
H1 alt	Twemoji Country Flags	44px	600	0.66–1.15
H2	Twemoji Country Flags	36px	600	1.11
H3	Twemoji Country Flags	28px	600	1.25
H4	Twemoji Country Flags	24px	500–600	1.25–1.08
Body Large	Twemoji Country Flags	22px	500	0.91–1.09
Body	ui-sans-serif	18px	400	1.56
Button	Twemoji Country Flags	16px	600	1.35–1.50
Caption	Twemoji Country Flags	14px	400–600	1.35–1.43
Small Caption	Twemoji Country Flags	12px	500–600	1.25–1.33
Tiny	Twemoji Country Flags	10px	600	1.20

3.3 Hierarchy

The jump from 60px H1 to 44px H1 alt is big — they use it to differentiate hero headings from section headings. Body stays in the 18–22px range, which is generous for readability. Buttons lock at 16px, captions at 14px — consistent with modern UI norms. Weight changes are the main hierarchy driver.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid — but with some inconsistencies.

Value	Count	Usage
4px	8	Tiny gaps, icon spacing
7px	8	Oddball — likely legacy component
8px	8	Small gaps, padding
10px	100	Button padding, form fields
12px	12	Compact card padding
16px	30	Standard gutter, button horizontal padding
17px	1	Rare — unknown
20px	2	Section inner padding
24px	40	Card padding, form spacing
28px	8	Larger gaps
32px	12	Section padding
48px	6	Hero inner padding
60px	1	Large heading spacing
64px	6	Section spacing
68px	1	Specific layout
80px	4	Large section gap
96px	4	Hero gaps
128px	3	Major vertical spacing
160px	1	Max section gap
424.125px	1	Likely media container width

4.2 Layout

Breakpoints are numerous:

380px, 480px, 767px, 768px, 769px, 992px, 1024px, 1042px, 1130px, 1256px, 1268px, 1342px, 1390px, 1440px, 1950px, 2560px

This is a very granular responsive setup — they’re targeting specific device widths and probably adjusting complex data visualizations.

5. Visual Elements

Border Radius

Value	Count	Usage
0px 0px 32px 32px	4	Section bottoms
6px	51	Small cards, UI blocks
8px	23	Cards, buttons
12px	8	Medium cards
16px	11	Larger blocks
18px	4	Special UI
30px	2	Large buttons
32px	4	Nav, sections
60px	4	Circular UI (sound button)
100px	2	Large pill CTAs
9999px	14	Fully rounded pills/buttons
50%	6	Perfect circles (avatars/buttons)

Shadows

Mostly subtle:

rgb(255, 255, 255) 0px 0px 0px 2px inset — white inset ring
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, ... — soft elevation
rgba(0, 0, 0, 0.1) 0px 0px 15px 5px — diffuse glow

Definitely not a “flat design” — shadows are used sparingly for hover emphasis.

Borders

1px solid white — on dark buttons
1px solid black — on light buttons
1px solid rgba(0, 0, 0, 0.2) — subtle outlines
0px 0px 1px solid gray — dividers

6. Components

6.1 Buttons

Primary Button (black pill)
Default:

bg: #000000
color: #ffffff
padding: 0 16px
radius: 9999px
border: 1px solid #000000
font: 16px, 600 weight

Hover:

bg: white
scale: 1.157 with translate
shadow: rgba(0,0,0,0.15) 0 0 17px 8px

Active:

bg: #1709e9
color: #1709e9

Focus:

color change to rgb(36 42 46)

Secondary Button (transparent pill)
Default:

bg: transparent
color: #171717
border: 1px solid rgba(0,0,0,0.2)

Hover/active/focus match primary’s animation pattern.

White Button (inverted)
Default:

bg: white
color: #171717
border: 1px solid white

Block Button (card style)
Default:

bg: #f2f4f8
color: #565656
padding: 24px 16px
radius: 8px

6.2 Links

Variants:

Gray (#565656) — hover to blue (#1709e9)
Black (#000000) — hover to blue
White (#ffffff, bold) — hover to blue
Dark gray (#171717, bold) — hover to white
Light gray (#697077, underline) — hover to blue

6.3 Forms

No explicit inputs in extract — likely styled with border radius 6–8px, 1px border, and gray text.

6.4 Cards

Backgrounds: soft white (#f2f4f8) or white
Radius: 8–16px
Padding: 24–32px
Shadows: subtle rgba black at low opacity

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #373d42;
  --color-very-dark-gray: #171717;
  --color-medium-gray: #50565b;
  --color-light-gray: #868d95;
  --color-transparent-gray-20: rgba(105, 112, 119, 0.2);
  --color-off-white-53: rgba(243, 243, 243, 0.53);
  --color-soft-white-77: rgba(242, 244, 248, 0.776);
  --color-soft-white-72: rgba(242, 244, 248, 0.72);
  --color-soft-white-71: rgba(242, 244, 248, 0.714);
  --color-soft-white-70: rgba(242, 244, 248, 0.706);
  --color-soft-white-64: rgba(242, 244, 248, 0.643);
  --color-white: #ffffff;
  --color-accent-blue: #1709e9;
  --color-ring-blue: rgba(59,130,246,.5);

  /* Typography */
  --font-primary: "Twemoji Country Flags", Gellix, Arial, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-body: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-alt: "IBM Plex Sans", sans-serif;
  --font-video: WistiaPlayerInter, Helvetica;

  /* Spacing */
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-68: 68px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --space-424: 424.125px;

  /* Radius */
  --radius-none-bottom: 0px 0px 32px 32px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-30: 30px;
  --radius-32: 32px;
  --radius-60: 60px;
  --radius-100: 100px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-inset-white: rgb(255, 255, 255) 0px 0px 0px 2px inset;
  --shadow-soft-medium: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-diffuse: rgba(0, 0, 0, 0.1) 0px 0px 15px 5px;
}

8. AI Coding Assistant Prompt

# Amplitude Design System Specification

You are an Amplitude design expert. Build UIs matching their visual language exactly.

## Brand Context
Amplitude’s design language is clean, neutral, and data-focused. It uses high-contrast black/white for key actions, subtle grays for structure, and deep blue for interactive states. Spacing and radius tokens are consistent, with restrained use of shadows for emphasis.

## Color Palette
- Black: #000000 — primary CTA backgrounds, core text
- Dark Gray: #373d42 — secondary text, icons
- Very Dark Gray: #171717 — button text, strong body text
- Medium Gray: #50565b — UI borders, muted icons
- Light Gray: #868d95 — captions, placeholders
- Transparent Gray 20%: rgba(105, 112, 119, 0.2) — overlays
- Off-White 53%: rgba(243, 243, 243, 0.53) — hover backgrounds
- Soft White ~70–77%: rgba(242, 244, 248, 0.706–0.776) — card backgrounds
- White: #ffffff — page background, text on dark
- Accent Blue: #1709e9 — link hover, active states
- Ring Blue: rgba(59,130,246,.5) — focus outlines

## Typography
Fonts:
- Headings/UI: "Twemoji Country Flags", Gellix, Arial, ui-sans-serif, system-ui
- Body: ui-sans-serif, system-ui
- Alt: IBM Plex Sans / IBM Plex Serif
- Special: WistiaPlayerInter for video headings

Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 60px | 700 | 1.17 | Hero headings |
| H1 alt | 44px | 600 | 0.66–1.15 | Section headings |
| H2 | 36px | 600 | 1.11 | Subheadings |
| H3 | 28px | 600 | 1.25 | Titles |
| Body Large | 22px | 500 | 0.91–1.09 | Lead paragraphs |
| Body | 18px | 400 | 1.56 | Standard text |
| Button | 16px | 600 | 1.35–1.50 | CTAs |
| Caption | 14px | 400–600 | 1.35–1.43 | Footnotes |
| Small Caption | 12px | 500–600 | 1.25–1.33 | Metadata |
| Tiny | 10px | 600 | 1.20 | Labels

## Spacing & Grid
Base unit: 8px  
Scale includes: 4, 7, 8, 10, 12, 16, 17, 20, 24, 28, 32, 48, 60, 64, 68, 80, 96, 128, 160px

Map:
- Button padding: 10–16px horizontal
- Card padding: 24–32px
- Section gaps: 48–128px

## Border Radius
- none-bottom: 0 0 32px 32px — section bottoms
- sm: 6px — small cards, inputs
- md: 8px — cards, buttons
- lg: 12px — modals
- xl: 16px — large blocks
- xxl: 18px — special UI
- pill-large: 30–100px — big CTAs
- full: 9999px — pills, avatars
- circle: 50% — perfect circles

## Shadows & Depth
- inset-white: rgb(255,255,255) 0 0 0 2px inset
- soft-medium: rgba(0,0,0,0.1) 0 10px 15px -3px, rgba(0,0,0,0.1) 0 4px 6px -4px
- diffuse: rgba(0,0,0,0.1) 0 0 15px 5px

## Component Specifications

### Primary Button
Default:
```css
background: #000;
color: #fff;
padding: 0 16px;
border-radius: 9999px;
border: 1px solid #000;
font-weight: 600;
font-size: 16px;
```
Hover:
```css
background: #fff;
transform: scale(1.157) translate(-42%, -42%);
box-shadow: rgba(0,0,0,0.15) 0 0 17px 8px;
```
Active:
```css
background: #1709e9;
color: #1709e9;
```
Focus:
```css
color: rgb(36 42 46);
```

### Secondary Button
Default:
```css
background: transparent;
color: #171717;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 9999px;
```
Hover/active match primary animation.

### Navigation Links
Default gray/black/white variants, hover to accent blue or white depending on background.

### Input Fields
Likely:
```css
border: 1px solid #868d95;
border-radius: 6px;
padding: 10px;
font-size: 18px;
```
Focus: border-color accent blue.

### Cards
Background: soft white  
Radius: 8–16px  
Padding: 24–32px  
Shadow: soft-medium

## Layout & Responsive Rules
Breakpoints:  
380px, 480px, 767px, 768px, 769px, 992px, 1024px, 1042px, 1130px, 1256px, 1268px, 1342px, 1390px, 1440px, 1950px, 2560px

## Interaction Rules
- Transition: 200ms ease for buttons
- Hover scale: 1.157 with translate
- Focus ring: ring-blue at 0.5 opacity

## DO List
- Use only palette colors
- Maintain 8px-based spacing
- Keep buttons pill-shaped
- Use accent blue only for interactive states
- Keep shadows subtle

## DON'T List
- Don’t add custom colors
- Don’t mix sharp and rounded corners inconsistently
- Avoid heavy shadows
- Don’t reduce text size below 14px for body
- Don’t overuse accent blue

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid #000;
  font-weight: 600;
  font-size: 16px;
  transition: all 200ms ease;
}
.btn-primary:hover {
  background: #fff;
  transform: scale(1.157) translate(-42%, -42%);
  box-shadow: rgba(0,0,0,0.15) 0 0 17px 8px;
}
```

Card:
```css
.card {
  background: rgba(242,244,248,0.776);
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.1) 0 10px 15px -3px;
}
```

Input:
```css
.input {
  border: 1px solid #868d95;
  border-radius: 6px;
  padding: 10px;
  font-size: 18px;
}
.input:focus {
  border-color: #1709e9;
  outline: none;
}
```

9. Summary

TL;DR — Amplitude’s design system is neutral, structured, and confident. Black/white CTAs, subtle gray scaffolding, and a restrained deep blue accent keep the UI clean and trustworthy. Spacing and radius tokens are consistent, with light shadows for depth.

Brand Keywords:

data-focused-minimalism
confident-neutral
pill-shaped-CTAs
blue-for-action
structured-flexibility