Twilight Lavender DESIGN.md

---
version: 1
name: Twilight Lavender Mobile
colors:
  primary: "#B794F4"
  on-primary: "#1A1A2E"
  accent: "#FFCB6B"
  surface: "#1A1A2E"
  surface-alt: "#25253A"
  surface-muted: "#2D2D44"
  on-surface: "#E2E2E8"
  on-surface-variant: "#9E9EB3"
  border: "#2D2D44"
  border-hairline: "rgba(255,255,255,0.05)"
  border-hairline-strong: "rgba(255,255,255,0.10)"
  chart-1: "#F6AD55"
  chart-2: "#B794F4"
  chart-3: "#63B3ED"
  chart-4: "#F687B3"
  chart-5: "#68D391"
  destructive: "#7F1D1D"
  illus-lavender: "#B794F4"
  illus-butter: "#FFCB6B"
  illus-coral: "#F687B3"
  illus-forest: "#68D391"
  illus-sky: "#63B3ED"
  illus-amber: "#F6AD55"
typography:
  display-md:
    fontFamily: DM Sans
    fontSize: 30px
    fontWeight: 500
    lineHeight: 36px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 500
    lineHeight: 30px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: DM Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 26px
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: DM Sans
    fontSize: 18px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: -0.005em
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0em
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Plus Jakarta Sans
    fontSize: 10px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.18em
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 28px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 16px
  card-padding-lg: 20px
  section-gap: 24px
icons:
  set: solar
  default_variant: linear
  active_variant: bold
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    boxShadow: none
  card-feature:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.3xl}"
    padding: 0
    boxShadow: "0 1px 2px rgba(0,0,0,0.20)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 8px
    border: none
    boxShadow: none
  button-secondary:
    backgroundColor: "rgba(59,59,88,0.5)"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 8px
    boxShadow: none
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    border: none
    boxShadow: none
    paddingX: 0
    paddingY: 0
  button-icon-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 16px
    border: none
    boxShadow: "0 4px 12px rgba(183,148,244,0.20)"
  button-icon-circle-muted:
    backgroundColor: "rgba(59,59,88,0.5)"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 16px
    border: none
    boxShadow: none
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    paddingX: 16px
    paddingY: 16px
    focusRingColor: "rgba(183,148,244,0.20)"
    boxShadow: none
  chip:
    backgroundColor: "rgba(59,59,88,0.5)"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 8px
    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: "rgba(59,59,88,0.30)"
    textColor: "{colors.chart-1}"
    typography: "{typography.label-sm}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 6px
    boxShadow: none
  badge-glass:
    backgroundColor: "rgba(0,0,0,0.40)"
    textColor: "#FFFFFF"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  avatar:
    rounded: "{rounded.full}"
    borderColor: "{colors.border-hairline-strong}"
    borderWidth: 1px
    size: 48px
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: 16px
    gap: 16px
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.full}"
    height: 6px
    border: none
    boxShadow: none
  category-tile:
    backgroundColor: "rgba(59,59,88,0.30)"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: 16px
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-lg}"
    paddingX: 24px
    paddingY: 24px
    border: none
    boxShadow: none
  tab-bar-floating:
    backgroundColor: "rgba(37,37,58,0.80)"
    borderColor: "{colors.border-hairline-strong}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 8px
    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.40)"
  tab-item-active:
    textColor: "{colors.primary}"
    iconSize: 30px
    background: none
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    iconSize: 30px
    background: none
---

# Twilight Lavender Mobile

## Overview

**Calm, contemplative, low-light.** A deep midnight surface (`{colors.surface}` `#1A1A2E`) is the anchoring mood: the screen feels like a quiet room after dark, lit by a single lavender lamp. A saturated lavender (`{colors.primary}` `#B794F4`) and a warm butter-yellow (`{colors.accent}` `#FFCB6B`) carry every accent — the lavender for selection and primary action, the amber for streaks, energy, and warmth notes.

The aesthetic is **composed and unhurried**: spacious vertical rhythm, hairline white borders at 5–10% alpha that whisper rather than divide, and a clear typographic two-track system — DM Sans (medium-weight, slightly tightened) for headlines, Plus Jakarta Sans for body and labels. Nothing shouts. Even the brightest accent (lavender on dark) reads as glowing rather than loud, because everything sits on a near-black canvas.

