Nebula Glass DESIGN.md

---
version: 1
name: Nebula Glass Mobile
colors:
  background: "#0F0C29"
  background-mid: "#1A103C"
  background-deep: "#2E1065"
  surface: "#17153B"
  surface-glass: "rgba(255,255,255,0.05)"
  border: "rgba(255,255,255,0.10)"
  on-surface: "#FFFFFF"
  on-surface-variant: "rgba(255,255,255,0.60)"
  on-surface-muted: "rgba(255,255,255,0.40)"
  on-surface-faint: "rgba(255,255,255,0.30)"
  primary: "#D8B4FE"
  on-primary: "#1A103C"
  secondary: "#99F6E4"
  on-secondary: "#0F172A"
  accent-pink: "#F9A8D4"
  accent-mint: "#6EE7B7"
  accent-blue: "#93C5FD"
  accent-indigo: "#818CF8"
  accent-rose: "#F87171"
  accent-amber: "#FCD34D"
  glow-purple: "rgba(168,85,247,0.20)"
  glow-indigo: "rgba(99,102,241,0.20)"
  glow-teal: "rgba(20,184,166,0.10)"
  success: "#34D399"
  error: "#F87171"
  warning: "#FCD34D"
typography:
  display-lg:
    fontFamily: Manrope
    fontSize: 30px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: -0.01em
  numeral-xl:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: -0.02em
  numeral-lg:
    fontFamily: Manrope
    fontSize: 20px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: -0.01em
  body-md:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0em
  label-md:
    fontFamily: Manrope
    fontSize: 13px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: 0em
  label-sm:
    fontFamily: Manrope
    fontSize: 11px
    fontWeight: 600
    lineHeight: 14px
    letterSpacing: 0em
  caption:
    fontFamily: Manrope
    fontSize: 10px
    fontWeight: 500
    lineHeight: 14px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Manrope
    fontSize: 10px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.12em
  cta-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 800
    lineHeight: 22px
    letterSpacing: 0.04em
rounded:
  sm: 12px
  md: 16px
  lg: 22px
  xl: 24px
  2xl: 32px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 24px
  card-padding-sm: 20px
  section-gap: 24px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-glass}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 8px 32px rgba(0,0,0,0.20)"
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "linear-gradient(to right, #D8B4FE, #C084FC)"
    textColor: "{colors.on-primary}"
    typography: "{typography.cta-lg}"
    rounded: "{rounded.2xl}"
    paddingX: 24px
    paddingY: 20px
    border: none
    boxShadow: "0 10px 30px rgba(216,180,254,0.30)"
  button-secondary:
    backgroundColor: "rgba(216,180,254,0.20)"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    borderColor: "rgba(216,180,254,0.30)"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.sm}"
    paddingX: 16px
    paddingY: 12px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    border: none
    boxShadow: none
    rounded: "{rounded.full}"
    paddingX: 0px
    paddingY: 0px
  button-icon-glass:
    backgroundColor: "{colors.surface-glass}"
    textColor: "{colors.on-surface-variant}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 24px
  input-text:
    backgroundColor: "{colors.surface-glass}"
    textColor: "{colors.on-surface}"
    typography: "{typography.numeral-xl}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 24px
    paddingY: 16px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-md}"
    border: none
    boxShadow: none
    rounded: "{rounded.sm}"
    paddingX: 16px
    paddingY: 8px
  chip-active:
    backgroundColor: "rgba(255,255,255,0.10)"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    border: none
    boxShadow: "0 1px 2px rgba(0,0,0,0.10)"
    rounded: "{rounded.sm}"
    paddingX: 16px
    paddingY: 8px
  badge-pill:
    backgroundColor: "rgba(153,246,228,0.20)"
    textColor: "{colors.secondary}"
    typography: "{typography.label-uppercase}"
    borderColor: "rgba(153,246,228,0.20)"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.full}"
    paddingX: 8px
    paddingY: 4px
  badge-circle:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.background-mid}"
    size: 12px
    rounded: "{rounded.full}"
    borderColor: "{colors.background-mid}"
    borderWidth: 2px
    boxShadow: none
  avatar:
    size: 48px
    rounded: "{rounded.full}"
    borderColor: "rgba(255,255,255,0.20)"
    borderWidth: 1px
    boxShadow: "0 4px 12px rgba(0,0,0,0.30)"
    backgroundColor: "{colors.surface-glass}"
  list-row:
    backgroundColor: "{colors.surface-glass}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.2xl}"
    paddingX: 20px
    paddingY: 20px
    gap: 12px
    textColor: "{colors.on-surface}"
  progress-bar:
    backgroundColor: "rgba(255,255,255,0.05)"
    rounded: "{rounded.full}"
    height: 6px
    border: none
    boxShadow: none
  progress-ring:
    backgroundColor: "rgba(255,255,255,0.05)"
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.display-lg}"
    border: none
    boxShadow: none
    paddingX: 24px
    paddingY: 24px
    height: auto
  tab-bar-floating:
    backgroundColor: "rgba(26,16,60,0.80)"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.50)"
    rounded: "{rounded.2xl}"
    height: 64px
    paddingX: 8px
  tab-item-active:
    backgroundColor: "rgba(255,255,255,0.10)"
    textColor: "{colors.on-surface}"
    border: none
    boxShadow: "0 0 15px rgba(255,255,255,0.10)"
    rounded: "{rounded.full}"
    size: 48px
    iconSize: 24px
  tab-item-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-muted}"
    border: none
    boxShadow: none
    rounded: "{rounded.full}"
    size: 48px
    iconSize: 24px
