Midnight Categorical Dashboard DESIGN.md

---
version: 1
name: "Midnight Categorical Dashboard Mobile"
colors:
  background: "#0F0F11"
  surface: "#1A1A1C"
  surface-alt: "#27272A"
  on-surface: "#FAFAFA"
  on-surface-variant: "#A1A1AA"
  border: "#3F3F46"
  primary: "#F7A5A5"
  on-primary: "#1A1A1A"
  secondary: "#8E99F3"
  on-secondary: "#1A1A1A"
  accent: "#FCE570"
  on-accent: "#1A1A1A"
  success: "#4ADE80"
  error: "#EF4444"
  chart-violet: "#C084FC"
  chart-coral: "#FF8577"
typography:
  display-lg:
    fontFamily: "Space Grotesk"
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.025em
  display-md:
    fontFamily: "Space Grotesk"
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.02em
  numeral-xl:
    fontFamily: "Space Grotesk"
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.02em
  numeral-lg:
    fontFamily: "Space Grotesk"
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0em
  label-uppercase:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.12em
  label-micro:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.1em
  numeral-mono:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  gutter: 16px
  card-padding: 20px
  section-gap: 16px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a (filled glyphs)
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: "{spacing.card-padding}"
    boxShadow: none
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.full}"
    height: 48px
    paddingX: 24px
    border: none
    boxShadow: "0 8px 24px rgba(247,165,165,0.3)"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    height: 36px
    paddingX: 16px
    boxShadow: none
  button-text:
    backgroundColor: transparent
    textColor: "{colors.accent}"
    typography: "{typography.label-uppercase}"
    border: none
    boxShadow: none
    paddingX: 0px
    paddingY: 0px
  button-icon-square:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.md}"
    size: 44px
    iconSize: 24px
    boxShadow: none
  fab-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.background}"
    borderWidth: 4px
    rounded: "{rounded.full}"
    size: 56px
    iconSize: 32px
    boxShadow: "0 10px 25px rgba(247,165,165,0.3)"
  input-text:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    paddingX: 48px
    paddingY: 16px
    boxShadow: none
    focusRingColor: "{colors.accent}"
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-uppercase}"
    border: none
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.primary}/10"
    textColor: "{colors.primary}"
    typography: "{typography.label-micro}"
    border: none
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.background}"
    borderWidth: 2px
    rounded: "{rounded.full}"
    size: 16px
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.full}"
    size: 48px
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: "{spacing.lg}"
    gap: "{spacing.lg}"
    boxShadow: none
  category-icon-tile:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.md}"
    size: 48px
    iconSize: 24px
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.full}"
    height: 8px
    border: none
    boxShadow: none
  progress-ring:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    paddingX: "{spacing.xl}"
    paddingY: "{spacing.lg}"
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    paddingX: "{spacing.sm}"
    paddingY: "{spacing.sm}"
    boxShadow: none
  tab-item-active:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-micro}"
    iconSize: 24px
    border: none
    boxShadow: none
  tab-item-inactive:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-micro}"
    iconSize: 24px
    border: none
    boxShadow: none
---

# Midnight Categorical Dashboard Mobile

## Overview

**Editorial-tech, dark-mode, data-forward.** A near-black canvas hosts crisp slate cards, each separated by a hairline border rather than shadow. Information is organized into a tight grid of metric tiles where every category claims its own saturated swatch — coral, periwinkle, butter-yellow, mint, violet — so that meaning is read by hue at a glance.

The voice is **bold and shouty**: oversized Space Grotesk display numerals carry the data, while everything else is set in tight, all-caps wide-tracked Plus Jakarta Sans, like editorial chrome on a magazine spread. The mood is athletic and analytical — confident, clinical, and a little aggressive — without ever feeling sterile, because the categorical palette injects warmth.

## Colors

The system runs in a strict three-layer dark stack:

- `{colors.background}` (`#0F0F11`) is the page — nearly black, slightly cool.
- `{colors.surface}` (`#1A1A1C`) is the card layer, lifted only by a hairline `{colors.border}` (`#3F3F46`). No shadows participate in elevation.
- `{colors.surface-alt}` (`#27272A`) is the deepest tonal step — used inside cards for input fills, progress-bar tracks, and category icon tiles.

