Faceplate · v0.1.0 · Pre-release

Audio UI design
component library.

57 components for plugin panels and the browser. Knobs with the machining of the knob they are named after, displays at the dot pitch of the module, meters with the ballistics from the standard. Themeable, accessible, no dependencies.

Request early access Browse the components

Components: 57, in eight families
Written as: Custom elements · No framework
Runs in: Plugin windows · Any browser
Hosts: VST3 · AU · CLAP · Standalone
Dependencies: None
Licence: On request

A 19-inch rack of four units built from Faceplate components, running: VU needles riding the level, valves glowing behind a grille, a delay display counting — Faceplate Four rack units, running. Nothing here is a photograph or a bitmap

57: components, from a knob to a tape transport
12: knob designs before you change one colour
5: themes, and a theme is a list of colours
0: dependencies, and nothing fetched at runtime

Built with Faceplate

Complete instruments, not swatches. Every one of these is markup, captured from the running page.

A close crop of the compressor in the rack: the backlit VU pair, the valve window with the heaters lit, and two skirted knobs — Close upDrawn, so it holds together at any size. There is no bitmap to run out of

2U · Studio outboard

Valve channel strip

A backlit VU movement, valves behind a grille, stepped input gain and a row of skirted knobs under printed section rules. Every part of it is a tag.

fp-vu
fp-tube-window
fp-knob
fp-rotary-switch
fp-jack

Modular · 84HP

A case of eurorack modules

Silver panels of five different widths, coloured soft-touch caps, tuning LEDs and rows of 3.5 mm jacks whose nuts you can colour to match the panel.

fp-knob
fp-jack
fp-led
fp-wave-select
fp-button

Instrument

Groovebox

Sixteen steps marching in time, pads lighting as they hit, an encoder ring following the tempo. The sequencer runs on the same frame loop as everything else.

fp-pad
fp-button
fp-encoder
fp-oled
fp-led

Instrument

Polysynth panel

Wooden cheeks, silkscreen section brackets, sliders and knobs in labelled groups, bend and modulation wheels, and a keybed along the bottom.

fp-wheel
fp-keyboard
fp-fader
fp-label
fp-nameplate

Pedals

Three pedals

Stomp footswitches with their knurled rings, jewel lamps, 6.3 mm jacks in the sides, and a valve visible through a window in the preamp.

fp-footswitch
fp-lamp
fp-knob
fp-jack
fp-tube

1U · Studio outboard

Mastering equaliser

Matched channels of stepped rotary switches with numbered legends around them, which is the detail that makes a mastering EQ look like one.

fp-rotary-switch
fp-rocker
fp-led
fp-panel

Three 500-series modules: Narrow panels in a rack frame: a preamp with a stepped gain switch, an equaliser, a compressor. — **Three 500-series modules** Narrow panels in a rack frame: a preamp with a stepped gain switch, an equaliser, a compressor.

Four console channel strips: Long-throw faders with the console taper printed beside them, pan, sends, mute and solo. — **Four console channel strips** Long-throw faders with the console taper printed beside them, pan, sends, mute and solo.

The components

Captures of the real elements, every one at the same size. Each is a single HTML tag with attributes.

Controls

4 elements

Twelve knob designs before you change a colour

fp-knob: Chicken head, skirted, phenolic, fluted, domed, knurled, faceted — **fp-knob** Chicken head, skirted, phenolic, fluted, domed, knurled, faceted

fp-fader: Six console styles, console dB legend, one-to-one tracking — **fp-fader** Six console styles, console dB legend, one-to-one tracking

fp-encoder: Endless, detented, push, LED ring — **fp-encoder** Endless, detented, push, LED ring

fp-wheel: Pitch bend with a spring return, and modulation — **fp-wheel** Pitch bend with a spring return, and modulation

Switches

5 elements

Every way a panel has ever been switched

fp-rocker: Rectangular, round bezel, illuminated power, PCB mini — **fp-rocker** Rectangular, round bezel, illuminated power, PCB mini

