Ember Clinical DESIGN.md

---
version: 1
name: Ember Clinical Mobile
colors:
  primary: "#E8573D"
  on-primary: "#FFFFFF"
  surface: "#FAFAFA"
  surface-alt: "#FFFFFF"
  surface-muted: "#F2F2F7"
  on-surface: "#1A1A1A"
  on-surface-variant: "#8E8E93"
  on-surface-disabled: "#C7C7CC"
  border: "#E5E5EA"
  divider: "#F2F2F7"
  success: "#34C759"
  error: "#FF3B30"
  chart-1: "#E8573D"
  chart-2: "#F5A623"
  chart-3: "#E84C89"
  chart-4: "#7B61FF"
  chart-5: "#4A90D9"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  display-md:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  card-title:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  label-md:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  tab-label:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  see-more:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 8px
  md: 14px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 16px
  card-padding: 20px
  section-gap: 24px
icons:
  set: phosphor
  default_variant: bold       # Phosphor "bold" suffix; the bare name (no suffix) is the regular variant — never write "ph:foo-regular"
  active_variant: bold
  stroke_weight: 2px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    border: none
    boxShadow: "0 2px 8px rgba(0,0,0,0.04)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-sm}"
    rounded: "{rounded.full}"
    height: 52px
    paddingX: 24px
    border: none
    boxShadow: none
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.headline-sm}"
    rounded: "{rounded.full}"
    height: 52px
    paddingX: 24px
    borderColor: "#E8E8E8"
    borderWidth: 1.5px
    boxShadow: none
  button-text:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    paddingX: 0px
    paddingY: 0px
    border: none
    boxShadow: none
  input-text:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    height: 44px
    paddingX: 16px
    border: none
    boxShadow: none
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: 28px
    paddingX: 12px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: 28px
    paddingX: 12px
    border: none
    boxShadow: none
  badge-pill:
    backgroundColor: "#FCE6E1"   # primary at ~10% over white
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
    gap: 6px
    iconSize: 16px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    size: 32px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    height: 56px
    paddingX: 16px
    gap: 16px
    iconSize: 24px
    border: none
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    height: 6px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  progress-ring:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary}"
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-sm}"
    height: 56px
    paddingX: 16px
    iconSize: 24px
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    height: 64px
    paddingX: 8px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  tab-item-active:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    gap: 2px
    border: none
    boxShadow: none
  tab-item-inactive:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    gap: 2px
    border: none
    boxShadow: none
---

# Ember Clinical Mobile

A precise, instrument-panel mobile aesthetic: near-white canvas, surgical hairlines, soft elevation, and a single saturated ember-orange that does all the talking. Type is a tight Inter stack with strong negative tracking on numerals — built for at-a-glance data legibility without ever feeling sterile.

## Overview

**Calm, clinical, focused.** This aesthetic borrows from iOS-native conventions — `#FAFAFA` page, white cards, `#F2F2F7` muted fills, `#E5E5EA` hairlines — and warms them with a single ember-orange (`{colors.primary}`) that carries every active state, every CTA, every progress ring. There is exactly one accent. Neutrals do everything else.

The mood is **measured restraint**: generous interior padding inside cards, soft `0 2px 8px` shadows that lift surfaces by a hair, and a 1rem (16px) base radius that carries the entire shape language. Numbers are the heroes — large, bold, tight-tracked Inter — wrapped in muted unit suffixes that whisper.

Three voices coexist: the chrome (neutral, hairline-defined), the data (orange, decisive), and the categorical chart palette (`{colors.chart-1}` through `{colors.chart-5}` — used ONLY in charts, never as UI accents).

## Colors

`{colors.surface}` `#FAFAFA` is the page; `{colors.surface-alt}` `#FFFFFF` is every card; `{colors.surface-muted}` `#F2F2F7` is the only fill used for inactive chips, inputs, progress-bar tracks, and chart gridlines. `{colors.border}` `#E5E5EA` is the only chrome border color.

