Deep Teal Console DESIGN.md

---
version: 1
name: Deep Teal Console Mobile
colors:
  background: "#0A1211"
  surface: "#0D1917"
  surface-alt: "#0F1E1B"
  surface-tonal: "#12312C"
  on-surface: "#E9F5F1"
  on-surface-variant: "#A7C2BB"
  border: "#1B2F2B"
  primary: "#2DD4BF"
  on-primary: "#06201C"
  accent: "#34D399"
  on-accent: "#06201C"
  error: "#F43F5E"
  chart-1: "#2DD4BF"
  chart-2: "#60A5FA"
  chart-3: "#A78BFA"
  chart-4: "#FBBF24"
  chart-5: "#FB7185"
typography:
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  numeral-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.005em
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  tab-label:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  gutter: 16px
  card-padding: 16px
  section-gap: 20px
icons:
  set: phosphor
  default_variant: fill
  active_variant: fill
  stroke_weight: n/a
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 16px
    border: none
    boxShadow: none
  card-inset:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 16px
    border: none
    boxShadow: none
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    paddingX: 16px
    paddingY: 12px
    border: none
    boxShadow: none
  button-secondary:
    backgroundColor: "{colors.surface-tonal}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    paddingX: 12px
    paddingY: 8px
    gap: 8px
    iconSize: 20px
    border: none
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    size: 44px
    iconSize: 24px
    border: none
    boxShadow: none
  fab:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    size: 56px
    iconSize: 28px
    border: none
    boxShadow: "0 10px 25px rgba(0,0,0,0.35)"
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
    gap: 8px
    iconSize: 20px
    border: none
    boxShadow: none
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.surface-tonal}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.surface-tonal}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 8px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    size: 40px
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    paddingX: 12px
    paddingY: 12px
    gap: 12px
    border: none
    boxShadow: none
  icon-tile:
    backgroundColor: "{colors.surface-tonal}"
    rounded: "{rounded.md}"
    size: 44px
    iconSize: 24px
    border: none
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 12px
    border: none
    boxShadow: none
  progress-ring:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    size: 128px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    paddingX: 16px
    paddingY: 24px
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    paddingX: 8px
    paddingY: 8px
    boxShadow: none
  tab-item-active:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    rounded: "{rounded.md}"
    paddingX: 8px
    paddingY: 8px
    iconSize: 24px
    gap: 4px
    border: none
    boxShadow: none
  tab-item-inactive:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    rounded: "{rounded.md}"
    paddingX: 8px
    paddingY: 8px
    iconSize: 24px
    gap: 4px
    border: none
    boxShadow: none
---

# Deep Teal Console Mobile

## Overview

**Calm, instrument-panel dark.** A near-black teal background reads less like "dark mode" and more like the soft glow of a well-lit cockpit at night. Information is arranged into rounded tonal cards that nest inside each other — a quiet two-step elevation system built from color shifts, not shadows. The mood is focused, technical, and trustworthy: every metric has a slot, every slot has a color, and the eye glides from one bright accent to the next without ever feeling busy.

The palette commits to **deep teal-greens** for chrome and a **vibrant categorical chart palette** (teal, blue, violet, amber, coral) for data. Saturated color is reserved for accents — the surfaces themselves are restrained. Type is a single neutral geometric sans (Plus Jakarta Sans) used at semibold for everything that matters and regular for everything supporting it. The result is dense without being noisy.

## Colors

This is a **dark, near-monochrome chrome** with a **categorical accent palette** layered on top.

**Chrome surfaces** form a four-step tonal stack, each only a few percent apart in luminance — they read as the same family but provide enough separation to nest:
- `{colors.background}` — the page (`#0A1211`), the deepest tone
- `{colors.surface}` — primary cards (`#0D1917`)
- `{colors.surface-alt}` — inset panels and rows inside cards (`#0F1E1B`); also the muted/inactive tone
- `{colors.surface-tonal}` — colored emphasis tone for icon tiles and active chips (`#12312C`), the only saturated chrome

