Trust, but verify
← Test Kitchen

Visual identity

Colour system

TokenLightDarkRole
cloud#F5F3EE#12191FGround
paper#FFFFFF#1B242BCards, sheets
ink#1F2A33#EEF1F0Text
ink-muted#55626B#A9B4BASecondary text
kingfisher#0B6E77#3FB6BFBrand, actions
kingfisher-mist#CFE6E8#1E3A3EQuiet tints
dusk#F28C38#F59A4EAccent, Landing Mark
landed#2A7354#5CC08FSuccess status
caution#B3261E#F2867ESafety and errors
hairline#DAD6CC#2C3740Dividers

Approved text pairs (checked contrast)

Text on groundLightDark
ink on cloud13.2:115.6:1
ink-muted on cloud5.7:18.4:1
kingfisher on cloud5.4:17.3:1
white on kingfisher6.0:1—
cloud-dark (#12191F) on kingfisher (dark)—7.3:1
ink on dusk6.0:16.0:1
landed on cloud5.2:17.9:1
caution on cloud5.9:17.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-1 to space-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, ink or kingfisher.
  • 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

  1. Wide: the Wren crossing a calm suburban sky above rooftops.
  2. Medium: the bag lowering on its tether onto the Landing Spot.
  3. Close: a hand lifting the bag; Landing Spot in soft focus.
  4. Reaction: a relaxed smile or wave from a porch.
  5. Shop: the partner shopkeeper handing the order to a Nest.

Motion

NameDurationEasingUse
Glide600 mscubic-bezier(0.25, 0.1, 0.25, 1)Screens entering, the tracker route drawing
Settle400 mscubic-bezier(0.2, 0.8, 0.2, 1)Cards and the Landing Mark arriving
Lift300 mscubic-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.