The signature chrome move is a **floating pill nav** — a translucent capsule docked above the bottom edge with backdrop blur and a soft drop shadow, separate from the page surface. Cards are tonal lifts (slightly lighter than the background) rather than shadow-elevated. Imagery is a soft, painterly companion — moody mid-distance landscapes, abstract wave fields — never photographic-bright, never illustrative-cartoon.

## Colors

The palette has three boundaries that must not blur:

**Chrome layer** (`{colors.surface}`, `{colors.surface-alt}`, `{colors.surface-muted}`, `{colors.on-surface}`, `{colors.on-surface-variant}`): the page background is the deepest tone (`#1A1A2E`); cards lift one step (`#25253A`); the muted layer (`#2D2D44`) is reserved for inert tracks (progress backgrounds, divider rules) and input fills when needed. Foreground text is `#E2E2E8` for full-attention copy and `#9E9EB3` for metadata.

**Brand & accent** (`{colors.primary}`, `{colors.accent}`): lavender is the single primary action color — active chip, primary CTA, active tab, focus ring at 20% alpha. Butter yellow (`#FFCB6B`) is reserved for warmth/highlight moments (streak indicators, secondary kicker labels on featured content). Never use both at full saturation in the same card; they are alternates, not partners.

**Categorical chart palette** (`{colors.chart-1}` through `{colors.chart-5}`): orange `#F6AD55`, lavender `#B794F4`, sky `#63B3ED`, pink `#F687B3`, mint `#68D391`. Use ONLY for differentiating peer items — categorical icon tiles, parallel progress fills, taxonomy. They appear inside soft 20%-alpha backgrounds (e.g. `bg-chart-1/20 text-chart-1` on a small icon square). Never as page-level chrome.

**Borders** are functionally invisible: a 1px `rgba(255,255,255,0.05)` hairline on cards and inputs (`{colors.border-hairline}`), upgraded to `rgba(255,255,255,0.10)` on the floating tab bar (`{colors.border-hairline-strong}`). They define the edge of a surface without contrasting with it.

**Illustration palette** (`illus-*`): the painterly imagery uses muted, dusk-leaning tones — lavender, butter, coral, forest, sky, amber. These tokens are for the artwork inside image frames, not for UI fills. UI never borrows the soft pastel range; imagery never borrows the saturated lavender at full strength.

## Typography

Two families, deliberate split:

**DM Sans** (`{typography.display-*}`, `{typography.headline-*}`) — geometric sans, weight **500 medium** as the default heading weight. Headlines are slightly tightened (`-0.01em` to `-0.02em`) to feel poised rather than bold. We never use 700+ for headings; the dark surface already provides plenty of contrast and bold weights would feel aggressive against the calm mood.

**Plus Jakarta Sans** (`{typography.body-*}`, `{typography.label-*}`, `{typography.caption}`) — humanist sans for everything below heading level. Body uses **500 medium** at 14px (notably heavier than typical body to hold up against the dark surface and small size); captions drop to 400 at 12px in `{colors.on-surface-variant}` for whispering metadata.

**Role assignments:**

- `{typography.display-md}` — primary screen title only when the screen needs a hero (e.g. greeting + name).
- `{typography.headline-lg}` (24px) — top-of-screen page title in the app bar.
- `{typography.headline-md}` (20px) — section anchors ("[Section name]" above scrollers and lists).
- `{typography.headline-sm}` (18px) — featured card titles.
- `{typography.body-md}` — paragraph and list-row primary lines.
- `{typography.body-sm}` / `{typography.caption}` — metadata, "Session 3 of 8 · [Subtitle]", duration captions in `{colors.on-surface-variant}`.
- `{typography.label-md}` — chip and button labels.
- `{typography.label-uppercase}` — tracked-out tiny kickers ("[N] DAYS", "[CATEGORY]") in `{colors.primary}` or `{colors.accent}` over featured cards. The wide letter-spacing (0.18em) is load-bearing here.

**Weight rule of thumb**: 500 is the workhorse for both heading and body. 700 only appears on micro-labels (`label-uppercase`, streak count). Never use 600 — it muddies the two-tier weight system.

## Spacing & Layout

**Generous, breathing.** Screen gutter is `{spacing.gutter}` (24px) — a noticeable inset from the edge that lets the dark canvas frame content. Section-to-section vertical gap is `{spacing.section-gap}` (24px); within a section, the section title sits 16px (`{spacing.md}`) above its content.