Foregrounds: `{colors.on-surface}` (`#FAFAFA`) for primary type, `{colors.on-surface-variant}` (`#A1A1AA`) for secondary type and metadata.

The **categorical palette** (`primary` coral, `secondary` periwinkle, `accent` butter-yellow, `success` mint-green, `chart-violet`, `chart-coral`) is the soul of the aesthetic. Each color tags one category of data and is reused consistently every time that category appears — heading text, progress fills, icon tints, badges, dotted highlights. Saturated solid fills are reserved for the single most important call-to-action element on the screen (a featured tile, the FAB, or the active tab chip); everywhere else, categorical colors appear as **10% alpha tonal washes** behind their full-strength foreground (e.g. `bg-primary/10 text-primary`).

`{colors.error}` (`#EF4444`) and `{colors.success}` (`#4ADE80`) carry semantic meaning but are also free to play categorical roles.

**Boundary rule**: categorical colors NEVER fill an entire chrome surface (page background, full card, full tab bar). They always come in as tonal accent, glyph color, or a single signature solid block.

## Typography

Two typefaces, working as a duo:

- **Space Grotesk** (`font-heading`) — geometric sans with subtle quirks. Used at weight 900 (Black) for every numeral and headline. This is where the design shouts.
- **Plus Jakarta Sans** (`font-sans`) — neutral humanist sans. Used at weight 700 (Bold) for labels, captions, and metadata, almost always in **ALL CAPS with `tracking-widest` (~0.12em letter-spacing)**.
- **JetBrains Mono** (`font-mono`) appears in tiny doses for data ratios (`450/600`, `25/30`) where tabular precision matters.
- **Playfair Display** is loaded but unused in source chrome — reserve for editorial-display moments.

Roles:
- `{typography.display-lg}` and `{typography.display-md}` — screen titles, set uppercase. The headline is rendered with `font-black` (900) Space Grotesk, tight `tracking-tight`, `leading-none`.
- `{typography.numeral-xl}` / `{typography.numeral-lg}` — the data centerpieces. Always Space Grotesk Black. Data is the hero on every card.
- `{typography.headline-md}` — card sub-headlines like "Rings Closed".
- `{typography.label-uppercase}` and `{typography.label-micro}` — the connective tissue. `text-xs`/`text-[10px]`, weight 700, uppercase, `tracking-widest`. These read as section kickers, metric units, button copy, tab labels, status pills.
- `{typography.body-md}` / `{typography.body-sm}` — sparingly used; secondary descriptive text inside list rows.
- `{typography.numeral-mono}` — JetBrains Mono for inline ratio strings.

**Weight rule**: there is no middle weight. Headlines and numerals are 900; labels are 700; body is 500. Skip 400 and 600 entirely.

## Spacing & Layout

Density: **balanced-tight**. Cards sit close to each other (`gap-3` = 12px), generous internal padding (`{spacing.card-padding}` = 20px). Page gutter is `{spacing.gutter}` (16px); top header inset is `{spacing.xl}` (20px). The home grid uses a 2-column metric-tile pattern with selected cards spanning both columns.

Vertical rhythm is dictated by the consistent uppercase-kicker → display-numeral → progress-or-chart → metadata stack inside each card. Section gap between groups is `{spacing.section-gap}` (16px); larger conceptual breaks use 24px.

## Elevation & Depth

**This system is deliberately flat.** Cards do not float. Hierarchy is conveyed by:
1. **Tonal layering** — `{colors.background}` < `{colors.surface}` < `{colors.surface-alt}`.
2. **Hairline borders** — every card is enclosed by `border border-border` (1px, `#3F3F46`).
3. **Color saturation** — the loudest tile is the one with a saturated fill (e.g. accent-yellow card); everything else is dark-on-dark.

The only shadow in the system is a colored glow tied to the FAB and to brand-colored chart bars: `shadow-[0_0_15px_rgba(247,165,165,0.3)]` or `shadow-lg shadow-primary/30`. These are not depth shadows — they are aura effects that announce the active brand element.

## Shapes

Soft-rectangular, never circular for chrome. Radii roles:
- `{rounded.sm}` (4px) — chart bar tops, tiny pill badges.
- `{rounded.md}` (12px) — category icon tiles, square icon buttons, top-bar accessory chips.
- `{rounded.lg}` (16px) — text inputs, smaller content tiles.
- `{rounded.xl}` (24px) — the canonical card radius. Most surfaces use this.
- `{rounded.full}` — pills (chips, status badges, progress bars), avatars, the FAB.

