-- online Search!

Sounds

Filed under Design System

Design system sections

07 / SOUNDS

Recorded and synthesized sound cues with playback, downloads, source mappings, and licensing.

Agent Instructions / sounds

You are extending KIRUPA sound feedback. Reuse the existing link/content/kirupabot role registry and its production gain. Read sounds.json for file cues or the actual style synth function; never invent an MP3 URL for a synthesized cue. Keep sound optional and user-initiated, with visual equivalents. In a catalog, serialize playback, support Stop during loading, expose accessible status, and report load/download failures. A synthesized WAV must record sample rate, PCM format, baked gain, source function, and disabled variation. Do not write kirupaSoundEnabled from a specimen or treat archive recordings as approved UI cues. Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.

The production sound system maps three roles, link, content, and kirupabot, to the active style. Pixel and Smooooth use the MP3 cues registered in kirupa.js. Sci-Fi, Minimal, Ukiyo-e, and Platformer register synthesized AudioBuffers in window.kirupaStyleSounds. The outer design pages retain those optional link sounds, just like the homepage; the sample shelf below never auto-starts.

Pixel mixes different short UI textures for content links. Smooooth uses organic hover/press/release/snap and a soft focus cue for kirupaBot. Sci-Fi has blips, a relay, chirps, a scan, readout, beep, and ping. Minimal is paper taps and typing dots. Ukiyo-e uses six koto notes, a clapper, and a rin bell. Platformer has blip/blop, bump, jump, ping, tick, spring, and powerup.

Every tracked audio file is included, including the three historical chat cues and tutorial recordings. Those archive recordings are not current UI sound recommendations, and their rights are not established by their presence in the repository.

MP3 playback uses the production cue gain; Download returns the unmodified original file. Synthesized downloads are deterministic mono, 48kHz, 16-bit PCM WAV renders of the actual registered functions with their production gain baked in. They are reference renders, not nonexistent original recordings. Playback-rate and gain variation are deliberately disabled for comparison.

Production hover sounds require an enabled preference, a fine pointer, and an unlocked audio context. A preview must not toggle that preference. Keep visual and textual feedback complete when sound is muted or unavailable.

  • Do let a new Play stop the prior sample, and let the same control Stop a pending or playing sample.
  • Do surface load, decoding, permission, and download failures with the cue name.
  • Do not autoplay, normalize quiet cues to a loud level, or use sound as the only signal.

Choose a sound

Silent. Choose a cue and press Play.

archive / recording

aimed.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

chat/soundfx/aimed.mp3

archive / recording

notification.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

chat/soundfx/notification.mp3

archive / recording

unread.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

chat/soundfx/unread.mp3

archive / recording

sound2.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

developer/mx/code/sound2.mp3

archive / recording

click.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

html5/examples/click.mp3

archive / recording

hover.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

html5/examples/hover.mp3

pixel / recording

link

link

Source, level & rights

Unmodified original; playback gain is not baked into this file.

uisfx audio, CC0 1.0; source attribution in kirupa.js

ssi/newDesign/sounds/link-hover-20260821.mp3

nature / recording

nature Organic Hover

natureLink, natureContent

Source, level & rights

Unmodified original; playback gain is not baked into this file.

uisfx audio, CC0 1.0; source attribution in kirupa.js

ssi/newDesign/sounds/nature-organic-hover-20261006.mp3

nature / recording

nature Zen Press

natureContent

Source, level & rights

Unmodified original; playback gain is not baked into this file.

uisfx audio, CC0 1.0; source attribution in kirupa.js

ssi/newDesign/sounds/nature-zen-press-20261006.mp3

archive / recording

NG10179.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

web/xml/examples/mp3s/NG10179.mp3

archive / recording

NG3221.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

web/xml/examples/mp3s/NG3221.mp3

archive / recording

NG3413.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

web/xml/examples/mp3s/NG3413.mp3

archive / recording

NG4348.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

web/xml/examples/mp3s/NG4348.mp3

archive / recording

NG5402.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

web/xml/examples/mp3s/NG5402.mp3

archive / recording

NG7890.mp3

Historical chat cue or tutorial recording; not a current shell cue

Source, level & rights

Unmodified original; playback gain is not baked into this file.

Rights not established here. Archive reference only.

web/xml/examples/mp3s/NG7890.mp3

scifi / synthesized

scifi / blip

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / blip Low

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / relay

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / chirp

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / readout

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / scan

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / beep

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

scifi / synthesized

scifi / ping

kirupabot

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/scifi.js

minimal / synthesized

minimal / tick

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

minimal / synthesized

minimal / tock

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

minimal / synthesized

minimal / leaf

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

minimal / synthesized

minimal / crisp

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

minimal / synthesized

minimal / brush

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

minimal / synthesized

minimal / flick

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

minimal / synthesized

minimal / dots

kirupabot

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/minimal.js

ukiyoe / synthesized

ukiyoe / tick

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / rin

kirupabot

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / koto D

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / koto Eb

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / koto G

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / koto A

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / koto Bb

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

ukiyoe / synthesized

ukiyoe / koto D5

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/ukiyoe.js

platformer / synthesized

platformer / blip

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / blop

link

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / bump

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / jump

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / ping

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / tick

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / spring

content

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

platformer / synthesized

platformer / powerup

kirupabot

Source, level & rights

Generated PCM WAV; production gain baked in; pitch and gain variation disabled.

Synthesized by the site's own registered function; no third-party recording.

ssi/newDesign/styles/platformer.js

Source mapssi/newDesign/src/kirupa.jsssi/newDesign/styles/scifi.jsssi/newDesign/styles/minimal.jsssi/newDesign/styles/ukiyoe.jsssi/newDesign/styles/platformer.jshttps://uisfx.comhttps://creativecommons.org/publicdomain/zero/1.0/

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Popular

Loose Ends

:: Copyright KIRUPA 2026 //--