---

# Nebula Glass Mobile

## Overview

**Deep-cosmos glassmorphism.** A dark, saturated indigo-to-purple gradient backdrop hosts translucent frosted-glass surfaces, neon-accent data, and a rounded-everything geometry. The mood is futuristic, premium, slightly dreamlike — closer to a luxury wearable companion than to a utility tool. Light is implied by colored bloom orbs that sit behind the chrome and bleed through the glass; foregrounds glow gently rather than shout.

The system runs on three visual layers: (1) a saturated multi-stop gradient ground, (2) blurred colored "atmosphere" orbs (purple, indigo, teal), and (3) translucent white-tinted glass cards stroked with a 1px hairline. Every interactive element is heavily rounded — there are no sharp corners anywhere except the pixel grid itself.

## Colors

The palette is strictly **dark mode**, organized as four palettes that must NOT bleed across roles.

**Atmospheric / ground palette** — `{colors.background}`, `{colors.background-mid}`, `{colors.background-deep}`. Used only as the page gradient and tab-bar fill. Never used inside cards.

**Glass / chrome palette** — `{colors.surface-glass}` (`rgba(255,255,255,0.05)`) for card fill, `{colors.border}` (`rgba(255,255,255,0.10)`) for hairline strokes, `{colors.on-surface}` / `on-surface-variant` / `on-surface-muted` / `on-surface-faint` for text tiers. This is the entire UI chrome vocabulary — every card, input, chip, and tab is tinted white-over-dark.

**Brand palette** — `{colors.primary}` (lavender) and `{colors.secondary}` (mint) drive primary CTAs, active states, and the "achievement / on-track" semantic. Primary is reserved for the most important action on screen and the active tab indicator's gradient companion; secondary signals positive status.

**Data palette (neon accents)** — `{colors.accent-pink}`, `{colors.accent-mint}`, `{colors.accent-blue}`, `{colors.accent-indigo}`, `{colors.accent-rose}`, `{colors.accent-amber}`. These appear ONLY inside data visualizations (rings, bars, line charts, achievement medals) and as the icon color inside the tinted-icon-bubble pattern. They must NEVER fill a card background or a button. Each accent appears with a `drop-shadow-[0_0_8px_<color>/50]` glow when used on a data stroke.

Tinted-icon-bubble recipe (used everywhere): a `size-8` to `size-10` rounded-full pill with `bg-<accent>/20 text-<accent>` housing a single `solar:*-bold` icon. This is the only place data colors enter the chrome layer.

## Typography

**Manrope** is the workhorse for all UI — sans, geometric, friendly without being childish. Playfair Display and JetBrains Mono are loaded but not used in this aesthetic; treat them as latent and prefer Manrope unless a brief explicitly calls for editorial or numeric-monospace contrast.

Weight strategy:
- **800 (extra-bold)** — only the primary CTA label (`{typography.cta-lg}`), tracked +0.04em and uppercase.
- **700 (bold)** — page titles (`{typography.display-lg}`), oversized data numerals (`{typography.numeral-xl}`, `numeral-lg}`), button labels.
- **500–600** — section anchors (`{typography.headline-md}`), body, captions. The dominant working weight.

