Foodie, as it looks.
The calm organiser for a busy family's weekly shop. This page is the source the app is built from: change a colour here and the page, the app and the checks all move together.
Who Foodie is for.
Everything on this page is tested against these five lines. A choice that makes Foodie louder, busier or more like a supermarket is wrong, even if it looks good.
- Audience
- Busy familiesTime-poor parents feeding three to five, with the biggest weekly shop and the most planning to do.
- Role
- The calm organiserIt takes the load off, quietly and dependably.
- Promise
- ReliefYou know what you're eating this week, what it costs and what you're saving.
- Value
- Farm-firstWhole, natural food grown and made on a farm comes first. A value, not a claim: the app doesn't call a meal healthy without the data to back it.
- Stance
- Impartial refereeBetween the supermarkets. Foodie never looks like, or sides with, any of them.
Personality
- Thrifty, not cheap
- Efficient, not burdensome
- Clear, not noisy
Voice
Plain and reassuring. Short sentences, no jargon, and the numbers stated honestly.
Your week's planned. Here's your shop: £61.84.
Colour and type.
Field is the one next step. Tomato marks the wins. Every text pairing clears AA in both modes, and the ratios below are worked out from the live tokens, not typed in.
Ground
Cream
- Light
- #F4F0E7 · 16.57:1 AA ✓
- Dark
- #11110A · 16.57:1 AA ✓
Against the text colour
Cards
Eggshell
- Light
- #FAF6EF · 17.57:1 AA ✓
- Dark
- #1A1A14 · 15.35:1 AA ✓
Against the text colour
The worktop
Oat
- Light
- #E7E2D9 · 14.68:1 AA ✓
- Dark
- #23231E · 13.81:1 AA ✓
Against the text colour
Text
Ink
- Light
- #11110A · 16.57:1 AA ✓
- Dark
- #F4F0E7 · 16.57:1 AA ✓
Against the ground
Muted text
Husk
- Light
- #66635C · 5.26:1 AA ✓
- Dark
- #A29E96 · 7.07:1 AA ✓
Against the ground
The one next step
Field
- Light
- #1E5B34 · 7.54:1 AA ✓
- Dark
- #80CD8B · 9.87:1 AA ✓
Against its own label
Selected
Sprout wash
- Light
- #D8EFD8 · 8.65:1 AA ✓
- Dark
- #19321D · 10.49:1 AA ✓
Against its own label
Marks and wins
Tomato
- Light
- #D24F39 · 3.75:1 3:1 ✓
- Dark
- #F1735C · 6.61:1 3:1 ✓
Against the ground
Success
Sprout
- Light
- #516B07 · 5.31:1 AA ✓
- Dark
- #AFD46A · 11.18:1 AA ✓
Against the ground
Warning
Mustard
- Light
- #8A5600 · 5.39:1 AA ✓
- Dark
- #EBC166 · 11.12:1 AA ✓
Against the ground
Error
Beetroot
- Light
- #B80049 · 5.88:1 AA ✓
- Dark
- #F67591 · 7.06:1 AA ✓
Against the ground
Illustration
Straw
- Light
- #ECCE83 · 12.32:1 AA ✓
- Dark
- #D6BB79 · 10.09:1 AA ✓
Against Ink text
Kraft labels
Soil
- Light
- #C6A483 · 8.10:1 AA ✓
- Dark
- #B19275 · 6.49:1 AA ✓
Against Ink text
Illustration
Leaf
- Light
- #ABD297 · 11.12:1 AA ✓
- Dark
- #9BBD8A · 9.03:1 AA ✓
Against Ink text
Illustration only
Sky wash
- Light
- #C7E3F1 · 14.12:1 AA ✓
- Dark
- #B8CFDB · 11.64:1 AA ✓
Against Ink text
The type scale
Instrument Serif for headlines, never under 20px. Figtree for everything else, with tabular figures on every price. JetBrains Mono prints the till receipt and nothing else.
- display-lgInstrument Serif · fluidYour week, sorted.
- titleInstrument Serif · 40pxPlan your week.
- headingInstrument Serif · 28pxShop at Lidl
- subheadingInstrument Serif · 22pxCook these again next week?
- body-lgFigtree 400 · 18pxChilli con carne, for four on Tuesday.
- bodyFigtree 400 · 16pxPick meals from your library to cook this week.
- smallFigtree 400 · 14pxPlanning for 4 people · change
- labelFigtree 600 · 12px capsWeek of 21 Sept
How money is shown.
Honest numbers are the promise. Prices line up, pence are never hidden, and a saving is only shown when it's a real one: against the price you'd have paid, never an invented reference.
- Chicken thighs, 1kg£4.85
- Basmati rice, 1kg£1.49
- Tinned tomatoes ×4£1.96
- Onions, 1kg£0.89
- Mature cheddar, 400g£3.15
Total£12.34
£61.84
The week total, on its own. Pence stay visible but step down, so the pounds read first.
Saved £8.20 against the single-store shop you'd have done.
The mark.
Today's mark, on both grounds and at the sizes the app draws it. A farm-first logo is being drawn, and this section will show it when it lands.
Every component, every state.
These are the app's own components, not pictures of them. Switch the theme in the header to see them in the other mode.
Buttons
One Field primary per screen. Tab to see the focus ring; press to feel the spring.
Focus ring
2px Field, 2px offset, at least 3:1 on every surface in both modes.
Chips and toggles
Selected is the Sprout wash with a border and a bolder label, so it never rests on colour.
Stepper
± at 44px. At its limit the button stays readable on a dashed edge.
Inputs
44px, 16px text, the Field ring. Errors are Beetroot with an icon and say what to do.
Enter a whole-pound amount, e.g. 100.
Hand-drawn marks and notes
Tomato, one mark per screen, on the thing that matters most. A note only repeats what the text says.
Till receipt
Totals and savings, and the only place mono is used. A real saving gets the circle and a note.
- Chilli con carne
- £9.40
- Chicken curry
- £11.25
- Spaghetti bolognese
- £8.60
TOTAL£29.25
Prices checked
When the week's prices were captured, in plain copy. They can be checked again only until the first tick.
Shelf-edge label
Any single price. The band is the store's own colour when it compares stores.
Tesco
£47.20
Whole week, one trip
Onions, 1kg
£0.89
£0.89/kg
Pantry label
Something you already have, on /kitchen only.
Empty state
An invitation, not “Nothing here”: art, one warm line, and one Field action unless the screen's primary is already above.
Nothing to shop for yet.
Shopping basket
Progress in the shop: it fills as items are ticked, is full when the shop's done, and is the pricing loader.
Place setting
A meal: a plate disc and a place card with its name. Never a food photo.
Chilli con carne
Kitchen icons
Crockery for the slots, a hob ring for today's cook, a tub for leftovers. Icons, not motifs.
Waiting
Skeletons shaped like what they become; pricing shows the basket filling. Reduced motion holds them still.
Cookie choice
Floats at the foot of the page until answered. Two equal buttons: no nudge towards yes.
Can we count visits? Analytics cookies show us which pages help people plan their week. They're never used for ads. Privacy
Check-off
A 28px circle in a 44px target. The tick draws in and pops; the row strikes through in Husk.