Design system · v1 · 27 Sep 2026

The LiveWaves bench

One instrument in two lights: a lights-off dark stage with bright phosphor, and a daylight bench with crisp ink. Every color below is read live from src/lib/livewaves/palette.ts, the same source the scope, Bode, s-plane and schematic draw with.

Logo · the Chebyshev W

A Lissajous figure. Put cos t on X and cos(4t + φ) on Y and the beam draws a W: at φ = 0 it retraces y = T₄(x), the Chebyshev polynomial behind Chebyshev filters. A small phase offset opens it into two strands, like a Lissajous whose generators aren't quite locked.

LiveWaves™Lesson 1

Construction

cut	use	φ	stroke / height
LARGE	≥ 48 px	0.4	4.0%
SMALL	header, favicon	0.6	8.3%

Wordmark: Archivo 700 at 125% width, −0.015em (.lw-wordmark). Mark height ≈ 1.15× the wordmark's cap height; gap = 0.5× mark height. Glow in dark mode only.

Color

Each token has a bright value for the dark stage and a deeper one for the daylight bench. Contrast is measured against that theme's bg.

Brand

Phosphor green is the logo and the waveform: the W, every CH2 response trace, and the primary CTA as an outline. Never a fill, never UI chrome.

--lw-brand · LW.brand

The Chebyshev W, CH2 response traces (scope, hero, Bode), the Start-lesson outline.

#39ff7a15.2:1 on bg · AA

#00a4433.0:1 on bg · AA large

--lw-brand-ink · LW.brandInk

Green for small text: CH2 labels, CTA text. Equals brand in dark mode.

#39ff7a15.2:1 on bg · AA

#007a335.0:1 on bg · AA

Signals

Colors that mean something in a plot. Keep the mapping fixed across every lesson.

--lw-ch2 · LW.ch2

The interactive accent: buttons, links, sliders, beckon, active chips. (The CH2 trace itself is brand green.)

#3ee8f513.5:1 on bg · AA

#00879a3.9:1 on bg · AA large

--lw-ch1 · LW.ch1

CH1 / the stimulus: generator, input, harmonics in. Also eyebrows.

#ffb54711.5:1 on bg · AA

#c274003.3:1 on bg · AA large

--lw-pole · LW.pole

Poles, zeros and corner frequencies: anything from the s-domain.

#ff4f9a6.6:1 on bg · AA

#d0246f4.6:1 on bg · AA

--lw-guess · LW.guess

The reader's prediction marker (cursor, ✕).

#ffffff20.2:1 on bg · AA

#0b161b16.9:1 on bg · AA

--lw-ch2-ink · LW.ch2Ink

Cyan for small text on controls (links, active chips). Equals ch2 unless ch2 is too vivid to read.

#3ee8f513.5:1 on bg · AA

#00707f5.3:1 on bg · AA

--lw-ch1-ink · LW.ch1Ink

Amber for small text (eyebrows, CH1 labels).

#ffb54711.5:1 on bg · AA

#9a5b005.0:1 on bg · AA

--lw-pole-ink · LW.poleInk

Magenta for small text (pole and corner labels).

#ff4f9a6.6:1 on bg · AA

#b8005f6.0:1 on bg · AA

State

Grading in Predict. Always paired with a word (nailed / close / off), never color alone.

--lw-ok · LW.ok

Nailed it. Sits close to brand green (the trace color), which is why grading always carries a word.

#7dffa816.1:1 on bg · AA

#15803d4.6:1 on bg · AA

--lw-warn · LW.warn

Close.

#ffd16614.0:1 on bg · AA

#a162074.5:1 on bg · AA

--lw-bad · LW.bad

Off.

#ff6b6b7.3:1 on bg · AA

#c628285.2:1 on bg · AA

Ink

Three steps of text. ink-3 is the floor: nothing smaller than 12 px goes below it.

--lw-ink · LW.ink

Headlines, values, primary text.

#e3eef217.1:1 on bg · AA

#0b161b16.9:1 on bg · AA

--lw-ink-2 · LW.ink2

Body copy and secondary labels.

#9fb6bf9.5:1 on bg · AA

#34454d9.2:1 on bg · AA

--lw-ink-3 · LW.ink3

Meta, axis labels, hints.

