# Yama-Bruh — Lucian Labs look F

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 at
`yama-bruh.lucianlabs.ca`. Read `AGENT.md` first.

- Stylesheet: `https://lucianlabs.ca/branding/yama-bruh.css`
- Reference render: `https://lucianlabs.ca/branding/yama-bruh.html`
- Tokens as JSON: `https://lucianlabs.ca/branding/brands.json`
- Live source: `https://yama-bruh.lucianlabs.ca/#synth`

## Where it came from

The Yamaha PortaSound PSS-470 and PSS-170: dark charcoal plastic, cyan
silkscreen, green rectangular buttons, a 7-segment LED, a speaker grille and
ridged case edges. The synth rebuilds that panel in the browser — voice bank,
voice selector, effect switches, rhythm section, keyboard — over a live shader
that renders the plastic (grain, dust, wear, patina, a lamp highlight that
follows the pointer, time-of-day light).

Sources: `yama-bruh/www/style.css` (every value below), `www/index.html` (panel
order), `UI_HANDOFF.md` (the reference brief).

The hardware, as photographed for the blog:
`https://lucianlabs.ca/blog/img/yama-bruh/portasound.webp` (the whole panel),
`nameplate.webp` (the wordmark plate), `voice-bank.webp` (the printed voice
list). They are the reference for every surface below.

## 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,
with buttons that travel, a readout that shows one number, and labels printed
on the case. If it makes a sound when you press it, this is the look.

## The three rules that make it this look

1. **It is a moulded object.** Every surface is plastic lit from above:
   recessed plates with inset shadow, a top edge that catches the light, a
   bottom edge in shadow, grooves and vents between sections, ridged case
   edges. Depth is light falling on plastic.
2. **One silkscreen face.** Courier New, bold, uppercase, widely tracked —
   teal on charcoal for printed labels, cream for numbers and the wordmark,
   red LED for the number the device is showing. Courier New is this look's
   named exception to the house Inconsolata rule: the panel is printed, and
   every platform ships the face.
3. **The cap colour is the function.** Green selects. Yellow is special —
   random, none. Red is transport — start, sync. Grey picks a pattern.
   Amber-lit means a toggle is engaged. Caps are moulded multi-stop gradients,
   the one look in the kit where a button carries one, because the gradient is
   the plastic.

## Palette

| Token | Value | Role |
| --- | --- | --- |
| `--bg` | `#1a1a1a` | the case |
| `--panel` | `rgba(0,0,0,.55)` | a recessed plate |
| `--panel-solid` | `#0f0f0f` | an opaque plate |
| `--screen` | `#060606` | LED and readout housings |
| `--line` / `--line-hi` / `--line-lo` | `#2a2a2a` / `#333` / `#222` | plate edges: neutral, lit, shadowed |
| `--ink` | `#d0ccc4` | cream — the wordmark |
| `--label` | `#ccccbb` | numbers and cap labels |
| `--muted` / `--faint` / `--dim` | `#777` / `#555` / `#444` | secondary print |
| `--accent` | `#22ccaa` | teal silkscreen |
| `--accent-hi` | `#77ffdd` | teal lit — the selected entry |
| `--status` | `#558877` | the status line under the LED |
| `--led` | `#ff4444` | the 7-segment readout, with a three-layer glow |
| `--cap-green` | `#5aeaaa → #1a7850` | select |
| `--cap-yellow` | `#f0d060 → #806810` | special |
| `--cap-red` | `#dd4444 → #771818` | transport |
| `--cap-grey` | `#999 → #444` | pattern |
| `--cap-lit` | `#ffcc44 → #995500` | engaged |
| `--ivory` / `--ebony` | `#e8e4dc → #c8c4bb` / `#2a2520 → #0a0500` | keys |

## Type ramp

One face, Courier New, for every role. Sizes in units.

