Amber Midnight DESIGN.md

---
version: 1
name: "Amber Midnight Mobile"
colors:
  primary: "#F59E0B"
  on-primary: "#171717"
  background: "#0A0A0A"
  surface: "#161616"
  surface-alt: "#222222"
  surface-muted: "#262626"
  on-surface: "#FAFAFA"
  on-surface-variant: "#A3A3A3"
  border: "#262626"
  border-hairline: "rgba(255,255,255,0.10)"
  border-glass: "rgba(255,255,255,0.05)"
  error: "#EF4444"
typography:
  display-lg:
    fontFamily: Outfit
    fontSize: 30px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Outfit
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Outfit
    fontSize: 20px
    fontWeight: 700
    lineHeight: 26px
    letterSpacing: 0em
  headline-sm:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 18px
    letterSpacing: 0em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.18em
  tab-label:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 12px
    letterSpacing: 0em
rounded:
  sm: 6px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 20px
  card-padding: 16px
  section-gap: 32px
icons:
  set: solar
  default_variant: linear
  active_variant: bold
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: 12px
    boxShadow: "0 1px 2px rgba(0,0,0,0.4)"
  card-feature:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: 24px
    boxShadow: "0 20px 40px -12px rgba(0,0,0,0.6)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 10px
    border: none
    boxShadow: "0 8px 24px rgba(245,158,11,0.20)"
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 10px
    border: none
    boxShadow: none
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    paddingX: 0px
    paddingY: 0px
    border: none
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 20px
    border: none
    boxShadow: none
  button-icon-glass:
    backgroundColor: "rgba(255,255,255,0.05)"
    textColor: "{colors.on-surface}"
    borderColor: "rgba(255,255,255,0.10)"
    borderWidth: 1px
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 20px
    boxShadow: none
  button-play-circular:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    size: 80px
    iconSize: 36px
    border: none
    boxShadow: "0 20px 40px rgba(245,158,11,0.40)"
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    height: 48px
    paddingX: 16px
    border: none
    boxShadow: none
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 8px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 8px
    border: none
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 2px
    border: none
    boxShadow: none
  badge-pill-accent:
    backgroundColor: "rgba(245,158,11,0.10)"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    borderColor: "rgba(245,158,11,0.20)"
    borderWidth: 1px
    rounded: "{rounded.full}"
    paddingX: 8px
    paddingY: 2px
    boxShadow: none
  badge-glass-overlay:
    backgroundColor: "rgba(0,0,0,0.60)"
    textColor: "#FFFFFF"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    size: 32px
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "rgba(38,38,38,0.5)"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: 16px
    gap: 16px
    boxShadow: none
  progress-bar:
    backgroundColor: "rgba(0,0,0,0.40)"
    rounded: "{rounded.full}"
    height: 4px
    border: none
    boxShadow: none
  progress-ring:
    backgroundColor: "transparent"
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "rgba(10,10,10,0.80)"
    textColor: "{colors.on-surface}"
    paddingX: 20px
    paddingY: 16px
    height: 96px
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "rgba(10,10,10,0.90)"
    borderColor: "{colors.border}"
    borderWidth: 1px
    height: 76px
    paddingX: 8px
    boxShadow: none
  tab-item-active:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    border: none
    boxShadow: none
  tab-item-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    border: none
    boxShadow: none
  player-bar-floating:
    backgroundColor: "rgba(34,34,34,0.90)"
    borderColor: "rgba(255,255,255,0.10)"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: 10px
    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.50)"
---

# Amber Midnight Mobile

## Overview

**Cinematic, premium, and after-hours.** A near-black canvas pierced by a single saturated amber accent — a saturated honey-orange (`{colors.primary}`) that behaves like a spotlight in an otherwise hushed, monochrome interior. The aesthetic reads as a high-end media / reading-lounge app: dense, content-forward, with confident typographic hierarchy from a geometric display face (Outfit) paired with a workhorse neutral sans (Inter).

