Neon Lime Nightshade DESIGN.md

---
version: 1
name: "Neon Lime Nightshade Mobile"
colors:
  primary: "#BEF264"
  on-primary: "#1A2E05"
  background: "#0C0A09"
  surface: "#1C1917"
  surface-alt: "#292524"
  on-surface: "#FAFAF9"
  on-surface-variant: "#A8A29E"
  on-surface-muted: "#44403C"
  border: "#292524"
  error: "#EF4444"
  accent-teal: "#5EEAD4"
  accent-cyan: "#67E8F9"
  accent-amber: "#FCD34D"
  accent-peach: "#FDBA74"
typography:
  display-lg:
    fontFamily: "Space Grotesk"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.005em
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 26px
    letterSpacing: 0em
  headline-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: 0em
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  label-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.08em
  tab-label:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 14px
    letterSpacing: 0em
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  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}"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    borderColor: "rgba(255,255,255,0.05)"
    borderWidth: 1px
    boxShadow: none
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    border: none
    boxShadow: "0 8px 24px -8px rgba(190,242,100,0.35)"
  button-secondary:
    backgroundColor: "rgba(41,37,36,0.8)"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    borderColor: "rgba(255,255,255,0.05)"
    borderWidth: 1px
    boxShadow: none
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    paddingX: 4px
    paddingY: 4px
    border: none
    boxShadow: none
  button-icon-glass:
    backgroundColor: "rgba(41,37,36,0.5)"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 20px
    borderColor: "rgba(255,255,255,0.05)"
    borderWidth: 1px
    boxShadow: none
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 14px
    borderColor: "rgba(255,255,255,0.05)"
    borderWidth: 1px
    boxShadow: none
    focusRingColor: "rgba(190,242,100,0.2)"
  chip:
    backgroundColor: "rgba(41,37,36,0.8)"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    borderColor: "rgba(255,255,255,0.05)"
    borderWidth: 1px
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    border: none
    boxShadow: none
  badge-pill:
    backgroundColor: "rgba(190,242,100,0.15)"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.sm}"
    paddingX: 6px
    paddingY: 2px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    size: 20px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.full}"
    size: 40px
    borderColor: "rgba(190,242,100,0.2)"
    borderWidth: 2px
    boxShadow: none
  list-row:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    paddingX: 0px
    paddingY: 8px
    gap: 16px
    border: none
    boxShadow: none
  progress-bar:
    backgroundColor: "rgba(255,255,255,0.1)"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 2px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    paddingX: "{spacing.gutter}"
    paddingY: 16px
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "rgba(12,10,9,0.95)"
    paddingX: "{spacing.gutter}"
    paddingY: 12px
    borderColor: "rgba(255,255,255,0.05)"
    borderWidth: 1px
    boxShadow: none
  tab-item-active:
    textColor: "{colors.primary}"
    iconSize: 24px
    typography: "{typography.tab-label}"
    backgroundColor: "transparent"
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    iconSize: 24px
    typography: "{typography.tab-label}"
    backgroundColor: "transparent"
    border: none
    boxShadow: none
  card-floating-glass:
    backgroundColor: "rgba(28,25,23,0.9)"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.sm}"
    borderColor: "rgba(255,255,255,0.1)"
    borderWidth: 1px
    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)"
---

# Neon Lime Nightshade Mobile

## Overview

**Dark, electric, after-hours.** A near-black canvas pierced by a single saturated lime accent and hazy color-blob atmospherics. The aesthetic feels like a late-night listening session — confident, premium, slightly futuristic — without tipping into hard cyberpunk. Surfaces are stacked tones of warm-black (stone/zinc), interrupted by glowing lime CTAs and soft-blurred chromatic gradients (teal, cyan, amber, peach) that bleed in from the edges.

The personality balances **editorial seriousness** (geometric headings in Space Grotesk) with **app warmth** (rounded humanist body in Plus Jakarta Sans). Every chrome surface is hairline-bordered with a 5–10% white stroke — flat doesn't mean unstructured here, it means quiet structure. Imagery is always given visual weight via crops and contrast rather than via heavy frames or shadows.

