Warm Cream Mascot DESIGN.md

---
version: 1
name: Warm Cream Mascot Mobile
colors:
  primary: "#EC5E3A"
  on-primary: "#FFFFFF"
  surface: "#FFFAF3"
  surface-alt: "#FFFFFF"
  surface-muted: "#F5EDE4"
  surface-tonal: "#F0E6D6"
  on-surface: "#4A3831"
  on-surface-variant: "#6B5247"
  on-surface-muted: "#9E857B"
  border: "#F0E6D6"
  accent: "#2F855A"
  on-accent: "#FFFFFF"
  warning: "#F59F00"
  destructive: "#C92A2A"
  illus-tomato: "#EC5E3A"
  illus-tomato-shadow: "#C44A2C"
  illus-leaf: "#7BA05B"
  illus-leaf-shadow: "#5C7A42"
  illus-outline: "#5C2E20"
typography:
  display-xl:
    fontFamily: Work Sans
    fontSize: 88px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.04em
  display-lg:
    fontFamily: Work Sans
    fontSize: 72px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Work Sans
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Work Sans
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Work Sans
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.01em
  metric-lg:
    fontFamily: Work Sans
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.01em
  body-md:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  label-cta:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.05em
  label-uppercase-md:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 0.15em
  label-uppercase-sm:
    fontFamily: Nunito Sans
    fontSize: 10px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 0.2em
  tab-label:
    fontFamily: Nunito Sans
    fontSize: 10px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 0.2em
rounded:
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  gutter: 24px
  card-padding: 24px
  card-padding-lg: 32px
  section-gap: 24px
icons:
  set: solar
  default_variant: bold-duotone
  active_variant: bold-duotone
  accent_variant: bold
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
    border: none
    boxShadow: "0 8px 30px rgb(0,0,0,0.04)"
  card-elevated:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: 40px
    padding: "{spacing.card-padding-lg}"
    border: none
    boxShadow: "0 12px 40px rgb(0,0,0,0.05)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-cta}"
    rounded: "{rounded.full}"
    paddingX: 32px
    paddingY: 20px
    border: none
    boxShadow: "0 10px 25px rgba(224,49,49,0.25)"
    gap: 12px
    iconSize: 24px
    pressedBackground: "darken(8%)"
  button-secondary:
    backgroundColor: "{colors.surface-tonal}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 20px
    border: none
    boxShadow: none
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.full}"
    size: 48px
    iconSize: 24px
    border: none
    boxShadow: "0 4px 12px rgb(0,0,0,0.03)"
  button-utility:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingY: 20px
    paddingX: 16px
    iconSize: 24px
    gap: 4px
    border: none
    boxShadow: "0 8px 20px rgb(0,0,0,0.04)"
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 16px
    border: none
    boxShadow: "0 4px 12px rgb(0,0,0,0.03)"
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 10px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 10px
    border: none
    boxShadow: "0 1px 2px rgb(0,0,0,0.05)"
  chip-status:
    backgroundColor: "color-mix(in srgb, {colors.primary} 10%, transparent)"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 8px
    border: none
    boxShadow: none
    gap: 8px
  badge-pill:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 10px
    border: none
    boxShadow: "0 4px 12px rgb(0,0,0,0.03)"
    gap: 8px
    iconSize: 18px
  badge-circle:
    backgroundColor: "color-mix(in srgb, {colors.primary} 10%, transparent)"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 18px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.full}"
    size: 40px
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.xl}"
    paddingX: 20px
    paddingY: 20px
    gap: 16px
    border: none
    boxShadow: "0 4px 20px rgb(0,0,0,0.03)"
  progress-bar:
    backgroundColor: "color-mix(in srgb, {colors.surface-tonal} 40%, transparent)"
    rounded: "{rounded.full}"
    height: 8px
    border: none
    boxShadow: none
  progress-bar-fill:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
  progress-ring:
    trackColor: "color-mix(in srgb, {colors.surface-tonal} 30%, transparent)"
    fillColor: "{colors.primary}"
    trackWidth: 5px
    fillWidth: 7px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-md}"
    paddingX: "{spacing.gutter}"
    paddingY: "{spacing.lg}"
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "color-mix(in srgb, {colors.surface-alt} 90%, transparent)"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 12px
    borderColor: "color-mix(in srgb, {colors.border} 50%, transparent)"
    borderWidth: 1px
    boxShadow: "0 12px 40px rgb(0,0,0,0.1)"
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    gap: 4px
    backgroundColor: "transparent"
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    gap: 4px
    backgroundColor: "transparent"
    border: none
    boxShadow: none
