/food-card-lab

Food Card

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

★ Live · Octa dashboard

What's showing in the Octa food cell right now

The exact food cell the Octa dashboard renders — <N2FoodCell chartPlaceholder />. With chartPlaceholder it shows the Nova-score donut + macro goal strip + nutrient ledger, plus a 5-day clickable day-columns chart (height = calories ÷ visible-day max · 2000-kcal dashed y-gridlines · Nova-tinted bars · opacity-only selection mirroring the sleep columns — pin/hover, click-outside unpins). Fed here by a representative fixture mirroring the live /api/food payload.

FoodToday

Nova

Protein138g/220g

Carbs256g/350g

Calories1,845/2,800

Thu

Fri

Sat

Sun

Today

Click any day column to pin it — the donut, macro strip and ledger re-key to that day. Click outside the cell to unpin back to today.
blockedDay columns have no tooltip (intentional). Hover the Nova ring instead.

Tooltip inspector

The Nova ring tooltips — segment + center score

The Nova ring keeps its tooltips. Hover any tier arc for the per-tier segment tooltip (header: tier + share% + trend · foods recursive-bar with grams · nutrient evidence strip: sodium / sat-fat / fiber / protein · worst-tier copy). Hover the center for the score tooltip. The donut below is the live N2NovaDayDonutCell from the cell above, fed the same foodsByDate + tierStatsByDate for Jun 1, so the real shipping tooltips fire on hover (n2 does not export the tooltip bodies standalone, so they can't be pinned statically open like the lattice tooltips).

NOTE: Day columns have no tooltip (intentionally blocked) — Nova ring segment + score tooltips only.

Jun 1 · hover arcs + center

Nova 141% · 589 kcal

Nova 27% · 183 kcal

Nova 332% · 543 kcal

Nova 420% · 530 kcal

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

Calories620/2,800

On track (afternoon)

Protein155g/220g

Carbs260g/350g

Calories2,100/2,800

Over goal

Protein240g/220g

Carbs420g/350g

Calories3,400/2,800

No data

Protein—g/220g

Carbs—g/350g

Calories—/2,800

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

Calories1,964/2,800

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