Visual identity
Colour system
| Token | Light | Dark | Role |
|---|---|---|---|
cloud | #F5F3EE | #12191F | Ground |
paper | #FFFFFF | #1B242B | Cards, sheets |
ink | #1F2A33 | #EEF1F0 | Text |
ink-muted | #55626B | #A9B4BA | Secondary text |
kingfisher | #0B6E77 | #3FB6BF | Brand, actions |
kingfisher-mist | #CFE6E8 | #1E3A3E | Quiet tints |
dusk | #F28C38 | #F59A4E | Accent, Landing Mark |
landed | #2A7354 | #5CC08F | Success status |
caution | #B3261E | #F2867E | Safety and errors |
hairline | #DAD6CC | #2C3740 | Dividers |
Approved text pairs (checked contrast)
| Text on ground | Light | Dark |
|---|---|---|
| ink on cloud | 13.2:1 | 15.6:1 |
| ink-muted on cloud | 5.7:1 | 8.4:1 |
| kingfisher on cloud | 5.4:1 | 7.3:1 |
| white on kingfisher | 6.0:1 | — |
| cloud-dark (#12191F) on kingfisher (dark) | — | 7.3:1 |
| ink on dusk | 6.0:1 | 6.0:1 |
| landed on cloud | 5.2:1 | 7.9:1 |
| caution on cloud | 5.9:1 | 7.2:1 |
Never: dusk text on light grounds (2.2:1); kingfisher text on kingfisher-mist below 18px; status colours used decoratively.
Print equivalents (approximate): kingfisher ≈ Pantone 7714 C; dusk ≈ Pantone 1495 C; ink ≈ Pantone 7546 C. Verify on press.
Typography
- Fraunces 600 for display: hero, page titles, campaign lines. Optical size on; tight but not cramped leading.
- Manrope for everything else: 400 body, 500 lead and small, 700 labels.
- Type scale: hero 56/60, h1 40/46, h2 28/34 (Fraunces 600); lead 19/28, body 16/24, small 14/20, label 12/16 (Manrope).
- Line length: 45–75 characters.
- Numerals: Manrope tabular figures in trackers and receipts.
- Hierarchy is made with size and space, not colour.
Spacing, radius and elevation
- Spacing: 4, 8, 16, 24, 32, 48 px (
space-1tospace-12). - Radius: 6 (
radius-sm), 12 (radius-md), 20 (radius-lg), pill (radius-pill). - Elevation: hairline borders by default; one soft shadow for sheets over maps (0 8px 24px, ink at 8%).
- Focus: 3px dusk ring.
Layout and grid
- Mobile: 4 columns, 16px margins, 16px gutters.
- Desktop: 12 columns, max content width 1120px, 24px gutters; running text max 680px.
- Touch targets at least 44px.
- Leave one generous empty zone in every composition: calm needs air.
Iconography
- 24px grid, 2px rounded strokes, round caps and joins,
inkorkingfisher. - Corners follow
radius-sm. - Core set: Wren, Landing Spot, shop, pharmacy cross, bag, clock, wind, pause, check, phone, map pin, chime.
- Icons are never the only signal: always paired with a word.
Illustration
- Flat, soft geometric shapes from the radius scale; no outlines.
- Brand colours only; dusk appears once.
- Gentle dotted arcs for flight paths (echoing the Glide).
- People are simple and warm, diverse in age, ability and background, never cartoonish.
Photography and film art direction
- Light: golden hour or soft overcast daylight. Never harsh noon, never night vision.
- Places: real, lived-in porches, gardens, small-town main streets.
- People: relaxed, mid-action, not posed for the camera; all ages.
- The Wren: small in frame, high (at least a third of the frame above any person's head), propellers in soft guards and visibly spinning, a single dusk light underneath.
- Camera: eye level or slightly low; slow push-ins; no drone POV looking into windows.
Standard shot list
- Wide: the Wren crossing a calm suburban sky above rooftops.
- Medium: the bag lowering on its tether onto the Landing Spot.
- Close: a hand lifting the bag; Landing Spot in soft focus.
- Reaction: a relaxed smile or wave from a porch.
- Shop: the partner shopkeeper handing the order to a Nest.
Motion
| Name | Duration | Easing | Use |
|---|---|---|---|
| Glide | 600 ms | cubic-bezier(0.25, 0.1, 0.25, 1) | Screens entering, the tracker route drawing |
| Settle | 400 ms | cubic-bezier(0.2, 0.8, 0.2, 1) | Cards and the Landing Mark arriving |
| Lift | 300 ms | cubic-bezier(0.4, 0, 1, 1) | Things leaving |
Nothing bounces, spins or flashes. Respect reduced-motion settings: replace motion with a simple fade.
Sound
- Landing chime: two soft notes, a rising major third, warm and woody (marimba or felt piano), under one second.
- Paused tone: one low, gentle note.
- No whooshes, buzzes or sci-fi sounds. Music: acoustic, unhurried, around 90 BPM.
Data visualisation
Kingfisher for the main series, ink-muted for comparison, dusk for the single highlighted point. No more than three colours per chart.