#62808b4.8:1 on bg · AA

#56666e5.5:1 on bg · AA

Surfaces

The instrument: a stage, a screen, and the bezel around it.

--lw-bg · LW.bg

The stage (page background).

#04070a1.0:1 on bg

#f3f6f51.0:1 on bg

--lw-screen · LW.screen

Scope and plot screens.

#060d111.0:1 on bg

#ffffff1.1:1 on bg

--lw-bezel · LW.bezel

Bezel borders, hairlines.

#15232b1.3:1 on bg

#cdd7d31.4:1 on bg

--lw-bezel-hi · LW.bezelHi

Ghost-button borders, slider track end.

#23394a1.7:1 on bg

#a5b4af2.0:1 on bg

Schematic

Canvas-only colors for the live schematic.

canvas only · LW.wire

Unpowered wire.

#51707c3.8:1 on bg · AA large

#8fa3aa2.4:1 on bg

canvas only · LW.charge

Moving charge dots.

#fff6d818.7:1 on bg · AA

#10212a15.2:1 on bg · AA

Voltage heat map

Schematic wire color, 0 → full scale.

In context

Stimulus, response, pole and guess on one screen.

CSS-only tokens

Gradients, alphas and shadows for the current theme.

Type

Display · Archivo

Ringing

LiveWaves™

Headlines 600, tight tracking (−0.02 to −0.035em). Width axis 62–125%: 125% is reserved for the wordmark.

Body · IBM Plex Serif

The probe's 10 pF sits right across the capacitor you're measuring, and that moves the pole.

Lede 18/32, body 16.5/28, readout labels 14.5 italic.

Labels · IBM Plex Mono

Lesson 1

τ = 1.000 ms; f₋₃dB = 159.2 Hz

Eyebrows and tabs uppercase at 0.16–0.22em; values tabular-nums. Floor: 12 px anywhere, canvas included.

Components

Live, in the current theme. Flip Light / Dark in the header to see both.

ABezellw-bezel · views

Panel · lw-panel

1.000 ms

f₋₃dB

159.2 Hz

t₉₀

2.303 ms

Slider · lw-range

Inline links use .lw-link; the pulse on Waiting on your call is .lw-beckon-text.

✓ Nailed it≈ Close✕ Off

Stages · Predict, Probe, Prove

Spot illustrations for the three stages of every lesson, in SVG on the theme tokens. Each keeps the color rules: green is the true response, amber the stimulus, cyan what you touch, magenta the link from a symbol to its part. Hover a card to replay it.

Predict

Commit before you see it: place a scope cursor, drag a pole, name a number. A wrong guess is where the learning happens, and we show which term you missed.

Probe

Hook a probe on a live circuit. Schematic, scope, s-plane and Bode are four views of one circuit: turn a knob or drag a pole and all four move together.

Prove

The derivation with live numbers, and every symbol linked to the component it names. The math and the circuit are one object.

Loading · wave spinners

Wherever the page waits, a small trace sweeps a window, as a scope does: the Lab engine starting, the speed test, a page loading. Every shape is computed; ring is the series RLC's square-wave response, the site's signature. One green stroke, faded at the edges; it holds still under reduced motion.

ring

sine

square

triangle

saw

Rules

1
Color means signal.
Amber is always the stimulus, green the response, magenta the s-domain. Cyan is for things you touch. Don't reuse them for decoration.
2
Green is the logo and the wave.
Brand green is the mark, the CH2 response trace and the Start-lesson outline. Never a fill or UI chrome; grades always carry a word.
3
No glow on waveforms.
Traces are one clean stroke in both themes; bloom read as fake. Only the logo mark glows, in dark mode. No glowing backgrounds or gradient blobs, ever.
4
The instrument is the frame.
Views live in bezels on a flat stage; the only texture is the faint graticule behind the hero.
5
Predict before reveal.
Nothing reflows on reveal: reserve the space. The next thing to touch gets the beckon pulse.
6
12 px is the floor.
Everywhere, including canvas labels. Grading always pairs color with a word.
7
Curves are computed.
Every waveform, including the logo, comes from its equation, not a hand-drawn path.
8
Two lights, one instrument.
Light mode keeps the same hues, deepened for contrast, so both read as the same bench.