designmd-forge 1.2.0

package/dist/data/designs/ios-noom.md

@@ -0,0 +1,404 @@
+# Design System Inspiration of Noom (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Noom is a behavior-change app dressed as a friendly coach, and the design reflects that the entire time. The aesthetic is warm, optimistic, and conversational — closer to a supportive messaging app than a clinical calorie tracker. The light canvas is a soft near-white (`#FBFBFD`); the dark canvas is a comfortable `#121212`. On top of that calm field, Noom places two unmistakable signature elements: the **daily psychology lesson card** and the **food log driven by the green / yellow / red food-color system**. Everything else — the weight graph, the coach chat, the streak chips — orbits these two.
+
+The **daily lesson card** is the emotional front door. It's a bold rounded card (20pt radius) filled with the brand's blue→teal gradient (`#2A5DF6 → #1FC29B`), carrying an uppercase eyebrow ("TODAY'S LESSON"), a punchy psychology-flavored title ("Why Willpower Is a Myth"), a thin white progress bar, and a white pill CTA ("Continue lesson →"). It is deliberately the brightest, most saturated thing on the screen because Noom's whole thesis is that *learning the psychology* — not white-knuckling a diet — is what changes behavior. The card is a daily ritual.
+
+The **food-color system** is the single most recognizable Noom mechanic and it must be treated as sacred. Every food logged is classified Green, Yellow, or Red by caloric density: Green (`#34C759`) = lowest density, eat the most; Yellow (`#FFC531`) = moderate, eat in balance; Red (`#FF5A52`) = highest density, eat mindfully. These three colors appear as the leading dot on every food row, as a category pill, and as a stacked horizontal "today's food" bar that shows the green/yellow/red ratio at a glance. Users are trained to *read food by color* — so these hues are fixed, identical in light and dark, and never repurposed for anything else in the UI.
+
+The brand palette is a confident **Noom Blue** (`#2A5DF6`) paired with a fresh **Noom Teal** (`#1FC29B`), grounded by a deep **Noom Navy** (`#0C1B4D`). Blue is the primary action color (buttons, active tab, links); teal is the positive/progress accent (weight-loss delta, goal line, secondary highlights). The coach feature gets its own warm **Coach Purple** (`#7B61FF`) so the human-coaching surface feels distinct from data surfaces.
+
+Typography is **Poppins** — a geometric humanist sans with friendly circular bowls. It's approachable and slightly playful without being childish, which matches the encouraging coach voice. Numbers (current weight, calories) are heavy (700–800); body and coach copy are regular (400) and conversational. Buttons are fully pill-shaped, reinforcing the soft, friendly, non-clinical feel.
+
+**Key Characteristics:**
+- Warm, conversational, coach-led aesthetic — supportive, never clinical
+- Soft near-white canvas (`#FBFBFD`) light / comfortable `#121212` dark
+- Daily psychology lesson card — bold blue→teal gradient hero, the emotional front door
+- Food-color system (Green `#34C759` / Yellow `#FFC531` / Red `#FF5A52`) — the signature mechanic, fixed across themes
+- Stacked food-ratio bar — green/yellow/red proportions of the day at a glance
+- Noom Blue (`#2A5DF6`) primary + Noom Teal (`#1FC29B`) progress accent + Noom Navy (`#0C1B4D`)
+- Weight graph with a teal goal line and blue trend curve
+- Coach chat surface in its own Coach Purple (`#7B61FF`) world
+- Fully pill-shaped buttons (999pt radius) — soft and friendly
+- Poppins geometric sans — heavy numerals, conversational body
+- Encouraging streak/momentum copy ("Day 24 · You're building momentum")
+- Minimal chrome — 5-tab bottom bar: Today / Learn / Log / Coach / Profile
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Noom Blue** (`#2A5DF6`): Primary buttons, active tab, links, selected states, weight trend line.
+- **Noom Blue Pressed** (`#1E47C8`): Pressed state for primary actions.
+- **Noom Teal** (`#1FC29B`): Progress/positive accent — weight-loss delta, goal line, success highlights, gradient end.
+- **Noom Navy** (`#0C1B4D`): Deep brand anchor — onboarding backgrounds, dark hero text, splash.
+
+### Canvas & Surfaces (Light — default)
+- **Canvas** (`#FBFBFD`): Primary light background — soft near-white, not pure white.
+- **Surface** (`#FFFFFF`): Cards, sheets, list backgrounds in light mode.
+- **Surface Subtle** (`#F2F3F7`): Pressed rows, segmented-control track, chip fills.
+- **Divider Light** (`#E6E7EC`): Hairline separators between food rows / sections.
+
+### Canvas & Surfaces (Dark)
+- **Dark Canvas** (`#121212`): Primary dark background.
+- **Dark Surface 1** (`#1C1C1E`): Card backgrounds (weight card, food log).
+- **Dark Surface 2** (`#262629`): Raised chips, ghost buttons, segmented track.
+- **Dark Divider** (`#2E2E31`): Hairline separators on dark.
+
+### Text
+- **Text Primary Light** (`#1A1A1F`): Headlines, weight numbers on light.
+- **Text Secondary Light** (`#6A6A70`): Metadata, body, captions on light.
+- **Text Primary Dark** (`#F0F0F2`): Headlines, numbers on dark.
+- **Text Secondary Dark** (`#9A9AA0`): Metadata, body on dark.
+- **Text Tertiary** (`#6A6A70`): Axis labels, disabled (both modes).
+
+### Food-Color System (semantic — FIXED across light & dark)
+
+| Class | Color | Pill Fill (light tint) | Meaning |
+|-------|-------|------------------------|---------|
+| Green | `#34C759` | `rgba(52,199,89,0.16)` | Lowest calorie density — eat the most |
+| Yellow | `#FFC531` | `rgba(255,197,49,0.16)` | Moderate density — eat in balance |
+| Red | `#FF5A52` | `rgba(255,90,82,0.16)` | Highest density — eat mindfully |
+
+### Coach Surface
+- **Coach Purple** (`#7B61FF`): Coach avatar ring, coach message accents, "Message coach" CTA.
+- **Coach Bubble (incoming)** (`#F2F0FF` light / `#221E3A` dark): Coach chat bubble background.
+- **User Bubble** (`#2A5DF6`): User's outgoing chat bubble (Noom Blue).
+
+### Semantic
+- **Success** (`#34C759`): Goal reached, lesson complete (same as Food Green — intentional).
+- **Error** (`#FF5A52`): Form errors, log-failure (same hue as Food Red — intentional).
+- **Warning** (`#FFC531`): Over-budget warning (same as Food Yellow — intentional).
+- **Streak Flame** (`#FF8A3D`): Streak/momentum badge accent.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Poppins` (by Indian Type Foundry / Jonny Pinhorn, Google Fonts, SIL OFL) — a geometric sans with near-circular bowls; friendly and modern, matching Noom's encouraging coach voice without feeling childish.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numerals**: Poppins 700–800 for primary stats (current weight, calories, day count). Use tabular figures on the weight readout so digits don't shift.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Poppins | 32pt | 800 | 1.15 | -0.4pt | "Today", "Progress" |
+| Greeting | Poppins | 26pt | 700 | 1.2 | -0.3pt | "Good morning, Maya" |
+| Hero Stat | Poppins | 24pt | 800 | 1.1 | -0.3pt | Current weight, calorie total |
+| Section Title | Poppins | 22pt | 700 | 1.25 | -0.2pt | "Today's lesson", "Weight" |
+| Card Title | Poppins | 18pt | 700 | 1.3 | -0.1pt | Lesson title, food card title |
+| Body | Poppins | 16pt | 400 | 1.5 | 0pt | Lesson copy, coach messages |
+| List Item | Poppins | 15pt | 600 | 1.4 | 0pt | Food row name |
+| Meta | Poppins | 14pt | 400 | 1.4 | 0pt | "Day 24 · building momentum" |
+| Tag / Eyebrow | Poppins | 12pt | 600 | 1.0 | 1.0pt | "TODAY'S LESSON" — uppercase, tracked |
+| Button | Poppins | 16pt | 700 | 1.0 | 0.1pt | Primary CTA label |
+| Pill / Category | Poppins | 11pt | 700 | 1.0 | 0.2pt | Green/Yellow/Red food pill |
+| Axis Label | Poppins | 9pt | 700 | 1.0 | 0pt | Weight-graph x ticks |
+| Tab Label | Poppins | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Conversational, not clinical**: copy reads like a supportive coach ("You're building momentum"), and the type weight stays light for prose so it feels like talking, not reading a chart.
+- **Heavy stats, light prose**: weight and calories are 700–800; lessons and coach messages are 400.
+- **Friendly geometry**: Poppins's circular bowls are the point — do not swap for a tight grotesque; the roundness signals warmth.
+- **Eyebrows are uppercase + tracked**: the small label above a lesson/section title carries 1pt tracking.
+- **Dynamic Type**: titles, greeting, hero stat, section, card title, body, list item scale; tag, pill, axis, tab labels stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Continue Lesson / Log Food)**
+- Shape: Full pill, 999pt corner radius
+- Background: `#2A5DF6` (Noom Blue)
+- Text: `#FFFFFF`, Poppins 16pt weight 700
+- Padding: 15pt vertical, 30pt horizontal
+- Pressed: `#1E47C8` + scale 0.98
+- Disabled: `#E6E7EC` fill / `#2E2E31` dark, `#9A9AA0` text
+
+**Secondary / Outline Button**
+- Background: transparent
+- Text: `#2A5DF6`, Poppins 15pt weight 700
+- Border: 1.5pt `#2A5DF6`
+- Padding: 13pt vertical, 26pt horizontal
+- Corner radius: 999pt (pill)
+- Pressed: background `rgba(42,93,246,0.08)`
+
+**Ghost / Tertiary Button (Skip for now)**
+- Background: `#F2F3F7` light / `#262629` dark
+- Text: `#1A1A1F` / `#F0F0F2`, Poppins 14pt weight 600
+- No border
+- Corner radius: 999pt
+- Padding: 12pt vertical, 20pt horizontal
+
+**White Pill (on the gradient lesson card)**
+- Background: `#FFFFFF`
+- Text: `#2A5DF6`, Poppins 13pt weight 700
+- Corner radius: 999pt
+- Padding: 9pt vertical, 16pt horizontal
+- Trailing "→" arrow glyph
+
+**Text Button (See all lessons)**
+- Font: Poppins 14pt weight 700, color `#2A5DF6`
+- No background, no underline
+- Pressed: opacity 0.6
+
+### Core Atoms
+
+**Card**
+- Background: `#FFFFFF` light / `#1C1C1E` dark
+- Border: 1pt `#E6E7EC` / `#2E2E31`
+- Corner radius: 18pt (data cards), 20pt (gradient lesson card)
+- Padding: 16–18pt
+- Shadow (light): `rgba(20,27,77,0.06) 0 6px 18px`; dark: none (border only)
+
+**Food Row**
+- Leading 10pt food-color dot (Green/Yellow/Red)
+- Food name: Poppins 15pt weight 600
+- Trailing category pill (tinted, 999pt radius, 11pt weight 700) + kcal value
+- 9pt vertical padding, 1pt bottom divider
+
+**Food-Color Pill**
+- Pill, 999pt radius, Poppins 11pt weight 700, 3pt/9pt padding
+- Green: text `#34C759` on `rgba(52,199,89,0.16)`
+- Yellow: text `#FFC531` (light) / on `rgba(255,197,49,0.16)`
+- Red: text `#FF5A52` on `rgba(255,90,82,0.16)`
+- (On colored surfaces the pill may invert to solid fill + white text)
+
+**Stacked Food-Ratio Bar**
+- Horizontal bar, 10pt tall, 5pt radius, no gaps between segments
+- Segments fill Green → Yellow → Red left to right, widths = proportion of the day's intake
+- Sits above the food list as the day's at-a-glance summary
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 68pt + safe area
+- Background: `#FFFFFF` / `rgba(18,18,18,0.94)` dark with `backdrop-filter: blur(20px)`, 0.5pt top border
+- Tabs (5): Today · Learn · Log · Coach · Profile
+- Icon size: 22pt
+- Active: `#2A5DF6` (icon fills solid)
+- Inactive: `#9A9AA0` / `#6A6A70`
+- Label: Poppins 10pt weight 600, always shown
+- No tint pill — color/fill change only
+- The center "Log" tab may render as a slightly raised circular `#2A5DF6` button in some flows
+
+**Top Header (no nav bar)**
+- The "Today" screen has no UINavigationBar — a greeting block (greeting 26pt weight 700 + meta line) sits in the scroll content
+- Detail screens (Lesson, Food detail) use a sheet/push with a leading back chevron and centered title
+
+### Input Fields
+
+**Search / Add Food Field**
+- Height: 48pt
+- Background: `#F2F3F7` / `#262629` dark
+- Corner radius: 999pt (pill) — search is a pill, matching the button language
+- Leading magnifier 18pt `#9A9AA0`
+- Placeholder: "Search foods or scan" Poppins 15pt `#9A9AA0`
+- Focus: 1.5pt `#2A5DF6` border
+
+**Coach Chat Composer**
+- Pill field, `#F2F3F7` / `#262629`, 999pt radius
+- Trailing circular send button `#7B61FF` (Coach Purple) when text present
+- Placeholder: "Message your coach"
+
+**Segmented Control (Day / Week / Month)**
+- Container: `#F2F3F7` / `#262629`, 999pt radius, 4pt inset
+- Selected segment: `#FFFFFF` (light) / `#3A3A3E` (dark) pill, text `#2A5DF6`
+- Slide animation 220ms ease-out
+
+**Stepper / Weight Logger**
+- Large Poppins 28pt weight 800 numeral
+- − / + circular buttons `#F2F3F7`, blue glyph
+- Unit toggle (lb / kg) as a small pill segment
+
+### Distinctive Components
+
+**Daily Psychology Lesson Card — signature**
+- Rounded card, 20pt radius, fill = linear gradient `#2A5DF6 → #1FC29B` (~135°)
+- Decorative translucent circle bleeding off the top-right corner (`rgba(255,255,255,0.10)`)
+- Uppercase eyebrow "TODAY'S LESSON" 11–12pt weight 700, white at 85% opacity, 1pt tracking (may include "· 4 MIN")
+- Title: Poppins 18pt weight 700 white, max ~80% width, 1.3 line-height
+- Progress: thin 6pt white bar on `rgba(255,255,255,0.25)` track + "2 of 5" label 11pt weight 700 white
+- CTA: white pill, blue text, "Continue lesson →"
+
+**Food Log (with food-color system) — signature**
+- Header row: "Today's food" 14pt weight 700 + "1,240 / 1,500 kcal" 12pt weight 600 secondary
+- Stacked food-ratio bar (green/yellow/red)
+- List of food rows, each: color dot + name + category pill + kcal
+
+**Weight Graph Card**
+- Header: "Weight" 14pt weight 700 + range "Last 30 days" 11pt weight 600 tertiary
+- Hero readout: "164.2 lb" Poppins 24pt weight 800 + teal delta "▼ 6.8 lb" 13pt weight 600
+- Chart: blue trend curve 2.5pt over a `#2A5DF6` 30%→2% gradient fill; dashed teal goal line `#1FC29B`; current-point marker dot ringed in surface color
+- X-axis: 3 date ticks 9pt weight 700 tertiary
+
+**Coach Chat**
+- Coach avatar with a Coach Purple ring; incoming bubbles `#F2F0FF` / `#221E3A`, 18pt radius
+- User bubbles `#2A5DF6`, white text, 18pt radius, trailing-aligned
+- Composer pill with purple send button
+
+**Streak / Momentum Chip**
+- Pill, `#F2F3F7` / `#262629`, flame glyph in `#FF8A3D`
+- "Day 24" Poppins 13pt weight 700
+
+**Goal Progress Ring (optional weight goal)**
+- Track `#E6E7EC` / `#2E2E31`; progress arc `#1FC29B` (teal = progress)
+- Center: percent or remaining lbs in Poppins 20pt weight 800
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 18, 20, 24, 32, 40
+- Screen horizontal inset: 18pt
+- Card internal padding: 16–18pt
+- Vertical gap between cards/sections: 14–16pt
+- Food-row vertical padding: 9pt
+
+### Grid & Container
+- iPhone: single column, 18pt horizontal insets
+- The "Today" feed is a vertical stack of full-width cards (lesson → weight → food log)
+- iPad: content max-width 640pt centered
+- The stacked food-ratio bar always spans the full card content width
+
+### Whitespace Philosophy
+- **Friendly and breathable**: generous 14–16pt gaps so the screen never feels like a dense tracker
+- **The lesson card leads**: it's the most saturated, top-most element — nothing competes with it visually
+- **Food rows are scannable**: consistent dot → name → pill → kcal rhythm; the color dot does the heavy lifting
+- **Encouraging headroom**: the greeting + momentum line sit high with air, setting a positive tone before any data
+
+### Border Radius Scale
+- Square (0pt): stacked food-ratio bar ends are squared internally (the bar itself is 5pt)
+- Soft (8pt): small inner chips, chart bar tops
+- Standard (12pt): food-color tiles, small cards
+- Comfortable (16–18pt): data cards, coach bubbles, search containers' larger variants
+- Lesson (20pt): the daily lesson gradient card, sheets
+- Large (28pt): bottom-sheet top corners
+- Pill (999pt): ALL buttons, category pills, search field, segmented control, streak chip
+- Circle (50%): avatars, goal ring, send button, raised "Log" tab
+
+## 6. Depth & Elevation
+
+Noom uses soft, friendly elevation in light mode and flat surfaces in dark. The lesson card carries the most visual weight via color, not shadow.
+
+| Level | Treatment (Light) | Use |
+|-------|-------------------|-----|
+| Flat (Level 0) | No shadow | Background feed, dividers, text |
+| Card (Level 1) | `rgba(20,27,77,0.06) 0 6px 18px` | Data cards (weight, food log) |
+| Lesson (Level 1.5) | `rgba(42,93,246,0.22) 0 10px 26px` | Daily lesson gradient card (colored glow) |
+| Sheet (Level 2) | `rgba(20,27,77,0.12) 0 -8px 28px` | Bottom sheets (add food, scan) |
+| Overlay | `rgba(12,27,77,0.45)` | Dim behind modals and sheets |
+
+**Shadow Philosophy**: shadows are soft and brand-tinted toward Noom Navy (`rgba(20,27,77,…)`) rather than pure black, so cards feel warm. The lesson card uses a colored blue glow so it appears to *radiate* — reinforcing its role as the energetic focal point. On **dark mode**, drop shadows almost entirely and rely on the `#2E2E31` border + the `#1C1C1E` surface lift; the lesson card keeps a faint blue glow.
+
+### Motion
+- **Lesson card entrance**: scales 0.96 → 1.0 with fade over 320ms ease-out; the decorative circle drifts in subtly
+- **Food row add**: new row slides down + fades in 250ms ease-out; the stacked ratio bar re-animates its segment widths over 400ms ease-out
+- **Weight graph draw**: trend curve reveals left→right via stroke-dashoffset over 700ms ease-out; the dashed goal line fades in after 200ms; the marker dot pops with a 150ms spring
+- **Tab switch**: cross-fade 200ms; active icon fills + tint tweens 150ms
+- **Segmented control**: selected pill slides 220ms ease-out
+- **Coach message**: incoming bubble fades + rises 250ms; a typing-indicator (3 dots) pulses while the coach "writes"
+- **Lesson progress**: the white progress bar animates its width on completion with a 400ms ease-out + soft haptic
+- **Sheet present**: slides up 300ms ease-out; backdrop fades 200ms
+- **Reduce Motion**: replace draw/scale with 200ms cross-fades; ratio bar and graph render at final state
+
+## 7. Do's and Don'ts
+
+### Do
+- Treat the food-color system (Green `#34C759` / Yellow `#FFC531` / Red `#FF5A52`) as sacred — fixed hues, identical in light & dark
+- Make the daily psychology lesson card the front door — bold blue→teal gradient, most saturated element on screen
+- Use Noom Blue `#2A5DF6` for all primary actions, active tab, and links
+- Use Noom Teal `#1FC29B` for progress/positive signals — weight-loss delta, goal line, success
+- Show the stacked green/yellow/red ratio bar so the day's food balance reads at a glance
+- Make every button a full pill (999pt) — soft, friendly, non-clinical
+- Keep copy conversational and encouraging ("Day 24 · You're building momentum")
+- Use Poppins's circular geometry — it signals warmth; heavy numerals, light prose
+- Give the lesson card a colored blue glow so it radiates as the focal point
+- Give the coach surface its own Coach Purple `#7B61FF` world
+- Use a soft near-white `#FBFBFD` light canvas, comfortable `#121212` dark — never harsh pure white/black
+
+### Don't
+- Don't recolor or reuse the Green/Yellow/Red food hues for anything else — users read food by color; consistency is the mechanic
+- Don't make the lesson card subtle or gray — it must be the energetic, saturated focal point
+- Don't use a tight geometric grotesque or a serif — Poppins's friendly roundness is core to the brand
+- Don't use sharp-cornered or right-angled buttons — Noom buttons are always full pills
+- Don't write clinical/medical copy ("caloric deficit achieved") — keep it like a supportive coach
+- Don't add a second primary color competing with Noom Blue for actions
+- Don't use pure black drop shadows — tint toward Noom Navy `rgba(20,27,77,…)`
+- Don't bold body/coach copy by default — prose is 400; only stats are heavy
+- Don't bury the daily lesson below the fold — it's the top-most card every day
+- Don't tint the coach chat with Noom Blue throughout — Coach Purple distinguishes the human surface
+- Don't use Material-style tab tint pills — active state is a color/fill change only
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Lesson title 16pt; weight graph 80pt tall; 14pt insets |
+| iPhone 13/14/15 | 390pt | Standard layout (reference) |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clearance in status zone |
+| iPhone 15/16 Pro Max | 430pt | Lesson title 20pt; weight graph 104pt; larger hero stat |
+| iPad (portrait) | 768pt | Content max-width 640pt centered; lesson card full-width within |
+| iPad (landscape) | 1024pt+ | Two-column: lesson + weight on left, food log on right, max 900pt |
+
+### Dynamic Type
+- Scales: screen title, greeting, hero stat, section, card title, body, list item
+- Fixed: tag/eyebrow, food-color pill, axis labels, tab labels
+- Lesson title caps at +25% to keep the card from overflowing
+
+### Orientation
+- Phone: portrait-primary on the "Today" feed
+- iPad: supports landscape with the two-column split
+
+### Touch Targets
+- Tab bar icons: 22pt glyph, 44pt hit
+- Pill buttons: 48pt+ tall
+- Food row: full-row tap, 44pt min height
+- Segmented control segments: 36pt tall
+- Coach send button: 40pt circle
+
+### Safe Area Handling
+- Top: greeting/header respects safe area + Dynamic Island
+- Bottom: 68pt tab bar + home indicator; coach composer floats above the keyboard
+- The lesson card never extends under the status bar — it sits inside the scroll content with top inset
+- Sheets respect bottom safe area
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Noom Blue (primary): `#2A5DF6` / pressed `#1E47C8`
+- Noom Teal (progress): `#1FC29B`
+- Noom Navy (anchor): `#0C1B4D`
+- Canvas: `#FBFBFD` light / `#121212` dark
+- Surface: `#FFFFFF` / `#1C1C1E`
+- Divider: `#E6E7EC` / `#2E2E31`
+- Food Green: `#34C759` · Food Yellow: `#FFC531` · Food Red: `#FF5A52` (FIXED both modes)
+- Coach Purple: `#7B61FF`
+- Text primary: `#1A1A1F` / `#F0F0F2`; secondary `#6A6A70` / `#9A9AA0`
+
+### Example Component Prompts
+- "Build the Noom daily lesson card in SwiftUI: a 20pt-radius card filled with a linear gradient `#2A5DF6 → #1FC29B` at ~135°, with a decorative `rgba(255,255,255,0.10)` circle clipped off the top-right. Inside: an uppercase eyebrow 'TODAY'S LESSON · 4 MIN' in Poppins 11pt weight 700 white at 85% opacity with 1pt tracking; a title in Poppins 18pt weight 700 white at max 80% width; a 6pt white progress bar (40% filled) on a `rgba(255,255,255,0.25)` track with a '2 of 5' label; and a white pill CTA 'Continue lesson →' with `#2A5DF6` text. On appear, scale 0.96→1.0 + fade over 320ms ease-out, and add a colored glow shadow `rgba(42,93,246,0.22) 0 10px 26px`."
+
+- "Create a Noom food log row: a 10pt leading dot in the food class color (Green `#34C759`, Yellow `#FFC531`, or Red `#FF5A52`), the food name in Poppins 15pt weight 600, a trailing tinted category pill (999pt radius, Poppins 11pt weight 700 — e.g. 'Green' as `#34C759` text on `rgba(52,199,89,0.16)`), and the kcal value in Poppins 13pt weight 700 secondary, right-aligned in a 52pt column. 9pt vertical padding, 1pt bottom divider `#E6E7EC`/`#2E2E31`."
+
+- "Build the Noom stacked food-ratio bar: a 10pt-tall, 5pt-radius horizontal bar with three adjoining segments (no gaps) — Green `#34C759`, Yellow `#FFC531`, Red `#FF5A52` — widths proportional to the day's intake. Place it directly under the 'Today's food' header. When a food is added, re-animate the segment widths over 400ms ease-out."
+
+- "Build the Noom weight graph card: header 'Weight' Poppins 14pt weight 700 + range 'Last 30 days' 11pt weight 600 tertiary; a hero readout '164.2 lb' Poppins 24pt weight 800 with a teal '▼ 6.8 lb' delta 13pt weight 600 `#1FC29B`; a chart with a 2.5pt `#2A5DF6` trend curve over a `#2A5DF6` 30%→2% vertical gradient fill, a dashed teal goal line `#1FC29B`, and a current-point marker dot ringed in the surface color. Reveal the curve left→right over 700ms ease-out."
+
+- "Build the Noom primary button: a full pill (999pt radius), `#2A5DF6` fill, white Poppins 16pt weight 700 text, 15pt/30pt padding. Pressed: `#1E47C8` + scale 0.98. The outline variant is transparent with a 1.5pt `#2A5DF6` border and `#2A5DF6` text."
+
+- "Render the Noom bottom tab bar: 68pt + safe area, 5 tabs — Today, Learn, Log, Coach, Profile — 22pt icons, Poppins 10pt weight 600 labels. Active tab `#2A5DF6` with the icon filled solid; inactive `#9A9AA0`. No tint pill — fill/color change only."
+
+### Iteration Guide
+1. The food-color system (Green `#34C759` / Yellow `#FFC531` / Red `#FF5A52`) is sacred — fixed hues, identical in both themes, never reused elsewhere
+2. The daily psychology lesson card is the front door — bold `#2A5DF6 → #1FC29B` gradient, the most saturated element, top of the feed
+3. Noom Blue `#2A5DF6` is the only primary action color; Noom Teal `#1FC29B` is for progress/positive
+4. Every button is a full pill (999pt) — soft and friendly, never sharp-cornered
+5. The stacked green/yellow/red ratio bar shows the day's food balance at a glance — above the food list
+6. Poppins's circular geometry signals warmth — heavy numerals (700–800), conversational body (400)
+7. Copy is encouraging and coach-like ("Day 24 · You're building momentum") — never clinical
+8. The coach surface is its own Coach Purple `#7B61FF` world, distinct from blue data surfaces
+9. Light-first: soft `#FBFBFD` canvas with Navy-tinted soft shadows; dark `#121212` is flat with borders
+10. Minimal chrome — 5-tab bar, no opaque nav bar; greeting lives in the scroll feed