The system reads as **chunky-soft**: 24px on cards is generous enough to feel friendly, but the strict hairline borders keep it architectural rather than puffy.

## Components

### card

Tokens: see `{components.card}`.

```html
<div class="bg-[#1A1A1C] border border-[#3F3F46] rounded-[24px] p-5">
  <div class="flex justify-between items-start mb-4">
    <div>
      <h3 class="text-[#A1A1AA] text-xs font-bold uppercase tracking-widest">[Category]</h3>
      <p class="text-2xl font-black font-[Space_Grotesk] text-white">[Card title]</p>
    </div>
    <div class="bg-[#27272A] p-2 rounded-full">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-5 text-white"></iconify-icon>
    </div>
  </div>
  <!-- card body -->
</div>
```

**Featured-tile variant**: replace `bg-[#1A1A1C] border border-[#3F3F46]` with a saturated categorical fill (e.g. `bg-[#FCE570] text-[#1A1A1A] border border-[#FCE570]`). Inside the saturated tile, secondary text uses `text-accent-foreground/70` and dividers use `bg-accent-foreground/20`. Use this treatment on at most ONE tile per screen.

**Tonal-tile variant**: replace the dark surface with a 10%-alpha categorical wash and a 30%-alpha matching border (e.g. `bg-secondary/10 border border-secondary/30`); the kicker label switches to the full-strength categorical color.

### button-primary, button-secondary, button-text

```html
<!-- primary: pill-shaped, saturated coral, uppercase label -->
<button class="h-12 px-6 rounded-full bg-[#F7A5A5] text-[#1A1A1A] text-xs font-bold uppercase tracking-widest shadow-[0_8px_24px_rgba(247,165,165,0.3)] flex items-center justify-center gap-2">
  [Action label]
</button>

<!-- secondary: pill, dark surface, hairline border -->
<button class="h-9 px-4 rounded-full bg-[#1A1A1C] border border-[#3F3F46] text-[#A1A1AA] text-xs font-bold uppercase tracking-widest">
  [Action label]
</button>

<!-- text: bare uppercase label, accent color -->
<button class="text-xs font-bold uppercase tracking-widest text-[#FCE570]">
  [Action label]
</button>
```

### button-icon-square

A square-radius surface housing a single icon, sitting in the top-app-bar accessory slot.

```html
<button class="size-11 bg-[#1A1A1C] border border-[#3F3F46] rounded-xl flex items-center justify-center">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6 text-[#F7A5A5]"></iconify-icon>
</button>
```

### fab-circle

The hero floating action button, raised above the tab bar with a thick page-colored ring and a colored aura.

```html
<div class="relative -top-5">
  <div class="size-14 bg-[#F7A5A5] rounded-full border-4 border-[#0F0F11] flex items-center justify-center shadow-lg shadow-[#F7A5A5]/30">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-8 text-[#1A1A1A]"></iconify-icon>
  </div>
</div>
```

### input-text

```html
<div class="relative">
  <iconify-icon icon="solar:magnifer-linear" class="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-[#A1A1AA]"></iconify-icon>
  <input type="text"
    class="w-full bg-[#1A1A1C] border border-[#3F3F46] rounded-2xl py-4 pl-12 pr-4 text-sm text-white placeholder:text-[#A1A1AA] focus:outline-none focus:ring-2 focus:ring-[#FCE570]/50"
    placeholder="[Search prompt]" />
</div>
```

### chip / chip-active

```html
<!-- inactive -->
<button class="px-4 py-2 rounded-full bg-[#1A1A1C] border border-[#3F3F46] text-[#A1A1AA] text-xs font-bold uppercase tracking-widest">[Label]</button>

<!-- active: solid categorical fill, no border -->
<button class="px-4 py-2 rounded-full bg-[#8E99F3] text-[#1A1A1A] text-xs font-bold uppercase tracking-widest">[Label]</button>
```

### badge-pill, badge-circle