**Foreground** uses two near-white tones: `{colors.on-surface}` (`#E9F5F1`) for primary text and numerals, `{colors.on-surface-variant}` (`#A7C2BB`) for labels, captions, and inactive states. There is no third tier — contrast is binary.

**`{colors.primary}` (`#2DD4BF`)** is the only saturated brand color in chrome — it appears as the primary CTA fill, the active tab label, and progress-fill where progress is the headline metric. **`{colors.accent}` (`#34D399`)** is a near-twin used sparingly for affirmative semantic moments.

**The chart palette** (`chart-1` teal, `chart-2` blue, `chart-3` violet, `chart-4` amber, `chart-5` coral) is the *categorical* palette: each metric type gets a fixed color and keeps it everywhere it appears. These colors are used as **icon glyph tints inside tonal tiles**, **progress-bar fills**, **bar/line strokes**, and **legend dots** — never as surface fills.

**Hard palette boundary:** chart colors NEVER fill chrome surfaces (no amber buttons, no violet cards). Chrome stays in the teal-stack; categorical color appears only as ink and 2–12px fills inside chrome.

## Typography

A single-family system: **Plus Jakarta Sans** for everything. Playfair Display and JetBrains Mono are declared as theme variables but are not used in source — treat them as available fallbacks for serif/mono needs, not as part of the working palette.

**Weight strategy:** Semibold 600 is the workhorse — every heading, every numeral, every emphasized label. Regular 400 carries supporting body and caption text. Medium 500 covers active-state labels and small buttons. Bold 700+ is unused; restraint is the point.

**Tracking:** Headlines and large numerals use slightly negative letter-spacing (`-0.01em` to `-0.02em`, expressed via Tailwind `tracking-tight`) for a tighter, modern feel. Body and small labels run at default tracking — never tracked-out, never uppercase.

Roles:
- `{typography.headline-lg}` — top-of-screen page title (the user name / page name slot)
- `{typography.headline-md}` — section anchor inside the body
- `{typography.numeral-lg}` — large stat numerals on cards (same size as headline-lg, but conceptually a numeral)
- `{typography.body-md}` — supporting paragraphs and search-bar placeholder
- `{typography.label-md}` — primary action labels, list-row titles, button text
- `{typography.label-sm}` — chip labels, in-card metadata values
- `{typography.caption}` — eyebrow text above titles, small metadata, "X / Y" subtitles
- `{typography.tab-label}` — bottom tab bar labels

## Spacing & Layout

Density is **balanced** — neither dashboard-dense nor lifestyle-airy. The screen edge inset is `{spacing.gutter}` (16px) consistently. Inside cards, `{spacing.card-padding}` (16px) is universal. Vertical rhythm between sections uses `{spacing.xl}`–`{spacing.2xl}` (20–24px), and rows inside a card breathe at 12px gaps.

**The signature rhythm is nesting**: a 16px-padded card contains a 16px-padded inset panel, which contains 12px-padded rows. The rounded radii step down with the nesting (lg → md → sm), so each interior layer feels visibly contained.

Grid usage: 2-column metric grids with `{spacing.md}` (12px) gap; 3-column micro-stat grids with the same gap; 7-column day strips with 8px gap.

## Elevation & Depth

**Tonal, not shadowed.** Depth is conveyed entirely by stepping up the surface tone (`background` → `surface` → `surface-alt` → `surface-tonal`). No card carries a box-shadow.

The single exception is the floating action button, which uses a soft drop shadow (`0 10px 25px rgba(0,0,0,0.35)`) because it sits over content rather than nested within it.

The fixed top fade — a `bg-gradient-to-b from-background to-transparent` 80px-tall scrim across the top of the viewport — is a chrome detail, not an elevation cue: it softens the transition between scrolling content and the header.

## Shapes