`{typography.label-uppercase}` (10px, 700, +0.12em tracking) is load-bearing — it carries every kicker, badge, day-of-week, and "uppercase metadata" moment. Never use uppercase without this tracking; the wide letter-spacing IS the aesthetic signal.

Color contrast tiers within text: white at 100% for primary values, /60 for labels, /40 for metadata, /30 for chart axes. Lower tiers correspond to less-important information; never invert this hierarchy.

## Spacing & Layout

Generous and airy. Page gutter is `{spacing.gutter}` (24px) on every screen. Cards use `{spacing.card-padding}` (24px) internally; small cards drop to `card-padding-sm` (20px). Vertical rhythm between cards is `{spacing.section-gap}` (24px) — never tighter, never looser, the breathing space is the luxury cue.

Headers sit at `pt-10 pb-4` (40/16px) — top inset is large because the floating tab bar at the bottom already steals visual weight, and the screen needs a top counter-balance. Bottom of `<main>` always reserves `pb-24` to clear the floating tab bar.

The grid is mostly single-column with optional 2-up grids (`grid-cols-2 gap-4`). Avoid 3+ column grids; the glass aesthetic needs room to breathe and the colored bloom orbs to register through the surfaces.

## Elevation & Depth

Depth is **stacked translucency**, not drop shadow. The recipe in order:

1. **Atmospheric orbs**: 3–4 fixed-position blurred circles (`w-[200..400px] h-[same] rounded-full bg-<color>/10..20 blur-[60..100px]`) sit behind everything, off-canvas at corners. These are decorative; never put them inside cards.
2. **Page gradient**: `bg-gradient-to-br from-[#0f0c29] via-[#1a103c] to-[#2e1065]` covers the full viewport.
3. **Glass cards**: `bg-white/5 backdrop-blur-md border border-white/10 shadow-xl`. The backdrop-blur is essential — without it, the orbs don't read through.
4. **Inner glow**: critical data strokes get `drop-shadow-[0_0_Npx_rgba(<color>,0.4..0.5)]`. The CTA gets `shadow-[0_10px_30px_rgba(216,180,254,0.30)]`. The active tab item gets `shadow-[0_0_15px_rgba(255,255,255,0.10)]`.

Rule: shadows are colored bloom, not gray drop shadow. If you reach for `shadow-md` / `shadow-lg`, ask whether a colored glow would carry the meaning instead.

## Shapes

Heavily rounded. Every container is at minimum `{rounded.lg}` (22px); cards default to `{rounded.2xl}` (32px = `rounded-[2rem]`). The floating tab bar, the primary CTA, and the avatar wrapper all use `{rounded.2xl}` or `{rounded.full}`. Pills (`{rounded.full}`) host icons, badges, and tab-item active highlights.

The only place small radii appear: chip backgrounds (`{rounded.sm}`, 12px) and the tinted-icon-bubble (always `rounded-full`). There are no hard 0-radius corners anywhere.

## Components

Component snippets reference token values via the YAML frontmatter; treat the snippet as the canonical Tailwind rendering and adapt only content, not chrome.

### card

```html
<div class="rounded-[2rem] bg-white/5 backdrop-blur-md border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.20)] p-6 text-white">
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center gap-2">
      <div class="p-2 rounded-full bg-[#d8b4fe]/20 text-[#d8b4fe]">
        <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
      </div>
      <span class="text-lg font-medium text-white/90">[Card title]</span>
    </div>
    <span class="text-xs text-white/40">[Meta]</span>
  </div>
  [Card body]
</div>
```

### button-primary

The signature CTA. Wide, ultra-rounded, gradient lavender, uppercase tracked label, colored bloom shadow.

```html
<button class="w-full py-5 rounded-[2rem] bg-gradient-to-r from-[#D8B4FE] to-[#C084FC] text-[#1A103C] font-extrabold text-lg tracking-[0.04em] uppercase shadow-[0_10px_30px_rgba(216,180,254,0.30)]">
  [Action label]
</button>
```

### button-secondary

Tonal lavender chip — used for inline secondary actions inside cards.

```html
<button class="px-4 py-3 rounded-xl bg-[#D8B4FE]/20 border border-[#D8B4FE]/30 text-[#D8B4FE] text-xs font-bold flex items-center justify-center gap-2">
  <iconify-icon icon="solar:[icon-name]-bold"></iconify-icon>[Label]
</button>
```

