Try the sounds in context
Click any control below. You will hear the sound this kit recommends for that interaction, and the card will name it. To pick and play any of the 96 yourself, .
Buttons
The press sounds when you click. The outcome sounds when the work finishes.
View mappings
| Primary action | click-primary |
| Ordinary button | tap |
| Cancel or dismiss | click-secondary |
| Committing press | tap-firm |
| It worked | success |
| It failed | error |
Settings
On rises, off falls — the same pattern through the whole kit.
View mappings
| Enable a toggle | toggle-on |
| Disable a toggle | toggle-off |
| Tick a checkbox | checkbox-check |
| Clear a tick | checkbox-uncheck |
| Change mode or theme | switch-flip |
Navigation
Sideways is quieter, deeper is stronger.
View mappings
| Switch tab or segment | tab-select |
| Open a record, push a screen | nav-forward |
| Go back a level | nav-back |
| Open a menu or popover | menu-open |
| Open or close a side panel | panel-open / panel-close |
Dialog
A dialog takes over the screen, so it earns a louder sound than a toast.
View mappings
| Dialog appears | modal-open |
| Dismissed with Cancel | dialog-dismiss → modal-close |
| Confirmed | dialog-confirm → trash |
Notifications
Four levels of “look at this”, from barely there to unmissable.
View mappings
| Ordinary notification | notify |
| Background arrival | notify-subtle |
| Someone named you | mention |
| Needs attention now | notify-urgent |
| Counter incrementing | badge |
A background job
- Accepted, queued
progress-start - Preparing data
progress-tick - Packaging files
progress-tick - Finalising
progress-tick - Export ready
progress-complete
A start, a quiet tick per step, one completion.
Cart and checkout
Cart: 0 items
View mappings
| Add to cart | cart-add |
| Remove from cart | cart-remove |
| Payment accepted | purchase-success |
| Credit or points earned | coin |
| Plan or feature unlocked | unlock-feature |
Drag and drop
- ⠿ Research
- ⠿ Wireframes
- ⠿ Build
Click an item to move it up: lift, tick, drop.
View mappings
| Item lifted | pick-up |
| Passing a position | reorder-tick |
| Released somewhere valid | drop |
| Released somewhere invalid | drop-invalid |
| Snapped to a grid or guide | snap |
Typing
The quietest sounds in the kit — and still too much for most products.
View mappings
| Key pressed | key-press |
| Character deleted | backspace |
| Quieter typing | key-soft |
| Content pasted in | paste |
| Field emptied | clear |
Why the kit sounds consistent
Three rules hold 96 sounds together. They are the reason two of them can land at the same moment without clashing, and the reason people learn what they mean without being told.
One tonal language
Every tonal sound is drawn from C major pentatonic, so feedback never sounds randomly assembled. Any two notes in that set agree — which matters when a notification arrives while a menu is opening.
Direction carries meaning
Rising means forward, open, on and yes. Falling means back, closed, off and no. Pairs are built as opposites of each other — same voice, reversed.
Loudness follows importance
Each sound is measured and levelled to one of four targets, so a keystroke and a payment confirmation never arrive at the same volume.
| Level | Target | Example |
|---|
Sound Library
All 96 sounds, with what each one is for. Search by name, by the element (“modal”, “toggle”), or by intent (“delete”, “warning”, “upload”). Play any card to hear it.
Integrate
From the download to your first sound in about five minutes. The player is one file with no dependencies — pick how you load it.
1 Copy the files
—
2 Create the kit once
—
3 Play where things happen
—
- No dependencies — 3.6 KB over the wire
- One AudioContext, so rapid clicks overlap cleanly
- Handles the browser rule that blocks audio before a gesture
- Silent while the tab is hidden; repeats throttled
- Master volume and remembered mute
- Typed sound names for all 96
Build a snippet
Pick a framework, an interaction and a sound, and take the code away.
Typed names
Every sound name is a member of one union type, so an editor completes them and a typo fails the build instead of the interface quietly going silent.
What is in the download
No unpacking a ZIP to find out. This is the whole tree.
Customize
Nothing here was recorded. Every sound is generated by code that ships with the kit, so the whole set can be retuned and rebuilt — in a different key, brighter, duller, or with your own sounds added in the same voice.
source/, run from a
terminal: npm install then npm run build. It is not a browser tool, and
this page does not run it — what follows is what you change and where.
Tonal system
All 96 sounds reference one note table. Transpose it and the entire kit moves with it, staying internally consistent.
// dsp.mjs — a minor third down, for a darker kit const ratio = 2 ** (-3 / 12); export const NOTE = Object.fromEntries( Object.entries(BASE).map(([n, hz]) => [n, hz * ratio]) );
Loudness scheme
Four targets decide how much room each sound takes up. Widen the spread for a dynamic product, narrow it for a tool people use all day.
// kit.mjs const LEVEL = { micro: -30, action: -26, feedback: -23, alert: -21 };
Overall brightness
One filter over the whole kit shifts it from crisp to soft. The quality check reports the spectral centre of every sound, so you can see what moved.
// build.mjs — duller const mono = level(lowpass(raw, 6000), LEVEL[role]);
Your own sounds
Add an entry and it joins the kit: levelled, trimmed, measured and exported alongside the rest, in the same voices.
{ name: "vault-close", family: "System", level: "feedback", use: "A record locked away.", make: () => mix(thud(0.18, 220, 60), at(n(0.3), 0.06, pip(NOTE.C4, 0.16))) }
The build checks itself
Nobody can listen to 96 sounds objectively, so the generator measures them.
npm run check reports anything outside these bounds — it is how the kit stays even
after you change it.
| Check | Bound | Why |
|---|---|---|
| Peak | < 0.95 | Headroom, so re-encoding cannot clip |
| Peak | > 0.05 | Not inaudibly quiet |
| DC offset | < 0.002 | An offset thumps on some speakers |
| Edge samples | < 0.02 | A sound starting mid-waveform clicks |
| Length | 28–900 ms | Shorter vanishes on a phone; longer is not an interface sound |
| Loudness | ±1.5 LU | The levels are the point |
| Spectral centre | 180–7000 Hz | Below is muddy, above is fatiguing |
| Finite samples | no NaN | A filter has gone unstable |
The build is deterministic — the noise generator is seeded — so the same source always produces byte-identical files, and you can diff what your change actually did.
Documentation
The same guides that come with the download, readable here before you buy.