Cream Storybook DESIGN.md

---
version: 1
name: Cream Storybook Mobile
colors:
  primary: "#FF6B6B"
  on-primary: "#FFFFFF"
  secondary: "#4ECDC4"
  on-secondary: "#FFFFFF"
  accent: "#FFE66D"
  on-accent: "#2D3436"
  surface: "#FAF5EB"
  surface-alt: "#FFFFFF"
  surface-muted: "#F0E6D6"
  on-surface: "#2D3436"
  on-surface-variant: "#636E72"
  border: "#EBDCC7"
  illus-coral: "#FF6B6B"
  illus-teal: "#4ECDC4"
  illus-butter: "#FFE66D"
  illus-lilac: "#C3AED6"
  illus-charcoal: "#2D3436"
typography:
  display-xl:
    fontFamily: Nunito Sans
    fontSize: 128px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.04em
  display-md:
    fontFamily: Nunito Sans
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Nunito Sans
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.01em
  body-md:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  label-md:
    fontFamily: Nunito Sans
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Nunito Sans
    fontSize: 11px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 0.12em
  tab-label:
    fontFamily: Nunito Sans
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
rounded:
  sm: 12px
  md: 24px
  lg: 32px
  xl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 20px
  section-gap: 32px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a (filled glyphs)
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    height: 48px
    paddingX: 20px
    gap: 8px
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    height: 40px
    paddingX: 16px
    gap: 8px
  icon-button:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    size: 48px
    iconSize: 24px
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
  chip-active:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
  badge-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "#FFFFFF"
    borderWidth: 2px
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
  metric-tile:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: 20px
    textColor: "{colors.on-surface}"
  list-row:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: 20px
    textColor: "{colors.on-surface}"
  top-app-bar:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    paddingX: "{spacing.gutter}"
    paddingY: "{spacing.md}"
  search-bar:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 10px
  tab-bar:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: 40px
    padding: 10px
    height: 76px
  tab-item-active:
    backgroundColor: "rgba(78,205,196,0.1)"
    textColor: "{colors.secondary}"
    typography: "{typography.tab-label}"
    rounded: 32px
    iconSize: 28px
  tab-item-inactive:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 28px
---

# Cream Storybook Mobile

## Overview

**Warm, friendly, picture-book.** A soft cream canvas plays host to chunky white cards, oversized black-weight numerals, and a saturated trio of coral / teal / butter that does all the emotional work. The aesthetic feels like a children's storybook reimagined as a productivity tool — round corners on everything, soft pastel atmospheric blurs floating behind the content, and cheerful illustrated focal images anchoring each screen.

The personality is **optimistic, tactile, and slightly playful**, but disciplined: white card surfaces give the content room to breathe against the cream background, the type system is severe in its weight (almost everything is bold or black), and shadows are diffuse and gentle rather than sharp. The result reads as approachable without sliding into childish.

Reference points: the warm-cream paper feel of contemporary lifestyle apps, the chunky pill-and-radius vocabulary of consumer-friendly fintech, the saturated-trio mood of a paper-cut illustration book.

## Colors

The palette runs in three lanes that must not blur together.

**Chrome lane.** `{colors.surface}` is the warm cream page; `{colors.surface-alt}` is pure white and belongs to every elevated surface (cards, tiles, tab bar, icon buttons, search pill). `{colors.on-surface}` is a soft near-black for primary text; `{colors.on-surface-variant}` carries metadata and inactive labels. `{colors.border}` is a sandy hairline that wraps every card.

**Brand / accent lane.** Three saturated personalities split the work:
- `{colors.primary}` (coral) — the warm action color: primary CTA fills, active tab on the home screen, "hot" end of any spectrum, hero-emphasis numerals.
- `{colors.secondary}` (teal) — the cool counterweight: search-and-locate icons, navigation tab active state, "cool" end of any spectrum.
- `{colors.accent}` (butter) — the highlight: ambient glow halos behind hero illustrations, gradient midpoints, optional category fills.

A fourth illustration-only token, `{colors.illus-lilac}`, is permitted as a categorical accent (third or fourth chart series) but must never appear in chrome.

**Atmospheric lane.** The same three brand colors reappear at very low opacity (≈10%) as huge blurred blobs (`blur-[80px]`) parked off-screen behind the content. They're decorative noise, never carry meaning, and never live inside cards.

**Hard rules.** Coral never becomes a card background. Teal never becomes body-text color. Cream never appears inside a card. The illustration palette never bleeds into UI chrome — illustrations may use any `illus-*` color, but interactive text, buttons, and borders draw only from the chrome / brand lane.