Foreground tiers are strict and cumulative: `{colors.on-surface}` `#1A1A1A` for primary text and numerals; `{colors.on-surface-variant}` `#8E8E93` for labels, captions, units, and chart axis text; `{colors.on-surface-disabled}` `#C7C7CC` for inert leading icons (drag handles, list affordances).

`{colors.primary}` `#E8573D` is the **only** brand color and the **only** color allowed to mean "active / progress / call to action". It appears as: solid CTA buttons, active tab-bar item, chart line stroke for the focal series, progress-ring stroke, the active toggle fill, and at 10% alpha as the background for primary badges. Never use it as a card background or large surface fill — it is reserved for foreground accents and small fills only.

The chart palette (`{colors.chart-1}` through `{colors.chart-5}`) is a **categorical-only** palette. It exists to differentiate stacked series and legend dots inside data visualizations. It must never bleed into UI chrome — no chart-purple buttons, no chart-pink chips, no chart-yellow icons in headers. If a category needs labeling outside a chart, use neutral text with a small color-swatch dot.

`{colors.success}` and `{colors.error}` are reserved for genuine semantic signal (delta indicators, destructive confirmations) — not decoration.

## Typography

Inter throughout, weight strategy hinges on **600 (semibold) for chrome and 700 (bold) for data**. Regular 400 is body copy only. There is no light weight, no italic, no display serif in active use (Playfair Display is loaded but not invoked in any current screen — treat it as available for an editorial accent if a future screen calls for it, never as default body or heading).

- `{typography.display-lg}` — 48px/700/-0.02em — the hero numeral (the timer, the single big stat that defines the screen).
- `{typography.display-md}` — 32px/700/-0.02em — secondary big stats inside metric cards (the "68.2 kg" pattern). Pair with a 16px muted unit suffix.
- `{typography.headline-md}` — 20px/600 — section titles inside content cards.
- `{typography.headline-sm}` — 17px/600 — top app bar title; primary CTA label.
- `{typography.card-title}` — 15px/600 — chart card titles, dashboard section titles.
- `{typography.body-lg}` — 16px/500 — list-row primary text.
- `{typography.body-md}` — 15px/400 — paragraph body inside content cards.
- `{typography.body-sm}` — 14px/400 — secondary card descriptions.
- `{typography.label-md}` — 13px/600 — chip labels, "Edit" inline buttons, delta indicators.
- `{typography.label-uppercase}` — 12px/500/0.05em/uppercase — eyebrow labels above stats ("STARTED", "GOAL", "AVG. WEIGHT").
- `{typography.see-more}` — 13px/700/0.04em/uppercase — section-link buttons ("SEE MORE").
- `{typography.caption}` — 12px/500 — metadata, chart axis labels, helper text.
- `{typography.tab-label}` — 10px/500 — bottom tab labels.

**Numerals always use `tabular-nums`** when displayed in stat positions (timers, weights, durations) — the implementer must add the `tabular-nums` Tailwind utility on any numeric display. Negative letter-spacing on display sizes is non-negotiable; it gives the data its tight, instrument-panel feel.

A composition recipe: a **stat tile** is `{typography.label-uppercase}` in `{colors.on-surface-variant}` for the eyebrow, then `{typography.display-md}` in `{colors.on-surface}` for the value, immediately followed inline by a unit in `{typography.body-lg}`/500 in `{colors.on-surface-variant}` with `ml-1`. No third line unless a delta is needed (then `{typography.caption}` in `{colors.success}` or `{colors.error}`).

## Spacing & Layout

Density is **balanced** — neither dashboard-dense nor airy-marketing. Page gutter is `{spacing.gutter}` (16px); card interior is `{spacing.card-padding}` (20px). Vertical rhythm between cards is 16px; between major sections, 24–32px.

Cards are full-bleed within the gutter — never indented further. A two-up grid of metric tiles uses `gap-4`. Lists inside cards rely on internal padding (16px horizontal, 56px row height) with hairline dividers indented 56px to align under the row content, never under the leading icon.

Headers (top app bar) are 56px tall with 16px horizontal padding and a 40px circular tap target on each side. Bottom nav is 64px tall with a 1px top border in `{colors.border}`.

