Design

The character, the world and the images the Studio’s stories live in.

• Shipped

  Character design

  One little blue bird with goggles and more nerve than wingspan, the same character across the storybook’s fifteen chapters, both record covers and the website.

• In progress

  World building

  One world across a storybook, two records of the same twelve songs, eleven music videos, an album film and a website, with motifs that carry through all of it: the goggles, the green hill, wheels down.

• Shipped

  Illustration

  Storyboards and shot-by-shot treatments for the films, with the frame set version-controlled. What they were drawn for is published: eleven music videos and the 24-minute album film.

• Shipped

  Motion

  This site’s own system: three named easings, four durations, lines that draw once and hold, reduced-motion safe everywhere. And the Hangar on littlebluepilot.com, where every moving part is shown at both ends of its travel for readers who prefer less motion.

Interfaces and systems for the Studio’s own software and sites.

• Shipped

  Interfaces

  littlebluepilot.com, built for ages 3 to 8: Ask Little Blue, the Workshop, the Playroom, the Sky Map, the Hangar with its seventeen pressable parts, and Colour It Here. Nothing timed, nothing sent.

• Shipped

  Design systems

  This site’s token system: one source of truth for colour, type, space and motion, in two themes (paper and charcoal), with every documented contrast ratio verified by a unit test rather than a comment. Since November 2026 it sets the Studio as an editorial object: hairlines rather than boxes, a narrow serif set large, and small mono capitals that number each part.

• Shipped

  Interaction

  The A/B mastering instrument: two versions of a real record behind one transport, level-matching by measured loudness, keyboard-first and reduced-motion safe.

• Shipped

  Data visualisation

  Measurement made readable: the case studies’ before and after tables, the loudness strip drawn from the same values, the song pages’ two-recording comparison, and WPAudio Engine’s own HTML, JSON and CSV reports.

Every colour on this site is a pair, one for paper and one for charcoal. Your device chooses, and the switch in the header overrides it. A band that sets charcoal on paper, like the footer, gets every charcoal value inside it, so nothing is styled twice. Warm paper by day, a workroom’s charcoal by night, umber or lamplight for the one italic phrase a heading leans on, and tan for the one action on a screen, with ink on it at 7.20:1. The display face is Instrument Serif and the reading face Instrument Sans; the labels and code are set in your device’s own monospace. Every contrast below is computed from the token file when the site is built, the same numbers a unit test holds.