Skip to the collection
Trova
Browse Procedural Audio / Interactive AcousticsCompare with another family →

Style sheet · 4 references

Procedural Audio / Interactive Acoustics

Web Audio API synthesizing mechanical clicks, keyboard relays, ambient hums, and organic chime feedback on user actions.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Procedural Audio / Interactive Acoustics (procedural-audio-web) */
/* Evidence base: 4 curated reference(s) · Primary contrast 15.3:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f5f5f5;
  --surface-elevated: #2b2b2b;
  --text-primary: #1e1e1e;
  --accent-primary: #050505;
  --border-hairline: color-mix(in srgb, #1e1e1e 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "IBM Plex Mono", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Procedural Audio / Interactive Acoustics — style sheet

> Web Audio API synthesizing mechanical clicks, keyboard relays, ambient hums, and organic chime feedback on user actions.

Derived from 4 curated reference(s) in the `procedural-audio-web` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- IBM Plex Mono — 2/4
- Futura — 1/4
- Futura PT — 1/4
- Helvetica Neue — 1/4
- JetBrains Mono — 1/4
- Roboto — 1/4
- Roboto Mono — 1/4

## Color

- `#1e1e1e` dark neutral — 4/4
- `#f5f5f5` light neutral — 4/4
- `#050505` dark neutral — 1/4
- `#2b2b2b` dark neutral — 1/4
- `#ff4081` chromatic — 1/4
- `#8e8e93` mid neutral — 1/4
- `#d97706` chromatic — 1/4
- `#ff764d` chromatic — 1/4
- `#00bcd4` chromatic — 1/4
- `#38bdf8` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#1e1e1e` / `#f5f5f5` — 15.3:1
- `#050505` / `#f5f5f5` — 18.7:1
- `#2b2b2b` / `#f5f5f5` — 13:1
- `#1e1e1e` / `#38bdf8` — 7.8:1

## Moves

### component pattern

- Introduce synthesis parameters through a progressive 2D XY pad where X scrubs filter cutoff frequency and Y scrubs resonance, rendering the live Fast Fourier Transform (FFT) spectrum directly behind the cursor. — 198-ableton-learning-synths-interactive-webaudio-oscillator-filter-envelope-patcher
- Keep transport controls (`Play/Pause`, `Tempo Slider`, `Instrument Switcher`) inside a single 56px bottom bar so 90% of the screen acts as a direct acoustic drawing surface. — 199-chrome-music-lab-kandinsky-spectrogram-real-time-webaudio-canvas
- Surround each rotary potentiometer with a calibrated `-5` to `+5` radial tick scale etched in `#f4efe6` cream ink against a `#141210` anodized black panel, with vertical drag sensitivity (`1px = 0.5%`) and `Double-Click` reset to zero. — 201-moog-model-d-web-study-voltage-controlled-filter-cutoff-modulation-matrix

### texture/material

- Render ultra-thin `1px` white and `#d4ff00` acid-lime vector Lissajous curves over pure `#050505` black that deform in real time in response to the active soundscape mode (`Focus`, `Relax`, `Sleep`). — 200-endel-soundscapes-circadian-procedural-audio-waveforms-heart-rate-sync
- Frame the synth control surface between warm walnut end-cheeks (`#26211c`) and color-coded rocker switches (`#d97706` orange for modulation, `#38bdf8` blue for glide). — 201-moog-model-d-web-study-voltage-controlled-filter-cutoff-modulation-matrix

### grid/layout

- Group modular signal blocks (Oscillator → Filter → ADSR Envelope → LFO) into equal-height `#2b2b2b` rack cells separated by `2px solid #1e1e1e` gaps, mirroring Ableton Live's bottom device chain. — 198-ableton-learning-synths-interactive-webaudio-oscillator-filter-envelope-patcher

### motion/interaction

- Zero-instruction onboarding: clicking anywhere on the step-sequencer matrix immediately sounds the corresponding pentatonic pitch and illuminates the cell with a rhythmic pulse when the playhead sweeps past. — 199-chrome-music-lab-kandinsky-spectrogram-real-time-webaudio-canvas

### typography

- Pair stark Swiss grotesk mode headlines with a live biometric telemetry ticker (`HR: 64 BPM · WEATHER: OVERCAST · CIRCADIAN PHASE: ULTRADIAN PEAK`). — 200-endel-soundscapes-circadian-procedural-audio-waveforms-heart-rate-sync

## References

- 198-ableton-learning-synths-interactive-webaudio-oscillator-filter-envelope-patcher — Ableton Learning Synths — Interactive WebAudio Oscillator, Filter & Envelope Patcher (exemplar)
- 199-chrome-music-lab-kandinsky-spectrogram-real-time-webaudio-canvas — Chrome Music Lab — Kandinsky & Spectrogram Real-Time WebAudio Canvas
- 200-endel-soundscapes-circadian-procedural-audio-waveforms-heart-rate-sync — Endel Soundscapes — Circadian Procedural Audio Waveforms & Heart-Rate Sync
- 201-moog-model-d-web-study-voltage-controlled-filter-cutoff-modulation-matrix — Moog Model D Web Study — Voltage-Controlled Filter Cutoff & Modulation Matrix

Type

Loadable Open-Source Stand-Ins

  • Futura (macOS only) → Jost
  • Futura PT (licensed) → Jost

Color

Pairs that read

  • Steal this.#1e1e1e on #f5f5f5 · 15.3:1
  • Steal this.#050505 on #f5f5f5 · 18.7:1
  • Steal this.#2b2b2b on #f5f5f5 · 13:1
  • Steal this.#1e1e1e on #38bdf8 · 7.8:1

Moves

component pattern

texture/material

grid/layout

motion/interaction

typography

References