InMeals · Design System

All screens.
One place.

Complete UI mockup library for InMeals — the nutritionist platform. Backoffice tools and mobile client app, all in one overview.

Backoffice Mobile App
8
Backoffice screens
6
Mobile screens
🎨
Mediterranean
Design language
Web Application
Backoffice — Nutritionist Tools
8 screens View index →
📊
Core
Dashboard
KPI cards, today's appointments, active clients panel, and quick-action shortcuts.
Open
→
👥
Core
Clients
Full roster with search, multi-filter, tag system, bulk actions, table & grid view toggle.
Open
→
🧑
Detail
Client Detail
4-tab profile view: overview, plan history, appointments, clinical notes, and offboarding.
Open
→
📅
Core
Appointments
Week calendar + list view, 6 type colour codes, drag-to-create, type filters, new appointment modal.
Open
→
🍽
Core
Plan Builder
7×5 meal grid, drag & drop from library, free-text custom meals, appointment linking, publish flow.
Open
→
⎙
Print
Plan Print View
A4-ready print layout: cover, week overview, 7 daily pages, shopping list. Template-aware rendering.
Open
→
🎨
Design
Template Designer
Drag-and-drop print template editor. 13 block types, 5 colour themes, live preview, undo/redo.
Open
→
iOS / Android
Mobile App — Client Experience
6 screens View index →
👋
Mobile
Onboarding
Welcome flow, goal selection, dietary preferences and profile setup screens.
Open
→
☀️
Mobile
Today
Daily meal timeline, progress rings, hydration tracker, and quick-log interactions.
Open
→
📆
Mobile
Week View
7-day plan overview, adherence badges, calorie bar, and navigation between days.
Open
→
🥗
Mobile
Meal Detail
Ingredient list, macro breakdown, prep instructions, allergen flags, and log/skip controls.
Open
→
🔄
Mobile
Meal Swap
Smart swap suggestions filtered by dietary tags, calorie proximity, and nutritionist approval.
Open
→
🛒
Mobile
Shopping List
Auto-generated shopping list from the active plan, grouped by category with check-off.
Open
→
Visual Language
Design Tokens
Colour Palette
Olive
#BCCD96
Terra
#E8A082
Amber
#D4A853
Teal
#6B8B7A
Purple
#A082D4
Green
#9BC878
BG
#0A0B08
Surface
#1A1C17
Card
#1F211C
Text
#EAE6DF
Muted
#8C8880
Typography
Aa
Bricolage Grotesque
600–800 · Headings, titles, numbers
Aa
Manrope
300–700 · Body, labels, UI copy
Type Scale
Display36px · 800
Heading22px · 700
Body strong14px · 600
Body muted13px · 400
LABEL11px · 600 · caps
UI Design System · 14 screens · 2026
Backoffice Mobile Brief