At a glance
17tokens
11type steps
2radius steps
8pxspacing base
Amazon Music, in one page
Amazon Music's iOS app is built on a deep teal-navy canvas (#0C1B22) — not a neutral grey or pure black, but a saturated dark blue-green that gives the app an instantly recognizable oceanic identity, distinct from Spotify's neutral #121212 or YouTube Music's near-black #030303. This single decision — using a *tinted* dark instead of a neutral one — is the visual thumbprint of the brand. The app's accent, Amazon Music Cyan (#00A8E1), is drawn straight from the canvas's hue family, so the whole product feels like one continuous gradient of blue: the dark canvas, the cyan controls, and the brighter glow cyan (#25D1DA) all sit on the same axis.
The signature surface is the full-screen player with the X-Ray lyrics panel. X-Ray is Amazon's cross-product feature brand (it powers actor/scene info in Prime Video and trivia in Audible); in Amazon Music it surfaces synced, line-by-line lyrics plus artist facts and song credits. On the player screen, the X-Ray lyrics appear in a tinted panel directly below the track metadata: the currently-sung line is highlighted in bright cyan (#25D1DA), the next line in secondary text, and surrounding lines dimmed to tertiary. Tapping any line seeks to that moment. This synced-lyric panel, badged with the cyan "X-RAY" chip, is the moment that no competitor replicates the same way — it is the brand's signature.
The player itself sits on a top-down gradient that lifts from the canvas toward a lighter teal (#16404C) behind the album art, then settles back into #0C1B22 toward the controls. Album art is a 196pt rounded square (6pt radius — tighter than Spotify's 8pt). The primary play control is a cyan circle with a white glyph and a soft cyan glow shadow — cyan *is* the action color here (unlike YouTube Music, where the play button is white). Rows of album art on Home (Recently played, Your Soundtrack, recommended stations) are horizontal-scroll shelves.
Typography is Amazon Ember — Amazon's corporate typeface, used across Amazon.com, Kindle, Alexa, and all Amazon apps. It is a clean humanist sans with slightly open apertures. On iOS without the bundled face it falls back to Inter, then SF Pro. Hierarchy is product-UI: an 800-weight screen greeting ("Good evening"), 700 for the player title and section heads, 500 for list-row titles, 400 for body. The X-Ray lyric line is its own 15pt 600 role because the lyric panel is the signature component.
Key Characteristics:
- Deep teal-navy canvas (
#0C1B22) — a tinted dark, not neutral grey; the brand thumbprint - Full-screen player with X-Ray lyrics — synced line-by-line, current line in bright cyan
- "X-RAY" badge — the cyan chip marking the lyrics/credits panel (Amazon's cross-product feature brand)
- Amazon Cyan (
#00A8E1) accent + glow cyan (#25D1DA) — both drawn from the canvas hue - Cyan play button — a cyan circle with a white glyph and a soft cyan glow (cyan IS the action)
- Top-down player gradient — lifts toward
#16404Cbehind the art, settles to#0C1B22 - Amazon Ember type — Amazon's corporate face, shared across Amazon.com / Kindle / Alexa
- Rows of art on Home — Recently played / Your Soundtrack / stations as horizontal shelves
- Bright-cyan active tab —
#25D1DA, brighter than the structural#00A8E1 - 4-tab bar: Home / Find / Podcasts / Library
Do's and don'ts
Do
- Use the deep teal-navy canvas
#0C1B22— a tinted dark, NOT neutral grey - Render the player on a top-down gradient lifting toward
#16404Cbehind the art - Make the play button a
#00A8E1cyan circle with a white glyph and a cyan glow shadow - Show the X-Ray lyrics panel below the metadata with the "X-RAY" badge and synced lines
- Highlight the currently-sung lyric line in bright cyan
#25D1DA; dim surrounding lines - Let tapping a lyric line seek playback to that moment
- Use teal-tinted greys for text/dividers (
#9FB6BF,#234653) — not neutral greys - Use Amazon Ember; if unavailable, fall back to Inter (it tracks Ember's metrics)
- Make the active tab bright cyan
#25D1DA— brighter than the structural#00A8E1 - Use tabular numerals for all timestamps
Don't
- Don't use a neutral grey or pure-black canvas — the teal tint is the brand thumbprint
- Don't make the play button white — cyan IS the action color in Amazon Music (unlike YT Music)
- Don't render lyrics as a plain unstyled list — the tinted X-Ray panel + cyan current line is the signature
- Don't use neutral
#A0A0A0greys — secondary text is the teal-tinted#9FB6BF - Don't substitute Ember for a serif or a geometric sans other than Inter
- Don't put a Material tint pill behind the active tab — the bright-cyan icon is the signal
- Don't drop the cyan glow on the play button — it's the player's luminous focal point
- Don't keep the lyric panel static during playback — it must auto-scroll and recolor the current line
- Don't introduce a second accent hue — Amazon Music is monochrome-teal + cyan
- Don't make the X-Ray badge low-contrast — it's
#042730on bright#25D1DAfor legibility
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 Amazon Music design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Amazon Cyan: #00a8e1
- Cyan Bright / Glow: #25d1da
- Cyan Pressed: #0086b3
- Canvas: #0c1b22
- Surface 1: #122a33
- Surface 2: #1a3742
- Divider: #234653
- Gradient Top: #16404c
- Text Primary: #ffffff
- Text Secondary: #9fb6bf
Type:
- families: Amazon Ember, Numerals, Fallback Stack, Ember
- scale: 9, 10, 11, 13, 14, 15, 16, 18, 22
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 8, 10
- elevation: Shadow: `0 8pt 22pt -6pt rgba(0,168,225,0.55)` — a soft cyan glow
Spacing: 8, 11, 13, 14
Rules:
- Use the deep teal-navy canvas `#0C1B22` — a tinted dark, NOT neutral grey
- Render the player on a top-down gradient lifting toward `#16404C` behind the art
- Make the play button a `#00A8E1` cyan circle with a white glyph and a cyan glow shadow
- Show the X-Ray lyrics panel below the metadata with the "X-RAY" badge and synced lines
- Highlight the currently-sung lyric line in bright cyan `#25D1DA`; dim surrounding lines
- Let tapping a lyric line seek playback to that moment
Avoid:
- Don't use a neutral grey or pure-black canvas — the teal tint is the brand thumbprint
- Don't make the play button white — cyan IS the action color in Amazon Music (unlike YT Music)
- Don't render lyrics as a plain unstyled list — the tinted X-Ray panel + cyan current line is the signature
- Don't use neutral `#A0A0A0` greys — secondary text is the teal-tinted `#9FB6BF`
- Don't substitute Ember for a serif or a geometric sans other than Inter
- Don't put a Material tint pill behind the active tab — the bright-cyan icon is the signal
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive / Brand)
- Amazon Cyan (
#00A8E1): Structural accent — play button fill, scrubber fill & thumb, primary CTA pills. - Cyan Bright / Glow (
#25D1DA): Active X-Ray lyric line, active tab, focus glow, "X-RAY" badge fill. - Cyan Pressed (
#0086B3): Pressed state of cyan CTAs and the play button.
Canvas & Surfaces (Dark — the primary mode)
- Canvas (
#0C1B22): Primary app background — deep teal-navy, the brand thumbprint. - Surface 1 (
#122A33): Cards, sheets, raised rows. - Surface 2 (
#1A3742): Pressed/hover rows, the mini-player bar, secondary chips. - Divider (
#234653): Hairline separators (a desaturated teal, not grey). - Gradient Top (
#16404C): The lighter teal the player gradient lifts toward behind the art. - X-Ray Panel Fill (
rgba(0,168,225,0.07)): The tinted background of the X-Ray lyrics panel. - X-Ray Panel Border (
rgba(37,209,218,0.22)): The faint cyan stroke around the X-Ray panel.
Text
- Text Primary (
#FFFFFF): Track names, screen titles, primary labels. - Text Secondary (
#9FB6BF): Artist names, subtitles, next-lyric line, source eyebrow (a teal-tinted grey, not neutral). - Text Tertiary (
#6B8693): Dimmed surrounding lyric lines, disabled, low-emphasis metadata. - On-Cyan Text (
#FFFFFF): Glyph inside the cyan play button, text on cyan CTAs. - On-Bright Text (
#042730): Text on the bright-cyan "X-RAY" badge (dark-on-bright for contrast).
Semantic
- Success (
#2EC4B6): Download-complete, added-to-library confirmation (a teal-green, on-brand). - Error (
#FF6B6B): Playback error, failed download toast. - HD / Ultra HD badge (
#25D1DAon#0C1B22): Quality badges use the glow cyan. - Dolby Atmos accent (
#9FB6BF): "Dolby Atmos" / "360 Reality Audio" capability labels.
Type scaleRead the full spec
Font Family
- Primary:
Amazon Ember(Amazon's proprietary corporate typeface, by Dalton Maag for Amazon) — humanist sans with open apertures, used across Amazon.com, Kindle, Alexa, Prime Video, and all Amazon apps. - Numerals: Amazon Ember tabular figures for timestamps and durations.
- Fallback Stack:
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif - Why Inter as the documented fallback: Inter's humanist proportions and x-height closely track Amazon Ember, so layouts built against Inter transfer faithfully when Ember is bundled.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Greeting | Ember | 32pt | 800 | 1.15 | -0.4pt | "Good evening", "Good morning" — time-of-day hero |
| Player Title | Ember | 26pt | 700 | 1.2 | -0.3pt | Track name on full-screen player |
| Section Header | Ember | 22pt | 700 | 1.25 | -0.2pt | "Recently played", "Made for you" |
| Card / Shelf Title | Ember | 18pt | 700 | 1.3 | -0.1pt | Playlist / station card titles |
| Body | Ember | 16pt | 400 | 1.5 | 0pt | Descriptions, about copy |
| Row Title | Ember | 15pt | 500 | 1.35 | 0pt | Song-row primary line |
| X-Ray Lyric Line | Ember | 15pt | 600 | 1.55 | 0pt | Synced lyric line — current in bright cyan |
| Subtitle / Meta | Ember | 14pt | 400 | 1.4 | 0pt | Artist · album, "PLAYING FROM PLAYLIST" |
| X-Ray Label | Ember | 10pt | 700 | 1.0 | 0.6pt | "LYRICS" / "ABOUT" eyebrow, uppercase |
| X-Ray Badge | Ember | 9pt | 800 | 1.0 | 0.5pt | The "X-RAY" chip text |
| Chip Label | Ember | 13pt | 600 | 1.0 | 0pt | Genre / mood / quality chips |
| Timestamp | Ember | 11pt | 400 | 1.0 | 0pt | Tabular figures, scrubber time |
| Tab Label | Ember | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Button | Ember | 15pt | 700 | 1.0 | 0pt | Play / Shuffle / Add to library |
Principles
- Product-UI rhythm: Heavy 800 greeting, 700 section heads — app-like, not editorial.
- Weight concentrated at 400 / 500 / 600 / 700 / 800: Body 400, rows 500, lyric line 600, headers/buttons 700, greeting 800.
- Ember is the brand: Never swap for a serif; Inter is the only acceptable substitute and only because it tracks Ember's metrics.
- Tabular numerals for time: Scrubber and durations use tabular figures so digits don't jitter.
- The lyric line is its own role: 15pt 600 — the X-Ray panel is the signature, so its type is deliberate.
- Dynamic Type: Greeting, section header, body, row title, lyric line scale; X-Ray badge, tab labels, timestamps stay fixed.
Components and layoutRead the full spec
Buttons
Primary Play Button (Player)
- Shape: Circle, 60pt diameter (52pt in compact contexts)
- Background:
#00A8E1(Amazon Cyan) — cyan IS the action color - Glyph: play/pause in
#FFFFFF, 24pt - Shadow:
0 8pt 22pt -6pt rgba(0,168,225,0.55)— a soft cyan glow - Pressed: background
#0086B3+ scale 0.97
Primary CTA Button (Play / Shuffle Play)
- Shape: Pill, 999pt corner radius
- Background:
#00A8E1 - Text:
#FFFFFF, Ember 15pt weight 700 - Padding: 13pt vertical, 28pt horizontal
- Pressed: background
#0086B3+ scale 0.98
Outline Button (Shuffle / Radio)
- Background: transparent
- Text:
#25D1DA(glow cyan), Ember 14pt weight 600 - Border: 1pt
#25D1DA - Padding: 11pt vertical, 22pt horizontal
- Corner radius: 999pt
- Pressed: background
rgba(0,168,225,0.1)
Ghost Button (Add to library / Follow)
- Background:
#1A3742(Surface 2) - Text:
#FFFFFF, Ember 14pt weight 600 - Border: 1pt
#234653 - Padding: 11pt vertical, 20pt horizontal
- Corner radius: 999pt
- Pressed:
#234653
Text Button ("See all", "More")
- Font: Ember 14pt weight 700
- Color:
#25D1DA - No underline, no background
- Pressed: opacity 0.6
Icon Button (skip / repeat / shuffle / ⋮)
- Glyph: 22–24pt in a 44pt hit area
- Primary controls (
backward/forward):#FFFFFF - Secondary controls (repeat/shuffle at rest):
#9FB6BF; active:#25D1DA - Pressed: opacity 0.6
X-Ray Lyrics Panel (Signature)
- Container:
rgba(0,168,225,0.07)fill,rgba(37,209,218,0.22)1pt border, 10pt corner radius - Padding: 14pt vertical, 16pt horizontal; positioned directly below player metadata, 16pt below it
- Header row:
"X-RAY"badge +"LYRICS"label - Badge:
#25D1DAbackground,#042730text, Ember 9pt 800, 0.5pt tracking, 4pt radius - Label:
#9FB6BF, Ember 10pt 700, 0.6pt tracking, uppercase - Lyric lines: Ember 15pt 600, 1.55 line-height
- Current (sung) line:
#25D1DA(bright cyan) - Next line:
#9FB6BF(secondary) - Surrounding lines:
#6B8693(tertiary, dimmed) - Interaction: tap any line to seek to that timestamp; the panel auto-scrolls to keep the current line centered
- "ABOUT" / "CREDITS" variants reuse the same panel with a different label (artist facts, songwriters)
Scrubber / Progress Bar
- Track: 4pt height,
rgba(255,255,255,0.16), 2pt radius - Fill:
#00A8E1(Amazon Cyan) - Thumb: 13pt
#00A8E1circle +0 0 0 4pt rgba(0,168,225,0.2)halo (halo grows to 6pt while dragging) - Time labels: 11pt
#9FB6BFtabular, elapsed left / remaining (negative) right - Buffered:
rgba(255,255,255,0.28)segment behind fill
Album Art
- Player: 196pt square, 6pt corner radius,
0 18pt 44pt -16pt rgba(0,0,0,0.65)shadow - Shelf card art: 6pt radius (matches player)
- List-row art: 4pt radius
- HD / Ultra HD / Dolby Atmos badge overlaid bottom-left when applicable, glow-cyan text
Cards / Shelves (Home)
- Background:
#122A33 - Corner radius: 10pt
- Art: 6pt radius
- Title: Ember 18pt 700
#FFFFFF; subtitle 14pt 400#9FB6BF - Layout: horizontal-scroll shelves ("Recently played", "Your Soundtrack", "Stations for you")
- Pressed:
#1A3742
List Rows (song lists)
- Height: 58pt
- Leading: 44pt art (4pt radius) OR 24pt index
#9FB6BF - Primary: Ember 15pt 500
#FFFFFF - Secondary: Ember 14pt 400
#9FB6BF - Trailing: ⋮ overflow (22pt
#9FB6BF); explicit "E" badge; HD badge if applicable - Pressed:
#1A3742full-row
Chips (genre / mood / quality filters)
- Height: 32pt, 999pt radius
- Rest:
#1A3742, text#FFFFFFEmber 13pt 600 - Selected:
#00A8E1bg,#FFFFFFtext - Quality chip ("HD", "ULTRA HD"):
#25D1DAtext on transparent with#25D1DAborder - Horizontal scroll, 8pt gap
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Player art 168pt; X-Ray panel shows 3 lines |
| iPhone 13/14/15 | 390pt | Standard layout; art 196pt, X-Ray shows 4 lines |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in player top bar |
| iPhone 15/16 Pro Max | 430pt | Art 224pt; X-Ray shows 5 lines |
| iPad (portrait) | 768pt | Art 280pt centered; shelves show 3–4 cards |
| iPad (landscape) | 1024pt+ | Two-pane: art + transport left, X-Ray panel right; content max 1000pt |
Dynamic Type
- Greeting, section header, body, row title, lyric line: full scale
- X-Ray badge, X-Ray label, tab labels, timestamps: FIXED (layout-sensitive)
- Lyric panel grows taller as the line scales, keeping the current line centered
Orientation
- Portrait default everywhere
- iPad landscape splits the player into art/transport + a wider X-Ray lyrics column
- Lyrics full-screen mode (tap the X-Ray panel to expand): supports rotation, large centered lines
Touch Targets
- Play button: 60pt glyph, 60pt+ hit
- Lyric lines (tap-to-seek): full line width, 44pt min height hit
- Skip / repeat / shuffle: 22–24pt glyph, 44pt hit
- List rows: 58pt tall, full-row tap; ⋮ overflow 44pt hit
- Tab bar icons: 22pt glyph, 49pt hit
Safe Area Handling
- Top: player top bar and Dynamic Island respected
- Bottom: mini-player + tab bar + home indicator stacked, all safe-area aware
- The X-Ray panel never extends under the home indicator; the footer action row sits above it
- Lyrics full-screen: lines inset from notch and home indicator
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-amazon-music {--page-bg: #0c1b22;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #00a8e1;
--link-hover-color: #0082ae;
--border-color: #38444a;
--card-bg: #0c1b22;
--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: #1f2d34;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0c1b22;
--footer-text-color: #aaafb2;
--button-bg: #00a8e1;
--button-text-color: #000000;
--button-hover-bg: #0082ae;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #1b292f;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #29363d;
--button-secondary-border: 1px solid #38444a;
--prompt-bg: #18262d;
--prompt-text-color: #ffffff;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- charles schwab 90.6%
- plenty of fish 82.8%
- fidelity 78.4%
- recruit 76.6%
- fitbit 75.7%
Where this came from
- Source document
ios/design-md/music/amazon-music/DESIGN.md· 23.3 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.