## Typography

One workhorse family, **Nunito Sans**, carries the entire UI in two extreme weights: **700 (Bold)** for body, labels, and metadata; **900 (Black)** for every headline, numeral, and stat. There is no Regular, no Medium, no Light. The weight contrast IS the hierarchy.

A serif (`Playfair Display`) and a mono (`JetBrains Mono`) are declared as fallbacks but go unused in the captured screens — keep them defined; reach for them only if a brief explicitly calls for editorial accent type.

Role guide:
- `{typography.display-xl}` — hero numerals (counters, scores, large stats). Tracking goes negative (`tracking-tighter`) to keep the digits hugged together.
- `{typography.display-md}` — primary screen title when a screen has a real "page header" (e.g., over a hero image).
- `{typography.headline-md}` — card titles and row primary text. Always weight 900.
- `{typography.headline-sm}` — chip pill content with location/identifier feel.
- `{typography.body-md}` — supporting paragraph copy and search-pill placeholder. Weight 700.
- `{typography.body-sm}` — date subtitles, secondary metadata under a row title.
- `{typography.label-md}` — button labels and inline pill values (e.g., a value tag on a map).
- `{typography.label-uppercase}` — section eyebrows / scale captions. Always uppercase, 900 weight, +0.12em tracked, ~11px. The tracked-out smallness is a load-bearing visual choice — don't substitute a normal label here.
- `{typography.tab-label}` — bottom-tab caption, 11px / 700.

Numerals are **not** tabular; the family's proportional digits are part of the friendly feel.

## Spacing & Layout

A relaxed, airy rhythm. `{spacing.gutter}` (24px) is the screen-edge inset on every screen. Cards get `{spacing.card-padding}` (20px) inside. Vertical gaps between distinct cards land at `{spacing.md}` (16px); section breaks at `{spacing.xl}` (32px).

Density is **medium-low** — there's deliberate empty cream around hero elements. Bottom navigation always floats inset from all three edges (left/right/bottom each 24px), reserving roughly 112px of bottom safe-zone above it for content.

## Elevation & Depth

Three coexisting depth tools, layered from background to foreground:

1. **Atmospheric blobs.** Huge, soft, low-opacity color circles (`w-48` to `w-64`, `blur-[80px]`, opacity ~10%) sit behind everything at `-z-10`. They give the cream surface a faint chromatic hum.
2. **White cards with hairline + soft shadow.** Every elevated surface combines a 1px `{colors.border}` outline with a wide diffuse shadow: `shadow-[0_8px_30px_rgb(0,0,0,0.06)]` for cards and `shadow-[0_20px_40px_rgb(0,0,0,0.1)]` for the floating tab bar. The hairline does most of the separation work; the shadow only softens the lift.
3. **Pulsing accent halo.** Behind a focal illustration, a single colored disc (`bg-accent rounded-full blur-[60px] opacity-40 animate-pulse`) creates a glow that the foreground image floats over.

No hard drop shadows, no inner shadows, no neumorphism. Buttons rely on color saturation for prominence, not shadow depth.

## Shapes

This aesthetic is unapologetically round. Defaults:
- `{rounded.full}` — every button, every chip, every icon button, every pill badge, every avatar-sized icon container.
- `{rounded.xl}` (40px) — the floating bottom tab bar and the largest hero containers.
- `{rounded.lg}` (32px) — standard cards and list rows.
- `{rounded.md}` (24px) — info banners and inset sub-cards.
- `{rounded.sm}` (12px) — reserved for inline hairline accents (small inline tags, progress-bar fills).

A signature move: full-bleed image containers use a large bottom-only radius (e.g., `rounded-b-[3rem]`) to "drop" the hero into the cream below.

## Components

### card / metric-tile / list-row

```html
<div class="bg-white rounded-[2rem] p-5 shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-[#EBDCC7]/50">
  <h3 class="font-black text-xl text-[#2D3436]">[Card title]</h3>
  <p class="text-sm font-bold text-[#636E72] mt-1">[Supporting line]</p>
</div>
```

A vertical "stat tile" variant centers a coloured icon disc (`w-12 h-12 rounded-full bg-{accent}/20`) above a black-weight value and an uppercase tracked label.

### button-primary

```html
<button class="h-12 px-5 rounded-full bg-[#FF6B6B] text-white font-bold text-[13px] flex items-center justify-center gap-2 shadow-sm">
  <iconify-icon icon="solar:[icon-name]-bold" width="20" height="20"></iconify-icon>
  [Label]
</button>
```

