An instrument in SwiftUI

The rule

The test for every screen is Dieter Rams's: as little design as possible, and what there is must be useful, understandable and honest. On a panel that becomes three working rules.

• Nothing on screen that is not needed.
• One accent colour, used for one meaning.
• A part looks like what it does, and does it the same way every time.

One orange, and only as light

The panel is paper white, with black ink and grey labels. The drums have one colour, an orange, and it is never paint. No word is orange and no key is orange. Orange appears only where something is lit: a lamp over a step that is on, the figures in the window. So orange always means the same thing, which is that this is live.

The rule has been bent twice, both times by the same test. The SYNTH bench has its own light, a yellow, so a tune is never mistaken for a beat, and a pad struck live glows green. Each is a light and never a paint, and each means one thing.

The grey of the labels was chosen by measurement. It passes 4.5 to 1 against the body for small text. The first grey did not, and was changed.

A key is three shapes

Fig. 1 is one step key. In code it is three shapes in a stack: a darker foot, 2 points below; the body, 40 points by 56 with a corner of 7; and a moulded ridge across it, 0.64 of its width. There is no image and no texture.

It has height because it travels. Pressed, the body moves down 1.5 points onto its foot in 40 milliseconds, and its shadow shortens. That is the whole press. A key that did more would be showing off, and a key that did less would not feel pressed.

A lamp is a filament behind glass

The lamp above each key is 9 points across. The dark glass is always drawn. The lit state is a second layer laid over it and faded in, so a lamp warms in 90 milliseconds and cools in 150, as a small bulb behind smoked glass does. When the playhead passes a lit step, the flash lands at once, at the moment the step is heard, and cools over 100 milliseconds.

The numbers are different on purpose. Light that arrives late looks wrong against sound, so the flash does not fade in. Light that leaves slowly looks warm.

Labels are silkscreen

Every word on the panel is set as if printed on it: uppercase, in a monospaced face, a noun or two. TEMPO. SWING. PLAY. A label names the part and stops. Nothing on the panel is a sentence, and nothing asks a question.

The same key on every screen

The panel is drawn once, on a canvas of 402 points by 874, the size of the phone it was designed on. On another iPhone the whole canvas is fitted by one factor. On an iPad the parts move, whole, to new places, and are fitted by one factor again. A key is never stretched, so it is the same key everywhere.

Where SwiftUI stops

SwiftUI draws the panel. It does not take the touches. A SwiftUI button answers when the finger lifts, and a gesture waits a moment to see what kind of gesture it is. An instrument must sound when the finger lands. So a clear layer from UIKit sits over each drawn part and reports touch-down with the touch's own timestamp.

The sound is kept apart in the same way. The panel never touches the audio system, and the engine never imports the code that draws. They speak through one queue. The audio thread never waits has that side of it.

The key, pulled apart

The front page draws this same key in its five layers, foot, body, lip, glass and light, and presses it as the page scrolls.

Sources

• The key's and the lamp's measurements and timings: the panel's own SwiftUI source for its keys, read from the build of 10 October 2026.
• The palette, and the contrast of the label grey: the panel's colour tokens, where the measured ratio is written beside each grey.
• The canvas of 402 by 874 and the one factor: the panel's layout. The touch layer: the panel's touch surface, where the reason is written above it.
• Rams's principles, "as little design as possible", useful, understandable, honest: Dieter Rams, ten principles for good design, Vitsœ.

More sheets