The vibe is **lit-from-within** rather than flat: subtle gradients, glass-blur chrome, soft amber halos behind hero numbers, and dramatic drop shadows on hero artwork. Nothing screams; the amber whispers from a single button, a single bar, a single progress fill at a time. Negative space is generous, surfaces are layered (background → card → elevated card → glass overlay), and rounded corners are pronounced (16–32px on prominent surfaces, fully-pill on actions).

## Colors

The palette is **monochrome charcoal + one signature accent**.

- `{colors.background}` `#0A0A0A` — the page. Near-black, never pure black.
- `{colors.surface}` `#161616` — content cards, sitting one step up from background.
- `{colors.surface-alt}` `#222222` — chips, secondary buttons, icon buttons, list rows, search inputs. The most-used "tonal" surface.
- `{colors.surface-muted}` `#262626` — hover targets and the deepest interactive shade.
- `{colors.on-surface}` `#FAFAFA` — primary text, never pure white.
- `{colors.on-surface-variant}` `#A3A3A3` — secondary text, metadata, inactive icons.
- `{colors.border}` `#262626` — hairline divider on cards and chrome.
- `{colors.primary}` `#F59E0B` — THE accent. Reserved for: the active tab, the active filter chip, the play button, the progress fill, "see all" / link text, the active waveform bars, glow halos, and small inline marks like the bullet "•" punctuation in section headers.

**Palette boundaries (load-bearing):**
- The amber is sacred. It must not become a card background or a body text color. It is allowed as: solid fill on small primary actions, 10% tint behind small accent badges, glow shadow color, progress fill, and active-state foreground.
- Never tint a card with amber. Never use amber for plain body copy or section titles.
- Translucent glass surfaces (`rgba(255,255,255,0.05)` fill + `rgba(255,255,255,0.10)` hairline) are reserved for chrome that floats over content (now-playing footer pills, header buttons over a colored backdrop).

## Typography

Two families do all the work:

- **Outfit** (`{typography.display-lg}`, `{typography.headline-lg}`, `{typography.headline-md}`, `{typography.headline-sm}`) — a geometric sans used at weight 700 for every title, every section header, every screen wordmark. Slightly tightened tracking on the larger sizes (`-0.02em` on display, `-0.01em` on headline-lg).
- **Inter** — the workhorse. Body, labels, captions, tab labels, button text, all metadata. Weights run 400 (body-sm), 500 (body-md, captions, tab labels), 600 (labels and buttons), 700 (uppercase eyebrows).

Typographic rules:

- **Eyebrows / kickers** use `{typography.label-uppercase}` — 10px, weight 700, letter-spacing `0.18em`, color `{colors.on-surface-variant}`. They label section context ("MONTHLY PROGRESS", "NOW PLAYING") and timestamps (`12:45`, `-48:12`) where the tracking-out gives a typographic-mark feel.
- **Section anchors** use `{typography.headline-md}` and may be followed by a small amber bullet `•` as a decorative period — this is a signature move, do not omit.
- **Card titles** in tight grids use `{typography.label-md}` weight 700 (`text-sm font-bold`); item subtitles drop to `{typography.caption}` in `{colors.on-surface-variant}`.
- **Numerals in stats** sit in Outfit at `{typography.headline-lg}`–`{typography.display-lg}` weight 700, with the unit (`h`, `%`) in a smaller weight to create a hierarchy mark, optionally tinted amber.
- The serif family loaded in the HTML (Playfair Display) is **available but not used** — leave it for editorial-only contexts; default flow has no serif.

## Spacing & Layout