Cards have `{spacing.card-padding}` (16px) internal padding for compact list-row cards, and `{spacing.card-padding-lg}` (20px) for hero/feature cards with imagery.

Horizontal scroll rails (chip rows, course carousels) use `gap-3` (12px) or `gap-4` (16px) depending on whether children are tags or imagery cards.

The bottom of the page is reserved for the floating nav: pages need `pb-24` minimum so nothing scrolls under the docked pill.

## Elevation & Depth

**Tonal, not shadowed.** The hierarchy is built by stacking translucent or slightly-lighter surfaces over the dark page:

- Page surface: `#1A1A2E`
- Card (resting): `#25253A` — one step lighter
- Muted track / inert fill: `#2D2D44`
- Translucent overlay (chip-secondary, badge-glass): `bg-secondary/30` or `bg-secondary/50` — surface-alt at 30–50% alpha

Drop shadows appear in only **two** places:
1. The floating tab bar — a heavy soft shadow (`shadow-2xl shadow-black/40`) so it feels detached from the page.
2. The primary action button when icon-circle (small `shadow-primary/20`) — a faint lavender glow that hints at warmth.

Cards do NOT carry shadows. They lift via tonal contrast and the 1px hairline border at 5% white alpha.

## Shapes

A generous, rounded family — no square corners anywhere except brief glass badges:

- `{rounded.sm}` (8px) — small inline glass badges over imagery (e.g. session-count chip overlaid on a thumbnail).
- `{rounded.md}` (12px) — small thumbnail avatars inside list rows (the 64px image squares).
- `{rounded.lg}` (16px) — default card radius, list-row cards, progress bars at full pill.
- `{rounded.xl}` (20px) — text inputs, category tiles, image frames inside Programs scrollers.
- `{rounded.2xl}` (24px) — large list-row cards on the music tracklist.
- `{rounded.3xl}` (28px) — featured course cards (the most prominent imagery containers).
- `{rounded.full}` — every chip, every button, every nav element, every avatar, every circular icon-button. Pills are the dominant shape.

Rule of thumb: anything interactive is either fully pilled (`rounded-full`) or generously rounded (`rounded-2xl`+). Sharp corners feel out of place.

## Components

### card

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

### card-feature (with full-bleed image)

```html
<div class="min-w-[280px] bg-card rounded-3xl overflow-hidden border border-white/5 shadow-sm">
  <img src="[image-url]" alt="" class="w-full h-40 object-cover" />
  <div class="p-5">
    <span class="text-[10px] text-primary uppercase font-bold tracking-[0.18em]">[Kicker label]</span>
    <h4 class="font-heading text-lg font-medium text-foreground mt-1 mb-2">[Feature title]</h4>
    <p class="text-sm text-muted-foreground line-clamp-1">[Short description.]</p>
  </div>
</div>
```

The kicker color alternates between `text-primary` (lavender) and `text-accent` (butter) across a row of features to create rhythm.

### button-primary

```html
<button class="bg-primary text-primary-foreground px-5 py-2 rounded-full text-sm font-medium">
  [Action]
</button>
```

### button-secondary

```html
<button class="bg-secondary/50 text-foreground border border-white/5 px-5 py-2 rounded-full text-sm font-medium">
  [Action]
</button>
```

### button-icon-circle (primary play / forward)

```html
<button class="size-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-sm shadow-primary/20">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-4"></iconify-icon>
</button>
```

For inert / locked variants, swap to `bg-secondary/50 text-muted-foreground` and drop the shadow.

### input-text

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

The leading icon switches from `muted-foreground` to `primary` on focus — small detail that makes inputs feel alive.

### chip / chip-active

```html
<button class="bg-primary text-primary-foreground px-5 py-2 rounded-full text-sm font-medium whitespace-nowrap">
  [Active label]
</button>
<button class="bg-secondary/50 text-foreground border border-white/5 px-5 py-2 rounded-full text-sm font-medium whitespace-nowrap">
  [Inactive label]
</button>
```

Chip rows scroll horizontally with `gap-3`, and the active chip is always the lavender pill.

### badge-pill (streak / status)

