Ampproject Design System Deep-Dive

1. Brand Overview

AMP (Accelerated Mobile Pages) isn’t a consumer brand in the “buy our sneakers” sense. It’s a framework — a performance-first, web-speed-obsessed project. The site at amp.dev is aimed at developers, product managers, and technical designers who care about load time, mobile performance, and standards compliance.

The vibe is utilitarian with a touch of tech optimism. Colors are restrained: deep charcoal for structure, a sharp blue for emphasis, lots of white space. Typography is clean and geometric (Poppins) for headings, paired with a more neutral Noto Sans for body and UI text. This combo says “modern” without being playful. AMP has no time for ornamental fluff — it’s here to get a job done.

Layout and component styling are consistent with that philosophy. The spacing scale is rooted in an 8px system, but they allow odd fractional values like 4.2px and 5.4px — probably side effects of responsive calculations or Vuetify defaults. Breakpoints are clear and developer-friendly: mobile, tablet, desktop, and large desktop ranges.

The components themselves are functional, with small splashes of personality. The primary CTA buttons invert the usual scheme (white background, blue text) and animate horizontally on hover (translateX(10px)). Links are bold and color-driven, without underlines by default. Shadows are used sparingly — mostly soft, diffuse drops for cards and overlays.

This isn’t the kind of system that tries to “wow” a casual user. It’s built to be predictable, accessible, and easy to code against. The brand language says: “We’re here to help you build fast, reliable sites. No distractions.”

2. Color System

2.1 Primary Colors

The primary brand color is a saturated blue: #005af0 (rgb(0, 90, 240)). It’s used for CTAs, link text, hover states, and focus indicators. This blue is bright enough to pop against dark and light backgrounds without bleeding into “too friendly” territory. Compared to competitors like React’s cyan or Vue’s green, AMP’s blue feels more corporate and authoritative.

Primary dark structural color: #20202a (rgb(32, 32, 42)) — a deep charcoal used for headers and text. It’s not pure black, which softens the contrast and makes the UI less harsh.