Geometry is **smooth-cornered rectangles**, never circles (except the dot-badges and the pill chips) and never sharp. The radius scale steps cleanly:
- `{rounded.sm}` (8px) — small inline pills, dot badges
- `{rounded.md}` (12px) — buttons, list rows, inset chips, icon tiles, tab items
- `{rounded.lg}` (16px) — cards, inset panels, search bar
- `{rounded.xl}` (20px) — large nested feature panels (calendar day cells)
- `{rounded.full}` — pills, progress bars, dot indicators, ring outlines

Rule of thumb: **the bigger the surface, the bigger the radius**. Progress bars and chip-shaped badges always go full-pill; everything rectangular stays in the 12–20px range.

## Components

### card

The primary surface — `{colors.surface}` fill, no border, no shadow, 16px padding, `{rounded.lg}` corners.

```html
<article class="rounded-2xl bg-card p-4">
  <div class="flex items-start justify-between gap-3">
    <div class="min-w-0">
      <h2 class="font-semibold text-lg tracking-tight text-foreground">[Section title]</h2>
      <p class="mt-1 text-sm text-muted-foreground">[Supporting line]</p>
    </div>
    <div class="flex items-center gap-2 rounded-xl bg-muted px-3 py-2">
      <iconify-icon icon="ph:[icon-name]-fill" class="size-5 text-muted-foreground"></iconify-icon>
      <span class="text-sm text-foreground">[Filter]</span>
    </div>
  </div>
</article>
```

### card-inset

A second tonal layer used *inside* a card to group a self-contained block (a chart, a macro stack, a water grid). Same radius, same padding, but `{colors.surface-alt}` fill so it nests visibly.

```html
<div class="rounded-2xl bg-muted p-4">
  <!-- inset content -->
</div>
```

### Composition recipe — stat card

A stat card is built by composing primitives. Top row: an `icon-tile` (`{colors.surface-tonal}` fill, chart-color glyph) on the left, a `badge-pill` on the right. Bottom block: `{typography.numeral-lg}` value with `{typography.body-md}` caption beneath, separated by 12px from the top row.

### button-primary

Saturated teal pill-rectangle, dark on-primary text. Used for committed CTAs (Start, Submit).

```html
<button class="rounded-xl bg-primary px-4 py-3">
  <span class="text-sm font-semibold text-primary-foreground">[Primary action]</span>
</button>
```

### button-secondary

The workhorse. Tonal-teal fill that reads as a quiet pill on the page; carries an optional leading icon. Most "Edit", "Filter", "View", "Add" buttons use this.

```html
<button class="flex items-center gap-2 rounded-xl bg-secondary px-3 py-2">
  <iconify-icon icon="ph:[icon-name]-fill" class="size-5 text-secondary-foreground"></iconify-icon>
  <span class="text-sm font-medium text-secondary-foreground">[Label]</span>
</button>
```

**Tonal recipe — soft button on a tonal-card:** for an inline button sitting *inside* an already-tonal card, swap to `bg-muted` (surface-alt) instead of `bg-secondary` so it doesn't compete with the card's tonal layer.

### button-icon

44px square `{colors.surface}` tile with a single 24px icon. Used in the top app bar for back / bell / settings / calendar actions.

```html
<button class="flex items-center justify-center size-11 rounded-xl bg-card">
  <iconify-icon icon="ph:[icon-name]-fill" class="size-6 text-foreground"></iconify-icon>
</button>
```

### fab (floating action button)

A 56px primary-teal square with a 28px icon, drop-shadowed and floated above content (typically `bottom-24 right-4` to clear the tab bar).

```html
<button class="fixed bottom-24 right-4 flex items-center justify-center size-14 rounded-2xl bg-primary text-primary-foreground shadow-[0_10px_25px_rgba(0,0,0,0.35)]">
  <iconify-icon icon="ph:plus-circle-fill" class="size-7"></iconify-icon>
</button>
```

