Coral Daylight DESIGN.md

---
version: 1
name: Coral Daylight Mobile
colors:
  primary: "#FF6B50"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-alt: "#F8F8FB"
  surface-muted: "#F0F0F3"
  on-surface: "#2C2C2E"
  on-surface-variant: "#8E8E93"
  border: "#E5E5EA"
  accent-soft: "#FFEBE8"
  accent-tint: "#FF9F8C"
  error: "#FF3B30"
  info-soft: "#EFF6FF"
  info: "#3B82F6"
typography:
  display-lg:
    fontFamily: Recursive
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  display-md:
    fontFamily: Recursive
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  numeral-stat:
    fontFamily: Recursive
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Recursive
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Recursive
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  body-md:
    fontFamily: Recursive
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: Recursive
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
  label-md:
    fontFamily: Recursive
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Recursive
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Recursive
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.12em
  tab-label:
    fontFamily: Recursive
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
rounded:
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 24px
  card-padding-tight: 20px
  section-gap: 24px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  default_size: 24px
  tab_size: 28px
components:
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    border: none
    boxShadow: "0 4px 20px rgba(0,0,0,0.05)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 16px
    border: none
    boxShadow: "0 10px 20px -6px rgba(255,107,80,0.25)"
  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 12px
    border: none
    boxShadow: none
  button-text:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    border: none
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 24px
    border: none
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
  input-text:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.md}"
    height: 56px
    paddingX: 20px
    border: none
    boxShadow: none
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    gap: 8px
    iconSize: 16px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    gap: 8px
    iconSize: 16px
    borderColor: "{colors.accent-soft}"
    borderWidth: 1px
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    size: 24px
    iconSize: 16px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.border}"
    rounded: "{rounded.full}"
    size: 40px
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 20px
    borderColor: transparent
    borderWidth: 2px
    boxShadow: none
  list-row-active:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 20px
    borderColor: "{colors.primary}"
    borderWidth: 2px
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.border}"
    fillColor: "{colors.primary}"
    height: 10px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  progress-ring:
    trackColor: "{colors.border}"
    fillColor: "{colors.primary}"
    strokeWidth: 20px
    strokeLinecap: round
  top-app-bar:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-lg}"
    height: 64px
    paddingX: "{spacing.gutter}"
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.surface-alt}"
    height: 80px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 28px
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 28px
---

# Coral Daylight Mobile

## Overview

**Bright, friendly, quietly premium.** A near-white app surface with a single saturated coral accent doing all the heavy lifting for emphasis, action, and active state. The aesthetic feels like a wellness or self-tracking product — generous whitespace, large rounded surfaces, soft drop-shadows, and chunky bold typography that leans warm rather than clinical.

The mood is **calm but motivating**. Cards float on an off-white page surface with feathery shadows, headings are heavy-weight with tightened tracking, and numerics sit in tabular figures so stat blocks stay tidy. The single coral hue (`{colors.primary}`) is precious — it appears as the active fill, the CTA, the active tab, the focus ring, and almost nowhere else. Everything else is grayscale plus a peach-tinted accent surface.

Two type voices coexist: a chunky variable-width sans (Recursive) for everything UI, with the option of an editorial serif (Playfair Display) reserved for moments of warmth that the brief might call for. JetBrains Mono is loaded for any monospaced numeric or code context but not used in the source chrome.

## Colors

The palette is **monochrome + one warm signal color**.

