Mobile App Screen Designs
Interactive mockups of the five core screens. Built following the FuelStack design system with a dark-first aesthetic, adherence-neutral data visualisation, and fast interaction patterns.
9:41
5G
Home
Log
Plan
Progress
Profile
Dashboard
Screen 1 of 5
Your daily command centre. The circular progress ring shows calories consumed vs target, with inner rings breaking down P/C/F. Below, the macro bars give you a quick read on each nutrient. The meal timeline shows today's schedule, while the streak and insights widgets keep motivation high.
Key Design Elements
1Circular calorie progress ring with P/C/F inner segments
2Horizontal stacked macro bars (Protein, Carbs, Fat)
3Today's meal timeline with logged/upcoming/planned statuses
4Quick Actions toolbar: Quick Add, Barcode Scan, Search, Photo
5Streak counter and weekly insight widget
Design Tokens Used
Background#0D0D0F
Surface#1A1A1E
Elevated#252529
Lime#CCF32F
Protein#00B4D8
Carbs#FFB703
Fat#E63946
Success#06D6A0