Components
Live · work any of them10Components
01 Key
button- A square block with a 2px keycap edge and no outline. Pressed, it drops 2px and the edge collapses.
- Plain for most actions, ink for strong ones, blue and yellow for modifiers, and signal for the one live action on the screen.
- Latching keys carry an LED and
aria-pressed. Loop latches.
02 Led
statusOffLiveShiftHoldArmed
- A 6px dot. Unlit is the line colour; lit is signal, or a function colour.
- Never meaning by colour alone: always beside a label.
03 Label
text01 TempoBeats / barRecording
- Franklin 700 at 11px, uppercase, tracked. One or two words, no punctuation.
- A bold index numbers modules in reading order. Orange text uses
signal-text.
04 Panel
region02 Tempo20–300
Rule on top, title left, meta right, contents on the wall.
- No fill, border or shadow: a 2px rule and a numbered title. Every panel on this page is one.
- Each is a container, so what is inside adapts to the panel’s own width.
05 Display
readoutLocal time—
00:00:00
- The black screen, in both themes. A label row, one big mono number and an optional segmented meter.
- For the one or two numbers a screen is about, never paragraphs. This one is your clock; the meter fills across each minute.
06 Knob
slider- Turn it like a dial from the ring, or slide up or right from the centre. Shift is fine control; the wheel and arrow keys step.
- 270° of travel, a signal arc for the value, and a zero-padded mono readout.
07 Fader
range- A styled native range: an outlined track filled signal up to the thumb, and a flat ink thumb.
- For values with a long, linear range. Knobs suit tight spaces.
08 Switch
switch- A slide switch for settings that take effect at once. On lights the track in signal.
- The only component with 2px corners.
09 Selector
radiogroupSubdivision
- One of two to five modes, as joined square keys. The chosen one inverts to ink and lights its LED.
- Arrow keys move and select.
10 Field
input- A sunken well with a 2px ink underline and the label above.
11 Stepper
patternBeats / bar
- Two small keys either side of a sunken mono value, for small whole numbers.
12 Icons
08- play
- stop
- record
- plus
- minus
- arrow-right
- menu
- close
- Solid geometric glyphs on a 24px grid, filled with the current colour. Never emoji: iOS draws arrows and play symbols as colour emoji.