- **Side gutter**: `{spacing.gutter}` (20px). Consistent edge-to-edge breathing room on every screen.
- **Section gap**: 32px between major content sections.
- **Card padding**: 12–16px on small/medium cards, 24px on hero feature cards.
- **Density**: balanced — dense enough that you can fit a hero stat, a 2-column grid, and a list section in one viewport, but never crowded. Vertical rhythm relies on `{spacing.lg}` (24px) between header and first section, `{spacing.md}` (16px) inside cards.
- **Horizontal scrollers** for media tiles use 20px gutter on the page and 20px gap between tiles, with each tile 176px wide at a 2:3 aspect ratio.
- **Bottom safety**: any screen with a fixed tab bar leaves ≥96px bottom padding; screens with a floating mini-player on top of the tab bar leave 160px.

## Elevation & Depth

Depth is built from FOUR cooperating tools, in this order:

1. **Tonal layering** is primary. Background `#0A0A0A` → surface `#161616` → surface-alt `#222222` → muted `#262626`. Each step is ~12 RGB units. This is how 80% of "depth" reads.
2. **Hairline borders** at `{colors.border}` (`#262626`) or `rgba(255,255,255,0.05–0.10)` define every card and chrome edge. Never a card without either tonal contrast OR a hairline.
3. **Drop shadows** for hero artwork only. Dramatic: `shadow-[0_40px_80px_-20px_rgba(0,0,0,0.8)]` for the now-playing artwork, `shadow-2xl` for cover tiles. Never on flat content cards.
4. **Amber glow halos** for active/important controls: `shadow-[0_0_15px_rgba(245,158,11,0.4)]` on active waveform bars, `shadow-2xl shadow-primary/40` on the main play button, `shadow-lg shadow-primary/20` on the mini-player play button.

Glass / blur is reserved for floating chrome (sticky headers, floating mini-player, footer action bars, header icon buttons over a tinted backdrop). Recipe: `bg-{surface-alt}/90 backdrop-blur-xl border border-white/10`.

## Shapes

Radii are pronounced and intentional — this is not a sharp-cornered system.

- `{rounded.sm}` 6px — small inline tags, kicker pills (the uppercase metadata pills).
- `{rounded.md}` 12px — small thumbnails, icon-button squares.
- `{rounded.lg}` 16px — most cards, inputs, list rows, the player mini-bar.
- `{rounded.xl}` 24px — feature cards, oversized cover-tile thumbnails (2-col library grid).
- `{rounded.2xl}` 32px — hero artwork on focus screens, oversized floating glass action bars.
- `{rounded.full}` — every button, every chip, every avatar, every icon button, every progress bar, every filter pill. Pill-circular is the action vocabulary.

Rule of thumb: **interactive = pill or circle; surface = generous rounded rectangle**.

## Components

### card

Tonal step-up over background, hairline border, modest interior padding, no shadow on regular cards.

```html
<div class="bg-[#161616] border border-[#262626] rounded-2xl p-3 shadow-sm">
  <!-- content -->
</div>
```

### card-feature

Used for hero stat blocks. Larger radius, generous padding, optional inner amber halo glow at top-right.

```html
<div class="bg-[#161616] border border-[#262626] rounded-3xl p-6 shadow-xl relative overflow-hidden">
  <div class="absolute top-0 right-0 w-32 h-32 bg-[#F59E0B]/5 rounded-full -mr-16 -mt-16 blur-3xl"></div>
  <div class="flex flex-col gap-1">
    <span class="text-[10px] font-bold uppercase tracking-widest text-[#A3A3A3]">[Eyebrow label]</span>
    <h2 class="text-3xl font-bold">[Value]<span class="text-[#F59E0B] text-xl">[unit]</span></h2>
    <p class="text-sm text-[#A3A3A3]">[Supporting detail]</p>
  </div>
</div>
```

### button-primary

Pill, amber fill, dark foreground, soft amber drop shadow.

```html
<button class="px-5 py-2.5 rounded-full bg-[#F59E0B] text-[#171717] font-semibold text-sm shadow-[0_8px_24px_rgba(245,158,11,0.20)] active:scale-95 transition-transform">
  [Action label]
</button>
```