## Colors

The palette is a **dark monochrome warm-black ladder** (`{colors.background}` → `{colors.surface}` → `{colors.surface-alt}`) with **one** saturated brand color, `{colors.primary}` (#BEF264 — electric lime), reserved for: the active CTA fill, the active tab/chip, the focus ring, the small play-button, hyperlinks, and the active progress-fill. Use `{colors.on-primary}` (#1A2E05, deep moss) as the foreground on lime — never white.

`{colors.on-surface}` is the off-white body / heading color. `{colors.on-surface-variant}` is the muted secondary text (subtitles, metadata, inactive tab labels). `{colors.on-surface-muted}` is reserved for disabled or hairline copy.

The **chart accents** (`accent-teal`, `accent-cyan`, `accent-amber`, `accent-peach`) form a secondary palette used for **atmospheric blur blobs** and **categorical gradient tiles** (genre tiles, mood playlist tiles). They must NEVER fill a CTA, NEVER set a body-text color, and NEVER appear as a card background — only as gradient duets, blurred ambient blobs (3xl blur, 10–20% opacity), or the 1px accent stripe under a tile title.

`{colors.error}` is the only semantic color (destructive actions). Borders and dividers are always `rgba(255,255,255,0.05)` — a near-invisible hairline that defines edges without weight.

## Typography

Two superfamilies, both Google Fonts:

- **Space Grotesk** (`font-heading`) — geometric, slightly mechanical sans for every heading, screen title, and prominent label. Use **Bold (700)** almost exclusively. Tight tracking on the largest sizes (`-0.01em` on `display-lg`).
- **Plus Jakarta Sans** (`font-sans`) — humanist sans for body, metadata, buttons, chips, tab labels. Workhorse weights are **600 (semibold)** for buttons/labels/list titles, **400** for paragraphs and metadata.

Token roles:
- `{typography.display-lg}` — primary screen title on hub screens (e.g. the largest 30px screen header).
- `{typography.headline-lg}` — secondary screen title or page heading on detail screens.
- `{typography.headline-md}` — section anchors ("Jump Back In", "Top Charts" style section headers).
- `{typography.headline-sm}` — card titles inside content tiles.
- `{typography.body-md}` — body and list-row primary text (semibold so it reads as content, not paragraph).
- `{typography.body-sm}` — metadata, captions, supporting text under titles.
- `{typography.label-md}` — buttons, chips, larger interactive labels.
- `{typography.label-uppercase}` — tracked-out tiny eyebrows (NEW, kicker labels, section group titles like "DOWNLOADED"). The +0.08em tracking is load-bearing — never collapse it to 0.
- `{typography.tab-label}` — bottom tab bar text only (10px, regular).

**Weight rule**: 700 owns headings; 600 owns content & interactive labels; 400 owns prose. Skip 500. Italics never used.

## Spacing & Layout

Density is **balanced-airy** — generous outer gutters (`{spacing.gutter}` = 24px), cards breathe with 16px internal padding (`{spacing.card-padding}`), section gaps are 32px (`{spacing.section-gap}`). Vertical rhythm is led by section headers: 16px below the section header, then content. Horizontal scrollers extend full-bleed with 24px content padding and no fade — the cut-off at the edge implies "more."

The grid is mostly single-column with occasional 2-column tile grids (genre/quick-access). Reserve enough bottom padding for floating chrome (a mini-player + tab bar stack ≈ 160px clearance).

## Elevation & Depth

The aesthetic is **flat with atmospheric depth**, not shadow-stacked. Three depth techniques, in order of frequency:

1. **Tonal layering** — `{colors.background}` (page) → `{colors.surface}` (card) → `{colors.surface-alt}` (input/chip) → hairline white-5% border to crisp the edge.
2. **Backdrop blur** — floating chrome (mini-player, tab bar, top-corner icon buttons) uses `backdrop-blur-xl` over a translucent surface (`bg-card/90` or `bg-secondary/50`) with a `border-white/10` hairline. This is the only place a real shadow shows up: `shadow-2xl` on the mini-player.
3. **Ambient color blobs** — large soft `blur-3xl` orbs in chart-accent colors at 10–20% opacity, anchored just outside the viewport corners. Pure decoration; never sits behind primary content.

Drop shadows are reserved for: the mini-player (`shadow-2xl`), the small lime play button (`shadow-lg`), and a soft lime glow under the primary FAB (`shadow-primary/20`). Cards and inputs cast no shadow.

## Shapes

Radii lean **medium-soft** — nothing is sharp, nothing is fully circular except controls. The `--radius` base is 16px.

- `{rounded.sm}` (8px) — small inline accents, eyebrow badge backgrounds.
- `{rounded.md}` (12px) — small thumbnails (size-12, size-14 album covers, list-row art).
- `{rounded.lg}` (16px) — cards, inputs, mini-player, tile thumbnails of any meaningful size, hero album art.
- `{rounded.xl}` (24px) — the largest content tiles (square aspect-ratio playlist tiles, genre tiles).
- `{rounded.full}` — every button, chip, avatar, status pill, circular icon container, progress fill.

Rule of thumb: **everything tappable that contains text is fully rounded; everything that contains imagery is `lg` or `xl`.**

## Components

### card

Stone-black surface with a near-invisible white-5% hairline. No shadow. Used for content tiles, list-item containers, and grouped surfaces. Internal padding 12–16px depending on density.

```html
<div class="rounded-2xl bg-card border border-white/5 p-4">
  <h4 class="font-bold text-base font-heading">[Card title]</h4>
  <p class="text-xs text-muted-foreground">[Supporting metadata]</p>
</div>
```

### button-primary

Lime pill with deep-moss text. Bold weight, 13px, comfortable horizontal padding. The signature CTA — use sparingly (one per screen surface).

```html
<button class="px-4 py-2 rounded-full bg-primary text-primary-foreground font-semibold text-[13px] active:scale-95 transition-transform">
  [Action]
</button>
```

For a *low-attention* secondary action, render `button-primary` with `bg-primary/10` background and `text-primary` foreground — preserves the lime accent without claiming the spotlight.

### button-secondary

Tonal stone pill with hairline border. Identical shape and metrics to `button-primary` so they line up as siblings.

```html
<button class="px-4 py-2 rounded-full bg-secondary/80 border border-white/5 text-foreground font-semibold text-[13px] hover:bg-secondary transition-colors">
  [Label]
</button>
```

### button-icon-glass

40px circle, translucent stone with backdrop blur and white-5% hairline. Used for top-bar utilities (notifications, settings, history). Houses a 20px solar `linear` icon.

```html
<button class="flex items-center justify-center size-10 rounded-full bg-secondary/50 backdrop-blur-md border border-white/5 hover:bg-secondary transition-colors">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-5 text-foreground"></iconify-icon>
</button>
```

This is a signature treatment — the glass-pill icon button is what makes the chrome feel premium-app rather than flat-card.

### input-text

Stone-alt fill, white-5% hairline, 16px rounded, leading 20px solar magnifier. Focus-ring is lime at 20% opacity, never a solid stroke.

```html
<div class="relative">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-5 text-muted-foreground absolute left-4 top-1/2 -translate-y-1/2"></iconify-icon>
  <input type="text" placeholder="[Placeholder]"
    class="w-full pl-12 pr-4 py-3.5 rounded-2xl bg-input border border-white/5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20" />
</div>
```

### chip / chip-active

Pill, 13px semibold. Inactive: stone-alt 80% with hairline. Active: lime fill, deep-moss text, no border. Used as horizontal-scroll filter rails.

```html
<div class="flex gap-2 overflow-x-auto pb-2">
  <button class="flex-none px-4 py-2 rounded-full bg-primary text-primary-foreground font-semibold text-sm">[Active]</button>
  <button class="flex-none px-4 py-2 rounded-full bg-secondary/80 border border-white/5 text-foreground font-semibold text-sm">[Inactive]</button>
</div>
```

### badge-pill

Tracked-out lime micro-label sitting on a 15%-lime tinted plate. The "NEW" / kicker treatment — pairs with adjacent body copy.

```html
<span class="inline-block text-[10px] uppercase tracking-wider text-primary font-bold">[Kicker]</span>
```

### avatar

Round, 40px, with a 2px lime-at-20% ring (signature touch — the lime is referenced even on the avatar).

```html
<div class="size-10 rounded-full overflow-hidden border-2 border-primary/20">
  <img src="[image-url]" alt="" class="w-full h-full object-cover" />
</div>
```

### list-row

A 16px-gap horizontal row: thumbnail → title/subtitle stack → trailing action. Bottom-divided by a `border-white/5` hairline rather than full-card containment when stacked vertically.

```html
<div class="flex items-center gap-4 group">
  <div class="size-16 rounded-xl overflow-hidden flex-shrink-0">
    <img src="[image-url]" class="w-full h-full object-cover" />
  </div>
  <div class="flex-1 min-w-0 border-b border-white/5 pb-4">
    <h4 class="font-bold text-base mb-0.5">[Primary]</h4>
    <p class="text-xs text-muted-foreground">[Secondary metadata]</p>
  </div>
</div>
```

A *ranked* list row (numbered chart) prefixes the row with a `size-8` lime numeral in `font-heading font-bold text-lg` — composition only, not a separate component.

### progress-bar

A 2px-tall white-10% track with a lime-filled segment. Most often anchored to the bottom edge of a floating surface (mini-player progress).

```html
<div class="h-0.5 bg-white/10 rounded-full overflow-hidden">
  <div class="h-full w-1/4 bg-primary rounded-full"></div>
</div>
```

### top-app-bar

Transparent, no border, sits over the page (which often has a top-edge ambient gradient). Layout is avatar+greeting on the left, glass-icon buttons on the right.

```html
<div class="px-6 pt-12 pb-4 flex items-center justify-between">
  <div class="flex items-center gap-3">[avatar + greeting]</div>
  <div class="flex gap-2">[glass-icon buttons]</div>
</div>
```

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

Bottom-anchored, near-opaque background (`bg-background/95`) with `backdrop-blur-xl` and a top hairline. Each tab is a vertical icon+label stack, 16px wide. Active state = solar `bold` icon variant + lime color. Inactive = solar `linear` + muted color. No pill, no underline — variant + color carries the state alone.

```html
<nav class="bg-background/95 backdrop-blur-xl border-t border-white/5">
  <div class="flex items-center justify-between px-6 py-3">
    <button class="flex flex-col items-center gap-1 w-16 text-primary">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      <span class="text-[10px] font-medium">[Label]</span>
    </button>
    <button class="flex flex-col items-center gap-1 w-16 text-muted-foreground hover:text-foreground transition-colors">
      <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
      <span class="text-[10px] font-medium">[Label]</span>
    </button>
  </div>
</nav>
```

### card-floating-glass (signature)

A floating action / status surface — translucent stone with `backdrop-blur-xl`, white-10% hairline (slightly stronger than chrome cards), `shadow-2xl`. Sits above content on the bottom of the screen. This component is what makes the aesthetic feel like a "live" app rather than a static page; without it, the design loses its layered after-hours character.

```html
<div class="bg-card/90 backdrop-blur-xl border border-white/10 rounded-2xl p-2 pr-4 shadow-2xl flex items-center gap-3">
  <div class="size-12 rounded-lg overflow-hidden flex-shrink-0">
    <img src="[image-url]" class="w-full h-full object-cover" />
  </div>
  <div class="flex-1 min-w-0">
    <h4 class="text-sm font-bold truncate">[Primary]</h4>
    <p class="text-xs text-muted-foreground truncate">[Secondary]</p>
  </div>
  <button class="size-8 flex items-center justify-center bg-primary text-primary-foreground rounded-full shadow-lg">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-4"></iconify-icon>
  </button>
</div>
```

## Iconography

**Solar icon set** is the canonical choice — its slightly-rounded, friendly geometry pairs with Plus Jakarta Sans without going twee. The variant convention is **strict and load-bearing**:

- **Linear** (`solar:[name]-linear`) — every default / inactive / utility icon. 1.5px stroke implied.
- **Bold** (`solar:[name]-bold`) — every active / selected / primary-action icon. The active tab, the play button, the heart on the favorited row, the bold numeric icon.

Icon sizing: 16px inside small chips/buttons, 20px in glass-pill chrome buttons, 24px in tab bars and standalone actions. Always size with Tailwind `size-*` classes — never HTML `width`/`height` attributes.

For categorical hero icons inside gradient genre tiles, bump to 48px and tint to 30% of the tile's foreground color (`text-background/30` or `text-white/30`) so the icon reads as texture, not subject.

## Illustration & Imagery

This aesthetic uses imagery heavily — every screen surfaces album art, playlist covers, genre tiles, and avatars. Images carry significant visual weight, so the display rules below must be followed exactly.

- **Style / Technique**: Mixed — the app aggregates user-content-style imagery from many genres, so the *aggregate* style is "evocative editorial cover art" spanning photographic (moody concert / artist / lifestyle photography), illustrated (lo-fi anime interiors, retro-futurist neon scenes, traditional painting), and graphic-design (geometric color-block, gradient typographic). The unifying thread is **saturated atmosphere** and **mood-first composition** — never sterile product shots, never bright clean stock photography.
- **Palette**: Each individual image is allowed its own palette, but selections lean toward **deep, saturated, after-hours** color — magentas, indigos, neon-cyans, sunset oranges, deep teals, warm earths. Avoid washed-out pastels and bright daylight palettes. Atmospheric ambient blobs *behind* the UI use the chart-accent palette (`accent-teal`, `accent-cyan`, `accent-amber`, `accent-peach`) at 10–20% opacity, blurred 3xl.
- **Edge treatment**: The image itself fills its frame edge-to-edge with no stroke. Frames have NO border on hero/tile imagery. Only `avatar` adds the 2px lime-at-20% ring.
- **Shading & light**: Whatever the source provides — but selection bias toward dramatic light (single warm lamp, neon glow, single sunset spotlight) over flat lighting.
- **Composition & framing**: Square (1:1) is the default for tiles and album covers. List-row thumbnails crop square. Mini-player art is square 48px. Genre tiles use 4:3.
- **Background within the illustration**: Always present — there is no transparent / cut-out imagery in this aesthetic. Image fills its frame.
- **Container styling**:
  - Square album/playlist tiles → `rounded-2xl` (16px) with `border border-white/5` over a `bg-card` placeholder.
  - List-row thumbnails (size-12 to size-16) → `rounded-xl` (12px), no border.
  - Hero "card with badge" tiles → `rounded-2xl`, no border, frame contains its own ambient blob.
  - Genre tiles → `rounded-2xl`, no image — instead a `bg-gradient-to-br` of two chart-accent colors with a centered iconify icon at 30% foreground opacity. This is a categorical stand-in for imagery, not a photograph.
  - Avatars → `rounded-full` with 2px `border-primary/20`.
- **CSS treatment on `<img>`**: Always `class="w-full h-full object-cover"`. Optional `opacity-80 group-hover:opacity-100 transition-opacity` for tiles where hover should reveal a play overlay. The mini-player thumbnail uses `animate-[spin_8s_linear_infinite]` to evoke a vinyl rotation — a signature touch reserved for the floating-glass mini-player only.
- **Box-shadow on the image / its frame**: None on tile thumbnails. List-row 16px thumbnails carry an implicit `shadow-lg` only when hovering (`group-hover:scale-105 transition-transform`) — the lift, not the shadow, is the affordance. The exception is the floating-glass mini-player, whose entire surface (image included) sits inside `shadow-2xl`.
- **Aspect ratio rule**: Default 1:1. Genre tiles 4:3. Never freeform.
- **Anti-references**: NOT 3D-rendered, NOT claymation, NOT bright flat-vector daylight illustration, NOT pastel, NOT corporate stock photography, NOT cut-out / transparent-bg illustration, NOT line-art / wireframe illustration.
- **Style recipe prompt**:

  *A square cover-art image of [SUBJECT], rendered in evocative editorial style — saturated, after-hours mood, deep atmospheric color (magenta, indigo, neon-cyan, sunset orange, or deep teal). Allowed mediums: moody photography with dramatic single-source light, lo-fi illustrated interior in a warm-lamp palette, retro-futurist neon scene, traditional painted landscape with a foggy atmospheric perspective, or geometric color-block graphic design. Composition is mood-first, framing is centered or low-horizon, full-frame with no border. NOT 3D, NOT claymation, NOT pastel, NOT clean daylight stock photography, NOT line-art, NOT cut-out — always a complete bleed-to-edge atmospheric image.*

## Hierarchy & Emphasis

Visual weight is dominated by **size + saturation contrast**. Headings (Space Grotesk Bold 20–30px) anchor every screen section; body and metadata fall to muted gray. The lime `{colors.primary}` is the screen's loudest voice — wherever it appears, it is *the* call to action or *the* selected state. Use it once or twice per visible region; if a screen has more than three lime elements at once, downgrade one to muted.

Imagery is the second-loudest signal — saturated covers compete with the lime, which is why all chrome (cards, buttons, inputs) is desaturated to stone-black. The chart-accent palette never appears in chrome precisely so it can flare in atmospheric blobs and gradient tiles without competing.

Metadata always whispers — `text-muted-foreground` body-sm, no decoration.

## Distinctive Details

1. **Lime-at-20% ring on avatars** — a 2px brand-color hint on otherwise neutral avatars, signaling "you are here" without a heavy treatment.
2. **Backdrop-blur glass for floating chrome** — every floating surface (icon buttons, mini-player, tab bar) uses translucent stone over `backdrop-blur-xl` with a hairline white border. This is what makes the dark background feel layered rather than flat.
3. **Ambient 3xl-blur color blobs** anchored at corners — chart-accent colors at 10–20% opacity, leaking in from off-screen. They give the dark canvas its "after-hours" atmospheric depth without ever competing with content.
4. **Tracked-out micro-eyebrows in lime** — the `text-[10px] uppercase tracking-wider text-primary font-bold` kicker label is the recurring typographic-decoration trick that introduces fresh content without taking heading space.

## Do's and Don'ts

### Do

- Reserve `{colors.primary}` (lime) for one CTA, the active tab/chip, focus rings, and the active progress fill — and nothing else.
- Pair every heading with `font-heading` (Space Grotesk) Bold; pair every body / button label with `font-sans` (Plus Jakarta Sans) 600 or 400.
- Use `border border-white/5` to define every chrome card, input, and chip edge — flat, not borderless.
- Use solar `linear` for inactive icons and solar `bold` for active icons — let the variant carry the state.
- Place ambient color blobs (`blur-3xl`, 10–20% opacity) just outside viewport corners for atmospheric depth.
- Stack floating chrome (mini-player above tab bar) with `backdrop-blur-xl` and `shadow-2xl` to feel layered.

### Don't

- Don't use the chart-accent palette (`accent-teal`, `accent-cyan`, `accent-amber`, `accent-peach`) in any UI chrome (buttons, text, card backgrounds). It is for atmospheric blobs and categorical gradient tiles only.
- Don't add drop shadows to standard cards or inputs — they should sit flat and rely on hairline borders for separation.
- Don't put white text on lime — always use `{colors.on-primary}` (deep moss).
- Don't use Bold (700) outside Space Grotesk headings — body/button text caps at Semibold 600.
- Don't add a pill or underline indicator to the active tab; the icon variant + lime color is the indicator.
- Don't render images on transparent / cut-out backgrounds — every image fills its frame edge-to-edge.
- Don't introduce a third heading typeface or a serif into running UI — Playfair Display is loaded but unused; keep it that way unless a brief explicitly calls for editorial display type.
- Don't crowd the lime — if a screen surface already has a lime CTA, use stone tonal recipes for any neighboring actions.