- `{colors.surface-alt}` (#F8F8FB) — page background. A barely-blue off-white that lets cards visually lift without needing strong shadows.
- `{colors.surface}` (#FFFFFF) — card / sheet surface. Pure white, always sitting above the page on a soft 4px/20px shadow.
- `{colors.surface-muted}` (#F0F0F3) — input fills, inactive list-row fills, low-emphasis chip fills. A slightly cooler gray than the page.
- `{colors.border}` (#E5E5EA) — hairline dividers, progress-bar tracks, the 1px border at the top of the tab bar.
- `{colors.on-surface}` (#2C2C2E) — primary text, headings, hero numerals. Near-black, never pure black.
- `{colors.on-surface-variant}` (#8E8E93) — captions, helper copy, inactive labels, axis labels.
- `{colors.primary}` (#FF6B50) — the coral. Used for: primary CTA, active tab icon + label, active selection ring (border 2px), filled progress, focus ring, and key numerical highlights inside soft-accent surfaces.
- `{colors.accent-soft}` (#FFEBE8) — peach tint. The "selected/active" surface fill behind primary content (e.g. selected option card background, active chip fill, icon-tile background for primary stats).
- `{colors.accent-tint}` (#FF9F8C) — secondary coral, available for two-tone moments (a lighter wash, a hover tier). Use sparingly.
- `{colors.error}` (#FF3B30) — destructive only.

**Palette boundaries.** The primary coral never becomes a card background — it appears only as a small fill (CTA, badge, active icon) or as a 2px border on a `{colors.accent-soft}` surface. Avoid wide coral fields. Categorical icon tiles inside cards may use a tonal pair other than coral (e.g. a soft blue + blue icon for a water/info metric); such pairs are tonal cousins of the system, not a color expansion.

## Typography

Recursive is the workhorse — variable, modern, slightly rounded. It carries everything from the 10px tab label to the 48px hero numeral. Weight strategy is **bold-or-medium**: 700 for headings, numerals, and labels; 500 for body and helper text. There is no 400 or 600 in regular use.

- `{typography.display-lg}` — hero numerals (large counters, primary stat displays).
- `{typography.display-md}` — screen-level title (`Today`, `Me`).
- `{typography.numeral-stat}` — repeated stat-grid numerals; tabular figures (`tabular-nums`) are mandatory so columns of numbers align.
- `{typography.headline-lg}` — top-app-bar centered title.
- `{typography.headline-md}` — card title; primary-CTA label; in-card option title.
- `{typography.body-md}` — body and paragraph copy.
- `{typography.body-sm}` — helper / explanatory copy under a title.
- `{typography.label-md}` — secondary-action labels, "See All" / "Edit" links (used at primary color).
- `{typography.label-sm}` — chip labels, badge text.
- `{typography.label-uppercase}` — section kickers / metadata captions, always uppercase, tracked +0.12em (e.g. small "STREAK" / "GOAL" labels under a numeral).
- `{typography.tab-label}` — bottom-tab labels.

Tighten tracking on anything 18px+ to about -0.01em / -0.02em. Numerals always use `tabular-nums`. Letter-spacing widens to +0.12em only for the uppercase kicker role.

## Spacing & Layout

Density is **airy**. The screen edge gutter is `{spacing.gutter}` (24px); cards stack with a `{spacing.section-gap}` of 24px between them. Inside a card, padding is `{spacing.card-padding}` (24px) for normal cards, dropping to `{spacing.card-padding-tight}` (20px) for compact metric tiles. Vertical rhythm inside cards uses 16–24px gaps between groups.

The bottom tab bar reserves an 80px safe band at the bottom of every screen, plus 24px of additional content padding so the last card never crowds the chrome.

Headers sit with 48px (`pt-12`) of top padding so the screen title breathes against the status bar.

## Elevation & Depth

Two depth tiers, both gentle.

1. **Page → card.** Every card sits on a single recipe: `box-shadow: 0 4px 20px rgba(0,0,0,0.05)`. Soft, diffuse, never directional. The shadow is barely visible but enough to lift white cards off the off-white page.
2. **Surface → primary action.** The primary CTA carries a colored shadow tied to its own hue: `box-shadow: 0 10px 20px -6px rgba(255,107,80,0.25)`. This is the only colored shadow in the system; it makes the CTA feel like the warmest, most lifted element on screen.

Everything else is flat. Inputs, list rows, chips, badges, and the tab bar use tonal fills + (where needed) a 1px hairline border, never a shadow. Pressed states use `active:scale-95`; there is no hover-elevation move.

## Shapes

The radius language is **generously rounded**.

- `{rounded.sm}` (8px) — tiny details only (chart bar tops, micro-badges).
- `{rounded.md}` (16px) — option-cards inside a list, inputs, icon-buttons that aren't fully circular, internal tile surfaces.
- `{rounded.lg}` (20px) — the canonical card radius. Every top-level card uses this.
- `{rounded.xl}` (24px) — slightly larger surfaces if needed.
- `{rounded.full}` — pills (CTA, chip, badge), avatar, circular icon-buttons, progress bars, the inner accent tile surrounding a numeral.

Rule: any interactive element that isn't a full card defaults to `{rounded.full}`. Cards are 20px. Internal tiles inside a card step down to 16px so they read as nested.

## Components

### card

Tokens: `{components.card}`. White, 20px radius, soft shadow, 24px padding. The default container for everything.

```html
<div class="bg-white rounded-[20px] p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)]">
  <h3 class="text-[18px] font-bold tracking-tight text-[#2C2C2E]">[Card title]</h3>
  <p class="text-sm font-medium text-[#8E8E93] mt-1">[Helper copy]</p>
</div>
```

### button-primary

Tokens: `{components.button-primary}`. Coral pill with colored drop-shadow. Always `font-bold`, `text-lg` for full-width primary CTA; `active:scale-95` is the canonical press state.

```html
<button class="w-full bg-[#FF6B50] text-white py-4 rounded-full font-bold text-lg shadow-[0_10px_20px_-6px_rgba(255,107,80,0.25)] active:scale-95 transition-transform flex items-center justify-center gap-2">
  <span>[CTA label]</span>
  <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
</button>
```

### button-secondary

Tokens: `{components.button-secondary}`. Muted-gray pill, no shadow. Use for non-emphasized chrome actions.

```html
<button class="bg-[#F0F0F3] text-[#2C2C2E] px-5 py-3 rounded-full font-bold text-sm active:scale-95 transition-transform">
  [Label]
</button>
```

### button-text

Inline link-like action, used for "See All", "Join More" affordances inside a card header. Coral, semibold, no underline.

```html
<button class="text-[#FF6B50] text-sm font-bold">[Action]</button>
```

For a *low-emphasis* text action (e.g. an "Edit" affordance), use the same shape but with `text-[#8E8E93]` and `hover:text-[#FF6B50]` — the gray-to-coral hover is the signature transition.

### button-icon

A floating circular icon button (e.g. back arrow). White surface, hairline shadow, 40px square.

```html
<button class="size-10 rounded-full bg-white shadow-sm flex items-center justify-center active:scale-90 transition-transform">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6 text-[#2C2C2E]"></iconify-icon>
</button>
```

A square-ish 56×56 inline-action variant exists (e.g. an "add" button next to an input): same tokens but with `{rounded.md}` and the coral fill — used as the primary submit cap on a single-field form.

```html
<button class="h-14 w-14 bg-[#FF6B50] text-white rounded-2xl flex items-center justify-center shadow-[0_10px_20px_-6px_rgba(255,107,80,0.2)] active:scale-95 transition-transform">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-7"></iconify-icon>
</button>
```

### input-text

Tokens: `{components.input-text}`. Tonal-fill rounded rectangle, no border, no shadow. Placeholder uses muted-foreground at 50% opacity. Focus state is a 2-ring at coral/20%.

```html
<div class="relative flex-1">
  <input type="text" placeholder="[Placeholder]"
    class="w-full h-14 bg-[#F0F0F3] rounded-2xl px-5 text-xl font-bold focus:ring-2 focus:ring-[#FF6B50]/20 outline-none placeholder:text-[#8E8E93]/50" />
  <span class="absolute right-5 top-1/2 -translate-y-1/2 text-[#8E8E93] font-bold">[Unit]</span>
</div>
```

### chip / chip-active

Tokens: `{components.chip}`, `{components.chip-active}`. Inactive chips use the muted-fill on muted-foreground; active chips use the peach `{colors.accent-soft}` with coral text and a hairline coral-tinted border. Both are full-pill, both carry a small leading icon at 16px.

```html
<!-- inactive -->
<div class="bg-[#E5E5EA]/40 px-4 py-2 rounded-full flex items-center gap-2">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-4 text-[#8E8E93]"></iconify-icon>
  <span class="text-xs font-bold text-[#8E8E93]">[Label]</span>
</div>

<!-- active -->
<div class="bg-[#FFEBE8] px-4 py-2 rounded-full flex items-center gap-2 border border-[#FF6B50]/10">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-4 text-[#FF6B50]"></iconify-icon>
  <span class="text-xs font-bold text-[#FF6B50]">[Label]</span>
</div>
```

### badge-pill / badge-circle

Pills for inline status, circles for numeric/check confirmations. The check-mark badge inside a selected option card is the canonical badge-circle.

```html
<div class="size-6 rounded-full bg-[#FF6B50] flex items-center justify-center">
  <iconify-icon icon="solar:check-read-bold" class="size-4 text-white"></iconify-icon>
</div>
```

### avatar

40px circle, image fills, no ring, no shadow. Sits in the right of the top app bar.

```html
<div class="size-10 rounded-full bg-[#E5E5EA] overflow-hidden">
  <img alt="[Alt]" src="[url]" class="w-full h-full object-cover" />
</div>
```

### list-row / list-row-active

A list row in this aesthetic is a **selectable option card**, not a divider-separated row. Inactive rows have a muted tonal fill and a transparent 2px border (so the layout doesn't shift on selection); active rows swap to `{colors.accent-soft}` with a 2px coral border. Internal padding 20px, radius 16px.

```html
<!-- inactive -->
<div class="p-5 rounded-2xl bg-[#F0F0F3]/40 border-2 border-transparent transition-all cursor-pointer">
  <div class="flex items-center justify-between mb-1">
    <span class="text-2xl font-bold tracking-tight text-[#2C2C2E]">[Title]</span>
  </div>
  <p class="text-sm font-medium text-[#2C2C2E]">[Subtitle]</p>
  <p class="text-xs text-[#8E8E93] mt-1">[Description]</p>
</div>

<!-- active -->
<div class="p-5 rounded-2xl bg-[#FFEBE8] border-2 border-[#FF6B50] transition-all cursor-pointer">
  <div class="flex items-center justify-between mb-1">
    <span class="text-2xl font-bold tracking-tight text-[#2C2C2E]">[Title]</span>
    <div class="size-6 rounded-full bg-[#FF6B50] flex items-center justify-center">
      <iconify-icon icon="solar:check-read-bold" class="size-4 text-white"></iconify-icon>
    </div>
  </div>
  <p class="text-sm font-medium text-[#FF6B50]">[Subtitle]</p>
  <p class="text-xs text-[#8E8E93] mt-1">[Description]</p>
</div>
```

### progress-bar

10px tall, full-pill ends, gray track + coral fill. Always paired above with a flex row showing a label (left, bold) and percentage (right, coral, bold).

```html
<div class="space-y-2">
  <div class="flex justify-between items-center">
    <span class="font-bold text-[#2C2C2E]">[Label]</span>
    <span class="text-xs font-bold text-[#FF6B50]">[N]%</span>
  </div>
  <div class="h-2.5 w-full bg-[#E5E5EA] rounded-full overflow-hidden">
    <div class="h-full bg-[#FF6B50] rounded-full" style="width: [N]%"></div>
  </div>
</div>
```

### progress-ring

Centerpiece of a hero card. SVG-based, 256px square, 20px stroke, coral fill on a gray-at-50%-opacity track, `stroke-linecap: round`. A small white-with-coral-border 32px puck rides the active arc to mark current position. Center stack: small `{label-uppercase}` peach pill ("kicker"), then `{display-lg}` numeral with `tabular-nums`, then `{body-md}` muted "Goal" caption.

### top-app-bar

The page header. 48px top padding, screen title left-aligned (or centered with a back-button on detail screens), avatar or trailing action on the right. Sub-line in `{body-sm}` muted directly under the title.

```html
<header class="px-6 pt-12 pb-4 flex items-center justify-between">
  <div class="flex flex-col">
    <h1 class="text-3xl font-bold tracking-tight text-[#2C2C2E]">[Screen title]</h1>
    <p class="text-[#8E8E93] text-sm font-medium">[Sub-line]</p>
  </div>
  <div class="size-10 rounded-full bg-[#E5E5EA] overflow-hidden">
    <img alt="[Alt]" src="[url]" class="w-full h-full object-cover" />
  </div>
</header>
```

For detail screens, swap the avatar for an icon button on the left and center the title:

```html
<header class="px-6 pt-12 pb-4 flex items-center">
  <button class="size-10 rounded-full bg-white shadow-sm flex items-center justify-center -ml-2 active:scale-90">
    <iconify-icon icon="solar:arrow-left-linear" class="size-6 text-[#2C2C2E]"></iconify-icon>
  </button>
  <div class="flex-1 text-center pr-8">
    <h1 class="text-xl font-bold text-[#2C2C2E]">[Detail title]</h1>
  </div>
</header>
```

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

Fixed bottom bar, 80px tall, translucent off-white with backdrop-blur, 1px top hairline. Tabs are equal-width, icon (28px) above a 10px label. Inactive tabs at 50% opacity in muted-foreground; active tab in coral, no pill, no underline — color + opacity is the only state difference.

```html
<div class="fixed bottom-0 left-0 right-0 bg-[#F8F8FB]/80 backdrop-blur-xl border-t border-[#E5E5EA] flex justify-around items-center h-20 pb-2 z-50">
  <div class="flex flex-col items-center justify-center gap-1 w-full h-full cursor-pointer">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-7 text-[#FF6B50]"></iconify-icon>
    <span class="text-[10px] font-bold text-[#FF6B50]">[Active]</span>
  </div>
  <div class="flex flex-col items-center justify-center gap-1 w-full h-full cursor-pointer opacity-50">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-7 text-[#8E8E93]"></iconify-icon>
    <span class="text-[10px] font-medium text-[#8E8E93]">[Inactive]</span>
  </div>
</div>
```

### Composition recipes (not separate components)

- **Stat tile.** A small tile inside a card grid: render a `{rounded.full}` accent-soft circle (`size-10`) with a coral icon at 20px in the top-left, a `{body-sm}` muted label below, and a `{headline-md}` numeral as the value. Whole tile sits in a `{components.card}` with `{spacing.card-padding-tight}`.
- **Stat-grid (lifetime stats).** A 2-column grid inside a single card, `gap-y-8 gap-x-4`. Each cell is a left-aligned `{numeral-stat}` followed by a `{body-sm}` muted caption underneath. No icons, no separators — typography does the work.
- **Achievement chip group.** A `flex flex-wrap gap-2` of `chip` / `chip-active` items. Earned achievements use `chip-active`; locked ones use the inactive variant.
- **Categorical icon-tile pair.** Inside a metric card, the icon sits in a `size-10` `{rounded.full}` tile filled with `accent-soft` (icon coral) for the primary metric, OR a tonal cousin (e.g. `bg-blue-50` + `text-blue-500`) for a categorical second metric. Tonal cousins are reserved for genuinely categorical, mutually-exclusive metrics — never for variant emphasis.
- **Mini bar chart.** A `flex items-end justify-between gap-2` row of equal-width columns; each column is a single `bg-[#E5E5EA]` rectangle with `rounded-t-lg` and a height set per data point, plus a `{body-sm}` axis letter underneath. The "current/peak" column swaps fill to `{colors.primary}` plus the colored CTA shadow recipe at -6 / 0.2 alpha.

### Tonal recipes

- *Low-emphasis primary* — render `button-primary` with `bg-[#FFEBE8]` and `text-[#FF6B50]` and drop the shadow. Use only when a screen needs two stacked primary-feeling actions.
- *Selected state on any tile* — swap surface from `{colors.surface-muted}` to `{colors.accent-soft}` and add a 2px `{colors.primary}` border. Inactive variant must already reserve a 2px transparent border to avoid layout shift.

## Iconography

**Solar, bold variant.** This is the dominant icon family across the source — its rounded, slightly chunky bold-fill icons match the typography's weight and the soft-radii surface vocabulary.

- Default variant: `bold` (e.g. `solar:[icon-name]-bold`).
- Linear variant: `linear` is reserved for chrome utility icons inside button-icon containers (back arrows and similar) where a thinner stroke reads better at small sizes against a white surface.
- Active vs inactive states do NOT swap variants — both use `bold`. State is communicated by color (coral vs muted-foreground) and opacity (active 100%, inactive 50%).
- Default size 24px in body contexts, 28px in tab bar, 16px inside chips, 20px inside circular icon-tiles.
- Always size with Tailwind classes (`size-6`, `size-7`), never with HTML `width`/`height` attributes.

## Illustration & Imagery

**Note**: the only `<img>` element in the source is a small profile avatar photograph; there are no illustrations. The aesthetic *welcomes* imagery (it has the warmth, palette, and shape language for it), so this section infers a treatment that would feel native — treat as a starting point, not ground truth.

- **Style / Technique**: soft flat-vector with very subtle 2D shading. Rounded silhouettes, no hard geometry, gentle organic curves. Could also be soft-airbrushed gradient illustration in the same palette. Would NOT be 3D, claymation, photographic, or pixel.
- **Palette**: limited to 3–5 colors per illustration drawn from the system: coral (`{colors.primary}`), peach (`{colors.accent-soft}`), light coral (`{colors.accent-tint}`), warm gray (`{colors.on-surface-variant}`), and the page off-white (`{colors.surface-alt}`) for backgrounds. Accent dabs of a single tonal cousin (a soft sky-blue) are permitted. No saturated greens, no purples, no full-spectrum rainbows.
- **Edge treatment**: no outlines, OR a single very thin coral stroke (1–1.5px, `{colors.primary}` at full opacity) used as a sparing accent on focal shapes. Never a heavy black outline.
- **Shading & light**: flat or one-tonal-step soft shading. A subtle warm light from upper-left if any. No hard cel-shading, no rim-lighting.
- **Composition & framing**: subject occupies ~60–70% of canvas, generous breathing room, centered or slightly off-center. Background within the illustration is the page surface or transparent — never a colored field.
- **Background within the illustration**: transparent, OR flat `{colors.surface-alt}`. Illustrations sit directly on a card; they don't bring their own colored frame.
- **Container styling**: when an illustration sits inside a card, the card itself is the frame — `{rounded.lg}` white surface with the standard `0 4px 20px rgba(0,0,0,0.05)` shadow. No additional inner frame around the illustration. Padding around the illustration matches `{spacing.card-padding}` on all sides.
- **CSS treatment on `<img>`**: `object-cover` for photographic content (avatars), `object-contain` for illustration art. No `mix-blend-mode`, no `opacity` reductions, no CSS `filter`. Images sit at full fidelity.
- **Box-shadow on the image / its frame**: none on the image itself — the containing card carries the only shadow.
- **Aspect ratio rule**: illustrations preserve source ratio inside an aspect-ratio box (typically 4:3 or 1:1 inside a card hero slot). Photographs (avatars) are always cropped to a perfect circle via `{rounded.full}` + `object-cover`.
- **Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT heavy black outlines, NOT pastel macarons, NOT bright cartoon, NOT gradient meshes, NOT sticker style with thick white outlines.
- **Style recipe prompt**: *"Soft flat-vector illustration of [SUBJECT], rounded organic silhouettes, 3–5 colors drawn from a coral / peach / warm-gray / off-white palette with at most one accent of soft sky-blue. No outlines or a single thin coral stroke as accent only. Flat shading or a single soft tonal step, gentle warm light from upper-left. Generous negative space, subject centered at ~65% of canvas, transparent or off-white background. Calm, friendly, premium-wellness mood. NOT 3D, NOT claymation, NOT photographic, NOT heavy black outlines, NOT bright cartoon."*

## Hierarchy & Emphasis

- **Size + weight** carry hierarchy first: a 30–48px bold numeral is always the loudest thing in a card.
- **Coral** is reserved for moments of genuine emphasis — the active state, the primary CTA, the active progress fill. Using coral elsewhere dilutes its signal.
- **Muted-foreground gray** is the default voice for everything supporting — captions, helper text, axis labels, inactive icons. The eye reads black-coral first, then the gray supporting layer.
- **Tabular numerals** are mandatory anywhere numbers stack — stat grids, axis labels, time displays. The fixed-width grid is part of the visual order.
- **Soft shadows** signal interactivity / surface-ness; flat tonal fills signal grouping or low-emphasis. Don't shadow chips, badges, or input fields.

## Distinctive Details

1. **The colored shadow under the primary CTA.** Most shadows in the system are gray and faint; the CTA alone carries a `rgba(255,107,80,0.25)` glow that ties the button visually to its own color. It's the warmest single moment on any screen.
2. **The peach pill kicker inside the progress ring.** A small `{rounded.full}` `{colors.accent-soft}` capsule with uppercase tracked label, sitting just above the hero numeral. This stacked label-numeral-caption tower is the signature centerpiece treatment.
3. **The 2px-coral-on-peach selection state.** Selectable tiles reserve a 2px transparent border in their inactive state and swap fill + border together when active, so selection never causes a layout shift. The border is always `{colors.primary}`, never any other tone.

## Do's and Don'ts

### Do
- Use `{colors.primary}` sparingly — one CTA, the active tab, the active progress, focus rings. That's the budget per screen.
- Always pair coral fill with `{colors.accent-soft}` when building a "selected" surface — never coral fill against white.
- Use `tabular-nums` on every numeral that might be compared with another numeral.
- Stack 20px-radius white cards on the off-white page with the canonical 4/20 shadow — that's the default container in 95% of cases.
- Reserve a 2px transparent border on selectable tiles in their inactive state so the active variant doesn't shift layout.
- Render icons via Tailwind `size-*` classes, always at solar-bold variant unless the role specifically calls for a thinner stroke.

### Don't
- Don't use coral as a card background or a wide colored field.
- Don't introduce a third saturated brand color; the palette is monochrome + coral + peach + (rarely) one categorical tonal cousin.
- Don't apply box-shadows to chips, badges, inputs, or list rows — flat tonal fills only.
- Don't switch icon variants between active and inactive states — change color/opacity, not shape.
- Don't use Playfair Display in chrome or component labels; reserve any serif for explicitly editorial brief moments.
- Don't add hover-lift, hover-scale-up, or rotation effects — `active:scale-95` is the only press transform in the system.
- Don't crowd the bottom-of-screen content; reserve 80px tab bar + 24px content padding (`pb-24`) on every scrollable screen.