Tonal recipe — for a low-attention "ghost" variant on glass, render `button-secondary` with `bg-white/5 border-white/10 text-white/80` instead of the lavender pair.

### button-text

```html
<button class="text-xs text-[#D8B4FE] font-medium">[Label]</button>
```

### button-icon-glass

Used for top-right close / dismiss / overflow.

```html
<button class="size-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/60">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
</button>
```

### input-text

Centered, oversized, glass-tinted with a trailing unit label.

```html
<div class="relative">
  <input type="number" placeholder="0"
    class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-2xl font-bold text-center text-white focus:outline-none focus:border-[#D8B4FE] transition-all" />
  <span class="absolute right-6 top-1/2 -translate-y-1/2 text-white/30 font-bold uppercase tracking-[0.12em]">[unit]</span>
</div>
```

### chip / chip-active (segmented control)

Used as a four-up segmented filter inside a glass tray.

```html
<div class="flex p-1 bg-white/5 backdrop-blur-md rounded-2xl border border-white/10">
  <button class="flex-1 py-2 text-sm font-medium rounded-xl bg-white/10 text-white shadow-sm">[Active]</button>
  <button class="flex-1 py-2 text-sm font-medium rounded-xl text-white/50 hover:text-white/80 transition-colors">[Inactive]</button>
</div>
```

### badge-pill

```html
<div class="bg-[#99F6E4]/20 text-[#99F6E4] text-[10px] px-2 py-1 rounded-full border border-[#99F6E4]/20 uppercase font-bold tracking-[0.12em]">
  [Status]
</div>
```

### badge-circle

A 12px solid dot stroked with the page background — used as a presence indicator overlapping an avatar.

```html
<div class="absolute top-0 right-0 size-3 rounded-full bg-[#99F6E4] border-2 border-[#1A103C]"></div>
```

### avatar

```html
<div class="size-12 rounded-full border border-white/20 p-0.5 shadow-lg backdrop-blur-sm bg-white/5">
  <img alt="[Alt]" src="[url]" class="w-full h-full rounded-full object-cover" />
</div>
```

### list-row (action / category tile)

A 2x2 or 4x1 grid of tinted-icon-bubble + label tiles for picking among options.

```html
<button class="flex flex-col items-center gap-2">
  <div class="size-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-[#D8B4FE] shadow-lg hover:bg-white/10 transition-all">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-7"></iconify-icon>
  </div>
  <span class="text-[10px] text-white/60 font-medium">[Label]</span>
</button>
```

### progress-bar

Track is white at 5%; fill carries the data-palette glow.

```html
<div class="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
  <div class="h-full bg-[#F9A8D4] w-[80%] rounded-full shadow-[0_0_10px_rgba(249,168,212,0.40)]"></div>
</div>
```

### progress-ring

Concentric SVG rings on transparent fill, each track at `text-white/5`, each fill in a distinct accent with a matching `drop-shadow` glow. Stroke width 8px, rounded line caps, rotated -90deg so 12 o'clock is the start.

### top-app-bar

Flat — no fill, no border, no shadow. Title in `{typography.display-lg}` weight 700 white, optional `tracking-wide uppercase opacity-80` kicker above it in `{typography.body-sm}`. Optional trailing element is an `avatar` or `button-icon-glass`.

```html
<header class="px-6 pt-10 pb-4 flex items-center justify-between">
  <div>
    <span class="text-white/60 text-sm font-medium tracking-wide uppercase opacity-80">[Eyebrow]</span>
    <h1 class="text-3xl font-bold text-white tracking-tight">[Title]</h1>
  </div>
  [trailing]
</header>
```

### tab-bar-floating

The signature navigation. A floating glass pill 24px from each screen edge, with a center "primary action" button that breaks the top edge.

