At a glance
17tokens
10type steps
2radius steps
12pxspacing base
Prime Video, in one page
Prime Video's iOS app is a cinema-store hybrid built on a dark navy canvas (#0F171E) — not a neutral black, but Amazon's deep blue-slate that signals the brand without shouting it. The background carries a faint cool-navy temperature, and elevated surfaces (#1A242F, #232F3E) step up within the same blue-gray family so the billboard, content rows, and the store separate cleanly without visible borders. The interface is content-forward and information-rich: a large auto-still billboard leads, dense rows of artwork follow, and "Channels" and category rows mix subscription storefronts with included content. The chrome stays restrained so artwork and the famous Amazon smile-arrow accent carry the identity.
The accent system is a single confident hue. Prime Blue (#00A8E1) — Amazon's bright cyan-blue — owns the verb: the primary "Play" / "Resume" CTA, the active tab, the X-Ray button, watchlist toggles, and focus. The smile-arrow motif (the Amazon swoosh) appears as the brand mark and subtle directional accents. Everything else is white, blue-gray, or deep navy. The restraint around the blue is deliberate — against full-color artwork it reads unmistakably as "go."
Typography is Amazon Ember (Amazon's brand typeface), rendered here with an Inter fallback that preserves its open, legible humanist-grotesque character. The hierarchy is compact and utilitarian: 11-30pt at weights 400 / 600 / 700. There are no oversized editorial headlines — the billboard art and the X-Ray cast strip are the spectacle. Type labels and merchandises: titles at 15-16pt weight 600, metadata (year · rating · IMDb) at 12-13pt weight 400 in blue-gray, row headers at 20-22pt weight 700. The most expressive type moment is the details page, where the title sits at 28-30pt weight 700 above an X-Ray-enabled metadata bar.
Key Characteristics:
- Dark navy canvas (
#0F171E) — Amazon blue-slate, not neutral black - Prime Blue (
#00A8E1) as the single accent — the "Play" verb, active tab, X-Ray, watchlist - Hero billboard — full-bleed auto-still with the blue Play CTA and watchlist plus
- X-Ray cast overlay — tap during playback to slide up a live cast/scene panel (the signature feature)
- Channel & category rows — storefront subscriptions interleaved with included content rows
- Smile-arrow accent — the Amazon swoosh as brand mark and subtle directional cue
- Watchlist plus — a
+toggle that fills blue when an item is added - Amazon Ember typeface (Inter fallback), weights 400/600/700
- Row scroll snap — rows paginate with a gentle snap; X-Ray slides up over video
- Bottom tab bar: Home, Store, Live, Find, Downloads
Do's and don'ts
Do
- Use
#0F171Edark navy as the canvas — Amazon blue-slate, NOT neutral black (#000000is player-only) - Reserve Prime Blue (
#00A8E1) for the "Play" verb, active tab, X-Ray, and watchlist-added — the single accent - Use dark-navy text (
#0F171E) on the blue CTA — intentional for contrast on the bright cyan-blue - Lead Home with the full-bleed billboard; snap-paginate the rows below
- Make X-Ray a contextual slide-up that preserves the video above it — never a full modal
- Show the IMDb badge in
#F5C518(brand-family — Amazon owns IMDb) - Make the active tab BLUE (icon + label) — blue is the indicator
- Toggle the watchlist
+to a blue checkmark with a success haptic
Don't
- Don't use pure black
#000000for the app canvas — that's the player surface; navy#0F171Eis the brand - Don't add a second accent hue — the single Prime Blue is the whole voice (IMDb yellow is a badge, not an accent)
- Don't use white text on the blue button — dark-navy is the intentional contrast choice
- Don't use thin or medium weights — Amazon Ember here is 400 / 600 / 700 only
- Don't round content tiles heavily — 6pt max keeps poster integrity
- Don't make X-Ray a full-screen modal — it must preserve the scene above it
- Don't introduce visible card borders — elevation is blue-gray surface-step color
- Don't over-animate — tile scale is subtle (1.04); the signature motion is the X-Ray slide-up and row snap
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Prime Video design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Prime Blue: #00a8e1
- Prime Blue Pressed: #008cbd
- Canvas: #0f171e
- Deep Black: #000000
- Surface 1: #1a242f
- Surface 2: #232f3e
- Surface 3: #2e3b47
- Divider: #2e3b47
- Text Primary: #ffffff
- Text Secondary: #aab7c4
Type:
- families: Amazon Ember, Fallback Stack, Numerals
- scale: 10, 11, 12, 13, 15, 16, 20, 22, 28
- weights: 400, 600, 700
Shape:
- radius: 6, 8
- elevation: Shadow: `rgba(0,168,225,0.32) 0 8px 24px` — a soft blue glow
Spacing: 12, 14, 16
Rules:
- Use `#0F171E` dark navy as the canvas — Amazon blue-slate, NOT neutral black (`#000000` is player-only)
- Reserve Prime Blue (`#00A8E1`) for the "Play" verb, active tab, X-Ray, and watchlist-added — the single accent
- Use dark-navy text (`#0F171E`) on the blue CTA — intentional for contrast on the bright cyan-blue
- Lead Home with the full-bleed billboard; snap-paginate the rows below
- Make X-Ray a contextual slide-up that preserves the video above it — never a full modal
- Show the IMDb badge in `#F5C518` (brand-family — Amazon owns IMDb)
Avoid:
- Don't use pure black `#000000` for the app canvas — that's the player surface; navy `#0F171E` is the brand
- Don't add a second accent hue — the single Prime Blue is the whole voice (IMDb yellow is a badge, not an accent)
- Don't use white text on the blue button — dark-navy is the intentional contrast choice
- Don't use thin or medium weights — Amazon Ember here is 400 / 600 / 700 only
- Don't round content tiles heavily — 6pt max keeps poster integrity
- Don't make X-Ray a full-screen modal — it must preserve the scene above it
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Prime Blue (
#00A8E1): Primary "Play" / "Resume" CTA, active tab icon + label, X-Ray button, watchlist-added state, focus ring, smile-arrow accent. - Prime Blue Pressed (
#008CBD): Pressed/active state for blue CTAs and toggles. - Prime Blue Glow (
rgba(0,168,225,0.32)): Soft glow under the primary CTA and around a focused tile.
Canvas & Surfaces
- Canvas (
#0F171E): Primary dark-navy app background — Amazon blue-slate. - Deep Black (
#000000): Full-screen video player background only. - Surface 1 (
#1A242F): Card backgrounds, sheets, elevated rows, details metadata panel. - Surface 2 (
#232F3E): Higher elevation — modals, active rows, X-Ray panel, chip default background. - Surface 3 (
#2E3B47): Pressed state on navy surfaces, hairline divider tone. - Divider (
#2E3B47): 1pt separators between settings rows and metadata blocks.
Text
- Text Primary (
#FFFFFF): Titles, screen headers, primary labels. - Text Secondary (
#AAB7C4): Blue-gray — metadata (year · rating · IMDb), descriptions, row subtitles. - Text Tertiary (
#6E7B89): Disabled labels, very low-emphasis captions, placeholder text.
Semantic
- IMDb Yellow (
#F5C518): IMDb rating badge ("★ 8.4 IMDb") — Amazon owns IMDb; this is a deliberate brand-family accent. - Live Red (
#E50914): "LIVE" badge on Prime live sports/events and the live now-playing marker. - Included Badge (
#00A8E1): "Included with Prime" / "Watchlist" affordances reuse Prime Blue. - Error Red (
#E50914): Playback errors, download failures, offline state.
Light Mode (Limited Use)
Prime Video's iOS app is effectively dark-only — the cinema-store atmosphere depends on the dark-navy canvas. A light variant is not part of the core product.
- Light Canvas (
#FFFFFF) - Light Text (
#0F171E)
Type scaleRead the full spec
Font Family
- Primary:
Amazon Ember(Amazon brand typeface) — open humanist grotesque, highly legible - Fallback Stack:
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for runtime, year, IMDb score, episode counts
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Details Title | Amazon Ember | 30pt | 700 | 1.1 | -0.4pt | Title on details page (when no logo art) |
| Screen Title (Large) | Amazon Ember | 28pt | 700 | 1.15 | -0.4pt | "Store", "Downloads" large nav title |
| Row Header | Amazon Ember | 22pt | 700 | 1.2 | -0.3pt | "Included with Prime", "Continue Watching" |
| Section Header | Amazon Ember | 20pt | 700 | 1.2 | -0.3pt | Sub-rows inside a category |
| Episode Title | Amazon Ember | 16pt | 600 | 1.25 | -0.1pt | Episode row title in details |
| Tile Title | Amazon Ember | 15pt | 600 | 1.3 | -0.1pt | Show title under a tile |
| Body | Amazon Ember | 15pt | 400 | 1.45 | 0pt | Synopsis, episode description |
| Metadata | Amazon Ember | 13pt | 400 | 1.3 | 0pt | "2024 · 16+ · 1 Season" |
| Tile Subtitle | Amazon Ember | 12pt | 400 | 1.3 | 0pt | "Included with Prime" / "S2 E1" |
| Label (UPPER) | Amazon Ember | 11pt | 700 | 1.2 | 0.6pt | "CONTINUE WATCHING" eyebrow labels |
| Button (Primary) | Amazon Ember | 16pt | 700 | 1.0 | 0.2pt | Blue "Play" / "Resume" button |
| Button (Secondary) | Amazon Ember | 15pt | 600 | 1.0 | 0pt | "Watchlist", "Trailer", outline buttons |
| Tab Label | Amazon Ember | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
| Badge | Amazon Ember | 11pt | 700 | 1.0 | 0.4pt | "LIVE", IMDb, "X-Ray" pill |
Principles
- Weights concentrated at 400 / 600 / 700: Regular for body/metadata, semibold for titles, bold for headers and CTAs — no thin, no medium, no black
- Legibility over drama: Amazon Ember is engineered for clarity; no decorative display type — billboard art and the X-Ray strip are the spectacle
- Negative tracking on big type, neutral on small: -0.4pt at 30pt easing to 0pt at body
- All-caps only for eyebrows and badges: "CONTINUE WATCHING", "X-RAY" — never for titles
- Blue text is structural: Prime Blue appears only on the active tab label and the X-Ray pill; never as decorative body color
Components and layoutRead the full spec
Buttons
Primary Play CTA (The Blue Button)
- Shape: Rounded rectangle, height 52pt, full-width within content margins (auto-width on billboard)
- Background:
#00A8E1 - Text:
#0F171E(intentionally dark-navy for contrast on the bright cyan-blue, not white) - Icon: SF Symbol
play.fill18pt leading the label, also#0F171E - Corner radius: 8pt
- Font: Amazon Ember 16pt weight 700, letter-spacing 0.2pt
- Shadow:
rgba(0,168,225,0.32) 0 8px 24px— a soft blue glow - Pressed: background
#008CBD, scale 0.97, with.impactOccurred(.light)haptic
Watchlist Toggle (the + button)
- Shape: Rounded rectangle, height 52pt (auto-width) or a 44pt circle in compact contexts
- Default: background
rgba(255,255,255,0.14),plusglyph + "Watchlist" label#FFFFFF - Added: glyph becomes
checkmark, tint#00A8E1, label "Watchlisted" - Corner radius: 8pt; Font: Amazon Ember 15pt weight 600
- Pressed: background
rgba(255,255,255,0.22), scale 0.98, success haptic on add
X-Ray Button / Pill
- Background:
rgba(255,255,255,0.16)(over video) or#232F3E(in details) - Content: "X-Ray" in Amazon Ember 13pt weight 700, optional small
info.circleglyph - Height: 32pt, corner radius 6pt, horizontal padding 14pt
- Pressed: background brightens; on tap, slides the X-Ray panel up
Secondary Button ("Trailer" / "More")
- Background:
rgba(255,255,255,0.14) - Text:
#FFFFFF, height 52pt, corner radius 8pt - Font: Amazon Ember 15pt weight 600
- Pressed: background
rgba(255,255,255,0.22), scale 0.98
Text Button ("See more")
- Font: Amazon Ember 13pt weight 600
- Color:
#AAB7C4 - No underline, 44pt hit area, trailing each row header
Cards & Containers
Content Tile (Horizontal row)
- Width: 130pt (2:3 poster, the Prime default) or 200pt (16:9 for continue-watching)
- Aspect: 2:3 or 16:9
- Corner radius: 6pt on the artwork
- Gap between tiles: 12pt
- Optional "Included with Prime" ribbon (Prime Blue text, 11pt) under the tile, or a small
primecheckmark badge top-left - Continue-watching variant: thin blue progress bar (3pt) on the bottom edge over
rgba(255,255,255,0.25) - Press: scale 1.04 with focus lift
rgba(0,0,0,0.5) 0 12px 28pxand a subtle blue ring
Channel Tile (storefront)
- Width: 150pt, the channel's logo art on a brand-tinted card, 8pt corner radius
- "Subscribe" / "Included" affordance below in 12pt; pressed scales 0.97
Hero Billboard
- Full-bleed, height ~ 440pt (top of Home)
- Auto-still (or short muted clip) with a bottom-up gradient
rgba(15,23,30,0) → #0F171E - Show logo art (or 30pt w700 title) bottom-left
- Metadata line "2024 · 16+ · 1 Season · ★ 8.4 IMDb" 13pt w400
#AAB7C4(IMDb badge in#F5C518) - Action row: blue "Play" CTA + watchlist
++ "Trailer"
Details Hero
- Full-bleed 16:9 backdrop still, height ~ 280pt, darkened bottom-up to
#0F171E - Logo art (or 30pt w700 title) anchored bottom-left
- Metadata + IMDb badge + an X-Ray pill
- Action row: blue "Play" CTA + watchlist
++ "Download" + "Share" - Below: synopsis (15pt w400, 3-line clamp + "More"), then episode list / "More like this" rows
Episode Row
- Height: 96pt
- Layout: 140pt × 79pt (16:9) thumbnail (blue progress if partially watched) → stacked title (16pt w600) + "S2 E1 · 58 min" meta (13pt w400
#AAB7C4) + 2-line description → trailing download icon - Background: transparent (
#0F171E) - Pressed: background
#1A242F
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
rgba(15,23,30,0.94)with.regularMaterialblur - Tabs: Home, Store, Live, Find, Downloads
- Icon size: 24pt
- Active color:
#00A8E1(icon + label both turn blue — blue is the indicator) - Inactive:
#AAB7C4 - Labels: Amazon Ember 10pt w600, always shown
- Active tab icon: filled SF Symbol; inactive: outlined
Top Nav (Home)
- Height: 48pt + safe area
- Prime Video wordmark / smile-arrow mark top-left
- Profile avatar (28pt circular) + cast icon top-right
- Transparent over the billboard, fades to
rgba(15,23,30,0.94)blur on scroll
Player Controls Overlay
- Tap video → controls fade in over a
rgba(0,0,0,0.5)scrim - Center: 64pt circular
rgba(255,255,255,0.16)play/pause, ±10s skip flanking at 28pt - Bottom: blue scrubber (2pt track
rgba(255,255,255,0.3),#00A8E1fill, 14pt white thumb), elapsed/remaining 12pt - Top: title + close (✕); bottom-right: X-Ray, audio/subtitles, AirPlay
- X-Ray tap: slides the X-Ray panel up from the bottom over the lower third
Input Fields
Search Bar (Find)
- Background:
#232F3E - Height: 44pt, corner radius 8pt
- Leading SF Symbol
magnifyingglass18pt#AAB7C4 - Placeholder: "Search Prime Video", 16pt w400
#AAB7C4 - Text color:
#FFFFFF - Focus: 1.5pt
#00A8E1ring
Filter / Genre Chip
- Background:
#232F3Edefault /#00A8E1selected - Text:
#FFFFFFdefault /#0F171Eselected - Height: 36pt, corner radius 500pt (full pill), horizontal padding 16pt
- Font: Amazon Ember 14pt weight 600
Distinctive Components
X-Ray Cast Overlay
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 110pt 2:3 posters; billboard 400pt |
| iPhone 13/14/15 | 390pt | Standard 130pt posters; billboard 440pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in transparent top nav |
| iPhone 15/16 Pro Max | 430pt | 150pt posters; billboard scales to 500pt |
| iPad | 768pt+ | 5-6 col Find grid; larger billboard; X-Ray as a side panel in landscape |
Dynamic Type
- Titles, episode titles, synopsis: full scale
- Tile subtitle / metadata / IMDb badge: scales but clamps at +2 steps (layout-sensitive in rows)
- Play CTA label: scales to 18pt max; button height fixed at 52pt
- Tab labels, badges, scrubber times: fixed (never scale)
Orientation
- Home / Store / Find / Downloads / Details: portrait-locked
- Video player: rotates to landscape — auto-enters full-screen landscape on play
- X-Ray: in portrait slides up over the lower video; in landscape becomes a right-side panel
Touch Targets
- Play CTA: 52pt height, full-width — impossible to miss
- Content tiles: full-tile tappable, ≥ 110pt tall hit
- Episode rows: 96pt height, full-row tappable
- X-Ray pill / watchlist
+: 44pt hit area - Tab bar icons: 24pt icon, 44pt effective hit
Safe Area Handling
- Top: transparent nav respects safe area / Dynamic Island over the billboard
- Bottom: tab bar floats above home indicator; X-Ray panel and player controls inset from it
- Sides: 16pt content margins; rows bleed to the right edge intentionally
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-prime-video {--page-bg: #0f171e;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #00a8e1;
--link-hover-color: #0082ae;
--border-color: #3a4147;
--card-bg: #0f171e;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #222a30;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0f171e;
--footer-text-color: #abaeb0;
--button-bg: #00a8e1;
--button-text-color: #000000;
--button-hover-bg: #0082ae;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #1d252c;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #2c3339;
--button-secondary-border: 1px solid #3a4147;
--prompt-bg: #1b2329;
--prompt-text-color: #ffffff;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 87.2%
- tumblr 86.3%
- disney plus 80.3%
- happn 80.3%
- plex 80.0%
Where this came from
- Source document
ios/design-md/video/prime-video/DESIGN.md· 21.9 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.