### input-text

Pill-rectangle search field on `{colors.surface-alt}`, leading magnifier icon, muted-foreground placeholder. No focus ring is shown in source — when needed, use `{colors.primary}` ring at 1px.

```html
<div class="flex items-center gap-2 rounded-2xl bg-muted px-4 py-3">
  <iconify-icon icon="ph:magnifying-glass" class="size-5 text-muted-foreground"></iconify-icon>
  <p class="text-sm text-muted-foreground">[Placeholder]</p>
</div>
```

### chip / chip-active

Small pill conveying a metadata pair (label + value) or a state. Inactive chip sits on `{colors.surface-alt}`; active flips to `{colors.surface-tonal}` with brighter text.

```html
<div class="flex items-center gap-1 rounded-full bg-muted px-2 py-1">
  <iconify-icon icon="ph:[icon-name]-fill" class="size-4 text-muted-foreground"></iconify-icon>
  <span class="text-xs text-muted-foreground">[Label]</span>
  <span class="text-xs text-foreground">[Value]</span>
</div>
```

### badge-pill / badge-circle

`badge-pill` is a small caption pill, often holding a counter (`2/7`) or status tag. `badge-circle` is the 8px solid color dot — used as a categorical legend marker, a day-state indicator below a calendar number, etc. The dot color is always a chart-color, NEVER a chrome tone.

```html
<span class="inline-flex size-2 rounded-full bg-chart-1"></span>
```

### avatar

40px rounded square (`{rounded.md}`), `object-cover`, no ring. Sits inside a 2px-padded card frame in the header.

### list-row

A row inside a card, fill `{colors.surface-alt}`, `{rounded.md}`, 12px padding, 12px gap. Left: optional icon-tile or text. Right: trailing `caret-right` icon or a numeric value.

```html
<div class="flex items-center justify-between rounded-xl bg-muted px-3 py-3">
  <div class="min-w-0">
    <p class="text-sm font-medium text-foreground">[Row title]</p>
    <p class="text-xs text-muted-foreground">[Row metadata]</p>
  </div>
  <iconify-icon icon="ph:caret-right" class="size-5 text-muted-foreground"></iconify-icon>
</div>
```

### icon-tile

A 44px `{rounded.md}` square in `{colors.surface-tonal}` holding a 24px filled phosphor icon tinted with a chart color. **This is the categorical signature** — every metric category gets a fixed chart color, and the tile makes the color glow softly against the tonal background.

```html
<div class="flex items-center justify-center size-11 rounded-xl bg-secondary">
  <iconify-icon icon="ph:[icon-name]-fill" class="size-6 text-chart-1"></iconify-icon>
</div>
```

### progress-bar

12px-tall full-pill bar. Track is `{colors.surface-alt}` (or `{colors.surface}` when nested inside a tonal panel); fill is a chart-color matching the metric category. No animation specified.

```html
<div class="h-3 w-full rounded-full bg-muted">
  <div class="h-3 w-[84%] rounded-full bg-chart-1"></div>
</div>
```

### progress-ring

A 128px circular gauge built from layered border tricks: outer ring `{colors.surface-alt}`, progress arc `{colors.primary}` (or chart-color) with two sides masked to track color, inner disk `{colors.surface}` for the typographic center. Center holds a large numeral and a "% of goal" caption.

### top-app-bar

A flat header — no fill, no border. Greeting/eyebrow caption + page-title `headline-lg` on the left; one or two `button-icon`s on the right. A `bg-gradient-to-b from-background to-transparent` 80px scrim is fixed at the very top to soften scroll.

### tab-bar

Fixed bottom nav, `{colors.background}` fill, 1px `{colors.border}` top border. Four equal grid cells. Active item: `tab-item-active` (tonal-pill background with `{colors.primary}` icon and label). Inactive: transparent with muted-foreground icon and label.

