/food-card-lab

Food Card

Components from @iudofia2026/n2/cards · edit in n2 repo, updates here and on octa dashboard

Current

as shipped in octa/desktop · imported from @iudofia2026/n2/cards

FoodMay 9–15

Nova

Protein136g / 220g

Carbs308g / 350g

Cals

1,964

4k2k

Chart tooltip · full data day

FriMay 15

Nova46

Protein

136g/ 220g

Carbs

308g/ 350g

Cals

1,964

38%

Meal ring tooltip · hover ring

blocked

BreakfastNova 1

LunchNova 4

DinnerNova 3

NutrientLedger

9 nutrient cups (fill = % of goal) + sodium ceiling · hover any cup

Morning · empty

No meals logged yet today

Mid-day · partial

Lunch in · most floors mid-range

Evening · all hit

Every floor ≥100%, sodium still under ceiling

Sodium overshoot

Floors hit · sodium past 2300 mg cap

MacroGoalStrip

three states — under target · near goal · over

Under (morning)

Protein45g / 220g

Carbs80g / 350g

Cals

620

On track (afternoon)

Protein155g / 220g

Carbs260g / 350g

Cals

2,100

Over goal

Protein240g / 220g

Carbs420g / 350g

Cals

3,400

No data

Protein—g / 220g

Carbs—g / 350g

Cals

—

NovaDayDonut

size comparison · 40 / 52 / 64

clean day

—

40px

—

52px

—

64px

takeout day

—

40px

—

52px

—

64px

no data

—

40px

—

52px

—

64px

NovaMealRing

meal coverage + score states

all NOVA 1 · clean

mixed · amber

takeout lunch · red

no lunch

no data

Explorations

hero row iterations · May 15 2026

v2 (macro strip) is the winner. Blue outline marks it.

v1 — Window + Gap

Rejected: eating window not compelling; gap showed −15.4h bug; neither col adds actionable insight at a glance.

Score

3.9h

10.4 7d

Window

—

too close

Gap

v2 — Macro Goal Strip (WINNER)

Protein / Carbs / Cals each with fill bar + today vs goal. Fills rightward. Orthogonal to NOVA score. Goal: 220g / 350g / 2800. Color: green ≥100%, neutral 70–99%, dim <70%.

Score

Protein136g / 220g

Carbs308g / 350g

Cals

1,964

NovaMealRing · design rationale

3 equal sectors: breakfast (top-right) · lunch (bottom) · dinner (top-left). Center dot = NOVA score color.
Sector color = highest (worst) NOVA tier eaten in that slot. Dim sector = meal not logged.

Great recovery day

All NOVA 1 meals · score 84

Mixed day

Clean breakfast, dinner slip · score 71

Takeout lunch

Fast food mid-day · score 46

No lunch logged

IF / skipped

No data

Day not logged

Explorations

NOVA legend tooltip · Jobs/Ive · May 15 2026

Sketch C is the winner. Blue outline marks it. Hover any tier in the legend bar on the live cell above.

A — Name only

Rejected: no visual hierarchy, header not big enough to feel intentional.

Nova 1

the good stuff

B — Big header, no bar

Strong. Clean. Trusts the user. No tier orientation.

Nova

whole foods,
one ingredient

C — Big header + description + scale bar (WINNER)

Header unmistakable. Description concrete. Scale bar orients within the 4-tier system instantly.

Nova

whole foods,
one ingredient

Nova

basic cooking stuff —
oils, spices, honey

Nova

processed but recognizable —
bread, cheese, pasta

Nova

ultra-processed,
skip it when you can

D — With today's %

Rejected: mixes legend (definition) with chart data (today). Column tooltip already shows %.

Nova

whole foods

68% of today

Explorations

NutrientLedger · Jobs/Ive · May 21 2026

Sketch C* — Nutrient Ledger — is the winner. Blue outline marks it. 9 floor-bars + 2px divider + sodium ceiling-bar with baked 80% / 100% ticks. Honest direction encoding: floors fill left-to-right, ceiling fills right-to-left.

A — Compass

Radial spokes. Rejected: ornament-risk, requires decode, sodium as inverted spoke = special grammar.

        iron
          │
   omega╲│╱calcium
   vitD──●──magnes
   vitC ╱│╲potass
   fiber ┼ zinc
        sodium▼

B — Dahlia

10 petals. Rejected: charm-led, low resolution at 280px wide, sodium-fold = theatre.

     ✿ ✿ ✿
      ✿✿✿
     ✿ ● ✿
      ✿✿✿
     ✿ ✿ ✿
   sodium folds in

C* — Nutrient Ledger (WINNER)

9 nutrient cups in a row, each filling like water to % of goal. Floor cup at 100% → chromatic green (#2db89a). Sodium is a ceiling: amber (#ee9b00) at 100%, red (#bb3e03) at 120%. Hover any cup for the exact total / goal.

D — Honeycomb matrix

Discrete cells fill in milestone steps. Rejected: quantized, gamified tone, loses continuous resolution.

  ●●●○○  iron
  ●●●●○  calcium
  ●●●●●  magnesium
  ●●○○○  potassium
  ●●●●●  zinc
  ─────
  ○○●●●⚠ sodium