UI Mockups · v1.0
Mediterranean nutrition app — dark mode, warm artisanal palette.
Plan by your dietitian. Mediterranean nutrition, 7 days.
Mobile Screens
🌿
P0 · Onboarding
Welcome
3-step intro with dietitian card, plan overview, and animated slide transitions.
Open screen
→
🥩
P0 · Home
Today's Plan
Current meal highlighted. Timeline of all 5 meal slots. Progress ring. Mark as done.
Open screen
→
📅
P0 · Navigation
Week View
7-day strip. Tap any day to see its meals. Day 7 shows breakfast picker. Full plan data.
Open screen
→
🍽
P0 · Detail
Meal Detail
Full ingredients with human quantities. Protein + carb toggles. Portion guide. Prep notes.
Open screen
→
🔄
Interactive · Swap
Food Swap
Tinder-style card stack. Drag left to skip, right to pick. Real spring physics. Touch support.
Open screen
→
🛒
P1 · Utility
Shopping List
Full week ingredients grouped by category. Tap to check off. Progress ring tracks completion.
Open screen
→
Design System — Mediterranean Dark
Background
#1A1C17
Surface
#252820
Elevated
#2E3128
Olive
#BCCD96
Terracotta
#E8A082
Amber
#D4A853
Teal
#6B8B7A
Text
#EAE6DF
Muted
#8C8880
Bricolage Grotesque 700 — Headlines
Good afternoon 🌿
Manrope 400/500 — Body
Palm-sized red meat · 1 cup rice