Health & Fitness
Calorie Tracker App Design Template
CalTrack is a calorie tracker app design with a warm coral palette and rounded cards, built for founders and designers shipping a nutrition or diet app.



معاينة
استكشف الشاشات
عاين تصميم تطبيق الجوال calorie tracker، القابل للتعديل بالكامل في Sleek.
حول Calorie Tracker App
CalTrack is a calorie tracker app design template built around a warm coral accent, deep-navy headings, and softly rounded white cards that float on a light grey base. Macros get their own color language: violet for protein, gold for carbs, green for fat, and blue for water, so progress reads at a glance across every screen.
The template ships six connected screens that form a complete tracking flow: a Home dashboard with a daily calorie ring and macro bars, a Weekly Plan with a meal timeline and shopping-list action, an Analytics view with calorie trends and meal-frequency stats, a Meal Detail with a nutritional breakdown and health score, a full-screen Food Scan camera, and a Settings profile with streaks and unit toggles. A persistent bottom tab bar ties Home, Plan, Analytics, and Settings together.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
ما في الداخل
الشاشات المضمّنة
Home
A coral header card shows the daily calorie goal as a percentage ring with goal, consumed, and burned stats, followed by color-coded macro and water bars and a recent meals list with a floating add button. This is the daily snapshot users open first.
Weekly Plan
A horizontal day selector sits above a plan-progress tracker and a vertical meal timeline with photos, times, and calorie chips, ending in a 'Generate Shopping List' button. It turns logging into forward planning.
Analytics
Week, Month, and Year tabs sit above a calorie-trends line chart, a meal-frequency breakdown by breakfast, lunch, and dinner, and a health-score trend gauge. It helps users spot patterns over time.
Meal Detail
A full-width food photo tops a card with the meal name, time, and a four-tile nutritional breakdown for calories, protein, carbs, and fat, plus an overall health score with a letter grade and an 'Add Meal' button.
Food Scan
A full-screen camera viewfinder with corner brackets frames a plate of food, with a shutter button and flash toggle for snapping a meal to log. It makes capturing calories fast.
Settings
A profile header with avatar, member badges, and streak, meals, and goals stat cards sits above grouped settings for personal data, goal management, units, and visual mode. It centralizes account and app preferences.
التصميم والميزات
الميزات الرئيسية
- Warm coral accent with deep-navy headings on rounded white cards
- Color-coded macro system: violet protein, gold carbs, green fat, blue water
- Daily calorie ring with goal, consumed, and burned stats
- Vertical meal-plan timeline with completion checkmarks
- Analytics with trend line chart and time-range tabs
- Meal detail with health score gauge and letter grade
- Full-screen food-scan camera with framing brackets
- Persistent bottom tab bar across Home, Plan, Analytics, and Settings
الجمهور
لمن يناسب
حالات الاستخدام
ما يمكنك بناءه
- Launch an MVP for a calorie or macro tracking app
- Mock up screens for an investor or stakeholder pitch
- Hand a complete, consistent UI off to developers
- Explore a redesign of an existing nutrition app
كيفية استخدام هذا القالب
- 1
افتح القالب
تصفح الشاشات وعاين التصميم الكامل لترى إن كان يناسب فكرتك.
- 2
استخدم هذا القالب
افتح نسختك القابلة للتعديل بالكامل في Sleek بنقرة واحدة.
- 3
عدّل بالذكاء الاصطناعي
أعد تنسيق لوحة الألوان، وغيّر التخطيطات، وأضف أو أزل شاشات بمجرد وصف ما تريد.
- 4
صدّر وانطلق
صدّر تصميمك أو سلّمه للمطوّرين، وواصل البناء نحو الإطلاق.
الأسئلة الشائعة
قوالب تطبيقات جوال ذات صلة
ابدأ بتصميم تطبيق calorie tracker
استخدمه في Sleek واجعله خاصاً بك: أعد تنسيق لوحة الألوان، وعدّل أي شاشة بالذكاء الاصطناعي، وصدّر إلى كود أو Figma.
استخدم هذا القالب