### button-secondary

Pill, charcoal fill, light foreground.

```html
<button class="px-5 py-2 rounded-full bg-[#222222] text-[#FAFAFA] font-semibold text-sm hover:bg-[#262626] transition-colors">
  [Label]
</button>
```

### button-text

Inline link-style action; small, amber, semibold.

```html
<button class="text-sm font-medium text-[#F59E0B] hover:text-[#F59E0B]/80">[Label]</button>
```

### button-icon (and -glass)

Round 40px tap target. Default uses `surface-alt`; over imagery / colored backdrops, use the glass variant.

```html
<button class="w-10 h-10 rounded-full bg-[#222222] flex items-center justify-center text-[#FAFAFA] hover:bg-[#262626] transition-colors">
  <iconify-icon icon="solar:[icon-name]-linear" class="text-xl"></iconify-icon>
</button>

<button class="w-10 h-10 rounded-full bg-white/5 backdrop-blur-md border border-white/10 flex items-center justify-center text-[#FAFAFA]">
  <iconify-icon icon="solar:[icon-name]-linear" class="text-xl"></iconify-icon>
</button>
```

### button-play-circular

The signature action. Solid amber, hard amber halo, optional `ml-1` icon nudge for visual centering on the play glyph.

```html
<button class="w-20 h-20 rounded-full bg-[#F59E0B] text-[#171717] flex items-center justify-center shadow-2xl shadow-[#F59E0B]/40 hover:scale-105 active:scale-95 transition-all">
  <iconify-icon icon="solar:play-bold" class="text-4xl ml-1"></iconify-icon>
</button>
```

Smaller variants (40px, 48px) keep the same recipe at scaled-down halo intensity.

### input-text

Filled, borderless, pill or rounded-lg. Leading icon inside, focus ring is amber.

```html
<div class="relative">
  <iconify-icon icon="solar:magnifer-linear" class="absolute left-4 top-1/2 -translate-y-1/2 text-[#A3A3A3] text-xl"></iconify-icon>
  <input type="text" placeholder="[Placeholder]"
    class="w-full h-12 bg-[#222222] border-none rounded-2xl pl-12 pr-4 text-sm focus:ring-1 focus:ring-[#F59E0B] placeholder:text-[#A3A3A3] transition-all" />
</div>
```

### chip / chip-active

Filter pills. Active = amber fill + dark text; inactive = charcoal + muted text.

```html
<button class="px-5 py-2 rounded-full bg-[#F59E0B] text-[#171717] text-sm font-semibold">[Active filter]</button>
<button class="px-5 py-2 rounded-full bg-[#222222] text-[#A3A3A3] hover:text-[#FAFAFA] text-sm font-semibold transition-colors">[Filter]</button>
```

### badge-pill (and -accent, -glass-overlay)

Three flavors:
- **Default** — `surface-alt` fill, uppercase metadata caption (source, kind).
- **Accent** — amber-tinted at 10% with a 20% amber hairline; used for "[N] similar"-style emphasized stats.
- **Glass overlay** — black 60% + backdrop-blur, white text; sits on top of imagery to show duration / metadata.

```html
<span class="text-[10px] font-bold uppercase tracking-wider text-[#A3A3A3] bg-[#222222] px-2 py-0.5 rounded-sm">[KICKER]</span>

<span class="text-[10px] font-medium text-[#F59E0B] bg-[#F59E0B]/10 px-2 py-0.5 rounded-full border border-[#F59E0B]/20">[Accent stat]</span>

<div class="bg-black/60 backdrop-blur-md px-2 py-1 rounded-md text-[10px] font-bold tracking-wider text-white flex items-center gap-1">
  <iconify-icon icon="solar:[icon-name]-bold"></iconify-icon>[Value]
</div>
```

### avatar

32px circle, hairline border, `object-cover` photo.