## Elevation & Depth

A **single elevation tier** is used: `box-shadow: 0 2px 8px rgba(0,0,0,0.04)` on every card. It is barely-there — just enough to separate white cards from the `#FAFAFA` page. Don't stack elevation: nested cards inside cards do not exist; use tonal shifts (`{colors.surface-muted}`) for sub-surfaces instead.

Two micro-elevations exist for specific accents:
- The progress-ring's tip indicator and flag dot use `shadow-sm` to lift them above the ring track.
- The active-day badge in a week strip uses a colored shadow `shadow-md shadow-primary/20` to glow softly.

The progress-ring stroke itself uses a `drop-shadow-[0_2px_4px_rgba(232,87,61,0.3)]` filter to give the ember stroke a faint warmth-halo. Reserve this filter exclusively for the primary progress-ring stroke; it is not a general technique.

## Shapes

Radii are derived from a 1rem (16px) base. `{rounded.lg}` (16px) is the workhorse: every card, every metric tile, every content panel. `{rounded.md}` (14px) is the chip and small-pill radius. `{rounded.full}` is reserved for: pill-shaped CTAs, circular avatars, circular tab-bar status dots, toggle switches, and the badge-pill. `{rounded.sm}` (8px) appears on the top of stacked chart bars (`rounded-t-[4px]`) and rare small accents.

Tonal recipe: For a **low-attention secondary action**, render `button-primary` with `bg-{primary}/10` background (`#FCE6E1`) and `text-{primary}` foreground — same shape, same height, dialed-down volume.

## Components

### card

```html
<div class="bg-white rounded-2xl p-5 shadow-[0_2px_8px_rgba(0,0,0,0.04)]">
  <h3 class="text-[15px] font-semibold text-[#1A1A1A]">[Card title]</h3>
  <p class="text-[15px] text-[#8E8E93] mt-2 leading-relaxed">[Card body]</p>
</div>
```

### button-primary

```html
<button class="h-[52px] px-6 rounded-full bg-[#E8573D] text-white text-[17px] font-semibold flex items-center justify-center gap-2 active:opacity-90">
  [Action label]
</button>
```

### button-secondary

The signature "outline pill" — 1.5px hairline border, transparent fill, primary text.

```html
<button class="h-[52px] w-full px-6 rounded-full border-[1.5px] border-[#E8E8E8] bg-transparent text-[#E8573D] text-[17px] font-semibold flex items-center justify-center active:bg-[#F2F2F7]/50">
  [Action label]
</button>
```

### button-text

```html
<button class="text-[13px] font-semibold text-[#E8573D] active:opacity-70">[Inline action]</button>
```

For the uppercase section-link variant, swap to `text-[13px] font-bold tracking-wide uppercase`.

### input-text

```html
<input
  type="text"
  placeholder="[Placeholder]"
  class="h-11 w-full px-4 rounded-[14px] bg-[#F2F2F7] text-[16px] text-[#1A1A1A] placeholder:text-[#8E8E93] focus:outline-none focus:ring-2 focus:ring-[#E8573D]"
/>
```

### chip / chip-active

```html
<button class="h-[28px] px-3 rounded-[14px] bg-[#F2F2F7] text-[#1A1A1A] text-[13px] font-medium flex items-center justify-center">[Filter]</button>
<button class="h-[28px] px-3 rounded-[14px] bg-[#E8573D] text-white text-[13px] font-semibold flex items-center justify-center">[Active filter]</button>
```

### badge-pill

A primary-tinted inline pill, used for status callouts inside a hero element.

```html
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#E8573D]/10">
  <iconify-icon icon="ph:[icon-name]-bold" class="size-4 text-[#E8573D]"></iconify-icon>
  <span class="text-[13px] font-semibold text-[#E8573D]">[Status label]</span>
</div>
```

### badge-circle

```html
<div class="size-8 rounded-full bg-[#E8573D] text-white flex items-center justify-center shadow-md shadow-[#E8573D]/20">
  <iconify-icon icon="ph:[icon-name]-bold" class="size-5"></iconify-icon>
</div>
```