fp-toggle: Chrome bat, paddle, mini; two or three positions — **fp-toggle** Chrome bat, paddle, mini; two or three positions

fp-slide-switch: Two to four positions, plastic or chrome slider — **fp-slide-switch** Two to four positions, plastic or chrome slider

fp-rotary-switch: Up to twelve positions, legends that fit the arc — **fp-rotary-switch** Up to twelve positions, legends that fit the arc

fp-button: Round, square, arcade, and the console key switch family — **fp-button** Round, square, arcade, and the console key switch family

Indicators and connectors

8 elements

The parts that tell you what is happening

fp-led: 3 mm, 5 mm, rectangular, SMD, bicolour, clear or diffused — **fp-led** 3 mm, 5 mm, rectangular, SMD, bicolour, clear or diffused

fp-led-bar: Zones, bar or dot mode, peak hold — **fp-led-bar** Zones, bar or dot mode, peak hold

fp-led-ring: Around an encoder: bar, dot, bipolar, spread — **fp-led-ring** Around an encoder: bar, dot, bipolar, spread

fp-jack: 3.5 and 6.3 mm panel mount, XLR, RCA, DIN, USB, barrel — **fp-jack** 3.5 and 6.3 mm panel mount, XLR, RCA, DIN, USB, barrel

fp-lamp: Jewel pilot lamp, filament bulb, neon, dial lamp — **fp-lamp** Jewel pilot lamp, filament bulb, neon, dial lamp

fp-fuse: Bayonet holder, glass cartridge, blown — **fp-fuse** Bayonet holder, glass cartridge, blown

fp-binding-post: Banana posts and ground lugs — **fp-binding-post** Banana posts and ground lugs

fp-bnc: Bayonet ring with lugs — **fp-bnc** Bayonet ring with lugs

Displays

8 elements

Drawn at the dot pitch of the real module

fp-lcd: HD44780 character ROM, 8x2 to 40x4, custom characters — **fp-lcd** HD44780 character ROM, 8x2 to 40x4, custom characters

fp-oled: 96x16 to 256x64, drawing API and framebuffer blitting — **fp-oled** 96x16 to 256x64, drawing API and framebuffer blitting

fp-segment: Seven, fourteen and sixteen segment, with the slant — **fp-segment** Seven, fourteen and sixteen segment, with the slant

fp-led-matrix: 8x8 to 32x8, scrolling marquee — **fp-led-matrix** 8x8 to 32x8, scrolling marquee

fp-vfd: Phosphor glow, filament line, grid mesh — **fp-vfd** Phosphor glow, filament line, grid mesh

fp-nixie: Neon digits behind glass and anode mesh — **fp-nixie** Neon digits behind glass and anode mesh

fp-counter: Rolling mechanical drum counter — **fp-counter** Rolling mechanical drum counter

fp-magic-eye: Bar, fan and cat-eye tuning indicator tubes — **fp-magic-eye** Bar, fan and cat-eye tuning indicator tubes

Meters and surfaces

9 elements

Measured against the standard, not tuned by ear

fp-vu: IEC 60268-17 ballistics, backlit moving-coil face — **fp-vu** IEC 60268-17 ballistics, backlit moving-coil face

fp-meter: Peak, RMS, BBC and DIN PPM, hold and clip — **fp-meter** Peak, RMS, BBC and DIN PPM, hold and clip

fp-scope: Phosphor persistence, CRT bloom, goniometer — **fp-scope** Phosphor persistence, CRT bloom, goniometer

fp-spectrum: Log frequency axis, bars or filled curve — **fp-spectrum** Log frequency axis, bars or filled curve

fp-waveform: Min and max peaks, cursor, loop markers — **fp-waveform** Min and max peaks, cursor, loop markers

fp-envelope: Draggable ADSR with per-stage curves — **fp-envelope** Draggable ADSR with per-stage curves