```html
<div class="w-8 h-8 rounded-full bg-[#222222] overflow-hidden border border-[#262626]">
  <img alt="[alt]" src="[url]" class="w-full h-full object-cover" />
</div>
```

### list-row

Charcoal-tonal row with a 12px-rounded leading icon-tile in a categorical-tinted square (10% alpha brand or accent over the surface), title, subtitle, trailing chevron.

```html
<button class="w-full flex items-center gap-4 p-4 bg-[#222222] rounded-2xl border border-[#262626]/50 hover:bg-[#262626] transition-colors">
  <div class="w-12 h-12 rounded-xl bg-[#F59E0B]/10 flex items-center justify-center text-[#F59E0B]">
    <iconify-icon icon="solar:[icon-name]-linear" class="text-2xl"></iconify-icon>
  </div>
  <div class="flex-1 text-left">
    <h4 class="font-bold text-sm">[Row title]</h4>
    <p class="text-xs text-[#A3A3A3]">[Row meta]</p>
  </div>
  <iconify-icon icon="solar:alt-arrow-right-linear" class="text-[#A3A3A3]"></iconify-icon>
</button>
```

A dashed-border variant of `list-row` is the "create new" affordance — replace solid border with `border border-dashed border-[#262626]` and put a dashed-border square in place of the tinted icon tile.

### progress-bar

Thin (4px), pill-rounded, dark track, amber fill. Often laid as an absolute strip on the bottom edge of artwork.

```html
<div class="w-full h-1 bg-black/40 rounded-full">
  <div class="h-full bg-[#F59E0B] rounded-full" style="width: 65%"></div>
</div>
```

### progress-ring

SVG rotated `-90deg`, `currentColor` stroke at amber, dark surface-alt track ring around it, percentage label dead-center in `{typography.label-sm}` weight 700 amber.

```html
<div class="w-16 h-16 rounded-full border-4 border-[#222222] flex items-center justify-center relative">
  <svg class="w-full h-full -rotate-90">
    <circle r="28" cx="32" cy="32" fill="transparent" stroke="currentColor"
      class="text-[#F59E0B]" stroke-width="4" stroke-dasharray="175" stroke-dashoffset="44" />
  </svg>
  <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-[#F59E0B]">[N]%</span>
</div>
```

### top-app-bar

Sticky, translucent (`bg-background/80 backdrop-blur-xl`), flush left wordmark + icon buttons. Always above content with `z-40`.

```html
<header class="px-5 pt-12 pb-4 flex items-center justify-between sticky top-0 bg-[#0A0A0A]/80 backdrop-blur-xl z-40">
  <h1 class="font-[Outfit] text-2xl font-bold">[Screen title]</h1>
  <div class="flex items-center gap-3">
    <!-- button-icon items here -->
  </div>
</header>
```

### tab-bar / tab-item-active / tab-item-inactive

Bottom-fixed, 76px tall, translucent dark, hairline top border, three or more equal-flex items. Active = amber icon (bold variant) + amber label; inactive = muted variant.

```html
<nav class="fixed bottom-0 left-0 w-full h-[76px] bg-[#0A0A0A]/90 backdrop-blur-xl border-t border-[#262626] z-50 flex items-center justify-around px-2">
  <button class="flex flex-col items-center gap-1 p-2 flex-1 text-[#F59E0B]">
    <iconify-icon icon="solar:[icon-name]-bold" class="text-2xl"></iconify-icon>
    <span class="text-[10px] font-medium">[Label]</span>
  </button>
  <button class="flex flex-col items-center gap-1 p-2 flex-1 text-[#A3A3A3] hover:text-[#FAFAFA] transition-colors">
    <iconify-icon icon="solar:[icon-name]-linear" class="text-2xl"></iconify-icon>
    <span class="text-[10px] font-medium">[Label]</span>
  </button>
</nav>
```

### player-bar-floating (signature)

