Unit 01
01 About
A design system for small personal apps that work like pocket hardware and read like a modern art museum’s walls.
Two influences, both used as inspiration only: industrial-electronics product design, with honest controls, numbered labels and one hot accent; and the modern-museum graphic tradition, with one Franklin Gothic-style typeface, a black-and-white core and heavy type used as the image. Everything here is live: the components can be worked, and all 24 apps run.
02 Principles
08- 01
Every control looks like what it does
A Key presses: it moves 2px and loses its edge. A Knob turns. A Switch slides.
- 02
One typeface does the talking
Libre Franklin sets every word. Mono is only for numbers that tick on their own.
- 03
Black, white, one orange
Signal marks the single most live thing on screen. If two things are orange, one is wrong.
- 04
Type is the image
Names and key numbers are set big and heavy, with nothing decorative to compete.
- 05
Rules, not boxes
Sections open with a 2px rule and sit straight on the wall: no fills, borders or cards.
- 06
Flat and machined
No gradients, blur or shadows except the keycap edge, which collapses when pressed.
- 07
Label everything, numbered
Every module gets an uppercase label numbered in reading order.
- 08
Weigh every part
Core parts are reachable at every size, supporting ones are a tap away, enhancements appear when there is room.
03 Colour
Gallery / NightPage background — the gallery wall. White in Gallery, black in Night. Everything sits on chassis.
Same as chassis: Panels are not boxes. They are opened by a 2px rule and sit directly on the wall. Knob caps use it too.
Face of plain Keys and Selector options. No outline: the face and the shadow-key edge define them. Ink text on it ≥15:1.
Recessed wells: Field inputs, Fader and Switch tracks, stepper readouts.
Primary text, headlines and rules. Pure black on white, pure white on black (21:1).
Secondary text: Labels, units, metadata. ≥5.5:1 on chassis and panel-sunk in both themes.
Hairlines, unlit LEDs, inactive ticks, the edge of a Display on black. Decorative only.
The 2px black (Night: white) rule that opens every Panel and section — the system's main divider, in place of boxes and borders.
THE accent. A fill for the one live thing on screen: the primary Key, an active value arc, a lit LED. Never text on chassis (2.4:1) — use signal-text.
Accent-coloured text on chassis or panel (≥5:1 both themes).
Text and glyphs on a signal fill (6:1). Never white.
Secondary function key colour (shift, mode, settings). Fill only.
Text on a blue fill (5.3:1).
Tertiary function key colour (copy, hold, favourite). Fill only, sparingly.
Text on a yellow fill.
Display screen background — dark in both themes, like real glass.
Lit text and segments on lcd.
Secondary text on lcd (5.7:1).
Unlit meter segments on lcd. Decorative.
Keyboard focus ring: 2px solid, 2px offset. Ink, not signal — signal fails 3:1 on aluminum.
04 Type
Libre Franklin · IBM Plex Mono- Unit 01
- Metronome
- Morning session
- Hold shift to fine-tune any knob.
- Last synced 2 min ago
- Session name
- TEMPO
- 00:42
- 064
- 01
05 Space
4px grid- space-14pxBase unit. Label-to-control gap, LED offset.
- space-28pxGap between Keys in a row; inner padding of small controls.
- space-312pxKey inner padding; Panel header padding.
- space-416pxPanel body padding; gap between controls in a module.
- space-624pxGap between Panels; screen edge padding on mobile.
- space-832pxSection breaks; screen edge padding on desktop.
- space-1248pxMajor vertical rhythm between screen regions.
06 Shape
Flat by default. The only shadow is the keycap edge, which collapses when pressed.