# Console — Lucian Labs look A

Instrument panel at 2am. Dark, precise, sharp-cornered, nothing decorative.
Shipped in WaveLoop and Choppa. Read `AGENT.md` first — the ban list there
applies to this look.

- Stylesheet: `https://lucianlabs.ca/branding/console.css`
- Reference render: `https://lucianlabs.ca/branding/console.html`
- Tokens as JSON: `https://lucianlabs.ca/branding/brands.json`

## Use it for

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

Do not use it for anything a guest touches once — that's House Pour.

## The three rules that make it this look

1. **Zero radius, everywhere.** The stylesheet sets `border-radius: var(--radius)`
   (`0`) on the universal selector. Do not override it for one "special"
   element. Square corners are the signature.
2. **Depth comes from hairlines, not shadows.** There is no `box-shadow` in this
   look. Separation is a 1px `--line` border and the translucent `--panel`
   background over the page wash. If you find yourself adding a shadow to make
   something stand out, the answer is a border or a different surface.
3. **The pixel face carries the chrome.** Micro 5 (`--font-display`) sets every
   heading, button, label, table header, and badge. Body copy is
   `--font-body` (Finlandica). Numbers are `--font-mono` (Inconsolata),
   tabular. Three faces, three jobs, no overlap. All three are self-hosted from
   `ds.lucianlabs.ca` by the stylesheet — you do not need a Google Fonts link.

## Type ramp

| Role | Face | Size | Treatment |
| --- | --- | --- | --- |
| h1 | display | 4rem | uppercase, 0.06em |
| h2 | display | 2.4rem | uppercase, 0.06em |
| h3 | display | 1.6rem | uppercase, 0.06em |
| label / overline / button | display | 1.0–1.1rem | uppercase, 0.08em |
| body | body | 1rem / 1.55 | — |
| small | body | 0.9rem | `--muted` |
| readout / code | mono | 0.92em | tabular-nums |

Micro 5 is a pixel face. Below about 1.4rem it stops being legible — that's why
labels sit at 1.1rem rather than the 0.7rem you'd use for a small-caps label in
a normal sans. Never set the display face below 1rem. If you need text smaller
than that, it is body or mono, not display.

## Accent budget

`--accent` (blue `#397fd9`) — **one** accent-carrying element per view. Usually
the primary button. Text links also take it, since they're inline and
self-limiting. Everything else is `--ink`, `--muted`, or `--faint`.

`--accent-2` (amber `#ffa40a`) — **state, not decoration**. It means armed,
recording, live, or about-to-do-something-irreversible. If nothing in your view
is in that state, amber does not appear. Never use it as "the secondary brand
colour".

`--good` / `--bad` — status text and tag borders only. Never fills.

Two accents never appear on the same element, and never on two adjacent
elements.

## Spacing rhythm

`--gap` is `1rem`. Cards pad `1.125rem 1.25rem`. Sections separate by `2.5rem`.
The page is `min(1200px, 100% - 2.4rem)`. Stay on those numbers; don't
introduce a 4/8px scale on top of them.

Density is a feature. This look packs information — a dashboard with four cards
in a row is correct, a dashboard with one card per screen is not.

## Layout

Lead with a header row: wordmark left, nav right, both on one line, hairline
underneath. Content follows immediately — no hero band, no centered pitch, no
three-feature grid. Asymmetry is fine and preferred: a wide primary panel with
a narrow rail beats three equal columns.

## Motion

150ms ease, on `background`, `border-color`, `color`, `opacity` only. Nothing
scales. Nothing bounces. Nothing animates on page load. A live readout may
update its value continuously — that's data, not animation.

## Voice

Terse, lowercase-comfortable, technical. Label things what they are.

- Buttons: `record`, `export wav`, `clear pads`, `arm` — verbs, no articles.
- Empty states: `no takes yet` — not "You haven't created anything yet!"
- Errors: `device busy — check input 2` — cause and the next move, no apology.
- Numbers get units: `48 kHz`, `-6.2 dB`, `128 bpm`, `03:41`.

No exclamation marks. No emoji. No second person plural cheerleading.

## Components in the stylesheet

`.page` `.section` `.section-copy` `.grid` · `.card` `.card--armed` `.card--live`
`.divider` · `.button` `.button.primary` `.button.armed` `.button.ghost`
`.button-row` · `.input-field` `.field-label` · `.badge` `.tag` `.tag.good`
`.tag.bad` · `.readout` `.mono` · `.nav` `.text-link` `.site-footer` · bare
`table` / `th` / `td`.

## Filling gaps

If you need a component that isn't listed, follow the procedure in `AGENT.md`
step 4. For this look specifically:

- **Modal / drawer** — `.card` styling, full-height, hairline on the joining
  edge, `--panel-solid` background (not translucent — it sits over content).
- **Tooltip** — `--panel-solid`, 1px `--line`, mono at 0.8rem, no arrow.
- **Progress / meter** — 1px `--line` track, `--accent` fill, square ends,
  no gradient, no rounded cap.
- **Toggle** — a square, not a pill. Off is `--line` border on transparent; on
  is `--accent` border with a 28%-mixed fill, same as `.button.primary`.
- **Chart** — `--accent` for the primary series, `--muted` for comparison,
  `--accent-2` only if one series is the live one. Grid lines are `--line-soft`.
  Axis labels are mono. No area fills with gradients.