A floating mini-player pill that hovers `bottom-[84px]` above the tab bar. This is a load-bearing aesthetic move — the floating glass slab with the embedded amber waveform is a defining visual. Recipe:

- Translucent `surface-alt`, `backdrop-blur-xl`, white-10% hairline, 16px rounded.
- An absolute amber-to-transparent gradient overlay on the inside.
- A faint waveform strip pinned to the bottom edge (small 1px-wide bars, partly amber, partly white at 10% opacity).
- 48px square thumbnail leading, two-line title/subtitle in the middle, scrub control + circular play action trailing.

```html
<div class="bg-[#222222]/90 backdrop-blur-xl border border-white/10 rounded-2xl p-2.5 flex items-center gap-3 shadow-2xl relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-r from-[#F59E0B]/10 to-transparent pointer-events-none"></div>
  <div class="w-12 h-12 rounded-lg overflow-hidden shrink-0 border border-white/10 z-10">
    <img alt="[alt]" src="[url]" class="w-full h-full object-cover" />
  </div>
  <div class="flex-1 min-w-0 z-10">
    <h4 class="font-bold text-sm truncate">[Primary label]</h4>
    <p class="text-xs text-[#A3A3A3] truncate mt-0.5">[Secondary label]</p>
  </div>
  <div class="flex items-center gap-3 shrink-0 z-10 pr-1">
    <button class="text-[#FAFAFA] hover:text-[#F59E0B] transition-colors">
      <iconify-icon icon="solar:[icon-name]-linear" class="text-2xl"></iconify-icon>
    </button>
    <button class="w-10 h-10 rounded-full bg-[#F59E0B] text-[#171717] flex items-center justify-center shadow-lg shadow-[#F59E0B]/20 hover:scale-105 transition-transform">
      <iconify-icon icon="solar:play-bold" class="text-xl"></iconify-icon>
    </button>
  </div>
</div>
```

### Composition recipes (prose, not YAML)

- **Quick-action grid (4-col)** — render a 4-column grid of `button` elements, each with a 56×56 `rounded-2xl bg-{surface}` square containing a 24px icon, then a `{typography.caption}` label below in `{colors.on-surface-variant}`. The square gets `border border-{border}` and on hover `border-{primary}/50` plus icon color shift to amber.
- **Cover tile (vertical media tile)** — a 2:3 `rounded-2xl overflow-hidden` artwork container with `shadow-lg` and `border-white/5`. Optional bottom-right glass-overlay `badge` for duration. Optional bottom-edge `progress-bar` strip pinned absolute. Title (`{typography.label-md}` bold) and subtitle (`{typography.caption}` muted) sit beneath the artwork in a tight stack.
- **Media list row** — a horizontal `card` with a 80×80 `{rounded.md}` thumbnail on the left, a center column with kicker pill + title + accent badge, and a trailing 32px circular `button-icon` whose hover state swaps to amber fill / dark foreground.
- **Tonal "soft" action variant** — for low-attention accent CTAs, use `bg-{primary}/10 text-{primary} border border-{primary}/20` on a pill — same recipe as `badge-pill-accent` but tap-target sized.
- **Dashed-create row** — `list-row` with `border-dashed` border, no fill (`bg-transparent`), muted foreground that hovers to `{on-surface}` and `border-{primary}`.

## Iconography