```html
<div class="flex items-center gap-2 bg-secondary/30 px-3 py-1.5 rounded-full border border-white/5 backdrop-blur-sm">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-chart-1 size-5"></iconify-icon>
  <span class="text-sm font-bold text-chart-1">[Status text]</span>
</div>
```

### badge-glass (overlay on imagery)

```html
<div class="absolute bottom-3 left-3 bg-black/40 backdrop-blur-md px-2 py-1 rounded-lg text-[10px] text-white font-bold tracking-wider">
  [META LABEL]
</div>
```

### avatar

```html
<img alt="" src="[image-url]" class="size-12 rounded-full border border-white/10" />
```

### list-row (with thumbnail + progress)

```html
<div class="bg-card p-4 rounded-2xl border border-white/5 flex gap-4 items-center">
  <div class="size-16 rounded-xl overflow-hidden flex-shrink-0 bg-muted">
    <img src="[image-url]" class="w-full h-full object-cover" />
  </div>
  <div class="flex-1 min-w-0">
    <h4 class="font-medium text-sm text-foreground truncate">[Item title]</h4>
    <p class="text-xs text-muted-foreground mb-3">[Subtitle / progress note]</p>
    <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
      <div class="h-full bg-chart-3 w-[35%] rounded-full"></div>
    </div>
  </div>
  <button class="size-10 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-primary-foreground shadow-sm shadow-primary/20">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-4"></iconify-icon>
  </button>
</div>
```

For locked/inactive rows, wrap in `opacity-80` and overlay the thumbnail with `bg-black/40` + a centered lock icon.

### progress-bar

```html
<div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
  <div class="h-full bg-chart-3 w-[35%] rounded-full"></div>
</div>
```

The fill color rotates through the chart palette to differentiate parallel items in a list. Use the same chart color consistently for a single item across screens.

### category-tile (in-scroller mini-card with icon + label)

```html
<div class="min-w-[120px] bg-secondary/30 border border-white/5 rounded-2xl p-4 flex flex-col items-center gap-3">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-3xl text-primary size-8"></iconify-icon>
  <span class="text-xs font-medium">[Category]</span>
</div>
```

The icon color cycles through `text-primary`, `text-chart-1`, `text-chart-3`, `text-chart-5` etc. across a row to give each category its own hue.

### top-app-bar

```html
<header class="pt-12 px-6 pb-6">
  <h1 class="font-heading text-3xl font-medium text-foreground">[Page title]</h1>
</header>
```

When the bar carries an avatar + greeting, the layout is a flex row: avatar on the left, eyebrow `label-uppercase` ("GOOD EVENING" pattern) above name in `{typography.headline-lg}`, and a status badge on the right.

### tab-bar-floating

```html
<nav class="fixed bottom-6 left-6 right-6 bg-card/80 backdrop-blur-lg border border-white/10 p-2 px-6 rounded-full flex justify-between items-center z-50 shadow-2xl shadow-black/40">
  <button class="flex items-center justify-center p-2 text-primary">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-8"></iconify-icon>
  </button>
  <button class="flex items-center justify-center p-2 text-muted-foreground hover:text-foreground transition-colors">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-8"></iconify-icon>
  </button>
  <!-- repeat for each tab -->
</nav>
```

This is the signature chrome move. The floating pill is detached from the page edges (24px inset on all sides), translucent (80% surface-alt), backdrop-blurred, hairline-bordered at 10% white, and shadowed. The active tab is the lavender bold-variant icon; inactive tabs use the linear variant in `{colors.on-surface-variant}`.

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

Active = `text-primary` + bold-variant icon. Inactive = `text-muted-foreground` + linear-variant icon. No pill backplate, no underline — the variant swap and color carry the entire active state.

### Tonal recipes (compositional, NOT new components)

- **Locked / disabled list row**: wrap the standard `list-row` in `opacity-80`, overlay its thumbnail with `bg-black/40` + a centered `solar:lock-bold` icon, and swap the trailing button to the muted variant (`bg-secondary/50 text-muted-foreground`, no shadow).
- **Categorical icon tile**: a 48px square in `bg-{chart-N}/20 text-{chart-N} rounded-xl` flex-centered around the icon. Used as the thumbnail for sound/category list rows.
- **Promo card** (subtle CTA card embedded in a section): `bg-primary/10 border border-primary/20 rounded-3xl p-6` with a primary-colored heading and a primary-fill icon-circle button on the right.
- **"View all" link**: a `{typography.label-md}` text link in `{colors.on-surface}` (or `{colors.primary}` when emphasized) — no underline, no chevron, no chrome.