```html
<div class="fixed bottom-6 left-6 right-6 z-50">
  <div class="h-16 w-full bg-[#1A103C]/80 backdrop-blur-xl border border-white/10 rounded-[2rem] shadow-2xl flex items-center justify-around px-2">
    <button class="flex flex-col items-center justify-center w-12 h-12 rounded-full bg-white/10 shadow-[0_0_15px_rgba(255,255,255,0.10)] text-white">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </button>
    <button class="flex flex-col items-center justify-center w-12 h-12 rounded-full text-white/50 hover:text-white/80 transition-colors">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </button>
    <div class="relative -top-6">
      <button class="size-14 rounded-full bg-gradient-to-br from-[#D8B4FE] to-[#C084FC] flex items-center justify-center shadow-[0_0_20px_rgba(216,180,254,0.40)] border-4 border-[#0F0C29]">
        <iconify-icon icon="solar:add-circle-bold" class="size-8 text-[#1A103C]"></iconify-icon>
      </button>
    </div>
    <button class="flex flex-col items-center justify-center w-12 h-12 rounded-full text-white/50 hover:text-white/80 transition-colors">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </button>
    <button class="flex flex-col items-center justify-center w-12 h-12 rounded-full text-white/50 hover:text-white/80 transition-colors">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </button>
  </div>
</div>
```

### Composition recipes (not components)

- **Metric tile**: a `card` containing a `tinted-icon-bubble` + `{typography.body-sm}` label header, an oversized `{typography.numeral-xl}` value, and a small delta line in `{typography.caption}` colored by `success` or `error` with a `solar:round-alt-arrow-up-bold` / `down` glyph.
- **Achievement medallion**: a `size-16 rounded-full` outer gradient ring (`from-<accent-1> to-<accent-2> p-0.5`) wrapping a solid `bg-[#1A103C]` inner circle that hosts a single 28px `solar:*-bold` icon. Locked items render with `opacity-40` and the gradient replaced by `bg-white/10`.
- **Section header inside a card**: `{typography.headline-md}` white title + `{typography.body-sm}` white/50 sub-label on the left; a `badge-pill` or `button-text` on the right.
- **Photo upload slot**: a square `rounded-2xl` tile with `border-2 border-dashed border-white/10` housing a centered icon + uppercase tracked label in `{typography.label-uppercase}`. On hover, border and text shift to `{colors.primary}`.

## Iconography

**Solar bold** is the only icon family used. Bold (filled) variant for both default and active — there is no line/active swap in this aesthetic; the active state is communicated by the surrounding chrome (white/10 background + glow), not by the icon itself.

Default chrome icon size is 24px (`size-6`). Inside tinted-icon-bubbles, icons are 16–20px (`size-4`/`size-5`) on small bubbles, 28px (`size-7`) on the 14-square tile bubbles. The center FAB icon is 32px (`size-8`).

Icons appearing inside data-palette tinted-icon-bubbles inherit the bubble's accent color; chrome-only icons are `text-white`, `text-white/60`, or `text-white/40` depending on tier.

## Illustration & Imagery