fp-xy: Two axes, spring return, fading trail — **fp-xy** Two axes, spring return, fading trail

fp-wave-select: Waveform glyphs as buttons, tabs or a rotary — **fp-wave-select** Waveform glyphs as buttons, tabs or a rotary

fp-keyboard: Velocity from the strike point, held notes, glissando — **fp-keyboard** Velocity from the strike point, held notes, glissando

Panel hardware

10 elements

What makes a rectangle read as a machine

fp-screw: Six recesses, five heads, five finishes, turned at random — **fp-screw** Six recesses, five heads, five finishes, turned at random

fp-vent: Slots, hex, round, louver, mesh, bars — **fp-vent** Slots, hex, round, louver, mesh, bars

fp-fan: Spins up, blurs into a disc, coasts down — **fp-fan** Spins up, blurs into a disc, coasts down

fp-tube: Preamp and power valve types, heater and plate glow — **fp-tube** Preamp and power valve types, heater and plate glow

fp-tube-window: Valves glowing through a grille onto the panel — **fp-tube-window** Valves glowing through a grille onto the panel

fp-panel: Anodised, brushed, powder, tolex, wood, steel, PCB — **fp-panel** Anodised, brushed, powder, tolex, wood, steel, PCB

fp-nameplate: Engraved, embossed, silkscreen, riveted plate, badge — **fp-nameplate** Engraved, embossed, silkscreen, riveted plate, badge

fp-label: Silkscreen legends, brackets and boxed sections — **fp-label** Silkscreen legends, brackets and boxed sections

fp-handle: Rack handle, cabinet pull, leather strap — **fp-handle** Rack handle, cabinet pull, leather strap

fp-rack-ear: 19 inch ears on the EIA-310 hole pattern — **fp-rack-ear** 19 inch ears on the EIA-310 hole pattern

Tape

3 elements

Reels that turn at the speed the pack radius says

fp-tape-head: Erase, record and play heads, and full head blocks — **fp-tape-head** Erase, record and play heads, and full head blocks

fp-reel: NAB and cine, with the pack growing as it fills — **fp-reel** NAB and cine, with the pack growing as it fills

fp-tape-deck: Reel to reel, cassette, and tape-loop echo — **fp-tape-deck** Reel to reel, cassette, and tape-loop echo

The rarer parts

10 elements

Because a panel is never only knobs

fp-dip-switch: Four to ten positions, slide or piano — **fp-dip-switch** Four to ten positions, slide or piano

fp-thumbwheel: Decade wheels with their push tabs — **fp-thumbwheel** Decade wheels with their push tabs

fp-footswitch: 3PDT stomp with the knurled ring and status LED — **fp-footswitch** 3PDT stomp with the knurled ring and status LED

fp-pad: Velocity from where you hit it, lit rim — **fp-pad** Velocity from where you hit it, lit rim

fp-pin-matrix: Colour-coded patch pins on a matrix panel — **fp-pin-matrix** Colour-coded patch pins on a matrix panel

fp-trimmer: Single turn cermet and 25-turn box — **fp-trimmer** Single turn cermet and 25-turn box

fp-iec-inlet: C14 inlet with fuse drawer and switch — **fp-iec-inlet** C14 inlet with fuse drawer and switch

fp-label-tape: Embossed tape, masking tape, pencil — **fp-label-tape** Embossed tape, masking tape, pencil

fp-switch-guard: Hinged cover over the switch beneath it — **fp-switch-guard** Hinged cover over the switch beneath it

fp-ribbon: Position and pressure along the strip — **fp-ribbon** Position and pressure along the strip

Names

Named for the shape, not the maker

A component is called what it is: a skirted knob, a bat toggle, a key switch, a character display. Where the reference documentation identifies the real control a shape was drawn from, it does that to tell you what you are getting. Those names belong to their owners, who are not affiliated with this project, and nothing here contains any part, artwork or data taken from them. Every element is drawn from geometry written for it.

Put together

