Design System & Component Library
Every reusable component the specialist admin panel and client apps are built from. Warm-cream canvas, four-tier green, Poppins + Inter.
Colors
Four-tier green mapped to surface roles. Gold is a status accent only. Never pure-white canvas.
Starbucks Green
#006241 · headings
Green Accent
#00754A · CTAs
House Green
#1E3932 · bands
Green Light
#d4e9e2 · tints
Gold
#cba258 · status
Neutral Warm
#f2f0eb · canvas
Ceramic
#edebe9 · separators
White
#ffffff · cards
Danger
#c82014 · errors
Warning
#fbbc05 · alerts
Typography
Poppins for headings/display, Inter for everything else. Hierarchy comes from weight + color, not just size.
Display · Poppins 600
Eat well today
H1 · Poppins 600 · brand green
Weekly plan overview
H2 · Poppins 400 · ink
Weekly plan overview
Body Large · Inter 400 · 19px
A balanced breakfast keeps energy steady through the morning.
Body · Inter 400 · 16px
Oats with blueberries, greek yoghurt, and a drizzle of honey — 420 kcal.
Small · Inter 500 · 14px
Protein 28g · Carbs 45g · Fat 12g
Micro · Inter 400 · 13px · soft
Last updated 2 hours ago
Badges & Status
Patient status, plan states, tags, and the gold Rewards-style pill.
Patient status
Tags
Accent pills
Inputs
Floating-label fields, selects, search, and validation tints.
Please enter a number in kg.
Toggles, Checks & Sliders
Per-client feature toggles, checkboxes, radios, and the portion slider.
App feature toggles
Checkboxes
Radio — day type
Portion slider
Macro & Calorie Rings
The signature nutrition component. Calorie progress ring + macro bars.
Protein
Water
Steps
Meal & Ingredient
Meal card, plan-slot row, and ingredient database row.
Oatmeal & berries
420 kcal10 min P 28 · C 45 · F 12
Scrambled eggs on toast
Breakfast · 320 kcal · P22 C24 F14
Chicken salad bowl
Lunch · 540 kcal · P42 C30 F26
Nutrition Facts Table
Label/value rows with hairline separators — reused everywhere macros are shown.
Nutrition
per serving (240g)- Energy
- 420 kcal
- Protein
- 28 g
- Carbohydrate
- 45 g
- of which sugars
- 12 g
- Fat
- 12 g
- of which saturates
- 3 g
- Fibre
- 6 g
Cards
KPI stat tiles, patient card, and the dark feature band.
48
+6 this month
132
across all clients
7
needs follow-up
3
unread
Anna Kowalska
ActiveWeight loss · Vegetarian · Last active 2h ago
-3.2 kg
progress
86%
adherence
Aug 12
next visit
Branded plan, ready to send
Your logo, brand colors, and this week's meals — one tap to a shareable PDF.
Data Table
Patient list / ingredient DB pattern — sortable header, row hover, row actions.
| Name | Status | Plan | Last activity | |
|---|---|---|---|---|
| Anna Kowalska | Active | Weight loss 1900 | 2 hours ago | |
| Marek Nowak | Paused | Muscle gain 2600 | 3 days ago | |
| Julia Wiśniewska | Archived | — | 2 months ago |
Chat
Specialist ↔ client messaging bubbles.
Delivered · 14:32
Tabs & Segments
Underline tabs for profile sections; segmented control for day/week toggles.
Segmented control
Alerts & Toasts
Allergy/warning banners and transient toasts.
Allergy conflict
This meal contains peanuts — the client is allergic. Swap before assigning.
Repeated meal
"Oatmeal & berries" appears 4 times this week.
Plan balanced
Macros align to 100% of the daily target.
Modal / Dialog
Assign-plan / add-patient dialog pattern.
Assign plan
Avatar · Empty · Skeleton
Odds and ends used across every screen.
Avatars
No plans yet
Create the first plan for this client.
Skeleton