A **week-strip day circle** is rendered as a `badge-circle` for the active day, and as `size-8 rounded-full bg-[#F2F2F7]` with a 1.5px inner dot for inactive days. A completed day becomes `bg-[#E8573D]/10` with a primary check icon centered.

### avatar

```html
<div class="size-10 rounded-full bg-[#F2F2F7] flex items-center justify-center text-[#1A1A1A] text-[15px] font-semibold">
  [I]
</div>
```

### list-row

Used inside a card; rows share a card and are separated by a 1px `#F2F2F7` divider indented 56px (`ml-14`).

```html
<div class="h-14 flex items-center px-4 gap-4">
  <iconify-icon icon="ph:[icon-name]-bold" class="size-6 text-[#C7C7CC]"></iconify-icon>
  <span class="flex-1 text-[16px] font-medium text-[#1A1A1A]">[Row label]</span>
  <!-- trailing toggle / value / chevron -->
</div>
<div class="ml-14 h-px bg-[#F2F2F7]"></div>
```

A **toggle switch** is a 51×31 pill: `bg-[#E8573D]` when on, `bg-[#E5E5EA]` when off, with a 27px white circle thumb that has `shadow-sm`. Track padding is 2px.

### progress-bar

```html
<div class="w-full h-1.5 rounded-full bg-[#F2F2F7] overflow-hidden">
  <div class="h-full rounded-full bg-[#E8573D]" style="width: 60%"></div>
</div>
```

For non-primary progress fills inside metric tiles, the bar may use a chart-palette color (e.g. `{colors.chart-5}` for hydration). This is the only context in which chart colors leave the chart.

### progress-ring

The signature data element: a 280px ring, 8px stroke, track in `{colors.surface-muted}`, fill in `{colors.primary}` with a soft drop-shadow halo, rounded line caps. A 32px white flag-circle sits at the 12-o'clock anchor; a small white-fill primary-bordered dot marks the live tip. Centered: `{typography.display-lg}` numeral, then a `badge-pill` status, then a `{typography.caption}` helper line.

```html
<div class="relative size-[280px] flex items-center justify-center">
  <svg viewBox="0 0 280 280" class="size-full -rotate-90">
    <circle cx="140" cy="140" r="130" fill="none" stroke="#F2F2F7" stroke-width="8"/>
    <circle cx="140" cy="140" r="130" fill="none" stroke="#E8573D" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="816.8" stroke-dashoffset="204"
            class="drop-shadow-[0_2px_4px_rgba(232,87,61,0.3)]"/>
  </svg>
  <div class="absolute inset-0 flex flex-col items-center justify-center">
    <div class="text-[48px] font-bold tabular-nums tracking-tight text-[#1A1A1A]">[Value]</div>
  </div>
</div>
```

### top-app-bar

```html
<header class="h-14 flex items-center justify-between px-4 bg-[#FAFAFA] sticky top-0 z-20">
  <button class="size-10 rounded-full flex items-center justify-center active:bg-[#F2F2F7]">
    <iconify-icon icon="ph:[icon-name]-bold" class="size-6 text-[#1A1A1A]"></iconify-icon>
  </button>
  <h1 class="text-[17px] font-semibold tracking-tight">[Screen title]</h1>
  <button class="size-10 rounded-full flex items-center justify-center active:bg-[#F2F2F7]">
    <iconify-icon icon="ph:[icon-name]-bold" class="size-6 text-[#1A1A1A]"></iconify-icon>
  </button>
</header>
```

### tab-bar / tab-item

```html
<nav class="h-16 px-2 bg-white border-t border-[#E5E5EA] flex items-center justify-around">
  <button class="flex-1 h-full flex flex-col items-center justify-center gap-0.5 text-[#E8573D]">
    <iconify-icon icon="ph:[icon-name]-bold" class="size-6"></iconify-icon>
    <span class="text-[10px] font-medium">[Label]</span>
  </button>
  <button class="flex-1 h-full flex flex-col items-center justify-center gap-0.5 text-[#8E8E93]">
    <iconify-icon icon="ph:[icon-name]-bold" class="size-6"></iconify-icon>
    <span class="text-[10px] font-medium">[Label]</span>
  </button>
</nav>
```