```html
<!-- pill: low-alpha categorical wash with full-strength text -->
<span class="bg-[#F7A5A5]/10 text-[#F7A5A5] text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded">[Status]</span>

<!-- circle: status dot anchored to an avatar corner -->
<div class="size-4 bg-[#4ADE80] rounded-full border-2 border-[#0F0F11]"></div>
```

### avatar

```html
<div class="size-12 rounded-full border-2 border-[#3F3F46] overflow-hidden bg-[#27272A]">
  <img alt="[Person]" src="[image-url]" class="w-full h-full object-cover" />
</div>
```

### list-row

A dark-card row built around a `category-icon-tile` on the left, two-line label/sublabel in the middle, and a right-aligned numeral + uppercase caption.

```html
<div class="bg-[#1A1A1C] rounded-2xl p-4 border border-[#3F3F46] flex items-center justify-between">
  <div class="flex items-center gap-4">
    <div class="size-12 rounded-xl bg-[#F7A5A5]/10 border border-[#F7A5A5]/20 flex items-center justify-center text-[#F7A5A5]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </div>
    <div>
      <p class="font-bold text-white">[Primary label]</p>
      <p class="text-xs text-[#A1A1AA]">[Sublabel]</p>
    </div>
  </div>
  <div class="text-right">
    <p class="font-bold text-white">[Value]</p>
    <p class="text-[10px] text-[#A1A1AA] uppercase font-bold tracking-wider">[Status]</p>
  </div>
</div>
```

**Empty/placeholder list-row recipe**: swap `border` for `border-dashed` and add `opacity-60`. The category-icon-tile becomes neutral (`bg-[#27272A]` with `text-[#A1A1AA]`), and the trailing element switches to a small circular add-button using the `accent` color.

### category-icon-tile

The categorical color-coded square that opens every list row. Always a 10%-alpha wash + 20%-alpha border + full-strength glyph in the same hue.

```html
<div class="size-12 rounded-xl bg-[#8E99F3]/10 border border-[#8E99F3]/20 flex items-center justify-center text-[#8E99F3]">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
</div>
```

### progress-bar, progress-ring

```html
<!-- bar: thin, full-radius, surface-alt track -->
<div class="h-2 w-full bg-[#27272A] rounded-full overflow-hidden">
  <div class="h-full bg-[#F7A5A5] w-[75%] rounded-full"></div>
</div>

<!-- ring: SVG, surface-alt track, categorical stroke, rounded line caps -->
<svg viewBox="0 0 100 100" class="size-32 -rotate-90">
  <circle cx="50" cy="50" r="40" fill="transparent" stroke="#27272A" stroke-width="8" />
  <circle cx="50" cy="50" r="40" fill="transparent" stroke="#F7A5A5" stroke-width="8"
    stroke-linecap="round" stroke-dasharray="251.2" stroke-dashoffset="60" />
</svg>
```

Multiple concentric rings stack at 100% / 75% / 50% scale, each in a different categorical hue, to render combined progress.

### top-app-bar

Flush against the page (no border, no shadow). Headline left, optional accessory right.

```html
<div class="px-5 pt-12 pb-4 flex items-end justify-between">
  <div>
    <p class="text-[#A1A1AA] text-xs font-bold tracking-widest uppercase mb-1">[Eyebrow]</p>
    <h1 class="text-3xl font-black font-[Space_Grotesk] uppercase tracking-tight leading-none text-white">[Screen title]</h1>
  </div>
  <!-- avatar OR button-icon-square as accessory -->
</div>
```

### tab-bar, tab-item-active, tab-item-inactive

A flat dark bar with hairline top border. The active item simply switches to `{colors.primary}` color — no pill background, no underline. The center slot hosts the FAB which rises above the bar.

```html
<div class="fixed bottom-0 left-0 right-0 bg-[#1A1A1C] border-t border-[#3F3F46] px-2 pb-6 pt-2">
  <div class="flex items-center justify-around">
    <!-- inactive -->
    <div class="flex flex-col items-center gap-1 p-2 rounded-xl text-[#A1A1AA]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      <span class="text-[10px] font-bold uppercase tracking-wider">[Label]</span>
    </div>
    <!-- active: text-primary, no other change -->
    <div class="flex flex-col items-center gap-1 p-2 rounded-xl text-[#F7A5A5]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      <span class="text-[10px] font-bold uppercase tracking-wider">[Label]</span>
    </div>
    <!-- center slot: fab-circle, raised -->
  </div>
</div>
```