| Role | Size | Treatment |
| --- | --- | --- |
| wordmark | 26 | bold, 5 tracking, cream, embossed shadow |
| wordmark sub ("PortaSound") | 11 | italic, 2 tracking, `--muted` |
| model ("YM-ELI7VH") | 12 | 2 tracking, `--faint` |
| panel label | 9 | bold, uppercase, 3 tracking, teal |
| cap label | 11 | bold, 1 tracking, `--label` |
| effect label | 7 | bold, 0.5 tracking |
| bank entry | 9 | teal, 1.7 leading; the number bold in `--label` |
| LED | 40 | bold, 6 tracking, red glow, tabular |
| readout | 11 | bold teal on `--screen` |
| tempo | 14 | bold red; unit 8 in `--status` |
| disclosure header | 10 | bold, 2 tracking, teal |
| status line | 10 | 1 tracking, `--status` |

## Accent budget

Teal is the print, so it appears on every label — the labels are the
interface, the way amber is in Field Notes. Teal lit (`--accent-hi` over a 20%
teal wash) marks the one selected entry in a bank. Red belongs to light: the
LED and the tempo readout. Cap colours follow rule 3.

## Layout

The panel reads top to bottom like the instrument: speaker grille → name plate
(wordmark left, model right) → voice bank → grooves → controls row (LED,
effect switches, voice selector) → rhythm section → keyboard bed → disclosure
panels (effects, editor, key sequence, drum keys, MIDI channels). On a wide
screen the device sits in the left column and the disclosure panels stack on
the right. The page caps at 1100 units, with 14-unit ridged edges down both
sides.

## Motion

- **Press:** the cap drops 2 units, its chamfer flattens and the highlight
  streak goes out — on `instant`. The source ships 40ms; the kit rounds it to
  60.
- **Keys:** a white key darkens; a black key shortens by 2% of its length —
  `instant`.
- **Selection lights in place:** a bank entry fills with the teal wash and
  brightens; the A/B toggle fills teal; a pattern cap turns green with a teal
  glow — `instant`. Hardware lights where it sits, which is this look's
  sanctioned deviation from UX.md §2a's travelling indicator.
- **Engage:** an effect or transport cap swaps to amber-lit and holds.
- **Learn mode (busy):** the waiting control breathes between full and 60%
  opacity on a 0.9s loop.
- **Rhythm:** step dots light on the beat, `instant`; every fourth dot carries
  a brighter rim.
- **LED:** values cut, the way a 7-segment display changes. An error reads
  `Er` and blinks twice over 600ms.
- **Disclosure:** a panel opens in place; its header squares off its bottom
  corners to join the body.
- **The case:** on the live site the background is a shader — grain, dust,
  wear, patina, a lamp highlight on the pointer, time-of-day light. A static
  render uses fine noise plus the ridged edges.

### Transition — arriving in Yama-Bruh

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 the screen 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. Nothing glides, because nothing on this
panel glides.

**Frames:** seven `clip-path: inset()` steps at 0 / 18 / 34 / 48 / 66 / 84 /
100% — up, blank, and up again — each holding then jumping.

**Reduced motion:** no sweep. The swap degrades to the 600ms token tween —
colour and opacity still change, so the choice still visibly lands.

Implemented once in `v2/ll-brand.js` (`LLBrand.transition('yama-bruh')` returns
the frames), mirrored in `v2/ll-shop.js`, and recorded in `brands.json` under
`looks.yama-bruh.widget.transition`.

## Voice

Printed on plastic. Labels are uppercase nouns, one or two words.

- Labels: `VOICE BANK`, `SUSTAIN`, `VIBRATO`, `PORTAMENTO`, `START/STOP`,
  `SYNCHRO`, `MIDI LEARN`, `CLEAR MAP`.
- Numbers are zero-padded to two digits: `00`, `01 8 Beat`, `120 BPM`.
- Voices are numbered and title-cased: `20 Trumpet`, `34 Bass Clarinet`.
- Toggle state reads as a readout: `MIDI: OFF`.
- The status line is lowercase and short: `piano 1`, `sustain on`,
  `bank b empty`.
- The plate: `YAMA-BRUH` · `PortaSound` · `YM-ELI7VH`.

## Components in the stylesheet

`.device` `.vents` `.vent` `.grooves` `.row` · `.plate` `.wordmark`
`.wordmark-sub` `.model` · `.panel` `.panel-label` `.cap-label` · `.bank`
`.bank-entry` `.bank-num` `.toggle` `.toggle.wide` · `.led-housing` `.led`
`.led-status` `.readout` `.tempo` · `.cap-cell` `.cap` `.cap.yellow` `.cap.red`
`.cap.grey` `.cap.lit` `.cap-grid` `.cap-row` `.effects` `.pattern-grid` ·
`.steps` `.step` · `.keys-bed` `.keys` `.key-white` `.key-black` ·
`.disclosure` `.disclosure-body` · text, select and range fields.

