Noom DESIGN.md

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)

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

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.

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

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