### Composition recipes

- **Metric tile** — a `card` (16px padding instead of 20px) containing: `{typography.label-uppercase}` eyebrow in `{colors.on-surface-variant}`, then a flex baseline row of `{typography.display-md}` value + `{typography.body-lg}`/500 unit in `{colors.on-surface-variant}` with `ml-1`. Optional trailing icon in `{colors.success}` (trend-up) or `{colors.error}` (trend-down). Optional progress bar at the bottom.
- **Editorial / article card** — a `card` whose top 160px is a full-bleed image (use `-mx-4 -mt-4 mb-4` to break the padding), followed by `{typography.headline-md}` title, then `{typography.body-md}` description in `{colors.on-surface-variant}`.
- **Stacked-bar chart column** — a fixed-height vertical stack in a `w-6 rounded-t-[4px] overflow-hidden` container, with each segment using a chart-palette color via `flex-col-reverse` so segments stack from the bottom.
- **Section header with action** — an h-flex row of `{typography.headline-sm}` title on the left, `{typography.see-more}` button on the right.

## Iconography

**Phosphor (`ph:`), bold variant by default and active.** Phosphor has a single weight switch in this aesthetic — there is no line/filled state-switch convention; bold-everywhere is the rule. Active vs inactive is communicated through **color** (`{colors.primary}` vs `{colors.on-surface-variant}`), never through icon variant.

**Critical Phosphor naming quirk**: the "regular" weight in Phosphor has NO suffix — write `ph:user`, `ph:bookmark`, `ph:home`. The bold weight appends `-bold`: `ph:user-bold`. Never write `ph:user-regular`; that icon does not exist and renders as a missing-glyph placeholder. Since this aesthetic uses bold everywhere, every icon name in implementation should end in `-bold`.

Icon size is 24px in chrome (header buttons, tab bar, list rows), 20px inside small components (chart-card title rows, metric-tile trailing indicators), 16px inside badges and pills. Icons used as inert list affordances (drag handles, the `ph:list-bold` reorder grip) take `{colors.on-surface-disabled}` `#C7C7CC` — a deliberately whispered tint that signals "structural, not interactive."

## Illustration & Imagery

**Style / Technique**: Cinematic photography with a warm, golden-hour color grade. Soft natural light, shallow-to-medium depth of field, real-world subjects (people, interiors, objects, architecture). The grade leans warm-amber in highlights and dusky-olive in shadows, giving everything an early-morning or late-afternoon feel.

**Palette**: Muted, desaturated naturals — sage, warm beige, terracotta, soft butter-yellow, dusky charcoal. Saturation is dialed down ~15–25% from a neutral grade. Highlights bloom slightly warm; shadows retain detail rather than crushing to black.

**Edge treatment**: No outlines, no graphic overlays. Pure photographic edges with natural softness from depth-of-field falloff.

**Shading & light**: Single-source natural light — window light, golden-hour sunlight, or soft overcast. Shadows are long, soft, and warm-tinted. Never flat-lit, never harsh studio light, never high-key.

**Composition & framing**: Wide-to-medium framing with generous negative space (sky, walls, blurred background). Subject is off-center or layered (foreground object + blurred background context). Landscape 16:10 / 3:2 aspect for content-card use. Subject typically occupies the lower or middle third; never centered-and-tight.

**Background within the illustration**: Real environmental backgrounds — interior walls, urban streetscapes, natural architecture — softened by depth-of-field. Never transparent, never solid color, never composited.

**Container styling**: Images sit inside a `card` at the **top, full-bleed within the card's padding** — pulled out using `-mx-4 -mt-4 mb-4` so the photo touches the card's left/right/top edges while the card's `rounded-2xl` (16px) corner clips the top of the image. Bottom of the image is a hard horizontal edge against the card's text content. No internal padding around the image. No separate border/frame.

**CSS treatment on the `<img>`**: `object-cover` with full width and a fixed height container of 160px (`h-40`). No `mix-blend-mode`, no `opacity` adjustment, no CSS filter — the warm grade is baked into the source asset.

