Fresh Market Daylight

Nutrition App Design Template

Nourish is a calorie and macro tracking app design with a bright, farmers-market look, built for founders and designers shipping a nutrition product.

Use this template

Nutrition app today dashboard with macro ring trio and logged meals

Nutrition app food logging screen with search, quick add, and macro breakdowns

Nutrition app food detail screen with overhead photo and macro ratio ring

Explore the screens

Preview the nutrition mobile app design, fully editable in Sleek.

RecipesScreen 4

Water & HabitsScreen 5

TrendsScreen 6

ProfileScreen 7

About the Nutrition App

Nourish is a nutrition app design template built on a "Fresh Market Daylight" look: a bright paper-white base, deep kale-green text, and a vivid leaf-green accent reserved for progress fills and primary actions, with warm clementine for streaks and alerts. Surfaces are calm tonal blocks separated by soft pale-green tints and hairline rules instead of heavy shadows, so every screen feels airy and high-key.

The template ships seven connected screens that form a complete tracking flow: a Today home anchored by the signature Macro Ring Trio, a Log Food search with quick-add and barcode scanning, a Food detail with a macro breakdown ring, a photographed Recipes grid, a Water and Habits screen with streaks, a Trends dashboard, and a Profile with goals and connected accounts. The three concentric arcs (carbs, protein, fat) recur as the hero on Today, shrink onto every meal card, and explode full-screen on detail views.

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.

Screens included

Today

A greeting home with the large Macro Ring Trio showing 1,420 of 2,100 kcal, a calories-remaining figure, and a list of logged meals each with a mini ring. The daily anchor for tracking at a glance.

Log Food

A search bar with a barcode-scan button and Recent, Favorites, and My Meals tabs over a quick-add list showing per-item calories and carb, protein, and fat breakdowns. Fast entry for everyday logging.

Food detail

An overhead food photo with a calorie and prep-time summary plus a concentric macro ratio ring and gram-level carb, protein, and fat figures. Helps users understand a meal before logging it.

Recipes

A two-column grid of naturally-lit meal photos with kcal, prep time, and tags like high protein, vegan, and low carb, plus a filter row and search. The discovery surface for meal ideas.

Water & Habits

A hydration tracker with fillable glass icons toward a 2.0-liter goal and a daily streak checklist for habits like five servings of veggies and no late-night snacks. Builds consistency with clementine streak counts.

Trends

A weekly bar chart of calories versus goal, an average macro split donut, and a weight trend figure, with a Week and Month toggle. Turns daily logs into progress over time.

Profile

A profile with primary goals (weekly weight goal, daily macro target), connected accounts like Apple Health and Oura Ring, and a sign-out action. The hub for settings and integrations.

Key features

Fresh Market Daylight aesthetic: paper white, kale green, one leaf-green accent
Signature Macro Ring Trio for carbs, protein, and fat
Calm flat surfaces with pale-green tints and hairline rules
Today dashboard with calories-remaining and logged meals
Food log with barcode scan and quick-add macros
Photographed recipe grid with diet tags
Water tracker and habit streaks in clementine
Trends with calorie bars, macro split, and weight trend

Who it's for

Founders validating a nutrition or calorie-tracking MVP

Product designers needing a health-app starting point

Indie developers building a meal-logging app

Wellness teams prototyping a diet or macro tracker

What you can build

Launch an MVP for a calorie and macro tracking app
Mock up screens for an investor or stakeholder pitch
Hand a consistent nutrition UI off to developers
Explore a redesign of an existing diet app

How to use this template

1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
2
Use this template
Open your own fully editable copy in Sleek with one click.
3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
4
Export and ship
Export your design or hand it to developers, and keep building toward launch.

Questions, answered. Everything to know before you start.

How do I build a nutrition app from this template?

Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from seven complete screens instead of a blank canvas, so you reach a working nutrition app design far faster.

What screens are included in this nutrition app design template?

Seven connected screens: Today, Log Food, Food detail, Recipes, Water and Habits, Trends, and Profile. Together they cover the core flow of a real nutrition app, from logging meals to tracking macros and progress over time.

Can I customize the nutrition app UI design?

Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the palette, change layouts, swap the macro ring, and add or remove flows. There's no manual redraw; you describe the change and it's applied.

Is this template suitable for a calorie or macro tracking app?

Absolutely. The Macro Ring Trio, food log, and trends screens map cleanly onto calorie counting, macro tracking, and meal planning apps. Adjust the targets, recipes, and habits to fit your niche.

Can I export the design to code or Figma?

Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.

Is this nutrition app design template free to use?

You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

Something else? Write to support@sleek.design.