A 90s portable keyboard on the kitchen table. Charcoal moulded plastic, teal silkscreen, chamfered caps whose colour is their job, and a red LED showing one number. Shipped in YAMA-BRUH, the FM ringtone synth, modelled on the Yamaha PortaSound PSS-470.
For agents
Paste this into the session that's building the UI. Take token values from the stylesheet or brands.json.
Build this UI in the Lucian Labs "Yama-Bruh" look.
Read, in order:
https://lucianlabs.ca/branding/AGENT.md (how to pick a look)
https://lucianlabs.ca/branding/yama-bruh.md (this look)
https://lucianlabs.ca/branding/UX.md (how it must behave)
Take tokens from https://lucianlabs.ca/branding/brands.json. On web you may
link yama-bruh.css directly; on any other platform derive from the tokens
and the UX contract.
Build it as a physical panel: recessed plates lit from above, chamfered caps
whose colour is their function, one silkscreen face, and a red LED for the
number the device is showing. Check your output against the UX.md ship
checklist before you report the work done.Where it came from
The Yamaha PortaSound PSS-470, photographed for the blog. Every surface in this look is one of these: the case, the printed voice list, the name plate.
Use it for
Things you play. Synths, drum machines, sequencers, sound toys, ringtone makers, MIDI tools — anything that should feel like a device in your hands. If it makes a sound when you press it, this is the look.
Palette
The three rules
- It is a moulded object. Every surface is plastic lit from above — recessed plates, a lit top edge, a shadowed bottom edge, grooves and vents between sections, ridged case edges.
- One silkscreen face. Courier New, bold, uppercase, widely tracked. Teal for printed labels, cream for numbers and the wordmark, red LED for the number the device is showing.
- The cap colour is the function. Green selects, yellow is special, red is transport, grey picks a pattern, amber-lit is engaged. Caps are moulded gradients because the gradient is the plastic.
Type ramp
The panel — press it
Everything here is live. Pick a voice from the bank or type two digits on the selector, engage an effect, start the rhythm, play the keys.
States in motion
Hardware lights where it sits. Try each one on the panel above.
- Press. A cap drops 2 units and its chamfer flattens, on instant.
- Select. A bank entry or pattern cap lights in place — teal wash, or green with a teal glow.
- Engage. An effect or START cap swaps to amber-lit and holds.
- Busy. MIDI LEARN breathes on a 0.9s loop until you press another control.
- Done. The LED cuts to the value and the status line names it.
- Error. The LED reads Er and blinks twice — switch to bank B, or type 99.
The family
One brand, five instruments, one site. The synth pages wear the full plate; the two editors keep their own chrome and wear the family nav and the foot.
The dock
The look is in the widget catalogue, so the Lucian Labs dock and shop can wear it.
- Orb. A green cap on a square charcoal case with a red standby LED — square because the look forces square; the LED is its one circle. Press it and the cap travels.
- Arrival. led · 300ms · settle. The new look comes up in hard bands like a 7-segment display powering on — one band, a flicker, then the rest. Deterministic. Replay it on the hub.
- Fonts. None to load — Courier New is the silkscreen, and every platform ships it.
Voice
VOICE BANK · SUSTAIN · START/STOP · MIDI LEARN
00 · 01 8 Beat · 120 BPM · MIDI: OFF
20 Trumpet · 34 Bass Clarinet
piano 1 · sustain on · bank b empty
Transition
A look change moves the way the look you are going into moves. This is how a swap into Yama-Bruh arrives.
| kind | duration | curve |
|---|---|---|
led | 300ms · settle | steps(1, end) per cut |
Values on this look cut, the way a 7-segment display changes, so the swap does too: the new look climbs in hard steps, drops back to nothing once partway up, then climbs to full. A segment display settling on its number, rather than a surface being drawn.
Frames: seven inset() steps at 0 / 18 / 34 / 48 / 66 / 84 / 100% — up, blank, up again. Reduced motion: no sweep — the 600ms colour tween, so the choice still lands.
Spec: skin-swap.md · source of truth LL_LOOKS['yama-bruh'].transition in /v2/ll-brand.js.