designmd-forge 1.2.0

package/dist/data/designs/ios-amazon-music.md

@@ -0,0 +1,389 @@
+# Design System Inspiration of Amazon Music (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+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 `#16404C` behind 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
+
+## 2. Color Palette & Roles
+
+### 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** (`#25D1DA` on `#0C1B22`): Quality badges use the glow cyan.
+- **Dolby Atmos accent** (`#9FB6BF`): "Dolby Atmos" / "360 Reality Audio" capability labels.
+
+## 3. Typography Rules
+
+### 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.
+
+## 4. Component Stylings
+
+### 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: `#25D1DA` background, `#042730` text, 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 `#00A8E1` circle + `0 0 0 4pt rgba(0,168,225,0.2)` halo (halo grows to 6pt while dragging)
+- Time labels: 11pt `#9FB6BF` tabular, 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: `#1A3742` full-row
+
+### Chips (genre / mood / quality filters)
+- Height: 32pt, 999pt radius
+- Rest: `#1A3742`, text `#FFFFFF` Ember 13pt 600
+- Selected: `#00A8E1` bg, `#FFFFFF` text
+- Quality chip ("HD", "ULTRA HD"): `#25D1DA` text on transparent with `#25D1DA` border
+- Horizontal scroll, 8pt gap
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `#081218` with 0.5pt top border `#234653`
+- Tabs (4): Home, Find, Podcasts, Library
+- Icon: 22pt
+- Active: `#25D1DA` (filled glyph, bright cyan)
+- Inactive: `#6B8693` (outline glyph)
+- No tint pill — bright cyan icon + label is the active signal
+- Labels: Ember 10pt 500, always shown
+
+**Player Top Bar**
+- Height: 44pt
+- Leading: chevron-down (dismiss to mini-player), 22pt `#FFFFFF`
+- Center: source eyebrow ("PLAYING FROM PLAYLIST") 10pt 700 `#9FB6BF` uppercase, 0.7pt tracking
+- Trailing: ⋮ overflow, 22pt `#FFFFFF`
+
+**Player Footer Row**
+- A row of 20pt secondary actions below transport: queue, lyrics-toggle, equalizer/Atmos, cast/devices
+- Icons `#9FB6BF`; active state `#25D1DA`
+
+**Mini-Player Bar (above tab bar)**
+- Height: 56pt, background `#1A3742`, 8pt radius (floating) or full-bleed
+- 40pt art (4pt radius) + title (13pt 600) + artist (11pt 400 `#9FB6BF`) + play/pause + next
+- Tap to expand to full-screen player
+- Thin cyan progress line at the bottom edge
+
+### Input Fields
+
+**Search Bar (Find tab)**
+- Height: 44pt
+- Background: `#122A33`
+- Border: none
+- Corner radius: 8pt
+- Leading magnifier 18pt `#9FB6BF`
+- Placeholder: "Songs, artists, podcasts & more" 15pt 400 `#6B8693`
+- Focus: 1pt `#25D1DA` border + faint cyan glow
+
+### Distinctive Components
+
+**X-Ray Lyrics Panel** — see above. The single most identifying component; the synced cyan lyric line + "X-RAY" badge.
+
+**Top-Down Player Gradient** — the teal lift toward `#16404C` behind the art that defines the player's depth.
+
+**Time-of-Day Greeting** — the screen title changes ("Good morning" / "Good evening") — a small but characteristic Amazon Music touch.
+
+**Quality Badges (HD / Ultra HD / Dolby Atmos)** — glow-cyan capability badges on art and rows, distinctive to Amazon Music's HD positioning.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 22, 28, 32, 44, 60
+- Player vertical rhythm: art → 16pt → meta → 16pt → X-Ray panel → 16pt → scrubber → 12pt → controls
+- Screen content inset: 18pt horizontal (slightly wider than the 16pt norm)
+- Row vertical padding: 8pt
+
+### Grid & Container
+- iPhone: content at 18pt horizontal insets; player art 196pt centered
+- Home shelves: horizontal-scroll carousels, 8pt gap, 18pt leading inset
+- iPad: player art scales to 280pt; shelves show more cards; content max width 1000pt; the X-Ray panel can sit beside the art in landscape
+- X-Ray panel: full content width minus 18pt insets
+
+### Whitespace Philosophy
+- **Art + lyrics are the center**: the player gives the cover and the X-Ray panel maximum prominence; chrome is compact
+- **Tinted, not neutral**: dividers and surfaces are teal-tinted (`#234653`, not `#2C2C2E`) so the whole UI reads as one blue field
+- **Dense lists, generous player**: 58pt list rows; the player breathes around the art and lyric panel
+
+### Border Radius Scale
+- Square (0pt): full-bleed gradients, backdrop
+- Micro (2pt): scrubber track
+- Subtle (4pt): list-row art, mini-player art, "X-RAY" badge
+- Card-Art (6pt): album art (player + shelf cards)
+- Panel (10pt): the X-Ray lyrics panel, sheets
+- Comfortable (16pt): large modals
+- Pill (999pt): CTA buttons, chips
+- Circle (50%): play button, avatars
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | List rows, chrome, tab bar |
+| Gradient (Level 1) | Top-down teal lift toward `#16404C` | Player background behind art |
+| Floating (Level 2) | `0 18px 44px -16px rgba(0,0,0,0.65)` | Album art on the player |
+| Glow (Level 2b) | `0 8px 22px -6px rgba(0,168,225,0.55)` | The cyan play button |
+| Sheet (Level 3) | `0 -8px 28px rgba(0,0,0,0.55)` + scrim | Bottom sheets, queue |
+| Modal Scrim | `rgba(0,0,0,0.55)` | Behind sheets and dialogs |
+
+**Shadow Philosophy**: Depth on the player comes from the **gradient lift** plus the album-art drop shadow; the one luminous element is the **cyan glow on the play button**, which makes it the obvious focal action. Chrome is otherwise flat. The X-Ray panel uses a tinted fill + faint cyan border instead of a shadow to read as "raised" without adding visual noise.
+
+### Motion
+- **Player present/dismiss**: mini-bar expands upward into full screen over 300ms ease-out; reverse on chevron-down
+- **X-Ray lyric scroll**: as playback advances, the lyric panel auto-scrolls so the current line stays centered; the line recolors tertiary→bright-cyan over 180ms ease-out; the previous line fades back to tertiary
+- **X-Ray seek tap**: tapping a line scrubs playback to that timestamp; the tapped line pulses to bright cyan
+- **Scrubber drag**: thumb halo grows 4→6pt instantly on touch-down; snaps back 150ms on release
+- **Gradient settle**: on track change, the player gradient and art crossfade old→new over 350ms
+- **Tab switch**: instant icon recolor to bright cyan (no slide, no pill)
+- **Shelf scroll**: horizontal momentum scroll with rubber-band; cards snap softly
+- **Haptic feedback**: light impact on play/pause, X-Ray line tap-to-seek, scrubber touch-down
+
+## 7. 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 `#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
+- 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 `#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
+- 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 `#042730` on bright `#25D1DA` for legibility
+
+## 8. Responsive Behavior
+
+### 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
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#0C1B22`
+- Surface 1: `#122A33`
+- Surface 2 / mini-player: `#1A3742`
+- Divider: `#234653`
+- Gradient top (player): `#16404C`
+- Amazon Cyan (structural accent): `#00A8E1`
+- Cyan bright / glow (active lyric, active tab, X-Ray badge): `#25D1DA`
+- Cyan pressed: `#0086B3`
+- X-Ray panel fill: `rgba(0,168,225,0.07)`
+- X-Ray panel border: `rgba(37,209,218,0.22)`
+- Text primary: `#FFFFFF`
+- Text secondary: `#9FB6BF`
+- Text tertiary: `#6B8693`
+- Success: `#2EC4B6`
+- Error: `#FF6B6B`
+
+### Example Component Prompts
+- "Build the Amazon Music full-screen player in SwiftUI: background is a top-down `LinearGradient` from `#1C4A57` → `#163A45` → `#0F2730` → `#0C1B22`. Centered 196pt square album art, 6pt corners, `0 18pt 44pt -16pt rgba(0,0,0,0.65)` shadow. Below: track name Ember 26pt weight 700 `#FFFFFF`, artist Ember 14pt 400 `#9FB6BF`, trailing a 26pt cyan `#25D1DA` add-to-library plus icon."
+
+- "Create the Amazon Music X-Ray lyrics panel: `rgba(0,168,225,0.07)` fill, 1pt `rgba(37,209,218,0.22)` border, 10pt corners, 14pt/16pt padding. Header: an 'X-RAY' badge (`#25D1DA` bg, `#042730` text, Ember 9pt 800, 0.5pt tracking, 4pt radius) followed by a 'LYRICS' label (`#9FB6BF`, Ember 10pt 700, 0.6pt tracking, uppercase). Lyric lines in Ember 15pt 600 line-height 1.55: current line `#25D1DA`, next line `#9FB6BF`, surrounding lines `#6B8693`. Tapping a line seeks playback to its timestamp; the panel auto-scrolls to keep the current line centered."
+
+- "Render the Amazon Music play button: a 60pt circle filled `#00A8E1` with a white play/pause glyph at 24pt and a `0 8pt 22pt -6pt rgba(0,168,225,0.55)` cyan glow shadow. Pressed: `#0086B3` + scale 0.97. NOTE: cyan IS the action color here — do not make it white."
+
+- "Build the Amazon Music scrubber: 4pt track `rgba(255,255,255,0.16)` 2pt radius, fill `#00A8E1`, 13pt `#00A8E1` thumb with a `0 0 0 4pt rgba(0,168,225,0.2)` halo that grows to 6pt while dragging. Time labels Ember 11pt 400 `#9FB6BF` tabular figures, elapsed left, remaining (negative) right."
+
+- "Create the Amazon Music bottom tab bar: 56pt + safe area, background `#081218`, 0.5pt top border `#234653`. Four tabs — Home, Find, Podcasts, Library — 22pt icons, active `#25D1DA` filled glyph (bright cyan), inactive `#6B8693` outline glyph, NO tint pill. Labels Ember 10pt 500 always shown."
+
+- "Render the Amazon Music Home shelf: a time-of-day greeting ('Good evening') in Ember 32pt 800 `#FFFFFF`, then horizontal-scroll carousels ('Recently played', 'Your Soundtrack', 'Stations for you'). Each card: `#122A33` bg, 10pt corners, 6pt-radius art, title Ember 18pt 700 `#FFFFFF`, subtitle Ember 14pt 400 `#9FB6BF`, 8pt gap between cards, 18pt leading inset."
+
+### Iteration Guide
+1. The canvas is deep teal-navy `#0C1B22` — a tinted dark, NOT neutral grey; this is the brand thumbprint
+2. The player sits on a top-down gradient lifting toward `#16404C` behind the art
+3. The play button is a `#00A8E1` cyan circle with a white glyph + cyan glow — cyan IS the action
+4. The X-Ray lyrics panel is the signature: tinted fill, cyan border, "X-RAY" badge, synced lines
+5. The currently-sung lyric line is bright cyan `#25D1DA`; surrounding lines dim to tertiary
+6. Tapping a lyric line seeks playback to that moment; the panel auto-scrolls
+7. Secondary text & dividers are teal-tinted (`#9FB6BF`, `#234653`) — never neutral grey
+8. Amazon Ember type; Inter is the only acceptable fallback (it tracks Ember's metrics)
+9. The active tab is bright cyan `#25D1DA` — brighter than the structural `#00A8E1`
+10. Use tabular numerals for timestamps; keep the cyan glow on the play button