N° 03 · Selected work

ToneCatch — learn intervals by colour

A mobile ear- and interval-training app. Every interval gets its own colour, so you can finally name what your hands already know.

Ear Training Music Theory OKLab React Web Audio

Role: Designer & developer
Platform: Mobile-first web app
Topic: Music education
Year: 2026
Stack: React · TypeScript · Vite · Tailwind · Web Audio
Audience: Pianists, producers, songwriters

The problem

Years of playing, and no words for it.

Classically trained pianists can play for a decade and still struggle to explain what an interval is. The hands know it and the sheet music told them, but the theory never became something they can name, hear or reason about.

That gap matters. Intervals, and the theory built on them, are the foundation of intentional improvisation and songwriting. Without them, every choice at the keyboard is a guess.

A ToneCatch lesson intro: a keyboard with the minor 2nd, major 2nd, minor 3rd and major 3rd keys lit in red, orange and yellow. — Fig. 01 · Each interval has a colour, lit on the keyboard

An ear-training question showing an interval on the keyboard, with the wrong answer marked in red and the correct one, Minor 2nd, in green. — Fig. 02 · Name the interval, with feedback that teaches

An apply exercise reading 'Your intro needs tension before the drop. Tap the minor 3rd above the root' above a keyboard. — Fig. 03 · Apply it: build the interval for a real songwriting job

The idea

Give every interval a colour.

ToneCatch attaches a colour to each interval, from a minor 2nd up to the octave. The colour shows up everywhere the interval does: on the keyboard, on the answer chips, on the unit path. After a few sessions, a major 3rd is not a rule to look up but the yellow one.

The palette is built in OKLab, a colour space designed so that equal numeric distances look like equal differences to the eye. My first palette made the minor and major 3rd almost indistinguishable, so I measured the pairs and re-spaced them. Since people perceive colour differently, colour is always paired with a label: it helps memory without being the only signal.

From theory to songs

Learn it, then use it.

Lessons move from identifying intervals, to building them on any root, to applying them. Learners then use what they have memorised to analyse popular songs and to write their own: a riser out of 2nds, a bassline out of 5ths, a harmony under a topline. The point is to make the theory useful straight away, the way a producer would use it.

Design & build

Neutral chrome, so colour can mean one thing.

The interface is ivory and ebony, with the keyboard as the hero in a dark panel low on the screen, where a thumb reaches it. Colour is reserved for intervals only. Sound comes from a small Web Audio synth with no samples, and every question can be answered on the on-screen piano or with a computer keyboard.

My role

From an annoying gap to a working app.

01: Defined the problem from lived experience: trained pianists who can play but cannot explain.
02: Designed the interval colour system and checked it in OKLab.
03: Designed the lesson, exercise and feedback flows around a keyboard-first interaction.
04: Built the app in React and TypeScript, including the audio engine and exercise generator, with tests for the theory logic.