### Composition recipe — section header

A section opens with a flex row: section title in `{typography.headline-md}` on the left, optional "[View all]" `button-text` in `{typography.label-md}` on the right, with `{spacing.md}` vertical gap to the content below. Section-to-section spacing is `{spacing.section-gap}`.

## Iconography

**Set: `solar`.** Solar's two variants — `linear` (1.5px stroke) and `bold` (filled) — drive the entire active/inactive convention.

- **Default state**: `solar:[icon-name]-linear` in `{colors.on-surface-variant}` (or `on-surface` for higher-attention positions).
- **Active state**: `solar:[icon-name]-bold` in `{colors.primary}` (or the relevant chart color for categorical icons).
- **Featured / emphatic state**: `solar:[icon-name]-bold` in `{colors.accent}` or `{colors.chart-1}` (for warmth/streak/energy contexts).

Default icon size is 24px (`size-6`), nav icons step up to 30–32px (`size-8`), trailing list-row action icons are 16px (`size-4`) inside a 40px circle.

Icons are sized with Tailwind classes (`size-6`, `size-8`, `size-4`) — never with HTML `width`/`height` attributes — to stay consistent with the rest of the snippet system.

## Illustration & Imagery

The aesthetic uses imagery as a soft, painterly companion to the dark UI — never bright, never photographic-realistic, never illustrative-cartoony. Two image archetypes appear: **moody mid-distance landscape paintings** (foggy forests, sunset silhouettes, dim windows lit from outside) and **abstract layered wave fields** (smooth pastel curves stacked horizontally, suggesting horizons or gentle motion).

- **Style / Technique**: soft digital painting with airbrushed edges and atmospheric perspective for landscape imagery; flat layered vector with smooth gradient transitions between bands for abstract wave imagery. Both share a hand-painted-yet-digital feel — visible softness, no hard outlines, no harsh detail.
- **Palette**: each illustration uses 2–4 colors max, drawn from `{colors.illus-lavender}`, `{colors.illus-butter}`, `{colors.illus-coral}`, `{colors.illus-forest}`, `{colors.illus-sky}`, `{colors.illus-amber}`. Within a single image, colors are dusk-saturation — desaturated enough to feel hushed but warm/cool enough to carry mood. Forest scenes lean monochromatic green-teal; sunset scenes lean coral + butter + lavender; abstract waves often pair lavender + butter or stack monochrome blue-teal.
- **Edge treatment**: NO outlines anywhere. All shape boundaries are soft paint edges or smooth color-band transitions.
- **Shading & light**: atmospheric, single ambient source (a glowing low sun, a hidden window light) — never directional cel-shading. Wave imagery is flat-tonal with no shading; landscape imagery has soft fog gradients.
- **Composition & framing**: subject sits centered or distributed across the frame with significant breathing room; horizons and sun discs sit slightly above center. Abstract wave imagery fills the frame edge-to-edge. There is always negative space — never cluttered.
- **Background within the illustration**: the painted scene IS the background (sky, fog, water) — no transparent cutouts.
- **Container styling**: images sit inside `{rounded.2xl}` (course feature cards, 24px) or `{rounded.xl}` (program tiles, 20px) frames with `border border-white/5` (1px hairline at 5% white). Padding inside the container around the image is **0** — images bleed full-width to the card's rounded corners. Container background where image doesn't reach: `{colors.surface-alt}`.
- **CSS treatment on `<img>`**: always `object-cover`, full width, fixed aspect (h-40 for course cards, aspect-[4/5] for program tiles, size-16 for list-row thumbnails). No `mix-blend-mode`, no opacity reduction, no filter. The image renders at full intensity inside its frame.
- **Box-shadow on the image or its frame**: none — image sits flat on the card surface. The card itself may carry the optional `shadow-sm` for featured variants, but the image inside has no separate shadow.
- **Aspect ratio rule**: course feature cards are 280×160 (≈7:4 landscape); program tiles are 4:5 portrait; tracklist thumbnails are 1:1 square; greeting avatars are 1:1 circular. Crop to fit; preserve subject centering.
- **Anti-references**: NOT photographic with bright daylight, NOT 3D rendered, NOT claymation, NOT line-art, NOT children's-book cartoon, NOT pixel art, NOT high-contrast or sharp-edged, NOT overly saturated.
- **Style recipe prompt**: *A soft digital painting of [SUBJECT], rendered with airbrushed atmospheric edges and no outlines. Dusk-saturation palette of 2–4 muted colors drawn from lavender, butter yellow, coral, forest green, soft teal, and amber. Single ambient light source — a low glowing sun or diffuse fog light — with smooth gradient transitions between color bands. Hushed, contemplative, twilight mood. Composition centered with generous negative space. NOT photographic, NOT 3D, NOT cartoon, NOT high-contrast, NOT sharp-edged.*