A panel is markup. No canvas to manage, no layout engine to learn, no build step.

A complete front panel built from Faceplate elements: engraved nameplate, knobs with skirt scales, illuminated buttons, a VU pair, a character display and a valve window

A front panel

Elements are HTML. They lay out with the grid or flexbox you already use, and a control is bound to a plugin parameter by naming it.

<fp-panel finish="brushed" screws="corners">

  <fp-nameplate text="FACEPLATE" variant="engraved"></fp-nameplate>

  <fp-knob param="drive" variant="chicken" scale="ticks" readout></fp-knob>
  <fp-knob param="tone" variant="skirted" arc label="Tone"></fp-knob>
  <fp-rocker param="bypass" variant="power"></fp-rocker>

  <fp-vu source="out" variant="backlit" lamp></fp-vu>
  <fp-lcd source="display" cols="16" rows="2" bezel="bevel"></fp-lcd>
  <fp-tube-window source="drive" tubes="2"></fp-tube-window>

</fp-panel>

A reel-to-reel transport with both reels loaded, the head block between them and the tape running across the heads, beside a cassette

A tape machine that runs

The transport is one element. The reels turn at the speed their pack radius gives them, the tape moves across the heads, and the whole thing coasts to a stop.

<fp-tape-deck type="loop" heads="e|r|p|p|p"
              heads-active="1|3" speed="7.5" state="play"></fp-tape-deck>

One light, one palette

Two values decide how a whole panel looks, which is what makes it read as one object instead of a parts bin.

The key light sweeping a full turn around knobs, screws and switches, every highlight and shadow moving together — LightOne angle, moved through a full turn

Every highlight, bevel, rim and contact shadow comes from a single angle. Move it and the panel is relit as a whole, because the screws, knob edges, switch bodies and metal are all reading the same number.

Colour works the same way. Five themes ship, from dark anodised aluminium to a cream panel with bakelite knobs to a silver eurorack face, and each is a short list of colours. Any element overrides any of them for itself, so one red button on a grey panel needs no new component.

theme.apply("eurorack");
theme.apply({ accent: "#00c2ff", "light-angle": 300 });

The same cluster of knobs, a switch, an LED and a display shown under five themes: studio, vintage, modern, eurorack and the Innertia palette — ThemesThe same controls, five palettes, no new components

Already wired up

The drawing is the visible half. The other half is what the components are connected to before you write anything.

01Parameters: Name a parameter on a control and it is bound. The host automates it, undo knows about it, and the range, curve, step and unit come from the plugin instead of being typed twice. Hosts that highlight the parameter under your cursor are told which one it is.
02Live audio data: Meters, scopes, analysers and displays subscribe to a named channel that the audio engine publishes into. The audio thread never waits and never allocates to feed them.
03Measured behaviour: The VU movement reaches 99 per cent in 300 milliseconds and overshoots by about one per cent, as the standard says it must, and a test asserts it. Peak, RMS and both PPM types sit beside it.
04Keyboard and screen readers: Every control takes focus, steps with the arrow keys, jumps with Home and End and reports its value. The focus ring appears when you are using the keyboard and stays out of the way when you are not.
05It behaves like an application: No text selection, context menu, zoom, scrollbars, navigation, browser shortcuts or white flash when the window opens. Animated parts share one frame loop and leave it the moment they settle, so a still panel costs nothing.

Runs in	Plugin windows through the framework web view, and any browser
Plugin formats	VST3 · AU · CLAP · Standalone
Systems	macOS · Windows · Linux
Components	57, in eight families
Written as	Custom elements. No framework, no bundler, no build step
Dependencies	None. Nothing is fetched at runtime

Availability

Faceplate is being finished inside my own instruments first. That is the only way I would trust a component library.

Soon

Coming soon, and on request before that

If you are building an audio product and this is the interface you want, write to me and say what you are making. I am giving early access to a small number of projects, and taking on interface and product work around it.

Request early access What else I build

Audio UI design component library.