## Filling gaps

Follow `AGENT.md` step 4, with these specifics:

- **Toggle** — an effect cap: green at rest, amber-lit when engaged, with a
  printed label above.
- **Tabs or modes** — a row of grey pattern caps; the active one turns green
  with a teal glow.
- **Slider** — a recessed black track with a 14-unit green thumb in a
  case-coloured rim.
- **Numeric stepper** — the value in an LED or readout housing, with green ▲ ▼
  caps beside it.
- **Progress** — a row of step dots.
- **Transient message** — the LED status line under the readout.
- **Modal** — a recessed plate over a 60% black scrim, headed by a panel label.
- **Meter or chart** — teal bars inside a `--screen` housing.

## The family

One brand, five instruments, one site — `yama-bruh.lucianlabs.ca`:

| Page | What it is | Chrome |
| --- | --- | --- |
| `/` — Synth | the PSS-470 panel: voice bank, selector, effects, rhythm, keys, editor | full plate |
| `/ringtones.html` | deterministic ringtones from any ID — nine moods, an embed snippet | full plate |
| `/sfx.html` | a sound designer: preset, note, duration, copy the call | full plate |
| `/simplym.html` | a freeform FM designer — layers, operators, envelopes | its own layout on the case: vents, plates, screens, caps |
| `/ymwave.html` | one YM2413 user tone in four synchronised views | its own layout on the case: vents, plates, screens, caps |

Every page carries the family nav (SYNTH · RINGTONES · SFX · SIMPLYM · YMWAVE,
the current page lit teal) in its name plate, and the same foot. The synth
pages are the panel itself; the two editors keep their own layouts but sit on
the same case — `hardware.css` re-moulds their controls: plates recessed into
the plastic with a lit top edge, values and code sunk into screens, grey caps
that go green when they are on, sliders as caps riding a groove. The family is
one object, not one layout.

`yamabruh-notify.js` is the brand out in the world: a drop-in ringtone player
any site can call. `spec.json` is the machine-readable manifest of banks,
patches, modes and scales.

## The dock

The look is in the widget catalogue (`v2/ll-brand.js`), so the Lucian Labs
dock and shop can wear it.

- **Orb** — a green chamfered cap on a square charcoal case, with a red
  standby LED top-right that blinks twice every five seconds. The case is
  square because the look forces square; the LED is its one circle. Press it
  and the cap travels 1 unit, the way every cap in the look does.
- **Arrival (`led`, 300ms, settle)** — the new look comes up in hard bands the
  way a 7-segment display powers on: one band, a flicker, then the rest, each
  cut held. Deterministic — hardware repeats itself — where the curve, the
  pour and the glitch re-roll every time.
- **Fonts** — none to load. Courier New is the silkscreen and every platform
  ships it, so the catalogue entry's `fonts` is empty and the loaders skip
  it.

## Behaviour

`UX.md` is the kit-wide behaviour contract; this is how Yama-Bruh expresses it.

| State | Yama-Bruh |
| --- | --- |
| Hover | a bank entry takes the teal wash; a grey cap steps its moulding lighter |
| Focus | 2-unit teal ring with a 2-unit gap |
| Press | drops 2 units, chamfer flattens, on `instant` |
| Busy | the waiting control breathes on a 0.9s loop |
| Disabled | 50%, with the reason on the status line |
| Selected | lit in place — teal wash on an entry, green with a teal glow on a cap |
| Error | the LED reads `Er`, blinks twice, and the status line names the cause |

**Sound starts on the first press.** Request audio and MIDI permission at launch
so the first key plays; on the web, the first press also resumes the audio
context.

**The whole labelled cell is the target.** A cap is small art on a 44-unit
target: the label and the cap together, so a thumb hits it on touch.

**Responsive.** Below 480 units the wordmark drops to 20, the LED to 30, caps
narrow to 38, the keyboard to 90 tall and the pattern grid to three across. Wide
screens split into the device column and the disclosure column.