For abstract / non-figurative needs (e.g. category banners, mood backdrops), use the wave variant: *Smooth flat-vector layered wave bands stacked horizontally, in a 2-color dusk palette (e.g. lavender + butter, or stacked monochrome teal). No outlines, soft gradient between bands, gentle organic curves. Calm, meditative, abstract.*

## Hierarchy & Emphasis

What gets weight, in order:

1. **Saturated lavender fill** (chip-active, button-primary, active tab icon) — reserved for the single most-important interactive element on screen.
2. **DM Sans 500 at 24–30px** — primary screen titles command top-of-screen attention.
3. **Imagery** — feature card images carry weight through scale and color, but always inside a contained frame.
4. **Tonal lift to `surface-alt`** — anything in a card stands out from the page just enough to read as "a unit".
5. **`{colors.on-surface-variant}` muted text** — metadata, captions, and inert subtitles always whisper.

Active states win attention by **switching from line to bold icon variant + flipping color to lavender**, never by adding chrome (no underlines, no backplate pills behind tab icons).

## Distinctive Details

1. **The floating tab pill.** The single most recognizable chrome move: a translucent backdrop-blurred capsule docked 24px above the bottom edge with a heavy soft shadow. It feels like it's floating over the content rather than anchored to the screen frame. Active state is variant-switch only — bold icon + lavender — no pill behind the icon.

2. **Hairline white-alpha borders.** Every card, input, chip, and surface carries a 1px border at `rgba(255,255,255,0.05)`. Individually invisible; collectively they give every surface a crisp outer edge against the dark canvas without any visual weight. The floating nav steps up to 10% to feel slightly more architectural.

3. **Tracked-out micro-kickers in alternating accent colors.** Featured cards open with a tiny `label-uppercase` (10px, weight 700, 0.18em letter-spacing) — alternating between `text-primary` lavender and `text-accent` butter across a row to give the carousel rhythm. The wide tracking is load-bearing; without it the kicker collapses into ordinary metadata.

## Do's and Don'ts

### Do

- Use lavender (`{colors.primary}`) as the single primary action color, sparingly.
- Reach for `{colors.accent}` butter yellow for warmth/streak/highlight moments only.
- Build hierarchy with tonal lifts (`surface` → `surface-alt` → translucent overlays), not shadows.
- Use the chart palette ONLY for categorical differentiation (parallel progress bars, peer category icons).
- Render active icons as the **bold** variant in lavender; inactive as **linear** in `on-surface-variant`.
- Round generously: chips, buttons, nav, avatars are always `rounded-full`.
- Frame imagery in `rounded-xl`+ with a 5%-white hairline and zero padding inside the frame.
- Float the tab bar 24px above the bottom edge with backdrop blur, hairline, and `shadow-2xl shadow-black/40`.
- Keep headings at DM Sans **500** medium — never bolder.

### Don't

- Don't put shadows on cards. Tonal lift only.
- Don't use lavender and butter at full saturation in the same component.
- Don't bring chart colors into UI chrome (page surface, default text, button fills).
- Don't use heading weights of 600 or 700 — it breaks the calm tone.
- Don't outline illustrations or render them with hard cartoon edges.
- Don't insert bright daylight photography. Imagery must read as dusk / fog / dim light.
- Don't add pill backplates behind active tab icons — variant swap + color is the entire treatment.
- Don't use `{rounded.sm}` (8px) or sharper anywhere except small inline glass badges over imagery.
- Don't size icons with HTML `width`/`height` attributes — always Tailwind `size-*` classes.
- Don't let cards sit flush to the screen edge — respect the 24px gutter.
- Don't borrow saturated UI lavender into the illustration palette, or soft pastel illustration colors into UI fills.