today

Summary

The day bar, the free logging paths, and the meals logged so far.

Raw wireframe

• .context/designs/mobile/home/today.html

Why it is drawn this way

Barcode and search are deliberately prominent. They cost nothing to run and they keep the metered model calls for the meals that actually need a camera — see metering.

The calorie ring was replaced by a bar, and the reason is not taste. A ring is a COMPLETION metaphor borrowed from fitness: closing it is the win. Eating is not a completion task — meeting the target is fine and going past it is the thing you want to see coming — and a circle cannot draw "over" at all: 2,480 of 2,272 wraps the arc onto itself and reads as 9%. The bar's full width is the target, so the empty tail is the food still available, which is the quantity a person opens the app to see and the one the ring never drew.

The bar is one segment per meal, coloured by time of day. Breakfast is the palest brand step and dinner the deepest, so the bar visibly darkens as the day fills and the widest block is the biggest meal. It is deliberately NOT coloured by confidence: the end user has no concept of how sure the estimator was, and does have one of breakfast. Confidence stays where it belongs, as the badge on each meal row. See confidence.

Red appears only past the target tick. That is why the meal colours are all one hue family — red has exactly one job on this screen, and --conf-low is the same hex as --danger, so spending it on an uncertain estimate here would make "we don't know" and "you went over" the same colour inside one object.

All four meal names hold a single line, at 9px with flex-wrap: nowrap. A fourth meal wrapping to a second row grew the card by 7px at dinner time — exactly when it should be steady.

The day strip is seven small rings, and that is where a ring still earns its keep. A day is a closed quantity against a fixed target, which is what a circle says well. It replaced a chip-and-dot strip whose four dot colours needed a four-item legend directly underneath — a row of the home screen spent teaching its own alphabet. Fill needs no key and says how MUCH of the target was met, where the dots only said which band the day fell in.

Selection is weight, not colour. The selected day's date steps from 700 to 900 and its weekday letter goes with it, from --ink-3 to --ink. Nothing about the ring changes.

That is the third attempt. An outer ring came first and cost 3px of padding plus a 2px shadow, which made the selected chip 57px against its neighbours' 51px and stepped the strip's baseline down on either side of it. A filled centre fixed the box and broke the meaning instead: the ring's colour already says how the day went — brand for under, --danger for over — so a brand disc sat underneath a red arc and put two unrelated messages in one 30px object. On the day you went over target it read as approval.

Weight costs nothing in either direction. It changes no box, it borrows no colour that means something else, and it is the same "this one" the chrome bar and the flow chart use.

A zero-length stroke with round caps still paints a dot, so every blank day wore a green mark claiming something was logged. .dayring.is-blank .f is display: none for that reason.

It is not one — this is the Today tab with a different day in state, and treating a state change as navigation is how the Add-tab bug in CLAUDE.md started. The glyph never changes; on a past day the tap target is simply added under it.

The header date opens calendar, a month sheet over this same route, and picking a day there is the same setDay() a chip makes.

The unresolved nudge is a shortcut, not a step. It jumps into the ask from a meal already logged.

Empty — a day with nothing logged

The ring is still shown, at zero. The target is the thing the user has just finished setting up, and hiding it would waste the onboarding they just did.

Three entry points, ordered by what we want tried first. Photograph it, then barcode, then search.

Locked — the photo allowance is spent

The fact is moved forward to Today. Until this screen the only place that said the allowance was gone was the camera's own turn-away, which a user reaches by opening the camera to log a meal. That is the worst possible moment to ask someone for money.

Brand green, not red. Red is for something that went wrong. Nothing went wrong — the allowance did exactly what it said it would, and the app still works. The spent meter is the only part allowed to be red, because that part genuinely is at zero.

The escape hatch is inside the card, not under it. A user who does not want to pay must be able to read one card and know what still works, without scrolling past the offer to find out.

The two free paths keep their usual slot as well. The card answers "why can't I scan"; the tiles answer "what now" on every other day, and they must not move about.

Related

• confidence
• metering
• calendar
• today

Sources

• .context/designs/mobile/home/today.html