### Composition recipes (not separate components)

- **Stat-divider strip**: three center-aligned stat columns each showing `{typography.numeral-lg}` over a `{typography.label-micro}` caption, separated by a 1px vertical divider (`h-12 w-px bg-border mx-4`). Use to summarize headline metrics inside a card.
- **Bar-chart row**: a flex row of equal-width bars on a `{colors.surface-alt}` baseline. Inactive bars use `bg-primary/20`; the focal day uses full `bg-primary` with the colored aura shadow. Bars have `rounded-t-sm` only — flat at the bottom.
- **Achievement medallion**: a `size-16 rounded-full` ring with a `2px` border in a categorical color, a 20%-alpha matching wash inside, and a 32px categorical-tinted icon centered. Locked variant uses `{colors.surface-alt}` + `{colors.border}` and `opacity-40 grayscale`.
- **Tonal accent-action**: for a low-attention secondary CTA, render `button-primary` shape with `bg-primary/10 text-primary` instead of solid fill, and drop the shadow.

## Iconography

Source set: **Solar** (Iconify). Default and active variant: **`-bold`** (filled). The exception is `solar:magnifer-linear` for search-input affordances — line variants are reserved for inline glyphs that mark *interaction* rather than *category*.

Style character: rounded geometric, slightly chunky filled silhouettes, low detail. Pairs naturally with the chunky-soft chrome radii.

Sizes: 16px inside small kicker rows, 20px in pill/badge contexts, 24px is canonical (tabs, list rows, category tiles), 32px inside the FAB and achievement medallions.

Color rule: tab-bar icons inherit `text-on-surface-variant` when inactive and `text-primary` when active. Inside `category-icon-tile`, the icon is always the full-strength categorical hue matching its 10%-alpha background. Inside cards, single accessory icons take whichever categorical hue is associated with that card's data.

## Illustration & Imagery

**Note**: the only image present in the source HTML is a single user-portrait photograph used as an avatar (square crop, color photo of a person against a neutral studio background). There are no decorative illustrations. This section locks in how photography should be treated and explicitly forbids decorative illustrative imagery, which would clash with the dense data-tooling aesthetic.

- **Style / Technique**: photographic only, treated as identity/portrait or product imagery. Natural color, clean studio or daylight lighting, neutral or softly out-of-focus backgrounds. No filters, no duotones, no painterly effects. NOT illustrative, NOT 3D, NOT pixel, NOT collage.
- **Palette**: full natural color from the source photo. Photos are NOT recolored to match the categorical palette — keeping them as-is provides a humanizing counterpoint to the otherwise tightly tinted UI.
- **Edge treatment**: none on the image itself. The frame supplies the edge.
- **Shading & light**: as captured. Prefer photos with even lighting and a clearly separated subject so they read at small sizes.
- **Composition & framing**: tight crop on subject; subject roughly centered. Square or 1:1 crop is the default since photos are almost always presented as avatars.
- **Background within the image**: prefer neutral or mildly out-of-focus; avoid busy environments.
- **Container styling** (read directly from source): photos sit inside a `rounded-full` (avatar) or `rounded-2xl` container with `overflow-hidden`, a `border-2 border-[#3F3F46]` hairline, and a `bg-[#27272A]` placeholder fill that shows during load. Padding is 0 — the image is flush to the inside of the border.
- **CSS treatment on `<img>`**: `class="w-full h-full object-cover"`. No `mix-blend-mode`, no `opacity` change, no CSS `filter`.
- **Box-shadow on the image or its frame**: none — the photo sits flat on the surface. Elevation is conveyed by the frame's hairline border, not by shadow.
- **Aspect ratio rule**: lock to 1:1 (square / circle) for avatars. For larger imagery slots (rare), use 4:5 portrait or 16:9 inside a `{rounded.xl}` frame; always crop with `object-cover`.
- **Status decoration**: avatars may carry a single `badge-circle` overlay anchored bottom-right for online/status. Never overlay logos, gradients, or text on photographs.
- **Anti-references**: NOT 3D-rendered, NOT claymation, NOT flat-vector illustration, NOT cartoon/mascot, NOT line-drawing, NOT watercolor, NOT pastel scenes, NOT decorative icon-as-illustration scenes, NOT duotone or color-tinted treatments.
- **Style recipe prompt**: *Editorial-clean color photograph of [SUBJECT], natural daylight or soft studio lighting, neutral or gently out-of-focus background, tight centered framing, square 1:1 crop, sharp focus on subject, true-to-life color, no filter or stylization. The photograph is presented inside a circular or 24px-radius dark frame with a 1–2px slate hairline border and no shadow. NOT illustrated, NOT 3D, NOT cartoon, NOT painterly, NOT duotone.*

