Patterns
Component library
Brand — green
50
100
200
400
500
700
900
Ask — amber
Used only when the app is asking the user something. Never decorative, never "premium".
50
100
200
400
500
700
Confidence & macros
conf.high
conf.med
conf.low
protein
carbs
fat
Confidence badges — the product's core signal
Seen — measured from the photo. Label — read off a barcode, the only exact case. Guessed — reasonable inference from what's visible. Unknown — the camera physically cannot establish it. Never show a number without one of these.
Buttons
Component row
White rice
210g · cooked
270
Cooking fat
Not visible in the photo
≈126
Option rows — quiz and clarify
Chips
Quota meter
Day bar — one segment per meal
Day strip — seven days, seven rings
Month grid — the same ring, seven columns
Macro cells — three across, not stacked
Protein
85g left
Carbs
133g left
Fat
31g left
Fields, search, toggle
Numbers
Every kcal and gram figure uses .num for tabular alignment. Integers only — no fractional grams, ever. A total must always equal the sum of its parts — in an app about honest arithmetic, a headline that does not reconcile with its own rows is the worst possible bug.
Empty state
Nothing logged yet
Your first meal takes about five seconds.
Skeleton