Foundations
Colour
Paper page, porcelain cards, forest ink, ember for attention and errors.
Typography
Type
Marcellus for display and headings. Helvetica Neue / system sans for body.
Eyebrow label
Place-based intelligence
Section heading for tools and maps
Large body for short supporting sentences on hub pages.
Body copy for denser product surfaces. Keep it plain and calm. Links use forest to ember on hover.
Caption / metadata — 12px, muted forest.
Actions
Buttons and links
Pill controls. Primary is forest. Secondary is outlined. Ghost stays quiet.
Surfaces
Cards
Tonal fill, large radius. Journey entries read as link cards.
Food Environment
Map local authorities, schools, and neighbourhood context.
Raised content card
White on paper for denser content blocks and metric groups.
Inputs
Forms
Pill fields, forest focus ring, ember for errors.
Hint text stays muted.
Enter a full postcode.
Navigation
Tabs
Pill tabs in a tinted track — same pattern Food Environment will use.
Feedback
Callouts, badges, toast, dialog
Method note
Quiet explanatory callout for assumptions and data caveats.
Data
Tables, metrics, lists
24.6%
Year 6 overweight prevalence
3
Outlets within 400m
| Local authority | Schools | Median outlets |
|---|---|---|
| Bristol | 148 | 2.0 |
| Westminster | 42 | 4.5 |
- Em dash lists instead of bullet glyphs
- Keep instructional steps plain and numbered when order matters
Map chrome
Panel + map shell
Food Environment density without Leaflet — porcelain panel beside a map plane.
Optional assets
Photography
Kept for possible atmosphere later. Not required on product screens.
