For agents

Paste this into the session that's building the UI. Do not retype token values from memory — link or vendor the stylesheet.

Build this UI in the Lucian Labs "Console" look.
Read, in order:
  https://lucianlabs.ca/branding/AGENT.md   (how to pick + what never to do)
  https://lucianlabs.ca/branding/console.md   (this look)
  https://lucianlabs.ca/branding/UX.md      (how it must behave)
Take tokens from https://lucianlabs.ca/branding/brands.json — never
retype them. On web you may link console.css directly; on any other
platform derive from the tokens and the UX contract.
Implement all seven interaction states, focus included, and use only
the five named durations. Check your output against the AGENT.md ban
list and the UX.md ship checklist before you report the work done.

Use it for

Audio tools, dashboards, dev tools, monitors, editors, log viewers. Anything with live state or numbers that move. If a window stays open for an hour, this is the look.

Palette

--bg

#101014

--bg-deep

#07080d

--panel-solid

#111420

--line

#383c4a

--ink

#eaecf2

--muted

#aaafbd

--faint

#6b7185

--accent

#397fd9

--accent-2

#ffa40a

--good

#4db378

--bad

#e6404d

--radius

0 — everywhere

The three rules

Zero radius, everywhere. Set on the universal selector. Never overridden for a "special" element. Square corners are the signature.
Depth is hairlines, not shadows. There is no box-shadow in this look. Separation is 1px --line plus the translucent panel over the page wash.
The pixel face carries the chrome. Micro 5 sets headings, buttons, labels, table headers, badges. Body is system sans. Numbers are Inconsolata, tabular. Three faces, three jobs.

Type ramp

Heading 01

Heading 02

Heading 03

label / overline

Body copy is system sans at 1rem, 1.55 line-height. It carries paragraphs and descriptions — never headings, never chrome.

Small copy, muted, 0.9rem.

48000 Hz · -6.2 dB · 128 BPM · 03:41.220

Micro 5 is a pixel face — never set it below 1rem. If text must be smaller than that, it is body or mono, not display.

Buttons — one primary, amber means armed

Amber is state, not decoration — armed, recording, live, or about-to-be-irreversible. If nothing is in that state, amber does not appear on the page.

States in motion

Tap through them. Colour and border carry each state, the label crossfades with it in place, progress sweeps the bottom edge, and selection slides under the leaf.

Panels & state

idle

Hairline border, translucent panel, no shadow. The default surface.

armed

A 2px accent edge on the left. State lives on the boundary, not in a fill.

live

Amber edge. Reserved for capture in progress or irreversible-and-running.

Form & status

input device tempo

idle synced dropped take 04

take	len	peak
01	00:42	-3.1
02	01:18	-6.4
03	00:09	-0.8

Voice

write

record
export wav
no takes yet
device busy — check input 2
48 kHz · -6.2 dB

never

Start Recording Now
Export Your Audio
You haven't created anything yet!
Oops! Something went wrong.
Seamlessly powerful

Transition

A look change moves the way the look you are going into moves. This is how a swap into Console arrives.

kind	duration	curve
`scanline`	600ms · move	`steps(8, end)`

Console does not move — it redraws. The new look draws down the screen in eight hard bands, the way a terminal repaints. Stepped timing is the one deliberate departure from the named curves: a curve would make the redraw glide, and gliding is motion this look does not have.

Frames: inset(0 0 100% 0) → inset(0 0 0% 0), one interval stepped into eight. Reduced motion: no sweep — the 600ms colour tween, so the choice still lands.

Spec: skin-swap.md · source of truth LL_LOOKS['console'].transition in /v2/ll-brand.js.