Macro / food-tracking app UI patterns

Nutrition trackers live or die on logging friction and glanceability. The user logs many times a day and checks "where am I vs my target" constantly. Every tap between intent and a logged item, and every scroll between opening the app and seeing today's number, is a tax that predicts churn. This skill is the pattern library the category has converged on, plus the differentiators (AI photo, adaptive targets) and the anti-patterns.

The core loop, and the order it should appear on the home screen: target → what you've eaten → what's remaining → quick way to log more. Everything else (trends, score, water, streak) is secondary.

1. The calorie/macro dashboard (home hero)

The single most important component. Conventions:

• Remaining-centric. Show calories remaining as the big number (Goal − Food + Exercise = Remaining). MyFitnessPal and most apps lead with remaining, not consumed — it answers "can I eat this?".
• A ring or large numeral for calories; three macro bars (protein/carbs/fat) as eaten / target g with a fill. Cal AI's signature is the ring + macro rings; MFP uses a donut + bars.
• Keep it to one combined card, not four stacked ones (see dense-no-scroll-layout). Calories hero + 3 macro bars in a single card is the standard.
• Color macros consistently app-wide (e.g., protein green, carbs blue, fat purple) and reuse those colors everywhere that macro appears.
• A compact day strip (M T W T F S S) above the dashboard for date context — horizontal, not a date picker that pushes content down.

2. The log → remaining loop