When a brief asks for "illustration" in this aesthetic, the right answer is **not a generated illustration** — it is one of: a saturated solid-color tile housing a `solar:-bold` glyph, an oversized typographic block in Space Grotesk Black, or a categorical `progress-ring` arrangement. The aesthetic communicates through type, color, and data shapes, never through scenes.

## Hierarchy & Emphasis

- **Numerals are the loudest element on every card** — Space Grotesk 900, large size, on-surface white.
- **Saturation flags importance**: the single most important card on a screen takes a saturated categorical fill; everything else is dark-on-dark. There is exactly one "loud" tile per visible screen at most.
- **Categorical color is meaning, not decoration** — once a category is assigned a hue, every appearance of that category (icon, progress fill, label, badge) reuses the same hue.
- **Labels whisper**: all-caps, weight 700, `text-xs`/`text-[10px]`, in `{colors.on-surface-variant}`. They identify; they do not compete.
- **Borders, not shadows, separate surfaces.**

## Distinctive Details

1. **All-caps wide-tracked label system**: the relentless use of `font-bold uppercase tracking-widest` at small sizes turns labels into a graphic motif. Even `bpm`, `kcal`, `vs yesterday`, and timestamp strips are uppercase-tracked.
2. **Categorical 10/20/100 tonal recipe**: 10%-alpha background + 20%-alpha hairline border + 100% glyph, repeated across icon-tiles, badges, and tonal accent cards. This single recipe is the reason the dark UI never feels muddy.
3. **Concentric activity-ring stack**: three SVG progress rings in three categorical hues, scaled at 100/75/50%, become a signature data sculpture for any "combined progress" pattern.
4. **Brand-colored aura shadow on the focal element**: `shadow-[0_0_15px_rgba(247,165,165,0.3)]` (or `shadow-lg shadow-primary/30`) used sparingly on the FAB and on the focal chart bar — a light source rather than a depth shadow.

## Do's and Don'ts

### Do
- Use `{colors.background}` for the page, `{colors.surface}` for cards, `{colors.surface-alt}` for inset wells (tracks, inputs, disabled tiles).
- Lift cards with a 1px `{colors.border}` hairline, never a shadow.
- Set numerals in Space Grotesk 900, labels in Plus Jakarta Sans 700 ALL CAPS with `tracking-widest`.
- Reserve solid categorical fills for the single hero tile or active state; everywhere else use the 10%-alpha wash + matching border + full-strength glyph recipe.
- Pick `solar:-bold` as the default icon variant; switch to `solar:-linear` only inside input affordances.
- Round cards at `{rounded.xl}` (24px), pills at `{rounded.full}`, icon-buttons at `{rounded.md}` (12px).
- Tag every category with a fixed categorical hue and reuse it everywhere that category recurs.

### Don't
- Don't use drop shadows for elevation. The only sanctioned shadow is the colored aura on the FAB / focal chart bar.
- Don't fill an entire card or page surface with `{colors.primary}` or `{colors.secondary}` — saturated fills are reserved for one focal element per screen.
- Don't introduce middle-weight type. Numerals are 900, labels are 700, body is 500. No 400, no 600.
- Don't set labels in mixed case or normal letter-spacing — they must be uppercase + `tracking-widest` to participate in the system.
- Don't add decorative illustrations, mascots, or stylized scenes. Express category through colored icon-tiles and typographic blocks.
- Don't recolor or filter photographs. Keep them natural-color inside a flat-bordered round frame.
- Don't invent a new categorical hue mid-design. Stay inside the defined palette (coral, periwinkle, butter-yellow, mint, violet, coral-red).
- Don't use the line variant of an icon for a category glyph; line is for interaction affordances only.