Prime Video Design System Deep Dive

1. Brand Overview

Prime Video’s visual language is exactly what you’d expect from a global streaming platform under Amazon’s umbrella: clean, confident, and ruthlessly consistent. The vibe is premium without being pretentious. It’s a dark, cinematic base with pops of bright, clear whites and blue accents that feel tech-forward but not cold.

This isn’t a playful entertainment brand like Netflix’s red-on-black loudness. Prime Video is calmer. It’s designed to be the background for content discovery, not the star of the show. The UI lets the movies and shows shine, while maintaining a clear Amazon DNA — efficient typography, minimal decoration, and functional spacing. The tone is businesslike with small touches of friendliness in rounded corners and soft shadows.

The typography choice — Amazon Ember — immediately anchors it to the Amazon ecosystem. It’s highly legible, geometric yet humanized, and it’s paired with a strict hierarchy. The type scale is practical, with no flamboyant display fonts. Everything feels tested for legibility on TVs, phones, and laptops.

Color choices are restrained. The primary semantic color is pure white (#ffffff), used for text and elements on a dark background. The palette has deep blacks (#0f1111, #00050d) for the canvas, and specific blues (#0c3353, link blues like #2162a1) for accents. There’s no rainbow — everything is functional.

The design system also shows Amazon’s engineering-first mindset: the 8px spacing grid is rigorously applied. Border radii are standardized — 8px and 12px mostly — with occasional pill shapes for search bars and profile menus (10000px). Buttons have clear padding (8px 21px) and no surprise hover animations. Shadows are subtle, functional, and controlled.

If you’re designing for Prime Video, think: cinematic clarity, Amazon efficiency, and UI that disappears behind the content. No gradients, no gimmicks. Just a tight, consistent structure that works across devices and keeps accessibility in mind.

2. Color System

2.1 Primary Colors

The primary semantic color is rgb(255,255,255) → #ffffff. That’s unusual — most brands have a colored primary. For Prime Video, “primary” means the key UI color for text, CTAs, and interactive elements against the dark background. White here is the functional hero.

Psychologically, white on dark backgrounds feels clean, high-contrast, and cinematic. It mirrors the theater experience — lights off, screen bright. It also keeps the UI neutral so it doesn’t clash with vivid poster art.

Compared to Netflix’s red (#e50914), Prime Video’s white-first approach is calmer and less brand-shouting. Hulu uses green accents; Disney+ has a royal blue base. Prime Video says: “We’re here to serve the content, not compete with it.”

2.2 Complete Palette

2.3 Color Relationships

Contrast is king here. White (#ffffff) on deep black (#00050d) or charcoal (#0f1111) easily clears WCAG AAA contrast requirements. The blues (#2162a1, #79b8f3) are used sparingly, almost always against dark backgrounds, which keeps them accessible.

Dark mode isn’t a feature here — the entire brand lives in a “dark mode” aesthetic. Light gray (#f1f1f1) is reserved for hover states, never for main backgrounds.

2.4 Usage Guide

• Do pair #ffffff text with #0f1111 or #00050d backgrounds — maximum contrast.
• Do use #2162a1 for primary links; avoid mixing with lighter blues unless hierarchy demands it.
• Don’t introduce saturated colors — they’ll clash with posters.
• Don’t put #79b8f3 on light backgrounds — it loses contrast.
• Hover/focus states can use subtle shifts (#0c3353, #f1f1f1) to avoid jarring transitions.

3. Typography

3.1 Font Families

The entire site uses Amazon Ember with fallbacks to Amazon Arabic Ember and Arial. No Google Fonts, no Adobe webfonts. This is a custom corporate font — geometric sans with high legibility.

Fallbacks are practical: Arial is safe for every device if Ember fails. Arabic Ember covers right-to-left languages.

3.2 Type Scale

3.3 Hierarchy

Large 50px H1s are rare — likely hero titles. Most content relies on 20px and 16px sizes for headings and buttons, keeping the hierarchy tight. Even captions (14px) maintain legibility on TV screens. Slight letter-spacing (0.64px) is used for small headings and buttons, likely to increase clarity in UI labels.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Every spacing value is a multiple or near-multiple.

4.2 Layout

No explicit breakpoints in the data, but the Vuetify framework suggests a responsive grid. The spacing tokens imply consistent section padding and vertical rhythm.

5. Visual Elements

• Border Radius:

  • 0px 0px 12px 12px — bottom-rounded only (cards?).
  • 8px — standard for buttons, menus.
  • 12px — inputs, search fields.
  • 10000px — pill shape (search bars, profile menus).

• Shadows:

  • rgba(0,0,0,0.3) 0px 4px 4px, rgba(0,0,0,0.15) 0px 8px 12px 6px — functional depth on modals/cards.
  • rgba(26,152,255,0.2) 0px -4px 16px — rare, likely for focus glow.

• Borders:

  • Minimal. One combo: 0px 0px 1px solid #ffffff — subtle dividers.

6. Components

6.1 Buttons

Primary button (only variant in data):

Default:

• Background: #ffffff
• Text color: #00050d
• Padding: 8px 21px
• Radius: 8px
• Border: none
• Font: Amazon Ember, 20px, weight 500
• No shadow

Hover, active, focus states: not defined in data — likely minimal changes.

6.2 Links

Four styles:

• Blue (#2162a1), weight 400 — primary links
• White (#ffffff), weight 500 — nav links
• Black (#00050d), weight 500 — links on light backgrounds
• Light blue (#79b8f3), weight 400 — secondary links

No underlines in default state.

6.3 Forms

No text inputs defined in data. Inputs share radius 12px or pill shape (10000px). Borders minimal; focus likely uses subtle shadows.

6.4 Cards

No explicit card component, but shadows and radii suggest:

• Radius: 8px or 12px
• Shadow: rgba(0,0,0,0.3) style

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-dark-charcoal: #0f1111;
  --color-deep-black: #00050d;
  --color-navy-blue: #0c3353;
  --color-light-gray: #f1f1f1;
  --color-link-blue: #2162a1;
  --color-link-light-blue: #79b8f3;

  /* Typography */
  --font-primary: "Amazon Ember", "Amazon Arabic Ember", Arial;
  --font-secondary: Times;
  --font-size-h1-lg: 50px;
  --font-size-h1-sm: 20px;
  --font-size-button-lg: 20px;
  --font-size-button-sm: 16px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --line-height-h1-lg: 1.12;
  --line-height-h1-sm: 1.40;
  --line-height-button-lg: 1.15;
  --line-height-body-sm: 1.27;
  --line-height-caption: 1.43;
  --letter-spacing-sm: 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: 0px 0px 12px 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 10000px;

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

8. AI Coding Assistant Prompt

# Prime Video Design System Specification

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

## Brand Context
Prime Video’s design is cinematic, minimal, and functional. It uses a dark canvas with bright white and blue accents. Typography is Amazon Ember — clean, legible, and consistent across devices.

## Color Palette
- Primary White: #ffffff — Text, icons, buttons on dark backgrounds
- Dark Charcoal: #0f1111 — Page backgrounds, header/footer
- Deep Black: #00050d — Body text on light elements
- Navy Blue: #0c3353 — Hover/focus backgrounds
- Light Gray: #f1f1f1 — Hover/focus surfaces
- Link Blue: #2162a1 — Primary link text
- Light Link Blue: #79b8f3 — Secondary link text

## Typography
- Font family: "Amazon Ember", "Amazon Arabic Ember", Arial
- Secondary font: Times
- Sizes:
  - H1 Large: 50px, weight 700, line-height 1.12 — Hero titles
  - H1 Small: 20px, weight 500, line-height 1.40 — Section headings
  - Button Large: 20px, weight 500, line-height 1.15 — Main CTAs
  - Body: 16px, weight 400 — Paragraph text
  - Button Small: 16px, weight 500, letter-spacing 0.64px — Secondary CTAs
  - Caption: 14px, weight 400, line-height 1.43 — Metadata
  - Small Heading: 15px, weight 400, line-height 1.27 — Subheadings

## Spacing & Grid
Base: 8px
Scale: 3px, 4px, 8px, 9px, 11px, 12px, 14px, 21px, 24px, 42px, 72px, 136px
Use: Button padding (8px 21px), section gaps (42px), hero padding (72px)

## Border Radius
- none-bottom: 0px 0px 12px 12px — Cards with bottom rounding
- sm: 8px — Buttons, menus
- md: 12px — Inputs, search fields
- pill: 10000px — Search bars, profile menus

## Shadows & Depth
- Default: rgba(0,0,0,0.3) 0px 4px 4px, rgba(0,0,0,0.15) 0px 8px 12px 6px — Cards, modals
- Focus Glow: rgba(26,152,255,0.2) 0px -4px 16px — Focus states

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  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: minimal change, possible shadow or background shift
Disabled: opacity 0.5, cursor not-allowed

### Navigation Links
- Blue (#2162a1), weight 400 — primary
- White (#ffffff), weight 500 — nav
No underline default; hover may change color subtly

### Input Fields
Radius: 12px or 10000px
Border: minimal, possibly white divider
Focus: subtle glow shadow

### Cards
Background: dark
Radius: 8px or 12px
Shadow: default shadow

## Layout & Responsive Rules
- Maintain multiples of 8px for spacing
- Content sections padded 42px vertical
- Hero sections padded 72px
- Vuetify grid system for responsive layout

## Interaction Rules
- Transition timing: 150ms ease for color/background changes
- Focus indicators: glow shadow or border
- No exaggerated animations

## DO List
- Use only colors from the palette
- Keep typography strictly Amazon Ember
- Maintain 8px spacing grid
- Use consistent border radii: 8px, 12px, or pill
- Respect high contrast for text

## DON'T List
- Don’t introduce gradients
- Don’t mix sharp and rounded corners
- Don’t use unapproved colors
- Don’t overload shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #00050d;
  padding: 8px 21px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 20px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:focus {
  box-shadow: rgba(26,152,255,0.2) 0px -4px 16px;
}
```

Card:
```css
.card {
  background: #0f1111;
  border-radius: 12px;
  box-shadow: rgba(0,0,0,0.3) 0px 4px 4px, rgba(0,0,0,0.15) 0px 8px 12px 6px;
  padding: 24px;
}
```

Input:
```css
.input {
  border-radius: 12px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  box-shadow: rgba(26,152,255,0.2) 0px -4px 16px;
}
```

9. Summary

TL;DR — Prime Video’s design system is cinematic, minimal, and brutally consistent. Dark backgrounds, bright white text, controlled blue accents. Amazon Ember typography across the board. 8px grid. Rounded corners at 8px/12px, occasional pill shapes. Shadows are subtle. UI disappears behind the content.

Brand Keywords — cinematic-minimal, amazon-functional, dark-neutral, content-first, grid-purist