### icon-button (top-bar circular)

```html
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-white shadow-sm text-[#4ECDC4]">
  <iconify-icon icon="solar:[icon-name]-bold" width="24" height="24"></iconify-icon>
</button>
```

Coral text-color is reserved for the active / primary action; teal is the resting state for secondary chrome icons.

### chip / chip-active

```html
<button class="bg-white px-4 py-2 rounded-full shadow-lg border border-[#EBDCC7] font-bold text-sm text-[#FF6B6B] flex items-center gap-2">
  <span class="w-2 h-2 rounded-full bg-[#FF6B6B] animate-pulse"></span>
  [Active filter]
</button>
<button class="bg-white/80 backdrop-blur px-4 py-2 rounded-full shadow-lg border border-[#EBDCC7] font-bold text-sm text-[#636E72]">
  [Inactive filter]
</button>
```

The active chip is signalled by a saturated text color and a small pulsing dot — never by a filled background.

### search-bar (inline pill in top-bar)

```html
<div class="flex items-center gap-2 bg-white px-5 py-2.5 rounded-full shadow-lg border border-[#EBDCC7]/50">
  <iconify-icon icon="solar:magnifer-linear" class="text-[#4ECDC4]" width="20" height="20"></iconify-icon>
  <span class="font-bold text-sm">[Placeholder]</span>
</div>
```

### badge-pill (saturated value tag, intended for placement over imagery)

```html
<div class="bg-[#FF6B6B] text-white font-black px-3 py-1 rounded-full text-sm shadow-lg border-2 border-white">
  [Value]
</div>
```

The white 2px border around a saturated pill is the distinctive treatment — it makes the badge "punch out" of any photographic / illustrated background.

### list-row (data row with icon + value spread)

```html
<div class="bg-white rounded-3xl p-5 flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-[#EBDCC7]/50">
  <div class="flex flex-col">
    <span class="font-black text-xl">[Primary]</span>
    <span class="text-sm font-bold text-[#636E72]">[Subtitle]</span>
  </div>
  <div class="flex items-center gap-3">
    <span class="font-black text-xl">[Value A]</span>
    <div class="h-1.5 w-16 bg-[#F0E6D6] rounded-full overflow-hidden relative">
      <div class="absolute inset-y-0 left-2 right-2 bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] rounded-full"></div>
    </div>
    <span class="font-black text-xl text-[#636E72]/60">[Value B]</span>
  </div>
</div>
```

### top-app-bar (three-cluster)

```html
<header class="flex justify-between items-center px-6 pb-4 pt-8">
  <button class="w-12 h-12 flex items-center justify-center rounded-full bg-white shadow-sm text-[#4ECDC4]">
    <iconify-icon icon="solar:[icon-name]-bold" width="24" height="24"></iconify-icon>
  </button>
  <div class="flex items-center gap-2 bg-white/60 backdrop-blur-md px-4 py-2 rounded-full shadow-sm border border-[#EBDCC7]/50">
    <iconify-icon icon="solar:[icon-name]-bold" class="text-[#FF6B6B]" width="20" height="20"></iconify-icon>
    <span class="font-bold text-base text-[#2D3436]">[Context label]</span>
  </div>
  <button class="w-12 h-12 flex items-center justify-center rounded-full bg-white shadow-sm text-[#4ECDC4]">
    <iconify-icon icon="solar:[icon-name]-bold" width="24" height="24"></iconify-icon>
  </button>
</header>
```

Pattern: two circular icon buttons book-ending a translucent context pill in the center.

### tab-bar (floating)

```html
<nav class="fixed bottom-6 left-6 right-6 bg-white rounded-[2.5rem] p-2.5 flex justify-between items-center shadow-[0_20px_40px_rgb(0,0,0,0.1)] border border-[#EBDCC7]/60 z-50">
  <button class="flex-1 flex flex-col items-center py-3.5 text-[#FF6B6B] bg-[#FF6B6B]/10 rounded-[2rem]">
    <iconify-icon icon="solar:[icon-name]-bold" width="28" height="28"></iconify-icon>
    <span class="text-[11px] font-bold mt-1.5">[Label]</span>
  </button>
  <button class="flex-1 flex flex-col items-center py-3.5 text-[#636E72] hover:text-[#4ECDC4]">
    <iconify-icon icon="solar:[icon-name]-bold" width="28" height="28"></iconify-icon>
    <span class="text-[11px] font-bold mt-1.5">[Label]</span>
  </button>
</nav>
```