- Set: **Solar** (Iconify `solar:*`).
- Default variant: **`linear`** for inactive / passive UI (header icons, tab inactive, list trailing chevrons, secondary action icons).
- Active variant: **`bold`** for active tab, primary actions (play, pause, heart-active), filled ornaments inside chrome.
- Stroke weight: ~1.5px (Solar's natural linear weight). Default size 24px in chrome, 20px in 40px tap targets, 16–18px in inline contexts.
- Two cross-set exceptions are allowed where Solar lacks a glyph: `mdi:rewind-15` / `mdi:fast-forward-15` for skip-controls, and `material-symbols:[icon-name]` for cases where a heavier filled silhouette reads better. `hugeicons:[icon-name]` may be used for category-style folder/tag glyphs in `list-row` icon tiles.
- Active-state pattern: same icon name, swap `-linear` → `-bold` AND swap text color to `{colors.primary}`.

## Illustration & Imagery

This aesthetic uses **photographic / painterly cover artwork** as its only image type — there are no editorial illustrations or characters in chrome. Imagery appears almost exclusively as cover-art tiles (vertical 2:3 or square 1:1) for content items.

- **Style / Technique**: atmospheric, painterly book-cover photography. A mix is acceptable across a library: soft watercolor / oil-paint cover paintings (foggy forest pathways, sun-flared horizons), soft cosmic / nebula photo-illustration (luminous dust clouds with embedded large serif title type), and minimalist editorial typographic covers (large serif title on cream paper with a single organic blush blob). All pieces share a sense of stillness, atmosphere, and emotional weight — never busy, never literal.
- **Palette**: each cover is internally limited to 3–5 tones in a single emotional register — warm sunset oranges and ambers; cool dusty greens and ochres; pale cream + blush blob; pale cosmic blue + gold dust. The covers do NOT need to share the app's amber accent — they bring their own world. They do, however, all skew toward soft, slightly desaturated, photography-grade color rather than hard digital saturation.
- **Edge treatment**: no outlines. Covers are full-bleed photography or painting; titles in large display serif (Trajan-style or Playfair-style) sit on top with no stroke.
- **Shading & light**: soft diffuse light, often a single warm light source (sunset, sunrise, nebula glow) or evenly diffused painterly fog. No hard cel-shading, no sharp digital gradients.
- **Composition & framing**: title-dominant, subject (if any) centered or low-frame, lots of atmospheric negative space at top. Many covers are vertical 2:3 with title spanning the upper third.
- **Background within the illustration**: full-bleed integrated atmosphere — sky, fog, nebula, paper. Never transparent.
- **Container styling** (from HTML): cover tiles sit inside a `rounded-2xl` (16px) or `rounded-3xl` (24px) frame with `overflow-hidden`, a `border border-white/5` hairline, and `shadow-lg` or `shadow-2xl` depending on prominence. The 80×80 thumbnail variant in list rows uses `rounded-xl` (12px). The hero now-playing artwork uses a `rounded-[2rem]` frame, `border-white/10`, and a dramatic `shadow-[0_40px_80px_-20px_rgba(0,0,0,0.8)]`.
- **CSS treatment on the `<img>`**: always `class="w-full h-full object-cover"`. No blend modes by default. A `bg-black/20` or `bg-black/40` absolute overlay is occasionally placed on top of small thumbnails to push them back behind text contrast — this is the only filter-like treatment.
- **Box-shadow on the image / its frame**: small thumbnails — `shadow-sm`. Cover tiles — `shadow-lg`. Hero artwork — `shadow-[0_40px_80px_-20px_rgba(0,0,0,0.8)]` (a long, soft, dark cinematic shadow).
- **Aspect ratio rule**: `aspect-[2/3]` for portrait covers, `aspect-[3/4]` for grid-cover variants, `aspect-square` for the now-playing hero, fixed `w-20 h-20` for inline list-row thumbnails, fixed `w-12 h-12` for mini-player thumbnails. Preserve the source ratio — never crop a cover non-uniformly.
- **Anti-references**: NOT 3D, NOT claymation, NOT flat vector, NOT pixel art, NOT cartoon character illustration, NOT clipart, NOT brightly saturated digital gradient, NOT corporate stock photography.
- **Style recipe prompt**:

  > *Atmospheric, painterly cover artwork for [SUBJECT], in the visual register of a high-end audiobook or premium magazine cover. Choose ONE of: (a) soft oil/watercolor painting with diffused warm or cool light and gentle painterly fog; (b) cosmic dust-cloud / nebula photo-illustration with luminous gold or pale dust against deep, hushed background; (c) minimalist editorial cover — cream paper background with a single organic asymmetric blush or earth-tone blob, large display-serif title in black. Limit to 3–5 tones in a single emotional palette (warm sunset, dusty forest, cosmic blue+gold, blush+cream). Soft diffuse light, no hard outlines, no sharp digital gradients, lots of atmospheric negative space at the top of frame, title (if any) typeset in a large all-caps display serif. Slightly desaturated, photography-grade color. Vertical 2:3 framing. NOT 3D, NOT claymation, NOT flat vector, NOT cartoon character art, NOT corporate stock, NOT digital-saturated.*

User profile photos are real photographic portraits, displayed in a 32px `{rounded.full}` circle with a 1px `{colors.border}` ring; treat them as `object-cover`, no filter, no shadow.

## Hierarchy & Emphasis

- **Loudest:** the amber primary color, used sparingly. Whatever wears amber IS the focus of the screen — usually one circular play button, one progress fill, one active tab, one active chip at a time.
- **Medium-loud:** white headlines in Outfit weight 700, set against the near-black canvas. Type and amber are the only true "loud" tools.
- **Quiet:** gray (`{colors.on-surface-variant}`) metadata, kicker pills, secondary buttons. Quiet things stay literally quiet — no emphasis tricks.
- Photographic artwork carries its own hierarchy via shadow scale (small thumb = subtle shadow; hero = cinematic shadow).

## Distinctive Details

1. **The amber bullet "•"** placed after section anchor titles — `Continue Listening <span class="text-primary">•</span>`. A tiny typographic mark that signals the brand color in places color wouldn't normally appear.
2. **Embedded equalizer / waveform graphics** as ornament — vertical bars of amber at varying heights (some at full primary, some at 10% white) layered inside the floating mini-player and across the now-playing scrubber. The progress position is implied by where the amber-glow bars end and white-10% bars begin.
3. **Amber halo glows** on saturated controls — the play button casts a soft amber drop shadow, individual active waveform bars carry `0_0_15px_rgba(245,158,11,0.4)` glows, hero stat cards have a giant 32×32 amber `blur-3xl` halo bleeding out the top-right corner of the card.
4. **Translucent glass chrome** — every floating surface (sticky header, mini-player, footer action bar, full-screen header buttons) uses `bg-[surface]/80–90 backdrop-blur-xl border-white/10`. This is what makes the app feel cinematic and stacked rather than flat.

## Do's and Don'ts

### Do

- Reserve amber for one primary action / focus per screen.
- Use Outfit weight 700 for every heading; Inter for everything else.
- Pair section headers with the small amber `•` bullet decoration.
- Apply `backdrop-blur-xl` to any chrome that floats over content.
- Use tonal layering (background → surface → surface-alt → muted) as the primary depth tool; reach for shadows only on artwork or on active amber controls.
- Make cover artwork breathe — generous radii, hairline white-5% border, real shadow.
- Keep all interactive elements pill or fully circular.

### Don't

- Don't tint cards, inputs, or large surfaces with amber. Amber is a spotlight, not a fill.
- Don't introduce a third accent color. Purple chart tokens exist in the variable list — don't surface them in UI.
- Don't use pure white (`#FFFFFF`) for body text or pure black (`#000000`) for backgrounds — stick to `#FAFAFA` and `#0A0A0A`.
- Don't add shadows to flat content cards. Shadow is reserved for artwork, the play button, glow halos, and the floating mini-player.
- Don't switch to the loaded serif (Playfair Display) for headings; it's not part of the chrome system.
- Don't use the same icon variant for active and inactive — always swap `-linear` ↔ `-bold` AND change color to amber on activation.
- Don't make cover artwork look digital or saturated — atmospheric painterly / photographic only.
- Don't omit the hairline border on glass chrome surfaces; the `white/10` hairline is what gives the glass its edge.