LabsLab Four
Acoustics
Interaction sound as a token system.
Acoustics studies the sound parallel to the visual token system. Ten cues, ten interaction roles, one documented engine. No sound appears on a Designesy surface without a token name and a rationale here. If the sound is louder than the action it confirms, it fails.
Live artifact
Enable sound, then hover or press each cue. Notice what does not happen: no ambient bed, no focus sounds, no randomization.
designesy:sound. Defaults off under reduced motion.--cue:brandsparkleBrand wordmark contact--cue:navtickNavigation and wayfinding--cue:invitechimePrimary invitation / machine surfaces--cue:actionpressPointer-down on actionable surfaces--cue:resolvereleasePointer-up default resolve--cue:completesuccessHigh-value resolve--cue:revealbloomContent / experiment reveal--cue:listwhisperDense list / surface scan--cue:switchtoggleState toggle--cue:contactdropletContact / outbound mailThesis
What Acoustics tests
Sound is a token, not a decoration. Each cue has a name, a role, and a character. The system is interaction-only — no ambient audio, no mood beds, no unmapped sounds. Preference is user-owned; reduced motion is an acoustic-reduction proxy.
Principle
- 01
Every sound has a name
A sound without a token is a contract violation. Ten cues, ten roles, documented here. If a new interaction needs audio, add a token before adding the sound.
- 02
Preference is part of craft
Sound is opt-in. The toggle stores preference in localStorage; reduced motion defaults it off. The user can always enable or mute. Silent fallback means blocked Web Audio degrades invisibly.
- 03
One cue family per role
Nav stays tick. Brand stays sparkle. Dense lists stay whisper. Do not randomize per page without updating this document. Consistency is the product quality; surprise is the failure.
Portable contract
Mapping rules adopted into design system contract v0.3.0:
Source contract: Design system contract v0.3.0 · Token reference page · Machine export
Token reference
Ten cues, ten interaction roles, one documented engine. Every sound on a Designesy surface traces to a token here.
--cue:brand · sparkle
Character. Bright playful accent
Role. Brand wordmark contact
Where · Hero wordmark, topbar logo, footer mark, Open field card hover
--cue:nav · tick
Character. Crisp instant tick
Role. Navigation and wayfinding
Where · Topbar nav links, surface footer links, secondary CTAs
--cue:invite · chime
Character. Soft default chime
Role. Primary invitation / machine surfaces
Where · Primary hero CTA hover, kit field card, machine footer links
--cue:action · press
Character. Dull muted knock
Role. Pointer-down on actionable surfaces
Where · Buttons, field cards, surface cards
--cue:resolve · release
Character. Brighter springy tick
Role. Pointer-up default resolve
Where · Most buttons and cards
--cue:complete · success
Character. Warm three-note confirmation
Role. High-value resolve
Where · Primary Open CTA release, Open/Kit field card release
--cue:reveal · bloom
Character. Warm slow swell
Role. Content / experiment reveal
Where · Pillar cards, Lab field card hover
--cue:list · whisper
Character. Breathy quiet swell
Role. Dense list / surface scan
Where · Surface cards, principle rails, dense lists
--cue:switch · toggle
Character. Mechanical click-clack
Role. State toggle
Where · Sound preference button
--cue:contact · droplet
Character. Soft dismissive droplet
Role. Contact / outbound mail
Where · Footer mail, privacy mail
Accessibility
- Reduced motion → sound off. prefers-reduced-motion: reduce is treated as an acoustic-reduction proxy. The user can still enable sound manually via the toggle.
- No focus sounds. Sounds fire on pointer and click events, not on focus. Screen reader users navigate by focus and are not bombarded with hover cues.
- Toggle is keyboard-accessible. The sound toggle button uses aria-pressed and plays via the preference hook on click (includes keyboard activation).
- Silent fallback. If Web Audio is blocked or unavailable, all sounds become no-ops. No errors, no degradation of visual experience.
- Volume is not adjustable. Cuelume synthesizes at fixed gain levels tuned for subtlety. If a user finds sounds too loud, they can mute via the toggle.
Implementation notes
Builder prompt
Build interaction audio as a token system, not decoration.
Rules:
1. Every sound maps to a named token (--cue:role). No unmapped sounds anywhere.
2. One primary cue family per role. Nav stays tick. Brand stays sparkle. Do not randomize.
3. Sound is opt-in via a single toggle; store preference in localStorage; default off when prefers-reduced-motion.
4. Hover sounds fire on fine-pointer only. On touch, map the same hover cue to a single tap.
5. No focus sounds. Sounds fire on pointer and click, never on focus events.
6. No ambient audio — interaction-only. No background music, no loading sounds, no mood beds.
7. Silent fallback when Web Audio is blocked. No errors, no visual degradation.
8. Reduced motion is an acoustic-reduction proxy. The user can still enable sound manually.
9. Every cue must trace to a token document. A sound in the markup without a token here is a contract violation.Review checklist
Provenance
Anti-patterns
Remix notes
Reuse the token model on any Designesy surface. Add a new cue by extending the acoustic-tokens module before wiring the sound into markup — the token document is the source of truth, not the attribute. Do not remix interaction cues into ambient beds or loading sounds; Cuelume is interaction-only. If a new role needs audio, start from the closest existing cue family before inventing a new character.
Lab anatomy coverage
Verification
Standards context
W3C DTCG 2025.10
The W3C Design Tokens Format Module 2025.10 does not define acoustic/audio token types. Designesy acoustic tokens are net-new relative to the canonical standard.
Proposed type
Designesy declares $type: sound with $extensions.designesy namespacing per the DTCG extension convention. This format may be proposed to the W3C DTCG as a future token type contribution.
Reference format
{"$value":"tick","$type":"sound","$description":"Navigation hover","$extensions":{"designesy":{"engine":"cuelume","role":"nav"}}}