---

# Warm Cream Mascot Mobile

## Overview

**Warm, friendly, and confidently chunky.** This is a cream-paper aesthetic built around an oversized illustrated mascot, vivid tomato-orange brand color, and pillow-rounded surfaces that float on a soft background. The personality is approachable but earnest — playful enough for a kid-friendly app, structured enough for productivity tooling.

The defining moves: (1) every interactive surface is a fully-rounded pill or generously-rounded card, (2) typography swings between a heavy black geometric display face and a sturdy humanist sans for body, (3) the chrome is mostly flat-white-on-cream with one hot brand-orange accent that anchors hierarchy, (4) ambient color blobs sit far behind the content as soft atmospheric haze, and (5) a hand-drawn mascot character carries emotional weight that the otherwise-clean UI doesn't try to provide itself.

The aesthetic feels like a children's-book illustration paired with confident editorial typography — warm but never saccharine, organized but never austere.

## Colors

**Mode**: light only.

**Page surface** uses `{colors.surface}` (#FFFAF3) — a warm cream that sets the entire mood. It is NOT white; the cream cast is load-bearing. **Card surfaces** use `{colors.surface-alt}` (pure white) — every card, button, input, and tab bar lifts off the cream by being the brighter white. This two-layer surface system is the primary way depth is conveyed.

`{colors.primary}` (#EC5E3A) is the brand tomato-orange — used for the main CTA fill, active state text, key icons, progress fills, and the colon punctuation inside the timer display. It is saturated and warm; never use it as a card background (the card stays white) and never tint a large chrome surface with it. Tints (`primary/5`, `primary/10`) appear as ambient blur blobs and as the fill behind small status pills / icon containers.

`{colors.surface-tonal}` (#F0E6D6) and `{colors.surface-muted}` (#F5EDE4) are neutral warm-beige tones used for secondary buttons, segmented-control tracks, progress-bar tracks, and dividers. They harmonize with the cream surface without competing for attention.

`{colors.on-surface}` (#4A3831) is a warm dark espresso — body text and headings. Never pure black. `{colors.on-surface-variant}` and `{colors.on-surface-muted}` step it down for metadata and de-emphasized labels.

`{colors.accent}` (#2F855A — forest green) is a categorical/positive color used in stat icons and "improvement" indicators. `{colors.warning}` (#F59F00) and `{colors.destructive}` (#C92A2A) appear only in semantic contexts.

The `illus-*` palette is reserved exclusively for illustrations and mascot artwork. Those colors must NEVER bleed into UI chrome — UI chrome stays in the cream + white + tomato + beige + espresso family.

## Typography

Two type families do the work:

- **Work Sans** (the heading family) is a warm geometric sans used at heavy Black 900 weight for displays, headlines, and stat numerals. Its slightly humanist warmth keeps the chunky weight from feeling brutalist.
- **Nunito Sans** (the body / label family) is a soft humanist sans used at Bold 700 and Black 900. It carries body text, button labels, and all the tracked-out uppercase eyebrows.

**Weight strategy is heavy throughout.** There is essentially no Regular weight in this aesthetic — body is Bold 700, labels and metadata are Black 900, headings are Black 900. Lightness is conveyed by *size and color*, not by weight reduction.

Role explanations:

- `{typography.display-xl}` and `{typography.display-lg}` — hero numerals (large counters, central display values). Tabular-nums, tight tracking, Black 900. Always paired with a tinted-orange separator character (`:`, `/`, `.`) at 30% opacity to break up the number rhythm.
- `{typography.headline-lg}`, `{typography.headline-md}`, `{typography.headline-sm}` — screen headers, card group titles, section anchors. Work Sans Black 900, tight tracking.
- `{typography.metric-lg}` — secondary stat values inside small tiles ("24", "8d").
- `{typography.body-md}`, `{typography.body-sm}` — list-row primary text and supporting prose. Nunito Sans Bold.
- `{typography.label-cta}` — primary button label. Slightly tracked-out (+0.05em).
- `{typography.label-uppercase-md}` and `{typography.label-uppercase-sm}` — the tracked-out uppercase eyebrows that appear above stats, on streak pills, on tab labels, and as metadata captions. The +0.15em–0.2em letter-spacing IS the visual signature of this aesthetic; do not reduce it. Always Black 900.
- `{typography.tab-label}` — bottom tab bar text, identical treatment to `label-uppercase-sm`.

Tabular-nums on every numeric display. The opacity-30 brand-orange separator inside numerals is a recurring trick worth preserving.

## Spacing & Layout

**Density**: airy and generous. The `{spacing.gutter}` is 24px and rarely violated. Cards are large with `{spacing.card-padding}` (24px) or `{spacing.card-padding-lg}` (32px) for hero cards.

Vertical rhythm clusters around 24px and 32px gaps between sections. Inside cards, content stacks with 16–24px gaps. Buttons sit in groups separated by 16px gaps; primary CTAs get extra breathing room above and below.

The screen is constrained to a max-width of `max-w-md` (~28rem) and centered, with the bottom tab bar floating above content rather than docking to the edge — there is always a 24px inset around the tab bar.

## Elevation & Depth

Three depth tiers, all conveyed through soft diffuse shadows on white-on-cream surfaces:

1. **Base chrome** (icon buttons, list rows, small tiles, inputs) — `boxShadow: "0 4px 12px rgb(0,0,0,0.03)"` to `"0 4px 20px rgb(0,0,0,0.03)"`. Barely-there but present.
2. **Cards** — `boxShadow: "0 8px 30px rgb(0,0,0,0.04)"`. Soft and wide, no harsh edge.
3. **Hero cards & floating tab bar** — `boxShadow: "0 12px 40px rgb(0,0,0,0.05)"` to `"0 12px 40px rgb(0,0,0,0.1)"`. Lifted but never aggressive.

The primary CTA gets a colored shadow: `"0 10px 25px rgba(224,49,49,0.25)"` — the only place a chromatic shadow appears in chrome. It tints the cream surface beneath the button with a faint orange glow, reinforcing the brand color.

**Atmospheric blur blobs** sit behind everything: full-circle divs with `bg-primary/5` or `bg-chart-3/10`, sized 80×80 to 96×96 viewport units, `blur-[100px]` to `blur-[120px]`, positioned offscreen at corners. They never carry information; they're pure mood. Pointer-events disabled so they never intercept input.

## Shapes

Pillow-rounded throughout. The radius philosophy is **pill-or-generous-rounded, never sharp**:

- `{rounded.full}` — every button, every input, every chip, every icon container, every progress bar, the bottom tab bar, and the streak pill. If it's interactive or a status indicator, it's a pill.
- `{rounded.2xl}` (40px) — hero cards. The signature card shape that holds the timer, the weekly-average card, etc.
- `{rounded.xl}` (32px) — standard cards (stat tiles, list rows).
- `{rounded.lg}` (24px) — secondary cards.
- `{rounded.md}` (16px) — small interior tiles (e.g. the icon-container squircle inside a stat tile uses `rounded-2xl` ≈ 16px).

There are no sharp corners anywhere. There are no hairline-thin strokes used as separators — separation is done through whitespace, surface contrast, or a soft shadow.

## Components

Refer to the YAML frontmatter for canonical token values. Snippets below are the canonical Tailwind renderings.

### card

```html
<div class="bg-white rounded-[32px] p-6 shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
  <h4 class="font-[Work_Sans] font-black text-lg tracking-tight text-[#4A3831]">[Card title]</h4>
  <p class="font-[Nunito_Sans] font-bold text-sm text-[#9E857B] mt-2">[Body copy]</p>
</div>
```

### card-elevated

The hero card variant — used for the most prominent surface on a screen.

```html
<div class="bg-white rounded-[40px] p-8 shadow-[0_12px_40px_rgb(0,0,0,0.05)] flex flex-col items-center gap-8 relative overflow-hidden">
  <!-- content -->
</div>
```

### button-primary

```html
<button class="w-full py-5 px-8 rounded-full bg-[#EC5E3A] text-white font-bold text-lg tracking-[0.05em] shadow-[0_10px_25px_rgba(224,49,49,0.25)] hover:shadow-[0_15px_30px_rgba(224,49,49,0.35)] hover:-translate-y-1 active:translate-y-0 transition-all duration-300 flex items-center justify-center gap-3">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  [BUTTON LABEL]
</button>
```

### button-secondary

```html
<button class="w-full py-5 px-6 rounded-full bg-[#F0E6D6]/50 text-[#6B5247] font-bold text-sm tracking-wide hover:bg-[#F0E6D6] transition-colors">
  [Secondary action]
</button>
```

### button-icon

The 48×48 chrome icon-button used in headers (settings, share, back).

```html
<button class="size-12 flex items-center justify-center rounded-full bg-white shadow-[0_4px_12px_rgb(0,0,0,0.03)] text-[#6B5247] hover:scale-105 transition-transform">
  <iconify-icon icon="solar:[icon-name]-bold-duotone" class="size-6"></iconify-icon>
</button>
```

### button-utility

The vertical icon-over-label utility button (e.g. play-controls in a row).

```html
<button class="flex-1 py-5 rounded-full bg-white shadow-[0_8px_20px_rgb(0,0,0,0.04)] flex flex-col items-center justify-center gap-1 hover:scale-105 active:scale-95 transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-[#EC5E3A] size-6"></iconify-icon>
  <span class="text-[10px] font-black uppercase tracking-widest text-[#9E857B]">[LABEL]</span>
</button>
```

### input-text

```html
<input type="text" placeholder="[Placeholder]" class="w-full px-6 py-4 rounded-full bg-white shadow-[0_4px_12px_rgb(0,0,0,0.03)] text-[#4A3831] font-[Nunito_Sans] font-bold text-sm placeholder:text-[#9E857B] focus:outline-none focus:ring-2 focus:ring-[#EC5E3A]" />
```

### chip + chip-active (segmented control pattern)

```html
<div class="flex gap-2 bg-[#F0E6D6]/30 p-1.5 rounded-full">
  <button class="flex-1 py-2.5 px-4 rounded-full bg-white shadow-sm text-[#EC5E3A] font-bold text-sm">[Active]</button>
  <button class="flex-1 py-2.5 px-4 rounded-full text-[#9E857B] font-bold text-sm hover:text-[#4A3831] transition-all">[Inactive]</button>
</div>
```

### chip-status

The streak / status pill with leading icon + tracked-out label.

```html
<div class="px-5 py-2.5 bg-white rounded-full flex gap-2 items-center shadow-[0_4px_12px_rgb(0,0,0,0.03)]">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-[#EC5E3A] size-[18px]"></iconify-icon>
  <span class="font-black text-xs tracking-[0.15em] text-[#4A3831] uppercase">[STATUS LABEL]</span>
</div>
```

For a low-attention tonal variant, swap `bg-white` for `bg-[#EC5E3A]/10` and `text-[#4A3831]` for `text-[#EC5E3A]`.

### badge-circle

A 40×40 circular icon container used inside list rows and stat tiles. The fill is the categorical color at 10% alpha; the icon is the same color at full saturation.

```html
<div class="size-10 rounded-full bg-[#EC5E3A]/10 flex items-center justify-center text-[#EC5E3A]">
  <iconify-icon icon="solar:[icon-name]-bold-duotone" class="size-[18px]"></iconify-icon>
</div>
```

The square-radius variant (`rounded-2xl` instead of `rounded-full`) is used inside stat tiles where the icon container should feel like a small inset card rather than a token.

### list-row

```html
<div class="bg-white rounded-[32px] p-5 shadow-[0_4px_20px_rgb(0,0,0,0.03)] flex gap-2 justify-between items-center">
  <div class="flex items-center gap-4">
    <div class="size-10 rounded-full bg-[#EC5E3A]/10 flex items-center justify-center text-[#EC5E3A]">
      <iconify-icon icon="solar:[icon-name]-bold-duotone" class="size-[18px]"></iconify-icon>
    </div>
    <div>
      <p class="font-[Nunito_Sans] font-bold text-sm text-[#4A3831]">[Row title]</p>
      <p class="text-[10px] text-[#9E857B] font-bold uppercase tracking-wider">[Metadata]</p>
    </div>
  </div>
  <span class="font-[Work_Sans] font-black text-sm text-[#4A3831]">[Value]</span>
</div>
```

### progress-bar

A vertical progress bar used inside bar-chart tiles (each "bar" is a full-height pill track with a fill anchored to the bottom):

```html
<div class="w-full bg-[#F0E6D6]/40 rounded-full h-full relative overflow-hidden">
  <div style="height: 65%" class="absolute bottom-0 left-0 right-0 bg-[#EC5E3A] rounded-full"></div>
</div>
```

For a horizontal progress bar, swap height/width and anchor the fill to the left.

### progress-ring

```html
<svg viewBox="0 0 100 100" class="w-full h-full -rotate-90">
  <circle r="46" cx="50" cy="50" class="stroke-[#F0E6D6]/30 fill-none" stroke-width="5" />
  <circle r="46" cx="50" cy="50" class="stroke-[#EC5E3A] fill-none transition-all duration-1000" stroke-width="7" stroke-linecap="round" stroke-dasharray="289.02" stroke-dashoffset="72.25" />
</svg>
```

The fill stroke is *thicker* than the track stroke (7 vs 5) — this is a deliberate visual move that gives the progress fill more presence than the track.

### top-app-bar

A flat header — no background fill, no border, just centered content with `{spacing.gutter}` padding. Often holds an icon button on the right and either a status pill (centered) or a screen title (left-aligned headline).

```html
<header class="w-full max-w-md p-6 flex justify-between items-center">
  <h2 class="font-[Work_Sans] font-black text-xl tracking-tight text-[#4A3831]">[Screen title]</h2>
  <button class="size-12 flex items-center justify-center rounded-full bg-white shadow-[0_4px_12px_rgb(0,0,0,0.03)] text-[#6B5247]">
    <iconify-icon icon="solar:[icon-name]-bold-duotone" class="size-6"></iconify-icon>
  </button>
</header>
```

### tab-bar (floating pill)

A signature element. The bottom navigation is a floating pill, NOT a docked bar.

```html
<nav class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[calc(100%-3rem)] max-w-sm bg-white/90 backdrop-blur-xl border border-[#F0E6D6]/50 rounded-full shadow-[0_12px_40px_rgb(0,0,0,0.1)] px-4 py-3 flex items-center justify-around z-50">
  <button class="flex flex-col items-center gap-1 group flex-1">
    <iconify-icon icon="solar:[icon-name]-bold-duotone" class="size-6 text-[#EC5E3A]"></iconify-icon>
    <span class="text-[10px] font-black uppercase tracking-widest text-[#EC5E3A]">[Tab]</span>
  </button>
  <button class="flex flex-col items-center gap-1 group flex-1">
    <iconify-icon icon="solar:[icon-name]-bold-duotone" class="size-6 text-[#9E857B] opacity-50 group-hover:opacity-100"></iconify-icon>
    <span class="text-[10px] font-black uppercase tracking-widest text-[#9E857B] opacity-50 group-hover:opacity-100">[Tab]</span>
  </button>
</nav>
```

The active state is signaled by full-saturation brand-orange on both icon and label; inactive items drop to muted-brown at 50% opacity. No underline, no indicator dot — just color and opacity.

### Composition recipes (not separate components)

- **Stat tile** = `card` with reduced padding (`p-5`), a `badge-circle` (or square-radius variant) at the top, then a `{typography.metric-lg}` value and a `{typography.label-uppercase-sm}` caption stacked below. Used in 2-column grids.
- **Hero metric card** = `card-elevated` containing a mascot image at left and a stat block (eyebrow + big number + delta indicator) at right.
- **Section header** = horizontal flex row with `{typography.headline-sm}` on the left and a `button-text` (uppercase, tracked) on the right ("VIEW ALL").
- **Bar-chart tile** = `card` containing a header row (title + segmented `chip`/`chip-active`) and a flex row of 7 vertical `progress-bar` tracks with day-of-week labels below.

## Iconography

**Set**: `solar` (Iconify). The aesthetic is committed to this set — the rounded, slightly chunky terminals match the pillow-rounded UI shapes and would clash with sharper sets like Lucide or Tabler.

**Variant convention**: `bold-duotone` is the default for navigation, status, and decorative icons (it gives the warm two-tone treatment that matches the warm palette). `bold` is used inside the primary CTA and for play-control glyphs where a single-tone heavier mark reads better at smaller scale. Active and inactive states are conveyed through *color and opacity*, not by switching variants.

Icon sizing: 18px (size-[18px]) inside small badges, 24px (size-6) as the default in chrome and tab bars, occasionally 28–32px for utility-button icons. Always sized via Tailwind classes, never via `width`/`height` attributes.

## Illustration & Imagery

**Style / Technique**: Hand-drawn 2D vector character illustrations rendered as flat-color shapes with strong dark outlines, soft cel-shaded shadow patches, and minimal interior linework. The look is "warm storybook character sticker" — the same family as modern children's-book digital illustration. Subjects (a `[SUBJECT]` placeholder fills in the brief's mascot or hero figure) are anthropomorphized with oversized expressive eyes, a small mouth, and squat compact bodies. The treatment is consistent: a single character at a time, posed centered, rendered at sticker-scale on a transparent background.

**Palette**: 3–5 colors per illustration drawn from `{colors.illus-tomato}` (warm vermillion red-orange) and `{colors.illus-leaf}` (sage/forest green) as primary fills, with `{colors.illus-tomato-shadow}` and `{colors.illus-leaf-shadow}` as cel-shaded shadow tones, and `{colors.illus-outline}` (deep brown, NOT pure black) for all outlines. Whites of eyes are off-white. The illustration palette stays warm and natural — NEVER cool blues, purples, or neon colors.

**Edge treatment**: Strong consistent outlines in `{colors.illus-outline}`, ~3% of the canvas width — chunky enough to read at small sizes. Outlines are slightly imperfect / hand-drawn rather than mathematically uniform, giving a "drawn with a brush pen" feel. Internal forms (eye sockets, mouth, body segments) also outlined.

**Shading & light**: Cel-shaded with one or two flat shadow patches per shape, no gradients, no airbrush. A small soft highlight may sit on the upper-left of the main body (a single off-white blob). A faint cast shadow oval sits beneath the character's feet.

**Composition & framing**: Single character, centered in a square canvas, occupying ~70–80% of the canvas height with generous transparent margin around all sides. The character faces forward or three-quarter front. Pose is expressive (waiting, focused, teaching, etc.) and tells a one-emotion story.

**Background within the illustration**: Transparent. Always. The character is a sticker that sits on the page surface or inside a card.

**Container styling**: No frame. The image has no container border, no card around it, no clip-path. It sits directly on the page or card surface as a transparent PNG. When placed in a hero composition, it may have a soft circular `bg-primary/10` blur blob sized 75–100% of the image, positioned behind it (`absolute inset-0 ... blur-3xl`), as an atmospheric backing — but this blob is a chrome element, not part of the image.

**CSS treatment on the `<img>` element**: `object-contain` always. No `mix-blend-mode`. No `opacity` reduction. No filters except `drop-shadow` (see below).

**Box-shadow on the image**: A soft `drop-shadow` is applied directly to the `<img>` element (not to a container) to give the sticker subtle physical presence:
- Default: `drop-shadow-md` or `drop-shadow-xl`.
- Hero contexts: `drop-shadow-[0_15px_15px_rgba(224,49,49,0.15)]` — a faintly orange-tinted drop-shadow that ties the character to the brand color.

**Aspect ratio rule**: Square canvas (1:1). Preserve the source aspect; do not crop. Sized via height/width classes (e.g. `size-40`, `w-56 h-56`, `w-24 h-24` depending on context).

**Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel-only, NOT line-art-only without fills, NOT pixel art, NOT realistic anatomy, NOT cool-toned, NOT minimalist geometric (these characters are expressive and detailed, not abstract glyphs).

**Style recipe prompt**:

> *A hand-drawn 2D vector cartoon illustration of [SUBJECT], rendered as a centered character sticker on a transparent background. Warm storybook style: chunky uneven dark-brown outlines, flat color fills in a warm palette (vermillion red-orange, sage green, off-white, deep brown outline), one or two flat cel-shaded shadow patches per shape — no gradients, no airbrush. Oversized expressive eyes with small light reflections, a small simple mouth, squat compact body. A soft off-white highlight on the upper left of the main body. A faint soft oval cast shadow beneath the feet. Square 1:1 canvas, character occupies 70–80% of canvas height, generous transparent margin around all sides. NOT 3D, NOT claymation, NOT photoreal, NOT line-art-only, NOT pixel-art, NOT cool-toned.*

## Hierarchy & Emphasis

The most-emphasized element on every screen is the **central numerical display or the mascot illustration** — both render at hero scale (~72–88px for numerals, ~160–224px for the mascot). Everything else steps down sharply.

Saturated brand-orange `{colors.primary}` is reserved for: (1) the primary CTA fill, (2) active state text/icons, (3) progress fills, (4) the colon punctuation inside hero numerals at 30% opacity, (5) status pill leading icons. Never as a card background. Never as body text.

Tracked-out uppercase labels (`{typography.label-uppercase-*}`) always whisper — they're black-weight but small, in muted-brown, with heavy letter-spacing. The whisper IS their job: they identify what a number means without competing with the number itself.

Body text in `{colors.on-surface}` at Bold 700 is the workhorse; metadata drops to `{colors.on-surface-muted}` at Black 900 uppercase. There's no "regular weight prose" in this aesthetic — every text element is committed to a specific weight role.

## Distinctive Details

1. **The atmospheric blur blob** — every screen has at least one large circular `blur-[100px]` div in the brand-orange family (or a categorical color) sitting offscreen at a corner. It carries no information; it adds warm color glow to the cream surface and ties the screen to the brand. Always `pointer-events-none`. Always behind content (`-z` or first-in-DOM with `relative` content above).
2. **The opacity-30 colored separator inside hero numerals** — when displaying any compound numeric ("HH:MM", "X/Y", "X.Y"), the separator character is wrapped in a span with `opacity-30 text-primary mx-1` (or `mx-2` for larger sizes). This single typographic move makes every hero numeral feel like part of the same family.
3. **The colored drop-shadow on the primary CTA AND the mascot illustration** — both elements get `rgba(224,49,49,0.X)` tinted shadows that bleed warm orange into the cream beneath them. This is the only chromatic shadow treatment in the system; everything else uses neutral `rgba(0,0,0,0.0X)`.

## Do's and Don'ts

### Do

- Stack white-on-cream surfaces; let the cream `{colors.surface}` be visible between cards as the breathing space.
- Use `{rounded.full}` on every button, input, chip, and status indicator without exception.
- Pair every hero numeric with an opacity-30 brand-orange separator and tracked-out uppercase caption beneath.
- Float the bottom tab bar with margin on all sides; never dock it to the screen edge.
- Reserve brand orange for the single primary action, active state, and progress fill on each screen.
- Render mascot illustrations as transparent-background stickers with a soft drop-shadow, sized 40–60% of the available width in hero contexts.
- Use `bold-duotone` solar icons as the default; switch to `bold` only inside the primary CTA and play-control glyphs.

### Don't

- Don't use brand orange as a card background, a body-text color, or a large chrome surface fill. White cards with orange accents only.
- Don't use pure black anywhere — text is `{colors.on-surface}` warm espresso, outlines in illustrations are `{colors.illus-outline}` deep brown.
- Don't introduce sharp corners, hairline-thin borders, or rectangular non-pill buttons. Everything is generously rounded.
- Don't reduce font weight to communicate hierarchy — every text element is Bold 700 or Black 900. Use size and color instead.
- Don't compress letter-spacing on the uppercase labels; the +0.15em–0.2em tracking IS the aesthetic. Tight uppercase looks wrong here.
- Don't put the mascot inside a clipped circle, framed card, or shaped container. It is always a transparent sticker on the surface.
- Don't add cool blues, purples, or neon colors to illustrations. The illustration palette is warm-only.
- Don't let `illus-*` colors leak into UI chrome (icons, buttons, text). Chrome stays in cream/white/tomato/beige/espresso.
- Don't render hero numerals in anything but Work Sans Black 900 with tabular-nums and tight tracking.
- Don't add a header background fill or border — the top app bar is always flat-on-cream.