A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
2radius steps
14pxspacing base
Myfitnesspal, in one page
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
#FF9F1CCarbs, purple#A463F2Fat, green#19C37DProtein — 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
Do's and don'ts
Do
- Use Lake Blue
#0072CEfor the primary CTA, active tab tint, calorie ring fill at "on track", and the diary FAB - Use MFP Blue
#005DAAfor 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
plusglyph - Use
#1F2937Ink 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
#E5E7EBborder 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
#D4A437as 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
#EF4444for 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
#0072CEon light mode — it loses contrast against white - Don't compress the calorie ring smaller than 180pt — below that, the giant number stops being legible
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Myfitnesspal design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- MFP Blue: #005daa
- Lake Blue: #0072ce
- Lake Blue Pressed: #005fa8
- Sky Blue: #e7f0ff
- Carbs Orange: #ff9f1c
- Fat Purple: #a463f2
- Protein Green: #19c37d
- Canvas White: #ffffff
- Surface Gray: #f5f7fa
- Surface Gray 2: #e5e9f0
Type:
- families: SF Pro, Proxima Nova, Numbers, SF Pro Display
- scale: 10, 11, 12, 13, 15, 16, 18, 22, 28
- weights: 400, 600, 700
Shape:
- radius: 12, 16
Spacing: 14, 16, 32
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
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-numsso 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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Calorie Hero | SF Pro Display | 56pt | 700 (Bold) | 1.0 | -1.0pt | The giant "1,247" inside the calorie ring |
| Calorie Hero Label | SF Pro Text | 13pt | 600 | 1.0 | 0.6pt | "REMAINING" in uppercase under the number |
| Large Nav Title | SF Pro Display | 28pt | 700 | 1.15 | -0.4pt | "Diary", "Dashboard", "Plans" |
| Section Header | SF Pro Display | 22pt | 700 | 1.2 | -0.3pt | "Today's Meals", "Recent Foods" |
| Meal Title | SF Pro Text | 18pt | 600 | 1.2 | -0.2pt | "Breakfast", "Lunch", "Dinner", "Snacks" |
| Food Name | SF Pro Text | 16pt | 500 (Medium) | 1.3 | -0.1pt | "Greek Yogurt, Plain, Nonfat" |
| Food Subtitle | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "1 cup, 8 oz · Chobani" |
| Diary Calorie | SF Pro Text | 16pt | 600 tnum | 1.0 | 0pt | "120" right-aligned on each row |
| Body | SF Pro Text | 15pt | 400 | 1.4 | 0pt | Article copy, plans descriptions |
| Body Small | SF Pro Text | 13pt | 400 | 1.4 | 0pt | Help text, footers |
| Macro Number | SF Pro Display | 22pt | 700 tnum | 1.0 | -0.3pt | "187g" Carbs total |
| Macro Label | SF Pro Text | 11pt | 600 | 1.0 | 0.8pt uppercase | "CARBS / FAT / PROTEIN" |
| Button (Primary) | SF Pro Text | 16pt | 600 | 1.0 | 0pt | "Add Food", "Log Exercise" |
| Tab Label | SF Pro Text | 10pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
| Streak Badge | SF Pro Text | 12pt | 700 tnum | 1.0 | 0pt | "42 day streak" |
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
Components and layoutRead the full spec
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:
#0072CELake Blue with argba(0,93,170,0.35) 0 6px 16pxblue-tinted shadow - Icon:
barcode.viewfinderSF 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.fillin Lake Blue - 56pt row height, full-width tap target, no background
- Pressed: background fades to
#F5F7FAfor 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,000overGOAL,753overFOOD,0overEXERCISE) - 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:
#FFFFFFdefault,#F5F7FAon 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
#E5E7EBbetween rows, inset 16pt from leading - Swipe-left: reveals Delete (red
#EF4444fill) and More (Slate#4B5563)
Meal Section Header (Breakfast / Lunch / Dinner / Snacks)
- Height: 48pt
- Background:
#FFFFFF - Layout: meal name 18pt 600
#1F2937on the left + total calories tabular 16pt 600#1F2937on the right (e.g., "Lunch ... 487") - 0.5pt
#E5E7EBdivider 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 3pxon hover/press for subtle lift - Title row: 11pt 600 uppercase Slate label + trailing icon (e.g.,
figure.walkfor 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,
#E5E9F0track, Lake Blue#0072CEfill, 3pt corner radius
Search Bar (Food database search)
- Background:
#F5F7FA - Height: 44pt
- Corner radius: 12pt
- Leading
magnifyingglass16pt#4B5563 - Placeholder: "Search foods or scan a barcode" SF Pro 15pt 400
#9CA3AF - Trailing:
barcode.viewfinder18pt Lake Blue tap target
Barcode Scanner Camera Overlay
- Full-screen black background with the camera feed centered
- Horizontal scan-line guide: 1pt red
#EF4444line 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
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Calorie ring shrinks to 180pt diameter; dashboard cards 2-col with 8pt gap |
| iPhone 13/14/15 | 390pt | Standard 220pt ring; 16pt horizontal margins |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; ring nudges down 6pt |
| iPhone 15/16 Pro Max | 430pt | 240pt ring possible on Pro Max; dashboard cards remain 2-col |
| iPad | 768pt+ | Dashboard becomes a 3-col layout; Diary keeps single column with wider rows |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-myfitnesspal {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1f2937;
--heading-color: #1f2937;
--link-color: #005daa;
--link-hover-color: #004177;
--border-color: #d7d8db;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(31,41,55,0.06);
--card-hover-shadow: 0 6px 18px rgba(31,41,55,0.12);
--header-bg: #1f2937;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6d747d;
--button-bg: #005daa;
--button-text-color: #ffffff;
--button-hover-bg: #004177;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f2f2f3;
--button-secondary-text-color: #1f2937;
--button-secondary-hover-bg: #e4e5e7;
--button-secondary-border: 1px solid #d7d8db;
--prompt-bg: #f4f4f5;
--prompt-text-color: #1f2937;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 78.3%
- note 78.0%
- daikin 78.0%
- apple tv 77.8%
- zenn 76.5%
Where this came from
- Source document
ios/design-md/fitness/myfitnesspal/DESIGN.md· 26.5 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.