```html
<nav class="fixed bottom-0 left-0 right-0 border-t border-border bg-background">
  <div class="grid grid-cols-4 gap-1 px-2 pt-2 pb-2">
    <button class="flex flex-col items-center justify-center gap-1 rounded-xl bg-muted px-2 py-2">
      <iconify-icon icon="ph:[icon-name]-fill" class="size-6 text-primary"></iconify-icon>
      <span class="text-xs font-medium text-primary">[Active]</span>
    </button>
    <button class="flex flex-col items-center justify-center gap-1 rounded-xl px-2 py-2">
      <iconify-icon icon="ph:[icon-name]-fill" class="size-6 text-muted-foreground"></iconify-icon>
      <span class="text-xs text-muted-foreground">[Inactive]</span>
    </button>
  </div>
  <div class="h-5 bg-background"></div>
</nav>
```

## Iconography

**Phosphor (`ph`)**, fill variant, used at 16/20/24/28px. The fill style is mandatory — line variants would not carry enough visual weight against the dark surfaces and would break the categorical color system (filled glyphs read as colored shapes; line glyphs read as outlines).

**Phosphor variant-name quirk: the "regular" variant has NO suffix.** Phosphor's variants (`bold`, `fill`, `light`, `thin`, `duotone`) are appended as suffixes; the "regular" weight is the bare name with no suffix. Never write `ph:user-regular` — that icon does not exist and will render as a missing glyph. Write `ph:user`. Since this aesthetic is fill-default, this rarely matters, but if a future implementer needs a regular-weight icon for any reason, omit the suffix entirely.

Active vs inactive in the tab bar is conveyed by **color and a tonal background pill**, not by a variant swap — both states use `-fill` icons. This is intentional: the categorical palette depends on every glyph being a solid shape.

The implementer picks brief-appropriate phosphor icon names. Never bake icon-name choices into tokens.

## Illustration & Imagery

**Note**: no illustrative imagery in source HTML — only a single rounded-square user avatar photo. This section is *inferred* from the aesthetic's type, color, and shape language, with the avatar treatment extracted directly. Treat illustration guidance as a starting point.

**Style / Technique**: this aesthetic is fundamentally **iconographic and data-driven, not illustrative**. The visual identity comes from filled phosphor glyphs inside tonal tiles, progress geometry, and chart bars — not from rendered scenes. If a future brief requires illustrative content, lean toward **flat 2D vector with no shading**, geometric and schematic, in the spirit of dashboard / monitoring UIs. Avoid anything organic, painterly, or character-driven.

**Palette**: limit any illustration to 3–4 colors drawn exclusively from the chart palette (`{colors.chart-1}` through `{colors.chart-5}`) over a `{colors.surface-alt}` or `{colors.surface}` background. Never introduce new hues; the categorical palette IS the illustration palette.

**Edge treatment**: no outlines. Filled solid shapes only. If a stroke is unavoidable, 1.5–2px in the same color as the fill at higher luminance.

**Shading & light**: pure flat. No gradients, no soft shadows, no inner glow. Volume is suggested only by overlapping flat shapes.

**Composition & framing**: schematic, centered, generous negative space inside the container. Subjects sit comfortably inside the frame — never bleed.

**Background within the illustration**: matches the host container (`{colors.surface}` or `{colors.surface-alt}`) — no separate illustration backplate.

**Container styling**: rounded-`{rounded.lg}` (16px) frame, no border, no shadow, surface-alt fill, 16px padding around the artwork — identical to a `card-inset`.

**CSS treatment on `<img>`**: `object-cover`, no `mix-blend-mode`, no opacity reduction, no filter. The avatar in source uses `class="size-10 rounded-xl object-cover"` — preserve that recipe for any user photo.

**Box-shadow on the image or its frame**: none. Images sit flat on the surface, identical to cards.

**Aspect ratio rule**: avatars are 1:1 in a `{rounded.md}` square. Hero / content imagery, if any, prefers 1:1 or 4:3 inside a `{rounded.lg}` frame; do not crop to wide cinematic ratios — they fight the rounded-rect rhythm.

**Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel, NOT painterly, NOT hand-drawn, NOT character-driven, NOT outlined cartoon, NOT gradient-rich.

**Style recipe prompt**: *Flat 2D vector illustration of [SUBJECT], rendered as solid filled geometric shapes with no outlines, no gradients, and no shading. Limited to 3–4 colors drawn from a categorical data palette: bright teal, vibrant blue, soft violet, warm amber, coral pink. Background is a deep teal-black (#0F1E1B). Schematic, dashboard-app aesthetic — every element a clean filled shape, no texture, no realism, no character work. Centered composition with generous negative space. Visually adjacent to phosphor-fill iconography scaled up.*

For most briefs in this aesthetic, **prefer iconography and data visualization over illustration** — a well-chosen filled phosphor icon inside a tonal `icon-tile` carries more of the aesthetic identity than any custom illustration would.

## Hierarchy & Emphasis

What gets weight, in order:
1. **Large numerals** in semibold near-white — the loudest thing on any screen
2. **Saturated chart colors** as glyph tints and progress fills — second loudest
3. **Section titles** in `headline-md` semibold
4. **Tonal-pill buttons and chips** — quiet but visible
5. **Body and metadata** in muted-foreground — whispers

Rules:
- The primary teal is reserved for *commitment moments*: primary CTAs, the active tab, headline progress fills. Don't spend it on decoration.
- Categorical chart colors are *always* tied to a metric category — never decorative. If a color appears, it means "this is the X category".
- Eyebrow captions sit above page titles in muted-foreground at 14px to give the headline room without competing.

## Distinctive Details

1. **Tonal nesting with stepped radii.** A `{rounded.lg}` card holds a `{rounded.lg}` inset panel that holds `{rounded.md}` rows that hold `{rounded.full}` progress bars. Each layer is a distinct surface tone, and the radius reduction tracks the nesting depth — the screen has visible "rooms inside rooms".

2. **Categorical icon-tile system.** The 44px tonal-teal square holding a chart-color filled phosphor icon is the recurring unit of identity. Every metric — steps, calories, sleep, hydration, workout type, meal type — is presented through this tile, and the chart color stays glued to its meaning across screens.

3. **Pill-tagged data pairs.** Small inline `chip`s like `[Avg] [72]` or `[Today] [8,420]` — a muted-foreground label and a foreground value packed into one full-radius pill — appear repeatedly as in-card metadata. They're the design's substitute for tables.

## Do's and Don'ts

### Do
- Use the four-step tonal stack (background → surface → surface-alt → surface-tonal) for all chrome depth.
- Reserve `{colors.primary}` for committed actions, the active tab, and headline progress.
- Tie every chart color to a fixed category and reuse it everywhere that category appears.
- Compose stat cards as: icon-tile + corner badge-pill, then large numeral + caption beneath.
- Use phosphor `-fill` icons exclusively, sized 16/20/24/28.
- Keep buttons rectangular at `{rounded.md}`; reserve `{rounded.full}` for chips, badges, dots, and progress bars.
- Set negative tracking (`tracking-tight`) on every numeral and headline.

### Don't
- Don't fill chrome surfaces with chart colors (no amber cards, no violet buttons).
- Don't add box-shadows to cards — depth is tonal, not lifted. The FAB is the only exception.
- Don't introduce a third tier of foreground gray between `on-surface` and `on-surface-variant`.
- Don't use line-variant phosphor icons; the categorical color system requires filled glyphs.
- Don't write `ph:[name]-regular` — phosphor's regular variant is the bare name with no suffix.
- Don't use uppercase or tracked-out labels — this aesthetic is sentence-case throughout.
- Don't add custom illustrations when an icon-tile carries the meaning; iconography is the native language.
- Don't put primary-teal on more than one element per visible screen region — it loses its signal.