**Note**: no illustrative `<img>` elements are present in the source HTML — only a single photographic profile portrait inside an avatar frame. This section is therefore *partly extracted* (avatar / photo treatment, which IS in the source) and *partly inferred* (any future illustration work, based on the aesthetic's color and shape language).

### Photographic imagery — extracted from source

- **Use case**: limited to circular avatars and any small inline photographic content. The aesthetic does not host editorial photography, hero photos, or product photos — adding them would clash with the synthetic-cosmos chrome.
- **Container styling**: `size-12 rounded-full` outer frame with `border border-white/20`, `p-0.5` inner padding (creating a thin transparent gutter), `bg-white/5` glass tint, `backdrop-blur-sm`, and `shadow-lg` for lift. The image inside uses `w-full h-full rounded-full object-cover`.
- **CSS treatment on `<img>`**: `object-cover`, no `mix-blend-mode`, full opacity, no filter. The portrait reads naturally and warmly against the cool indigo background — the contrast is part of the appeal.
- **Box-shadow**: lives on the wrapping ring, not the `<img>` itself. The photo never carries a shadow directly.
- **Aspect ratio**: forced 1:1 via the circular container; preserve subject's face centering when cropping.
- **Anti-references for photography**: NOT full-bleed, NOT rectangular hero photos, NOT desaturated, NOT duotoned, NOT framed in cards. Photos appear only as small circular portraits.

### Inferred illustration guidance — for future briefs that require imagery

If the brief calls for any illustrative imagery, lean into the aesthetic's existing visual moves rather than inventing a new style. Below is an inferred recipe consistent with the type, color, and shape language of the source.

- **Style / Technique**: glow-on-dark vector illustration — flat 2D shapes with soft inner glow and outer bloom, sitting on the dark indigo ground. Think editorial app illustration with neon-accent highlights, slightly dreamy, no harsh outlines.
- **Palette**: pull strictly from the data palette (`illus`-equivalent: `accent-pink`, `accent-mint`, `accent-blue`, `accent-indigo`, `accent-amber`, plus `primary` lavender and `secondary` mint). Maximum 3 colors per illustration. Backgrounds always transparent or matching `{colors.background}`.
- **Edge treatment**: no outlines. Forms are defined by color shape and subtle glow falloff, not strokes.
- **Shading & light**: soft inner gradient (lighter shade of the fill toward the top-left, deeper toward the bottom-right), plus an outer `drop-shadow` bloom in the same hue at 30–50% alpha. Light direction implied from the upper-left.
- **Composition & framing**: subject occupies 60–70% of the canvas, centered, generous negative space around it. Subject never bleeds to the edge — it floats, like the cards do.
- **Background within the illustration**: transparent. The page's gradient and bloom orbs become the illustration's background.
- **Container styling for any illustrative `<img>`**: `rounded-[2rem]` (`{rounded.2xl}`) glass frame matching the `card` recipe — `bg-white/5 border border-white/10 backdrop-blur-md`, padding `{spacing.card-padding}` around the image. Never frameless on this aesthetic; the glass card is the gallery.
- **CSS treatment on `<img>`**: `object-contain` (so the soft bloom is preserved), full opacity, no filter, no `mix-blend-mode`.
- **Box-shadow**: none on the image; the card frame already carries `shadow-[0_8px_32px_rgba(0,0,0,0.20)]`. Optionally add `drop-shadow-[0_0_24px_rgba(216,180,254,0.30)]` to the `<img>` itself if the subject is meant to glow.
- **Aspect ratio rule**: square (1:1) by default; 4:5 portrait acceptable for hero illustrations. Do not crop — preserve the source ratio inside `object-contain`.
- **Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel, NOT line art, NOT outlined cartoon, NOT textured / hand-drawn, NOT skeuomorphic. NEVER bright daytime palettes.
- **Style recipe prompt**: *Flat 2D vector illustration of [SUBJECT], rendered in glow-on-dark style. Limited 3-color palette of neon lavender (#D8B4FE), mint (#99F6E4), and a single accent from {pink #F9A8D4, blue #93C5FD, amber #FCD34D}. Soft inner gradient on each shape (lighter top-left to deeper bottom-right) and a 30–50% outer bloom in the matching hue. No outlines. Transparent background. Subject centered at 60–70% canvas with generous breathing room. Dreamy, premium, futuristic mood. NOT 3D, NOT claymation, NOT photoreal, NOT pastel, NOT outlined, NOT hand-drawn texture.*

## Do's and Don'ts

### Do
- Use `bg-white/5 backdrop-blur-md border border-white/10` as the universal card chrome.
- Reserve neon accent colors for data layers (rings, bars, tinted-icon-bubbles, achievement medals).
- Glow critical data strokes with a colored `drop-shadow` matching the stroke hue at 40–50% alpha.
- Round everything aggressively — `rounded-[2rem]` for cards, `rounded-full` for pills and dots.
- Use `{typography.label-uppercase}` (10px, 700, +0.12em) for every kicker, badge, day-of-week, or metadata caption.
- Lift the primary CTA with a colored bloom shadow in the lavender hue.
- Anchor every screen's bottom with the floating glass tab bar; reserve `pb-24` on `<main>` to clear it.
- Keep three blurred atmospheric orbs behind the page — purple top-right, indigo bottom-left, teal mid.

### Don't
- Don't use neon accent colors as card or button backgrounds. They are data colors only.
- Don't replace `backdrop-blur-md` with a solid fill — the orbs must read through the glass for the aesthetic to land.
- Don't use gray drop shadows. Shadows in this system are colored bloom or deep-black-at-20%.
- Don't introduce light-mode surfaces. The aesthetic is dark-only.
- Don't add decorative stars / sparkles / mascots — atmosphere comes from the orbs and glow, not from ornamentation.
- Don't tighten card-to-card spacing below 24px; the breathing space is non-negotiable.
- Don't use Playfair Display or JetBrains Mono unless the brief explicitly demands editorial or numeric-mono contrast.
- Don't put rectangular full-bleed photos in cards; photos are circular avatars only.
- Don't combine more than 3 data-accent hues in a single visualization — choose a coherent subset.