Studio
The Studio skin: its design, tokens, type and contrast.
Subject. A rack of synthesizer modules on a studio desk: painted metal faceplates, rubber knob caps, silk-screened legends, amber indicator lamps and patch cables. Audience. Developers building music, audio and creative tools, and anyone who wants an interface that feels like hardware. Job. The demo that makes the skin system obvious: the same UI SDK components, turned into instruments you can hear.
Not SPEC-01 (light molded pocket instruments, LCDs, orange-red keys). Studio is darker, rack-mounted, metal and rubber, with color reserved for cables and lamps.
Tokens
| Name | Value | Role |
|---|---|---|
| Rack | oklch(0.25 0.01 255) | Rails and the gaps between modules |
| Panel | oklch(0.34 0.012 255) | Module faceplates (gunmetal, not black) |
| Legend | oklch(0.94 0.012 85) | Silk-screened text and scales |
| Rubber | oklch(0.19 0.006 255) | Knob caps, pads |
| Lamp | oklch(0.82 0.15 72) | The key color: lit state, value arcs |
| Cables | red, blue, green, amber, violet | Which cable is which |
Type. Saira Semi Condensed. Legends are small and uppercase because that is how faceplates are printed; readouts use tabular numerals. Body copy stays sentence case.
Layout. Modules sit side by side on a rack, each with screws at the corners and its name at the top. Controls on a grid, jacks along the bottom, cables drape over all of it.
Principles.
- Spend boldness on the cables and the lamps. Panels stay quiet.
- Every state a person sets lights something: a switch lamp, a step, a knob arc.
- Depth is a 1px top highlight and a bottom shadow, never a blur haze. Forced colors replaces all of it with borders.
- Sound is mechanical: thocks for pads, detent clicks for knobs, latches for switches.
Review against generic defaults. Dark UI with one accent is a common default; here the panel is mid-dark gunmetal, the lamp color comes from real indicator lamps, and the five cable colors carry meaning. Uppercase is limited to printed legends.