White (#ffffff) is the main background color in most sections, ensuring the blue elements stand out.

2.2 Complete Palette

2.3 Color Relationships

The primary blue against white yields a contrast ratio well above WCAG AA for normal text. Blue against charcoal also passes easily. Charcoal against white is classic high contrast.

The palette is minimal — no warm tones, no tertiary accents. This keeps the system focused but risks monotony if misused. The darker text colors (#20202a, #000000) are distinct enough to allow layering (e.g., black for text, charcoal for chrome).

Dark mode isn’t explicitly implemented here — the palette leans toward light backgrounds. However, the dark structural color (#20202a) could serve as a base in a dark theme.

2.4 Usage Guide

• Best combos: Primary Blue (#005af0) on White (#ffffff) — strongest CTA contrast. White text on Charcoal (#20202a) — clean header treatment.
• Avoid: Primary Blue on Light Gray (#e2e5e6) — low contrast borderline fail for WCAG AA.
• Secondary Gray (#48525c) works well for subtext under black headings.
• Hover Blue (#005fcc) should only be used in hover/focus states — don’t use as a static accent.

3. Typography

3.1 Font Families

Two main families:

• Poppins — geometric sans-serif for headings and buttons. Fallback to system sans.
• Noto Sans — humanist sans for body text, captions, and links. Fallback to system sans.
• Arial appears once for a 13.33px button, likely a browser/system default for a specific element.

No Google Fonts loaded from the data snapshot — possibly self-hosted or bundled.

3.2 Type Scale

3.3 Hierarchy

Headings jump from 52px to 28px — a dramatic drop, which works for hero vs section titles. The 18px heading is borderline body size, used for sub-section headers.

Body text likely sits at 16px Noto Sans. Captions drop to 14px, maintaining boldness for legibility. The consistent use of weight 700 across headings, links, and buttons creates a “bold interface” style — this helps in a developer audience where clarity > elegance.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. But fractional values appear — 4.2px, 5.4px, 8.4px — likely due to rem conversions or fluid layouts.

4.2 Layout

Breakpoints:

• 1px (base)
• 240px (small devices)
• 767px (mobile max)
• 768px (tablet min)
• 1023px (tablet max)
• 1024px (desktop min)
• 1280px (wide desktop)
• 1680px (large desktop)

Clearly responsive. Likely a 12-col grid under Vuetify.

5. Visual Elements

Border Radius

Rounded corners are restrained — 4px for most items, 8px for larger containers, 50% for circular elements. No extreme pill shapes except where 50% is used.

Shadows

Used for depth, not purely flat:

• rgba(0,0,0,0.15) 0px 15px 25px 0px — common soft shadow.
• rgba(0,0,0,0.2) 0px 10px 25px 0px — slightly darker.
• rgba(0,0,0,0.25) 0px 15px 35px -5px — deeper with offset.
• rgba(0,0,0,0.1) 0px 5px 10px 0px — light hover effect.
• rgba(0,0,0,0.15) 0px 15px 30px 0px — variant.

Borders

Minimal: 0px 0px 1px solid #20202a used on links.

6. Components

6.1 Buttons

Primary inverted style (ap-button --inverted cta):

• Default: Background #ffffff, text #005af0, padding 12px 28px, border-radius 3px, no border, shadow rgba(0,0,0,0.25) 0px 15px 35px -5px, font-weight 700, font-size 16px.
• Hover: background: initial, shadow rgba(0,0,0,0.1) 0px 5px 10px 0px, transform translateX(10px), color stays #005af0.
• Active: Background stays white.
• Focus: Opacity 1, transform reset.

Opinion: The horizontal movement on hover is unusual — most buttons scale or darken. This adds a directional cue but could shift layout if not handled carefully.

6.2 Links

Five variants based on context:

1. Blue (#005af0) default, same on hover.
2. Black (#000000) default, hover to blue.
3. White (#ffffff) default, hover to blue.
4. Charcoal (#20202a) default, hover to blue.
5. Off-white (#fafafc) default, hover to blue.

All bold (700), no underline by default. Hover color changes unify to blue — consistent brand accent.

6.3 Forms

Select-one:

• Default: Transparent background, black text, no border, radius 0, padding 0px 15px 0px 5px.
• No fancy focus styles — minimal.

No visible text inputs, checkboxes in data snapshot — possibly styled similarly minimal.

6.4 Cards

Not explicitly defined, but shadows suggest usage: soft drop shadows, 4px or 8px radius, padding from spacing scale (likely 20–25px).

7. Design Tokens

:root {
  /* Colors */
  --color-primary-dark: #20202a;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary-blue: #005af0;
  --color-secondary-gray: #48525c;
  --color-light-gray: #e2e5e6;
  --color-hover-blue: #005fcc;

  /* Typography */
  --font-poppins: 'Poppins', system-ui, sans-serif;
  --font-noto-sans: 'Noto Sans', system-ui, sans-serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4_2: 4.2px;
  --space-4_8: 4.8px;
  --space-5: 5px;
  --space-5_4: 5.4px;
  --space-8_4: 8.4px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17_6: 17.6px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-64: 64px;
  --space-78_9844: 78.9844px;
  --space-200: 200px;

  /* Border Radius */
  --radius-none-4px-bottom: 0px 0px 4px 4px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.15) 0px 15px 25px 0px;
  --shadow-medium: rgba(0,0,0,0.2) 0px 10px 25px 0px;
  --shadow-deep: rgba(0,0,0,0.25) 0px 15px 35px -5px;
  --shadow-light-hover: rgba(0,0,0,0.1) 0px 5px 10px 0px;
  --shadow-soft-alt: rgba(0,0,0,0.15) 0px 15px 30px 0px;
}

8. AI Coding Assistant Prompt

# Ampproject Design System Specification

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

## Brand Context
AMP is a performance-focused web framework. The design language is minimal, functional, and developer-centric. Colors are restrained, typography is bold and clear, components are predictable.

## Color Palette
- Primary Dark: #20202a — Headers, nav bars, footer backgrounds
- White: #ffffff — Page backgrounds, text on dark
- Black: #000000 — Body text, icons, nav links
- Primary Blue: #005af0 — CTAs, links, hover states, focus outlines
- Secondary Gray: #48525c — Secondary text, muted labels
- Light Gray: #e2e5e6 — Dividers, subtle backgrounds
- Hover Blue: #005fcc — Hover/focus interactive states

## Typography
- Headings: 'Poppins', system-ui, sans-serif
- Body: 'Noto Sans', system-ui, sans-serif
- Special: Arial for rare small buttons

| Element   | Size   | Weight | Line Height | Use For |
|-----------|--------|--------|-------------|---------|
| H1        | 52px   | 700    | 1.20        | Page titles |
| H2        | 28px   | 700    | 1.20        | Section titles |
| Subhead   | 18px   | 700    | —           | Subsections |
| Body      | 16px   | 400/700| 1.30–1.63   | Body text |
| Caption   | 14px   | 700    | 1.57–1.63   | Captions |
| Small Link| 13px   | 400/700| 1.63        | Footer links |

## Spacing & Grid
Base: 8px. Scale includes: 1px, 4.2px, 4.8px, 5px, 5.4px, 8.4px, 10px, 12px, 15px, 16px, 17.6px, 20px, 24px, 25px, 30px, 40px, 50px, 64px, 78.9844px, 200px.

## Border Radius
- none-bottom-4px: 0px 0px 4px 4px — lists
- sm: 3px — small buttons
- md: 4px — most UI elements
- lg: 8px — cards, modals
- full: 50% — avatars, round buttons

## Shadows & Depth
- Soft: rgba(0,0,0,0.15) 0px 15px 25px 0px
- Medium: rgba(0,0,0,0.2) 0px 10px 25px 0px
- Deep: rgba(0,0,0,0.25) 0px 15px 35px -5px
- Hover Light: rgba(0,0,0,0.1) 0px 5px 10px 0px
- Soft Alt: rgba(0,0,0,0.15) 0px 15px 30px 0px

## Component Specifications

### Primary Button (.ap-button.--inverted.cta)
Default:
```css
background-color: #ffffff;
color: #005af0;
padding: 12px 28px;
border-radius: 3px;
border: none;
box-shadow: rgba(0,0,0,0.25) 0px 15px 35px -5px;
font-weight: 700;
font-size: 16px;

Hover:

background-color: initial;
box-shadow: rgba(0,0,0,0.1) 0px 5px 10px 0px;
transform: translateX(10px);
color: #005af0;

Active: background-color: #ffffff; Focus: transform: translateY(0px);

Links

Default: bold, no underline. Colors vary by context:

• Blue (#005af0) — stays blue
• Black (#000000) — hover to blue
• White (#ffffff) — hover to blue
• Charcoal (#20202a) — hover to blue
• Off-white (#fafafc) — hover to blue

Input (select-one)

Default:

background-color: transparent;
color: #000000;
border: none;
border-radius: 0;
padding: 0 15px 0 5px;
box-shadow: none;

Card

Background: white; radius: 4px or 8px; shadow: soft; padding: from spacing scale (20–25px).

Layout & Responsive Rules

Breakpoints:

• Mobile: <= 767px
• Tablet: 768px–1023px
• Desktop: >= 1024px
• Wide: >= 1280px
• Large: >= 1680px

Interaction Rules

• Transition: 150ms ease for hover/focus changes
• Hover states use color change or shadow change
• Focus states maintain opacity 1

DO List

• Use only listed hex colors
• Keep spacing to multiples of base 8px scale
• Bold text for interactive elements
• Use Poppins for headings, Noto Sans for body
• Shadows only from defined list

DON'T List

• Invent new colors
• Mix sharp and rounded corners outside defined radius tokens
• Remove hover states
• Add underlines to links unless required
• Use shadows heavier than deep token

Code Examples

Primary Button:

.btn-primary {
  background: #ffffff;
  color: #005af0;
  padding: 12px 28px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  box-shadow: rgba(0,0,0,0.25) 0px 15px 35px -5px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: initial;
  box-shadow: rgba(0,0,0,0.1) 0px 5px 10px 0px;
  transform: translateX(10px);
}

Card:

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.15) 0px 15px 25px 0px;
}

Select Input:

.select {
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 0;
  padding: 0 15px 0 5px;
}

---

## 9. Summary

**TL;DR** — AMP’s design system is lean, developer-friendly, and rigid in its palette. Bold typography, restrained colors, predictable spacing. If you stick to the tokens, you’ll get a UI that feels like amp.dev.

**Brand Keywords**: performance-focused, minimal-functional, bold-typography, tech-straightforward