Amazon Prime Video — Reverse-Engineered Design System

1. Brand Overview

Amazon Prime Video’s design language is unapologetically functional. This is a streaming platform with billions of user interactions per day, and the UI reflects that scale. No fuss, no ornamental flourishes. The brand leans into high-contrast, media-first layouts where the content is the hero, not the chrome around it.

The core aesthetic is dark, cinematic, and utilitarian. The primary brand color? White. That’s deliberate — the UI sits in a dark environment, so white typography and UI elements pop without introducing visual noise. This is not “let’s paint the buttons blue” design; it’s “let’s make sure you can read this from your couch.” The rest of the palette is composed of near-blacks (#0f1111, #00050d), a single deep navy hover state (#0c3353), and minimal accent tones like the link blue (#2162a1) and soft link blue (#79b8f3). The absence of a big, saturated brand color keeps the content thumbnails and posters as the only real color source.

Typography is tightly controlled. The Amazon Ember family dominates, with a fallback to Amazon Arabic Ember and Arial. This is a custom corporate font stack, consistent across all Amazon properties. Weights are used with precision — 400, 500, 700 — and the type scale is pragmatic, not decorative. There's nothing experimental here; it's the typographic equivalent of a well-worn workhorse.

Spacing follows an 8px grid, but with some oddball values (3px, 9px, 21px) that hint at legacy components or pixel-perfect optical adjustments. Border radii are mostly 8px and 12px, with occasional full-radius pills (10000px) for search bars and profile chips. Shadows are rare but cinematic — the main one is a layered black drop shadow that feels like UI floating over a dark background.

This design system is built for speed and clarity. The visual hierarchy is clear because there’s no visual clutter. Interactions are restrained. Links are underlined only by color, not by decoration. Buttons don’t have hover animations — they simply exist, ready for action. It’s a system optimised for lean performance and maximum legibility in a dark theater-like UI.

2. Color System

2.1 Primary Colors

The primary semantic color is rgb(255, 255, 255) / #ffffff. In a dark UI like Prime Video’s, white is the equivalent of a “brand color” — it’s used for all primary text, key buttons, and navigation labels. This choice is less about brand personality and more about functional accessibility. The contrast between white (#ffffff) and their darkest background (#0f1111) is 21:1 — the maximum possible — which means excellent WCAG AAA accessibility for text.

Competitors like Netflix lean into red, Disney+ into deep blue. Prime Video’s “color” is actually the absence of it — their content drives the chroma.

2.2 Complete Palette

Note: Some colors appear multiple times in RGBA form (e.g., white at 0.9 opacity).

2.3 Color Relationships

The palette is extremely high-contrast. White (#ffffff) over #0f1111 is max contrast. Link blue (#2162a1) over dark backgrounds is ~4.5:1 contrast — just at WCAG AA for normal text. The lighter blue (#79b8f3) on black is around 3:1, so it’s probably reserved for larger text or less critical UI.

Dark mode is the default. There’s no light mode equivalent here. Backgrounds are near-black, not pure black, which helps reduce eye strain and prevents haloing on OLED screens.

2.4 Usage Guide

• Pair #ffffff text with #0f1111 or #00050d backgrounds for maximum legibility.
• Use #2162a1 for links in body text; avoid pairing it with dark navy backgrounds unless size is large enough.
• Save #79b8f3 for secondary links or less critical actions — never for body text under 16px.
• Hover states: deep navy (#0c3353) for backgrounds, off-white (#f1f1f1) for lighter surfaces.
• Avoid introducing new accent colors — the minimal palette is part of the brand identity.

3. Typography

3.1 Font Families

The brand uses Amazon Ember as the core typeface, with fallbacks to Amazon Arabic Ember and Arial. This is a proprietary font stack — you won’t find it on Google Fonts. The occasional Times appears in a 16px heading context, likely an embedded media player or legacy component.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle. The jump from 50px H1 to 20px subheading is huge, which works for hero banners. Most UI text lives in the 14–16px range. Weight changes (400 → 500) are the main way they signal importance. Spacing is tight — 0.64px letter-spacing appears on some UI labels, a micro-adjustment to improve legibility on screens.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, with exceptions.

4.2 Layout

No explicit breakpoints in data, but Vuetify is in use — so expect standard material breakpoints (xs, sm, md, lg, xl). The spacing scale drives both padding and gaps. Content likely maxes out around 1200–1440px, though not extracted here.

5. Visual Elements

Border Radius

Shadows

• rgba(0, 0, 0, 0.3) 0px 4px 4px 0px, rgba(0, 0, 0, 0.15) 0px 8px 12px 6px — Main card/modal shadow, cinematic depth.
• rgba(26, 152, 255, 0.2) 0px -4px 16px 0px — Rare, maybe focus or highlight.

Borders

Minimal. The only extracted combo: 0px 0px 1px solid #ffffff on spans — likely underlines.

6. Components

6.1 Buttons

Primary button default:

• Background: #ffffff
• Text color: #00050d
• Padding: 8px 21px
• Border radius: 8px
• Border: none
• Font: Amazon Ember, 20px, weight 500
• No hover/active/focus styles extracted — suggests minimal interaction feedback.

This is inverted from typical dark UI — white background, dark text — ensuring CTAs are obvious.

6.2 Links

Variants:

1. #2162a1, weight 400 — body links
2. #ffffff, weight 500 — nav links on dark
3. #00050d, weight 500 — dark-on-light links
4. #79b8f3, weight 400 — secondary links

No underline by default. Color only.

6.3 Forms

No text inputs extracted in detail. Search bars use 12px radius or full pill (10000px). Likely dark backgrounds with light text.

6.4 Cards

Cards use 8px or 12px radius, main shadow, and spacing from scale (e.g., 24px padding). No hover elevation change in data.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-black-1: #0f1111;
  --color-black-2: #00050d;
  --color-deep-navy-hover: #0c3353;
  --color-off-white-hover: #f1f1f1;
  --color-black-3: #01060e;
  --color-link-blue: #2162a1;
  --color-link-blue-light: #79b8f3;

  /* Typography */
  --font-primary: "Amazon Ember", "Amazon Arabic Ember", Arial;
  --font-secondary: Times;
  --font-size-h1: 50px;
  --font-size-subheading: 20px;
  --font-size-body-lg: 20px;
  --font-size-body: 16px;
  --font-size-body-sm: 15px;
  --font-size-caption: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-h1: 1.12;
  --line-height-subheading: 1.40;
  --line-height-body-sm: 1.27;
  --line-height-caption: 1.43;
  --letter-spacing-tight: 0.64px;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-9: 9px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-21: 21px;
  --space-24: 24px;
  --space-42: 42px;
  --space-72: 72px;
  --space-136: 136px;

  /* Radius */
  --radius-none-bottom-12: 0px 0px 12px 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 10000px;

  /* Shadows */
  --shadow-main: rgba(0, 0, 0, 0.3) 0px 4px 4px 0px, rgba(0, 0, 0, 0.15) 0px 8px 12px 6px;
  --shadow-accent: rgba(26, 152, 255, 0.2) 0px -4px 16px 0px;
}

8. AI Coding Assistant Prompt

# Amazon Prime Video Design System Specification

You are an Amazon Prime Video design expert. Build UIs matching their visual language exactly.

## Brand Context
Prime Video’s UI is cinematic, dark, and functional. The focus is on content, with minimal UI chrome. Colors are high-contrast, typography is consistent, and spacing follows an 8px grid with a few optical tweaks.

## Color Palette
- Primary White: #ffffff — Primary text, nav labels, CTAs
- Black 1: #0f1111 — Backgrounds
- Black 2: #00050d — Button text, deep backgrounds
- Deep Navy Hover: #0c3353 — Hover/focus backgrounds
- Off-White Hover: #f1f1f1 — Hover background on light surfaces
- Black 3: #01060e — Alternate hover/focus
- Link Blue: #2162a1 — Primary links
- Link Blue Light: #79b8f3 — Secondary links

## Typography
Font families:
- Primary: "Amazon Ember", "Amazon Arabic Ember", Arial
- Secondary: Times

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 50px | 700 | 1.12 | Hero titles |
| Subheading | 20px | 500 | 1.40 | Section titles |
| Button LG | 20px | 500 | 1.15 | Large CTAs |
| Body | 16px | 400 | normal | Paragraph text |
| Button SM | 16px | 500 | normal | Small CTAs |
| Label Tight | 16px | 500 | normal | UI labels |
| Body Small | 15px | 400 | 1.27 | Fine print |
| Caption | 14px | 400 | 1.43 | Metadata |

## Spacing & Grid
Base: 8px
Scale: 3px, 4px, 8px, 9px, 11px, 12px, 14px, 21px, 24px, 42px, 72px, 136px

## Border Radius
- none-bottom-12: 0 0 12px 12px — Cards with flat top
- sm: 8px — Buttons, chips
- md: 12px — Inputs, search bars
- full: 10000px — Pills, profile images

## Shadows & Depth
- Main: rgba(0,0,0,0.3) 0 4px 4px, rgba(0,0,0,0.15) 0 8px 12px 6px
- Accent: rgba(26,152,255,0.2) 0 -4px 16px

## Component Specifications

### Primary Button
Default:
```css
background-color: #ffffff;
color: #00050d;
padding: 8px 21px;
border-radius: 8px;
border: none;
font-family: "Amazon Ember", "Amazon Arabic Ember", Arial;
font-size: 20px;
font-weight: 500;
```
Hover/Focus/Active: No style change in extracted data — optional deep navy hover (#0c3353).
Disabled: opacity: 0.5; cursor: not-allowed;

### Navigation Link
Default:
```css
color: #ffffff;
font-weight: 500;
text-decoration: none;
```
Hover: no change.

### Body Link
```css
color: #2162a1;
font-weight: 400;
text-decoration: none;
```

## Layout & Responsive Rules
- Use Vuetify breakpoints (xs, sm, md, lg, xl)
- Maintain spacing multiples from scale
- Content max width: follow Vuetify container defaults

## Interaction Rules
- Keep transitions minimal (~150ms ease)
- Focus indicators visible — use color shifts or outlines
- Avoid hover-only cues for critical actions (accessibility)

## DO
- Use only palette colors
- Maintain 8px grid
- Use Amazon Ember for all UI text
- Keep high contrast for text
- Use full-radius pills for search/profile

## DON'T
- Introduce new accent colors
- Mix sharp and rounded corners
- Add heavy animations
- Use text under 14px for interactive elements
- Reduce contrast below WCAG AA

## Code Examples

### Button
```css
.btn-primary {
  background: #ffffff;
  color: #00050d;
  padding: 8px 21px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 500;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Card
```css
.card {
  background: #0f1111;
  border-radius: 12px;
  box-shadow: var(--shadow-main);
  padding: 24px;
}
```

### Input
```css
.input {
  border-radius: 12px;
  padding: 8px 12px;
  background: #00050d;
  color: #ffffff;
}
```

9. Summary

TL;DR — Prime Video’s design system is cinematic minimalism. Dark backgrounds, white text, minimal accents. An 8px grid with a few quirks. Amazon Ember everywhere. Buttons are high-contrast and functional. The brand color is basically white.

Brand Keywords

• cinematic-functional
• high-contrast
• content-first
• restrained-interaction
• dark-mode-native