# Amplitude · Design system migration spec

> Source: https://amplitude.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a professional, high-utility design system that prioritizes extreme legibility and structural clarity over visual flair.

## 1. Identity DNA

The design language of Amplitude's legal documentation adopts the structural logic of an enterprise software dashboard, redirecting its focus from data visualization to textual authority. Every component and spacing decision serves the singular goal of presenting policy information with maximum clarity and professional gravity. This is a system where the interface recedes completely, leaving the content itself as the primary architectural element.

**One-liner:** A high-contrast, typography-focused legal policy page for a B2B analytics platform.
**Keywords:** analytics · platform · B2B · policy · legal
**Analogy:** A professional enterprise software dashboard layout adapted for legal documentation.

## 2. Color

The color system is a strict, high-contrast monochrome, built upon a white field and deep charcoal ink. This palette is not a stylistic choice but a functional one, ensuring absolute legibility and a tone of unwavering professionalism.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#373D42` | secondary text |
| `--muted` | `#565656` | placeholder |
| `--accent` | `#000000` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome for maximum readability and professional clarity.

The governing principle is clarity through elimination, where color is stripped to its most essential, high-contrast state.

## 3. Typography

Typography is the primary expressive tool, employing a dual-sans-serif strategy for categorical distinction. A highly legible humanist sans-serif handles the body text, while a more structured geometric sans-serif defines the headings, creating a clear visual hierarchy for scanning and comprehension.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 600 | -0.4px | Page title |
| heading | 24px | 1.3 | 600 | -0.12px | Section headings |
| body | 18px | 1.55 | 400 | -0.04px | Primary text |
| small | 14px | 1.5 | 400 | -0.035px | Metadata and captions |

**Type rules:**
- Body text uses a highly legible humanist sans-serif.
- Headings use a slightly more structured sans-serif.
- Tight letter-spacing is applied to display sizes for a modern, premium feel.

## 4. Spacing

The spatial system is governed by a consistent 4px base grid, creating a predictable and calm vertical rhythm throughout the document.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Consistent 4px base grid with generous vertical padding for distinct content sections.

## 5. Surfaces

Depth is communicated not through shadow, but through deliberate spatial separation and typographic hierarchy. Surface treatment is minimal, relying on the generous use of white space and the occasional 1px border to delineate sections without visual clutter.

- **Radius:** sm 4px · md 6px · lg 12px · pill 9999px
- **Borders:** Minimal use of 1px solid borders, mostly relying on spacing and typography for separation.

## 6. Layout

The foundational layout is a classic, centered single-column editorial structure, optimized for comfortable reading line lengths. This skeleton is anchored by a standard top navigation and a narrow content column, focusing all attention on the text itself.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard top navigation with a centered, narrow column for legal text.

## 7. Motion & Interaction

Motion is reserved and functional, used exclusively to signal interactive state changes with professional subtlety. The system employs simple, smooth transitions for background-color and opacity shifts, avoiding any animation that could distract from the content's authority.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle background-color transitions on hover.
  - Opacity changes for interactive states.

- **Hover:** Background color shift for buttons and subtle opacity changes for text links.
- **Click:** Immediate visual response via background color changes.
- **Transition:** Smooth 0.2s to 0.3s transitions using standard ease-out curves.
- **Keyboard:** Standard browser focus outlines for navigation.

## 8. Voice & Don'ts

The editorial voice is direct, descriptive, and authoritative, mirroring the tone of the legal content it presents. Language is precise and action-oriented, particularly in call-to-action elements, which maintain the system's high-contrast visual language.

- **Tone:** Professional, clear, authoritative, and legal.
- **Headline style:** Direct and descriptive.
- **CTA style:** Action-oriented and high-contrast.
- **Avoid:** Playful or casual language / Overly complex visual decorations / Bright or distracting accent colors

### Don'ts
- ❌ Don't use decorative background images — screenshot shows a clean, solid white background.
- ❌ Don't use a multi-color palette — screenshot shows a strict monochrome black-and-white scheme.
- ❌ Don't use centered body text — screenshot shows left-aligned text for better readability.
- ❌ Don't use decorative borders — screenshot shows layout separation primarily through spacing.
- ❌ Don't use wide text columns — screenshot shows a narrow, optimized column for reading.
- ❌ Don't use casual typography — screenshot shows a highly legible, professional sans-serif font.

The system deliberately avoids any decorative flourish, playful language, or chromatic accent that could undermine the serious, policy-driven purpose of the page.

## System Prompt (paste into AI tool)

```
This design represents a professional B2B software's legal documentation page, prioritizing absolute clarity and authority over visual expression. The core palette is a strict monochrome, with a white background (#FFFFFF) and deep charcoal ink (#171717), utilizing black (#000000) for primary call-to-action buttons. Typography relies on highly legible humanist and geometric sans-serif categories (IBM Plex Sans) with a tight letter-spacing on display headings to maintain a modern, premium feel. Critical design constraints include: maintaining the narrow, centered content column for optimal reading lines, avoiding any decorative background imagery or patterns, and ensuring a complete absence of colorful accents. The layout is a classic single-column editorial structure with generous vertical spacing to separate logical content blocks.
```
