MyFitnessPal DESIGN.md

1. Visual Theme & Atmosphere

MyFitnessPal's iOS app is a calorie ledger trying its hardest not to feel like one. Where Strava is theatrical and Whoop is clinical, MyFitnessPal is a spreadsheet with a kind face — a polished food diary that has logged a billion meals and learned to make data entry feel like progress. The canvas is pure white, the chrome is light blue, and the unmistakable hero of the home screen is the giant ring of calories remaining: a thick circular gauge that flips from light gray (untouched) to MFP Blue (filled) as the day's eating accumulates. Every screen is in service of that ring — log a food, scan a barcode, add an exercise, and the ring redraws.

The accent is MFP Blue (#005DAA) — a confident, slightly desaturated navy-blue that has been the brand color since the Under Armour acquisition in 2015, with a brighter modernized Lake Blue (#0072CE) introduced in the 2022 refresh that's now used on most CTAs and the calorie ring fill. The palette is otherwise clinical: white canvas, gentle #F5F7FA surface for cards and food-log rows, charcoal #1F2937 text, and a small set of semantic accents — green for "under your goal", orange for "approaching limit", red for "over". The macro donut (Carbs / Fat / Protein) uses a fixed trio — #FF9F1C orange, #A463F2 purple, #19C37D green — that's been stable for years and is instantly recognizable to any returning user.

Typography is SF Pro on iOS, with the brand sometimes substituting Proxima Nova for marketing — both are no-nonsense geometric sans faces that prioritize legibility of numerals. The numerals are the whole point: MyFitnessPal is a numbers app, and big tabular-figure totals (1,847, −312, 64g) carry the screen. Type uses tight tabular numerals on the calorie ring, the macro percentages, the goal weight, and every gram count in the diary; everything else is the system default proportional.

Key Characteristics:

• White canvas (#FFFFFF) with Surface Gray (#F5F7FA) for diary rows, food-database results, and section fills
• MFP Blue (#005DAA) as the persistent brand anchor; Lake Blue (#0072CE) as the modernized action color for CTAs, ring fills, and active tabs
• The Calorie Remaining donut — 220pt diameter on home, a giant tabular-figure number in the middle, color flips green → blue → orange → red as you eat through the day
• Macro donut trio — orange #FF9F1C Carbs, purple #A463F2 Fat, green #19C37D Protein — never reorder these
• Diary screen organized as meal sections (Breakfast / Lunch / Dinner / Snacks) with a leading "+" Add Food row in each
• Barcode scanner is a hero feature — a dedicated centered FAB on the Diary tab pops a full-screen camera with a horizontal scan line
• Tab bar (5 tabs): Dashboard, Diary, Plans, Community, More — bottom-anchored with iconic SF Symbols
• SF Pro at every size with tabular numerals on every number that summarizes nutrition
• Subtle elevation only — MyFitnessPal is a content-first app, drop shadows are 4% opacity and short

2. Color Palette & Roles

Primary

• MFP Blue (#005DAA): Heritage primary — logomark "M" plate, Premium upsell banner, large nav title accents.
• Lake Blue (#0072CE): Current primary action color — Add Food CTA, ring fill at "on track", active tab tint, link color in food labels.
• Lake Blue Pressed (#005FA8): Pressed state on all Lake Blue CTAs.
• Sky Blue (#E7F0FF): Background tint for selected meal sections, info pills, "Quick Tools" cards.

Macro Trio (do not reorder, do not recolor)

• Carbs Orange (#FF9F1C): Always the first slice of the macro donut.
• Fat Purple (#A463F2): Always the second slice.
• Protein Green (#19C37D): Always the third slice.

Canvas, Surfaces & Dividers

• Canvas White (#FFFFFF): Primary canvas everywhere.
• Surface Gray (#F5F7FA): Diary section backgrounds, food-row backgrounds on tap-down, dashboard card fills.
• Surface Gray 2 (#E5E9F0): Chip fills, input fields, progress-bar tracks.
• Divider (#E5E7EB): Hairline dividers between diary rows, between meals, under the nav bar.
• Hairline (#EEF1F5): Lighter divider used inside dashboard cards.

Text

• Ink (#1F2937): Primary text — food names, meal section titles, numeric totals.
• Slate (#4B5563): Secondary text — serving size text, gram counts in metadata position, body copy.
• Mute (#9CA3AF): Tertiary — placeholder, disabled, "0 of 1 servings" empty hints.
• Hero Number (#111827): The big calorie-remaining number — even darker than Ink for emphasis.

Semantic

• Under Goal Green (#19C37D): "−312 cal remaining" when under the goal, weight-loss confirmation.
• Approaching Amber (#F59E0B): When you're within 200 cal of your limit.
• Over Limit Red (#EF4444): When you've exceeded the daily goal, weight-gain bar.
• Streak Orange (#FB923C): The fire glyph for daily-streak badges.
• Premium Gold (#D4A437): Premium subscription badges, gated-feature locks.

Dark Mode

MyFitnessPal added dark mode in 2020. It's a deep, slightly-blue dark — not pure black.

• Dark Canvas (#0F1419): Primary dark background.
• Dark Surface 1 (#1A1F26): Cards, diary rows, sheets.
• Dark Surface 2 (#252B33): Pressed states, chip fills.
• Dark Divider (#2A2F37): Hairlines.
• Dark Text Primary (#F3F4F6): Inverted Ink.
• Dark Text Secondary (#9CA3AF): Inverted Slate.
• Lake Blue (dark) (#3B8FDF): Brighter blue for OLED legibility; CTAs lift slightly.

3. Typography Rules

Font Family

• Primary: SF Pro (Display / Text — automatic switching at 20pt)
• Marketing / Web: Proxima Nova (proprietary licensed face used on marketing)
• Numbers: Always set with font-variant-numeric: tabular-nums so 1's and 7's align in the diary stack
• Fallback stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif

Hierarchy

Principles

• Tabular numerals on every number in a diary, ring, or chart context — 1's and 0's align vertically so totals "stack visually"
• Weight ladder concentrated at 400 / 500 / 600 / 700: SF Pro's regular for body, medium for food names, semibold for totals and meal titles, bold for nav and hero numbers
• Tight tracking at display sizes (-1.0pt on the 56pt calorie number), neutral at 16pt body
• Uppercase labels with tracking for short status words: "REMAINING", "CARBS / FAT / PROTEIN", "TODAY"
• Ink over pure black: body sits at #1F2937, not #000000 — the app feels approachable, not surgical
• Dynamic Type respected on body and meal titles; fixed sizes on the calorie hero number, macro numbers, and tab labels

4. Component Stylings

Buttons

Primary CTA ("Add Food", "Log Exercise", "Complete Diary")

• Background: #0072CE (Lake Blue)
• Text: #FFFFFF, SF Pro 16pt weight 600
• Padding: 14pt vertical, 28pt horizontal
• Corner radius: 12pt (rounded rectangle — never a full pill on the primary CTA)
• Height: 48pt minimum
• Pressed: background #005FA8, scale 0.98
• Haptic: .impactOccurred(.light) on tap; .notificationOccurred(.success) on "Complete Diary"

Secondary Tinted Button ("Quick Add", "Copy Yesterday")

• Background: #E7F0FF (Sky Blue tint)
• Text: #0072CE, SF Pro 16pt weight 600
• Corner radius: 12pt
• Same height/padding as primary

Outline Button ("Cancel", filter applies)

• Background: transparent
• Border: 1pt #E5E7EB
• Text: #1F2937, SF Pro 16pt weight 500
• Corner radius: 12pt

FAB / Scan Barcode Button (Diary tab)

• 56pt circle, centered in the Diary screen above the tab bar
• Background: #0072CE Lake Blue with a rgba(0,93,170,0.35) 0 6px 16px blue-tinted shadow
• Icon: barcode.viewfinder SF Symbol, 24pt, white
• Haptic: .impactOccurred(.medium) on tap → opens the full-screen scanner with a horizontal red laser line that pulses

Plus Add-Food Row ("+ Add Food")

• Inline row at the top of each meal section
• Text: Lake Blue #0072CE, SF Pro 15pt weight 600
• Leading 24pt SF Symbol plus.circle.fill in Lake Blue
• 56pt row height, full-width tap target, no background
• Pressed: background fades to #F5F7FA for 200ms

Cards & Containers

Calorie Ring (the hero of Dashboard / Home)

• Diameter: 220pt on iPhone Pro/Max; 180pt on iPhone SE
• Stroke width: 18pt
• Background ring: #E5E9F0 (Surface Gray 2)
• Filled ring: gradient depending on remaining state
  • Under goal: #19C37D (Under Goal Green)
  • On track (consumed 60–95% of goal): #0072CE (Lake Blue) — the most common state
  • Approaching (95–100%): #F59E0B (Approaching Amber)
  • Over: #EF4444 (Over Limit Red)
• Center stack (top to bottom): "REMAINING" label 13pt 600 uppercase tracking 0.6pt → 56pt 700 tabular number → "calories" 13pt 500 in Slate
• Goal/Food/Exercise mini-rows below the ring: each shows a number + uppercase label (e.g., 2,000 over GOAL, 753 over FOOD, 0 over EXERCISE)
• Update animation: ring fills via stroke-dasharray transition over 600ms ease-out; the center number ticks via a quick number-flip when you add a food

Macro Donut (Carbs / Fat / Protein breakdown)

• Diameter: 96pt
• Stroke width: 10pt
• Slices: orange #FF9F1C (Carbs) → purple #A463F2 (Fat) → green #19C37D (Protein), in that order, clockwise from 12 o'clock
• Center number: total carbs+fat+protein percentage left of goal in 22pt 700 tabular
• Legend rows below the donut: 8pt color square + label (CARBS) + value (187g · 65%) — three rows
• Hit target: tapping a slice highlights its legend row with a 1pt outline

Food Row (in a meal section, Diary tab)

• Height: 64pt minimum
• Background: #FFFFFF default, #F5F7FA on press
• Layout (leading to trailing): 8pt indent → food name (16pt 500 #1F2937, 1-line truncate) → 2pt gap → subtitle "1 cup · 8 oz · Chobani" (13pt 400 #4B5563, 1-line truncate) → flex spacer → calorie value (16pt 600 tabular #1F2937) → 16pt trailing inset → 12pt chevron #9CA3AF
• Divider: 0.5pt #E5E7EB between rows, inset 16pt from leading
• Swipe-left: reveals Delete (red #EF4444 fill) and More (Slate #4B5563)

Meal Section Header (Breakfast / Lunch / Dinner / Snacks)

• Height: 48pt
• Background: #FFFFFF
• Layout: meal name 18pt 600 #1F2937 on the left + total calories tabular 16pt 600 #1F2937 on the right (e.g., "Lunch ... 487")
• 0.5pt #E5E7EB divider below
• Tap: expands/collapses the meal section with a 250ms ease-out height transition

Dashboard Card (Steps, Weight, Water, Plans modules)

• Background: #FFFFFF
• Border: 1pt #E5E7EB
• Corner radius: 16pt
• Padding: 16pt all sides
• Shadow: none on outer card, rgba(0,0,0,0.04) 0 1px 3px on hover/press for subtle lift
• Title row: 11pt 600 uppercase Slate label + trailing icon (e.g., figure.walk for Steps) sized 14pt
• Big number: SF Pro Display 28pt 700 tabular #111827
• Subtitle: 13pt 400 Slate (e.g., "8,432 of 10,000 steps")
• Progress bar at the bottom: 6pt tall, #E5E9F0 track, Lake Blue #0072CE fill, 3pt corner radius

Search Bar (Food database search)

• Background: #F5F7FA
• Height: 44pt
• Corner radius: 12pt
• Leading magnifyingglass 16pt #4B5563
• Placeholder: "Search foods or scan a barcode" SF Pro 15pt 400 #9CA3AF
• Trailing: barcode.viewfinder 18pt Lake Blue tap target

Barcode Scanner Camera Overlay

• Full-screen black background with the camera feed centered
• Horizontal scan-line guide: 1pt red #EF4444 line spanning the full width, pulsing opacity 0.4 → 1.0 every 1200ms
• Corner brackets: 4 white 3pt-thick L-brackets framing a 280pt × 180pt scan window
• Top: "Scan a barcode" 17pt 600 white centered with a back chevron leading
• Bottom: "Can't scan? Search manually →" Lake Blue text-button white background
• Haptic on capture: .notificationOccurred(.success)

Navigation

Large-Title Nav Bar

• Height: variable — 96pt with large title, collapses to 44pt inline
• Background: #FFFFFF, becomes .regularMaterial blur when content scrolls under
• Title: SF Pro Display 28pt 700 #1F2937, left-aligned, 16pt leading inset
• Trailing: 24pt SF Symbol (often bell for notifications or person.crop.circle)
• Date row (Diary only): "Today, May 14" in 14pt 500 Slate with chevron.down for date picker

Bottom Tab Bar

• Height: 50pt + safe area
• Background: #FFFFFF with 0.5pt #E5E7EB top divider; .regularMaterial blur when content scrolls beneath
• Tabs (5): Dashboard, Diary, Plans, Community, More
• Icon size: 22pt, SF Symbols (square.grid.2x2, book.closed, list.clipboard, person.3, ellipsis)
• Active tint: #0072CE Lake Blue (icon + label)
• Inactive: #9CA3AF Mute
• Labels: SF Pro 10pt 600, always visible
• Tap haptic: .selectionChanged()

Tab Bar FAB (the Diary Tab is special)

• A 56pt circular Lake Blue button sits centered above the Diary tab icon
• Icon: plus in 22pt white
• Tap action: opens Add Food drawer (sheet from bottom with options Scan Barcode / Search Food / Quick Add / Recent / My Foods)

Input Fields

Quick Add Number Pad

• Modal sheet from the bottom, 320pt height
• Big number display: 40pt 700 tabular #111827 centered at top
• Number pad: 3×4 grid of 64pt buttons; tap target 80pt; background #F5F7FA, pressed #E5E9F0
• Bottom: cancel (text-link Slate) + Add (Lake Blue pill)

Serving Size Stepper

• "Number of Servings" row with a − button (32pt circle, #F5F7FA background, #1F2937 glyph), tabular number 2.0 in 18pt 600, and a + button matching
• Tap and hold accelerates the increment (multiplies after 1s)

Distinctive Components

Weekly Weight Trend Card

• 160pt tall card with a line chart of the last 7 weight entries
• X-axis: 7 mini dots, one per day; current day filled Lake Blue, others outlined
• Line: 2pt Lake Blue stroke with a subtle linear gradient fill underneath (Lake Blue → transparent, 12% opacity)
• Y-axis labels: top and bottom only, in 11pt 500 Mute, e.g., "162.4" and "159.8"
• Tap a dot: a tooltip pops up with date + weight in 13pt 600 over a 4pt-radius dark callout

Streak Flame Badge

• 32pt orange flame glyph (flame.fill SF Symbol filled #FB923C) + "42 day streak" 12pt 700 tabular
• Appears in the top-right of the Dashboard large nav; also at the top of Diary on a 7-day streak milestone
• On 7/30/100/365 day milestones, a small confetti burst plays once

Plus Premium Upsell Banner

• Full-width banner, 80pt tall, background gradient #005DAA → #0072CE
• Left: white "Premium" badge + "Ad-free diary, custom macros, deeper insights" in 14pt 500 white
• Right: "Try Free →" white pill, MFP Blue text
• Persists on Dashboard for non-Premium users; dismissable

Logo Block (M square)

• The MFP heritage mark is a rounded square #005DAA background with a white serif "M" in the center
• 32pt corner radius on the square at large sizes (96pt+); 8pt radius at app-icon scale (40pt)
• Used in About, splash, and the avatar fallback when no profile photo is set

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80
• Standard horizontal margin: 16pt on Diary and Dashboard; 24pt on detail screens (Food Detail, Settings)
• Section vertical gap: 32pt between major sections on Dashboard; 24pt between meal sections on Diary

Grid & Container

• Content width: full device width minus 16pt horizontal margins on Diary
• Dashboard cards: 2-col grid for Steps/Water/Weight modules (8pt gap); full-width cards for Plans/Insights
• Calorie ring: centered in a full-width container, vertical padding 32pt top and 24pt bottom

Whitespace Philosophy

• Numbers breathe: the big calorie number gets 64pt of vertical space around it on Dashboard — the ring is the screen
• Diary rows compress: 64pt tall rows let you scan many foods quickly; this is intentional density
• Sticky tab bar + FAB compress the viewport — the bottom 110pt is always chrome on Diary; plan list heights accordingly

Border Radius Scale

• Square (0pt): horizontal-divider hairlines only
• Small (4pt): badge pills, tooltip callouts
• Medium (8pt): chip backgrounds, alert banners
• Standard (12pt): primary CTAs, secondary tinted buttons, search bar, input fields
• Comfortable (16pt): dashboard cards, sheet containers
• Soft (24pt): bottom-sheet top corners
• Full Pill (500pt): streak badge, Premium "Try Free" pill
• Circle (50%): FAB, avatars, stepper buttons, ring stroke caps

6. Depth & Elevation

Shadow Philosophy: MyFitnessPal is a clinical, white app — shadows are almost imperceptible except on the Diary FAB, where the shadow is intentionally tinted with the button's blue to make the action feel like it's emanating light, not casting darkness. Everything else relies on hairline borders and divider strokes for separation.

Motion

• Calorie ring fill: when you add a food, the ring's stroke-dashoffset transitions over 600ms ease-out and the center number ticks via a 300ms number-flip
• Food row press: background fades #FFFFFF → #F5F7FA in 100ms, no scale
• FAB tap: scale 1.0 → 0.92 → 1.0 over 250ms spring, paired with .impactOccurred(.medium)
• Add Food sheet: slides up from the bottom with a 350ms cubic-bezier curve, backdrop fades to rgba(0,0,0,0.4)
• Barcode laser: 1pt red line pulses opacity 0.4 → 1.0 → 0.4 every 1200ms; on capture, a green tick replaces the laser for 800ms
• Streak confetti: triggered only at 7/30/100/365 day milestones — paper confetti burst at the top of Dashboard, 1.4s total
• Tab switch: .selectionChanged() haptic, no animation

7. Do's and Don'ts

Do

• Use Lake Blue #0072CE for the primary CTA, active tab tint, calorie ring fill at "on track", and the diary FAB
• Use MFP Blue #005DAA for heritage moments — the logomark, Premium upsell gradient end, large nav title accents
• Keep the macro donut trio in the exact order Carbs Orange → Fat Purple → Protein Green; never reorder, never recolor
• Set tabular numerals on every number that summarizes nutrition — calories, grams, percentages, weight, water ounces
• Use the ring color-flip semantically: green when under, blue when on-track, amber when approaching, red when over
• Use the FAB pattern on the Diary tab — a 56pt blue circle floating above the tab icon with a plus glyph
• Use #1F2937 Ink for body text — pure black is too clinical for a wellness app
• Use SF Pro on iOS; substitute Proxima Nova only on marketing/web
• Keep dashboard cards on a 16pt corner radius with a 1pt #E5E7EB border and no shadow
• Place the streak flame badge in the Dashboard nav-bar trailing position — it's a small but motivating moment

Don't

• Don't use the macro trio colors anywhere outside the macro context — orange should not appear on a button, purple should not appear on a tab
• Don't render the calorie ring without tabular numerals — non-aligned digits make the giant number look broken
• Don't use the Premium gold #D4A437 as a primary CTA — it's a gate, not an action
• Don't add aggressive shadows — MFP is clinical and flat; soft 4% shadows only
• Don't break the meal section order (Breakfast, Lunch, Dinner, Snacks) — this is the cultural pattern users expect
• Don't use red #EF4444 for primary actions; it's strictly "over your goal" semantic
• Don't skip the "+ Add Food" row inside each meal — it's the fastest entry path and a critical pattern
• Don't replace the M-square logomark color with Lake Blue — it stays heritage MFP Blue #005DAA
• Don't use a brighter blue than #0072CE on light mode — it loses contrast against white
• Don't compress the calorie ring smaller than 180pt — below that, the giant number stops being legible

8. Responsive Behavior

Device Sizes

Dynamic Type

• Body, food names, meal titles: scale up to XXL
• Fixed: calorie hero number (56pt), macro donut numbers, tab labels, streak badge — layout would break if these scaled

Orientation

• Portrait-locked on iPhone for Dashboard, Diary, Food Detail
• Charts and weight trend support landscape on iPhone Pro Max
• iPad supports both orientations natively

Touch Targets

• FAB: 56pt circle, 44pt minimum tap target met easily
• Add-Food row: 56pt tall full-width hit area
• Food row chevron: 44pt hit slop around the 12pt glyph
• Tab bar items: 56pt row height, 44pt minimum width

Safe Area Handling

• Top: large nav title starts at safe-area top + 16pt; Dynamic Island avoided by adding 12pt extra padding
• Bottom: tab bar honors home indicator; FAB sits 88pt from the bottom safe area on Diary

9. Quick Reference Cheat Sheet

Color Quick Reference

• Canvas: #FFFFFF
• Surface Gray: #F5F7FA
• Divider: #E5E7EB
• Ink (primary text): #1F2937
• Slate (secondary text): #4B5563
• MFP Blue (heritage): #005DAA
• Lake Blue (primary action): #0072CE
• Lake Blue Pressed: #005FA8
• Sky Blue (tinted bg): #E7F0FF
• Carbs Orange: #FF9F1C
• Fat Purple: #A463F2
• Protein Green: #19C37D
• Under Goal Green: #19C37D
• Approaching Amber: #F59E0B
• Over Limit Red: #EF4444
• Streak Orange: #FB923C
• Premium Gold: #D4A437

Example Component Prompts

• "Create a SwiftUI MyFitnessPal calorie ring: 220pt diameter, 18pt stroke, light gray #E5E9F0 background ring, fill color Lake Blue #0072CE, stroke-dashoffset transitions over 600ms ease-out. Center stack: 'REMAINING' uppercase 13pt 600 with 0.6pt tracking, then '1,247' SF Pro Display 56pt 700 tabular #111827, then 'calories' 13pt 500 Slate. Below the ring, three columns showing Goal / Food / Exercise with a number above an uppercase label."
• "Build the macro donut for MyFitnessPal: 96pt diameter, 10pt stroke. Three slices in this exact clockwise order from 12 o'clock: Carbs #FF9F1C orange, Fat #A463F2 purple, Protein #19C37D green. Center number is the percent of goal consumed in SF Pro Display 22pt 700 tabular. Below the donut, three legend rows: 8pt colored square + uppercase 11pt 600 label + value '187g · 65%' in 13pt 500."
• "Design the Diary food row: 64pt tall, white background, leading 16pt food name in SF Pro Text 16pt weight 500 #1F2937 (1-line truncate), 13pt 400 #4B5563 subtitle '1 cup · 8 oz · Chobani' below it. Trailing: tabular 16pt 600 calorie value #1F2937 + 12pt chevron #9CA3AF. Press state: background #F5F7FA. Swipe-left reveals Delete #EF4444 and More #4B5563."
• "Build the Diary FAB: 56pt circle, Lake Blue #0072CE fill, white plus SF Symbol at 22pt, blue-tinted shadow rgba(0,93,170,0.35) 0 6px 16px. Position: centered above the Diary tab icon, 88pt above the bottom safe area. Tap haptic: .impactOccurred(.medium). On tap, slides up the Add Food sheet (350ms cubic-bezier) with options: Scan Barcode, Search Food, Quick Add, Recent, My Foods."
• "Create the barcode scanner overlay: full-screen black background with a centered camera feed. Four white 3pt L-brackets frame a 280pt × 180pt scan window. A 1pt red #EF4444 horizontal scan line pulses opacity 0.4 → 1.0 → 0.4 every 1200ms. Top: white 'Scan a barcode' 17pt 600 + leading back chevron. Bottom: 'Can't scan? Search manually →' Lake Blue text-button. On capture: .notificationOccurred(.success) and a green tick replaces the laser for 800ms."

Iteration Guide

1. Canvas is #FFFFFF; use Surface Gray #F5F7FA for diary rows on press, dashboard card fills, search bar background
2. Primary action is Lake Blue #0072CE; heritage MFP Blue #005DAA lives on the logomark and Premium gradient end
3. The calorie ring is the hero — 220pt diameter, 18pt stroke, color flips green → blue → amber → red semantically
4. Macro trio is locked: Carbs orange #FF9F1C, Fat purple #A463F2, Protein green #19C37D — clockwise from 12 o'clock, in that order, always
5. Tabular numerals on every number — calories, grams, percentages, weight
6. SF Pro at 400/500/600/700; Display variant kicks in at 20pt+
7. Dashboard cards use 1pt #E5E7EB border with no shadow; the FAB is the only meaningfully elevated element
8. Tab bar is 5 tabs (Dashboard, Diary, Plans, Community, More); active tint is Lake Blue
9. Dark mode is #0F1419 canvas with #F3F4F6 primary text; Lake Blue lifts to #3B8FDF
10. Don't repurpose the macro trio colors elsewhere — they belong only to the macro context