The complete visual language for the Food4Life menu product — foundations, compliance
semantics, and every primitive the interface is built from. Everything on this page is live
markup, not screenshots.
Color
Green leads. Amber earns its weight by being rare — the “4”, one highlight per
view, or a warm button; never a large fill. Tomato is a once-a-page spark. Every surface sits on
cream; white is reserved for raised cards.
Typography
Bricolage Grotesque for display, headings and big numbers. Hanken Grotesk for body, UI and all
data. Numerals are tabular everywhere a figure sits in a column.
Display · Bricolage 800 · 44/1.06 · −.03em
Every tray, accounted for.
Heading · Bricolage 700 · 28px · −.02em
Real food, made from scratch
Body · Hanken 400 · 17/1.6
Built by operators, for operators. Plain, warm and proven — anything a fifth grader can
read, and never a word of jargon.
Data · Hanken 700 · tabular
1.25 5.00 11.60 171.70
Eyebrow · Hanken 600 · uppercase · .16em
Hoff Elementary · Lunch · Grades K–5
Spacing, radius, shadow
A 4/8 scale. Soft corners. Warm shadows built on ink, never gray.
Spacing--space-1…10
Radius8 / 14 / 22 / pill
sm 8
md 14
lg 22
Shadowsm / md / lg
sm
md
lg
Compliance status
The product's central semantic. Status is never carried by color alone — every value pairs a
glyph and a text label with its color, and color appears only as a meter fill or small text.
That keeps amber rare and makes the system readable without color vision.
StatusPipFour states, glyph + label + color
✓ Meets pattern⚠ Near limit▼ Short 3.75▲ Over 10%Not scored
Meter & RangeBarA minimum-only metric, and a min–max metric with its acceptable band
Weekly fruit1.50/ 1.50 cup min
✓ Meets minimum
Weekly grains1.25/ 5.00–5.50 oz eq
▼ Short 3.75
Credit chipA menu item's contribution to each USDA component, tinted by component
MMA 2.50 oz eqGrain 1.25 oz eqVeg 0.50 cupFruit 0.50 cupMilk 1.00 cup
Primitives
Every component the interface is assembled from.
ButtonPill, Hanken 700. Primary green leads; warm amber is a sparing secondary; ghost is outline
Variants
Sizes
TagCategories and menu flags
✓ VegetarianNeeds a swapGrades K–5Normal
BadgeSolid status pill; counts and “Today”
TodayPublishedDraftRejected
Form controlsGreen focus ring at 2px offset; tomato for validation
Serving size is required
✓ Whole grain-rich Contains pork Active Chef Council
StatCalloutBig-number proof stat; the unit in amber
98%
Trays accounted for
40+
Years operating kitchens
AvatarInitials, tinted by role
MADWPR
TabsUnderline bar; green active indicator
Dense table32px rows, sand header, numerics right-aligned and tabular
Metric
Menu
Target
Status
Avg daily calories
176
550–650
⚠ Under
Saturated fat
11.6%
0–10%
▲ Over
Added sugars
0%
0–10%
✓ OK
Avg daily sodium
172
≤1110
✓ OK
Day cardThe atom of the Week surface — plan, crediting, and downstream state in one card
Wed 1Normal✓ Meets pattern
Mini Meatloaf
Entree
MMA 2.50 oz eqVeg 0.13 cup
Production record signed Count due Friday
CountFieldKitchen mode — one figure, thumb-sized
Physical count
24
cases on the shelf
ToastColored left bar; success, warning, danger
Menu published
Families can see Wednesday’s lunch now.
2 items need a swap
Sodium is over the K–5 target.
SaveBarSticky while edits are pending; blocks navigation
You have unsaved changes
EmptyStateAlways names the cause and the fix
No ingredients set up for this building yet
Inventory only shows ingredients matching this unit’s distributors and industry type.
Ask your manager to configure the unit and tag its ingredients.
Which color is legal for which size, so every reading passes WCAG AA.
Use
Token
On cream
Headlines
--ink
14.41
Body and all essential text
--ink-2
7.56
Metadata, 19px and above only
--ink-3
3.35
Links and green text
--garden-600
4.67
Deep green headings
--garden-700
7.27
Short / over status text
--tomato-600
4.59
Primary button fill, white label
--garden-600
5.00
Warm button fill, ink label
--harvest-500
7.61
Amber is a fill with ink text on it, never text on cream. Green as text starts at
--garden-600; --garden-500 is for fills and meter bars.
Motion and interaction
Transitions are background and color only, .12s ease. No scale on press, no bounce, no decorative loops.
Buttons shift one color step darker on hover. Interactive cards lift from --shadow-sm to --shadow-md.
Focus is a 2px --garden-500 ring at 2px offset, with a soft green tint where a glow is needed.
Surfaces are solid. No gradients, patterns, textures or glassmorphism — depth comes from the shadow system and the cream/white/sand trio.
Destructive and locking actions confirm first. Signing a production record and locking an inventory count are irreversible without an Admin.
Content rules
Sentence case for headings and body. UPPERCASE, letter-spaced only for eyebrows and small data labels.
Speak to the reader as you; the brand is we. Plain, warm, proven — a fifth-grade reading level.
Lead a proof point with a real figure, rendered as a StatCallout, not a vague adjective.
Empty states name the cause and the fix. Errors say what to do next, never just that something failed.
Permission messages state what this person can do, and who can do the rest.
No emoji, ever. Warmth comes from the food-motif line icons and the photography.
Iconography
A single-weight rounded line set drawn from a food vocabulary — Leaf, Apple, Carrot, Fork,
Grain, Plate — at roughly 2.2px stroke in deep green. Anything the set doesn’t cover comes
from Lucide, recolored to match, and is flagged as a substitution.