The active tab gets a softly tinted pill background (10% of either coral or teal — the screen's "current section" color) and matching text color. Inactive tabs are muted gray text.

## Iconography

Iconset: **Solar**, bold variant. Solar's friendly, slightly chunky filled glyphs match the round, picture-book mood — line variants would feel too clinical. The one acceptable line-variant exception is a search magnifier inside an inline search pill (the line magnifier reads more clearly at small sizes).

Default size: 24px in chrome / top-bar contexts; 28px in tab-bar and inside category icon discs; 20px inline within pills.

Active vs inactive: same glyph variant for both; the state is signalled by **color** (saturated brand color when active, muted gray when inactive) and an optional 10%-tint pill background, never by a fill/line swap.

Icon-color pairings (rule of thumb): the primary CTA / "current" action uses coral; navigation and information chrome uses teal; warm-emphasis icons use butter; categorical fourth slots use lilac.

## Illustration & Imagery

Illustrations are this aesthetic's emotional center. They are **flat, bright, and saturated** — picture-book stickers, not paper-textured collage. Crisp clean color edges, friendly kawaii faces, no atmosphere or grain.

- **Style / Technique:** Flat 2D vector illustration with bright saturated fills and crisp clean edges. Cheerful and sticker-like — every shape reads as a single solid color. Forms are simplified, rounded, and slightly chunky. The dominant impression is **flat color**, not texture. Any incidental matte grain that sneaks in should be very faint and never load-bearing.
- **Palette:** **Bright and saturated, not pastel.** 3–6 colors per illustration drawn from `{colors.illus-coral}`, `{colors.illus-teal}`, `{colors.illus-butter}`, `{colors.illus-lilac}`, `{colors.illus-charcoal}`, plus broken white. When a subject calls for a rainbow / spectrum, the full chunky-band set is allowed at high saturation: red, orange, yellow, green, blue, purple. Avoid desaturated pastel tints; the colors should pop.
- **Edge treatment:** Two acceptable modes; **pick one per illustration and stay in it**.
  - (a) **Filled-sticker mode** (dominant) — no outlines. Color shapes touch directly with crisp clean edges. This is how characters, scenes, and most subjects render.
  - (b) **Outline-only doodle mode** — a single uniform charcoal `{colors.illus-charcoal}` outline at medium weight (≈6–8px on a 1024px canvas), interior is pure white or near-empty, no inner detail outlines, no double strokes. Reserved for line-art "sticker" subjects (e.g. transit / vehicle motifs with motion paths).
- **Shading & light:** Fully flat. No gradients, no airbrush, no cast shadows, no specular highlights. At most one optional tonal step inside a shape (e.g. a slightly darker rim on a sun's body) but most shapes use a single flat color and stop.
- **Character treatment** (when a subject can be anthropomorphized — celestial bodies, clouds, vehicles, abstract forms): minimal kawaii face — two small black oval eyes, tiny upward-curved black smile, two soft pink cheek dots. Nothing else. No nose, no eyebrows, no inner mouth detail. The face occupies a small central region of the form.
- **Composition & framing:** Subject is centered, occupies 60–80% of the canvas, generous breathing room on all sides. Characters face the viewer head-on or 3/4 forward, never in profile. Wide-scene illustrations stack chunky flat color regions (bands, layered shapes, central form with peripheral elements) on a single solid background.
- **Background within the illustration:** Either fully transparent (for hero character cut-outs) or a single flat solid color field (a saturated teal sky-color is the canonical scene background, sometimes broken white, sometimes cream). **Never a gradient, never atmospheric layers, never sky-to-ground transitions.**
- **Container styling:** Hero character cut-outs sit **free-form on the page surface with NO frame** — no card, no border, no padding container. Alpha edges feather directly into the cream page. An optional `blur-[60px]` accent-colored glow disc at ~40% opacity may sit behind a hero character. Wide-scene illustrations are placed inside a full-bleed top region with `rounded-b-[3rem]` (large bottom-corner radius only), no border, no internal padding.
- **CSS treatment on the `<img>`:** Hero characters use `object-contain` with `drop-shadow-2xl`. Full-bleed scenes use `object-cover w-full h-full`. **No `mix-blend-mode`, no opacity reduction, no CSS filters** — the colors must render at full saturation as authored.
- **Box-shadow on the image or its frame:** Hero character cut-outs use Tailwind `drop-shadow-2xl` directly on the `<img>` so the shadow follows the alpha edge. Full-bleed scene frames use the parent container's `shadow-lg`. No additional shadow on images inside a framed container.
- **Aspect ratio rule:** Hero character cut-outs are square (1:1), preserve source ratio, never crop. Full-bleed scene illustrations fill a 3:2 to 4:3 region with `object-cover`; cropping to fill is acceptable.
- **Anti-references:** NOT 3D, NOT claymation, NOT photographic, NOT pastel-watercolor, NOT grainy paper-texture, NOT collage-with-visible-cuts, NOT glossy-vector-with-gradients, NOT isometric, NOT pixel art, NOT desaturated, NOT outline-and-flat-fill cartoon (Solar-icon style — too small/iconic).
- **Style recipe prompt:**

  > _A cheerful flat illustration of [SUBJECT], rendered as bright saturated 2D vector art with crisp clean edges and fully flat color fills — sticker-like, picture-book friendly. Limited palette of 3–6 highly saturated colors drawn from coral red, butter yellow, teal, soft lilac, broken white, and (when the subject calls for a spectrum) chunky rainbow bands of red / orange / yellow / green / blue / purple at full saturation. Forms are simplified, rounded, slightly chunky. If the subject can be anthropomorphized, give it a minimal kawaii face: two small black oval eyes, a tiny upward-curved black smile, two soft pink cheek dots — nothing else. Either pure filled-sticker mode (no outlines, crisp color edges touching) OR outline-only doodle mode (single uniform charcoal outline of medium weight, white interior, no inner detail) — pick one mode and stay consistent. Fully flat fills, no gradients, no airbrush, no cast shadows, no specular highlights, at most one optional tonal step per shape. Subject centered, 60–80% of the canvas, generous breathing room. Background is either fully transparent or a single flat saturated solid color (saturated teal preferred for scenes). NOT 3D, NOT photoreal, NOT claymation, NOT pastel-watercolor, NOT grainy paper-texture, NOT glossy-with-gradients, NOT isometric, NOT desaturated._

## Hierarchy & Emphasis

Weight and size do the heavy lifting; color confirms. The largest 900-weight numeral on a screen is always the answer to the screen's question. Saturated brand color appears on at most one or two interactive elements per screen — primary CTA and active tab. Everything else uses the chrome lane (white surfaces, border hairlines, gray metadata) so the saturated accents read instantly. Metadata always whispers: 12–14px, `{colors.on-surface-variant}`, weight 700.

## Distinctive Details

1. **The pulsing halo.** Hero focal illustrations are backed by a large blurred accent-colored disc set to ~40% opacity with `animate-pulse`. The illustration sits crisp on top with `drop-shadow-2xl`. This treatment is reusable behind any single focal subject.
2. **Bordered pill markers.** Saturated pills (badges, status tags, value markers) get a 2px **white** border, not a darker brand-color border. The white ring lets a coral or teal pill punch cleanly off any background — photo, illustration, or cream.
3. **Hairline + diffuse shadow on white.** Every elevated surface stacks a sandy 1px hairline border AT 50% opacity with a wide soft `0 8px 30px rgba(0,0,0,0.06)` shadow. The combination reads as "card lifted off paper" without being heavy.
4. **Atmospheric blobs.** Three off-canvas, low-opacity blurred color discs (one of each brand color) sit behind every screen's content at `-z-10`. They do nothing functional but tint the cream and unify the system.

## Do's and Don'ts

### Do

- Use Nunito Sans 900 for every numeral, every card title, every screen title.
- Wrap every elevated white surface in a 1px sandy hairline AND a soft wide shadow.
- Reserve coral for the single primary action; let teal carry navigation and information chrome.
- Float the bottom tab bar inset 24px from all three edges with a 40px corner radius.
- Use the white 2px border on saturated pill badges and value markers placed over imagery.
- Place hero illustrations free-form on cream with a pulsing accent halo behind them.
- Keep illustration palette to 3–5 colors and stay flat; pick filled-or-outlined and commit.

### Don't

- Don't use coral or teal as a card background — they belong to interactive accents only.
- Don't drop the cream surface inside a card; cards are always white.
- Don't reach for medium or regular weights — the system is bold/black only.
- Don't add hard drop shadows, inner shadows, or neumorphic effects.
- Don't outline a saturated pill with a darker version of itself; the border is white.
- Don't render illustrations in 3D, claymation, photoreal, or glossy vector.
- Don't let the illustration palette bleed into UI chrome (text, borders, buttons).
- Don't describe layout-specific patterns as components — illustration tiles, hero stacks, and timelines are layout decisions for the implementer.
- Don't use Solar line icons in chrome (except a small magnifier in a search pill); default is bold.