**Box-shadow**: None on the image itself — the parent `card`'s `0 2px 8px rgba(0,0,0,0.04)` shadow is the only elevation. The image sits flat inside the card.

**Aspect ratio rule**: Source images are landscape (3:2 or 16:10). Implementer crops to the 160px-tall container with `object-cover` and lets the image center-crop; never letterbox, never distort, never preserve the full source ratio if it conflicts with the 160px slot.

**Anti-references**: NOT illustrations of any kind, NOT 3D renders, NOT flat-vector, NOT line-art, NOT high-saturation lifestyle stock, NOT studio-lit product shots, NOT black-and-white, NOT heavily filtered Instagram-grade.

**Style recipe prompt**:

> *Cinematic photograph of [SUBJECT]. Warm golden-hour natural lighting from a single soft source, long warm shadows, shallow-to-medium depth of field with a softly blurred background. Muted naturalistic palette — sage green, warm beige, terracotta, dusky olive, soft amber highlights — saturation dialed down about 20% from neutral. Real environmental setting (interior or exterior architecture), subject framed off-center with generous negative space. Landscape 3:2 framing. Photorealistic film-grain finish. NOT illustrated, NOT 3D, NOT vector, NOT studio-lit, NOT high-key, NOT oversaturated.*

## Hierarchy & Emphasis

Visual weight comes from, in order: **size → color saturation → weight → contrast**. The biggest typographic element on a screen is always a numeral, never a heading. Saturated `{colors.primary}` is the only color that breaks the neutral palette and is reserved for the single most-actionable thing on a screen. Bold (700) is reserved for data; semibold (600) for chrome and headings. Metadata always whispers — `{colors.on-surface-variant}` at 12–13px.

If two things on a screen want primary color, one of them is wrong — pick the more action-bearing one and demote the other to neutral.

## Distinctive Details

1. **The drop-shadow halo on the progress-ring stroke** (`drop-shadow-[0_2px_4px_rgba(232,87,61,0.3)]`). It is the single warmest treatment in an otherwise cool, hairline-defined system, and it gives the data a soft glow that the chrome never has.
2. **Hairline outline pill button** (`border-[1.5px] border-[#E8E8E8]` with primary text on transparent). The 1.5px (not 1, not 2) is non-negotiable — it reads as "almost-not-there" and is the system's signature secondary action.
3. **Categorical chart palette walled off from chrome.** Five distinct hues (`{colors.chart-1}` through `{colors.chart-5}`) exist solely inside data visualizations. The discipline of never letting chart-purple or chart-pink leak into a button or chip is what keeps the rest of the system feeling monochrome-with-one-accent.

## Do's and Don'ts

### Do

- Use `{colors.primary}` for exactly one role per screen: the most actionable element.
- Set `tabular-nums` on every numeric display.
- Use 1.5px (not 1, not 2) borders on `button-secondary`.
- Indent list-row dividers 56px (`ml-14`) so they align under content, not under the leading icon.
- Pair `{typography.display-md}` numerals with a smaller muted unit in `{colors.on-surface-variant}`.
- Apply the soft `0 2px 8px rgba(0,0,0,0.04)` shadow on every card uniformly.
- Use Phosphor bold (`ph:[icon-name]-bold`) for every icon.

### Don't

- Don't use chart palette colors (`{colors.chart-2}` through `{colors.chart-5}`) for buttons, chips, icons, or any UI chrome.
- Don't use `{colors.primary}` as a card or large surface fill — it is a foreground accent only.
- Don't write `ph:[icon-name]-regular` — Phosphor's regular variant has no suffix; bold variant is `-bold`.
- Don't add Inter Light, italic, or Playfair Display by default.
- Don't stack shadows or nest cards inside cards.
- Don't approximate negative letter-spacing — the `-0.02em` on display sizes is what makes numerals feel right.
- Don't use illustration, 3D, or flat-vector imagery — the system is photographic only.
- Don't use icon variants other than bold to indicate active state — use color instead.