Nutrient Ledger
Micronutrient Progress
Four visual metaphors · 280 × 40px slot · 10 nutrients · colorblind-safe
A — Arc Row
SVG arc pips · stroke-dashoffset
Nine 16px SVG arc pips. Arc fill = stroke-dashoffset on a circle. Track dim, fill bright. At 100%: arc color shifts to #2db89a. Sodium bar below divider, right-to-left, with 80% and 100% tick marks.
Empty
No meals logged
Partial
Mid-day
All Hit
Every floor ≥ 100%
Overshoot
Sodium past 2300 mg cap
Arc pip at different sizes
B — Cell Grid
floor cells + sodium wide cell
Nine 22×22px cells for floor nutrients. Fill from bottom, brightness proportional. At 100%: #2db89a dot top-right corner. Sodium: wide cell (44×22px) with right-to-left fill — distinct aspect ratio signals "different rule."
Empty
No meals logged
Partial
Mid-day
All Hit
Every floor ≥ 100%
Overshoot
Sodium past 2300 mg cap
C — Thick Segments
6px bars · 2px gap · more presence
Same structure as the original design, but bars are 6px tall (3× the current 2px) with more breathing room. Tests whether the bar metaphor is salvageable with more visual weight. At 100%: 8px dot at bar terminus.
Empty
No meals logged
Partial
Mid-day
All Hit
Every floor ≥ 100%
Overshoot
Sodium past 2300 mg cap
D* — Dot Field (winner)
sqrt opacity curve · #2db89a at 100%
Nine 14px solid circles in a row. Opacity follows sqrt(p) — perceptually even, not linear. Dark dots = incomplete. Bright dots = done. At 100%: dot becomes #2db89a — the only chromatic event on the floor row. Sodium bar below the divider is the only rectangular element, structurally encoding "different rule."
Empty
No meals logged
Partial
Mid-day
All Hit
Every floor ≥ 100%
Overshoot
Sodium past 2300 mg cap
Sqrt opacity curve
Dot size variants
9 × 14px + 8 × 4px gap = 158px total row width (fits 280px container)
Sodium states stress test
0%
no sodium today
50%
1150 mg
79%
1820 mg — under
85%
1955 mg — alert
100%
2300 mg — at cap
120%
2760 mg — over
/nutrient-ledger-lab
4 variants · D* winner