# WaveLoop Admin — Lucian Labs look G

The borderless operator console. Console's job, grown up: the same
instrument-panel work, but nothing draws a line. Surfaces part by **tone and
space**, controls **fill** instead of outline, and a state is a **change of
fill**. Finlandica carries everything a person reads.

Shipped on `waveloop.app/admin` since 2026-09-23. Read `AGENT.md` first.

- Stylesheet: `https://lucianlabs.ca/branding/waveloop-admin.css`
- Reference render: `https://lucianlabs.ca/branding/waveloop-admin.html`
- Tokens as JSON: `https://lucianlabs.ca/branding/brands.json`
- Source of truth: `waveloop/web/public/admin/index.html` (inline `<style>`)
  and `waveloop/web/public/admin/console.css`

## Use it for

Operator consoles: admin panels, back-office, ledgers, dashboards with tables
and actions, review queues, anything a person reads and acts on for a long
stretch. It is the look for the screen where the work actually happens — many
panes, real data, decisions taken from what is on it.

## Console or WaveLoop Admin?

Both are dark instruments. The difference is the line.

| | Console | WaveLoop Admin |
| --- | --- | --- |
| Separation | 1px hairline borders | **tone and space — no borders at all** |
| Ground | `#101014` | `rgb(20 25 32)` navy under a blue/amber wash |
| Display face | Micro 5 for headings and chrome | **Finlandica**; Micro 5 only the wordmark |
| Headings | uppercase, tracked, pixel face | **sentence case**, 700, with a tracked section number |
| Controls | outlined, tinted | **filled**: 7% white, 13% on hover, accent 26% when on |
| Chips | 1px bordered tags | **fills** of the state's colour at 15–18% |
| Radius | 0 | 0 |

Console is a device face. WaveLoop Admin is the same instrument rendered for
long reading, with real text in it.

## The three rules that make it this look

1. **No lines.** Panes are `--s1`, tiles `--s2`, hover `--s3`; fields sink into
   `--well`; detail and quote blocks sink into `--sunk`. Rows are 2.5% white
   tints with 4px gaps. Tables are zebra — even rows 2.5%, a 4% header band,
   5% on hover. The side rail parts with a soft shadow. The only strokes in the
   look are chart axes and gridlines.
2. **Fills, not outlines.** A button is 7% white, 13% on hover. ON is an accent
   26% fill with `--accent-hi` text. The primary action is a gold fill with
   dark ink — one per view. Chips are 15–18% fills of their own colour with the
   text in that colour. Tabs are a segmented control sunk in a well; the active
   leaf is an accent 22% fill. Transitions are 0.15s on the fill.
3. **Finlandica reads, Micro 5 names, Inconsolata copies.** Everything a person
   reads is Finlandica. Micro 5 appears only in the wordmark and product names.
   Inconsolata appears only on things you would copy — emails, codes, paths,
   template bodies.

## Palette

| Token | Value | Role |
| --- | --- | --- |
| `--ink` | `rgb(236 239 245)` | body text |
| `--muted` | `rgb(170 177 192)` | labels, secondary text |
| `--faint` | `--muted` at 60% | placeholders |
| `--navy` | `rgb(20 25 32)` | the page |
| `--s1` | `rgb(24 30 40 / 88%)` | a pane |
| `--s2` | `rgb(31 38 50 / 92%)` | a tile inside it |
| `--s3` | `rgb(39 47 61)` | hover, raised |
| `--well` | `rgb(8 11 16 / 70%)` | fields, sunk |
| `--sunk` | `rgb(0 0 0 / 22%)` | detail and quote blocks |
| `--accent` | `rgb(57 127 217)` | interactive, ON, focus |
| `--accent-hi` | `rgb(126 183 255)` | text on an accent fill, section numbers |
| `--gold` | `#ffa40a` | numbers and the primary action |
| `--hot` | `rgb(236 84 96)` | failure, blocker |
| `--good` | `rgb(74 190 130)` | verified, healthy |

Backdrop: a radial `rgb(63 95 145 / 30%)` at 10% 0 and a radial
`rgb(131 77 22 / 20%)` at 90% 0, over a 165° linear `rgb(9 12 17)` → navy →
`rgb(12 15 21)`, fixed.

## Type ramp

| Role | Face | Size | Treatment |
| --- | --- | --- | --- |
| wordmark | Micro 5 | clamp(22, 6vw, 30) | the only place the pixel face appears, with product names |
| page tag | Finlandica | 12 | 700, 0.18em, gold |
| section heading | Finlandica | 22 | 700, sentence case, −0.01em, with a 12.5px tracked number in `--accent-hi` |
| sub | Finlandica | 14.5 | 1.65 leading, muted, max 74ch |
| body | Finlandica | 14.5–15 | 1.55–1.65 leading |
| label | Finlandica | 11–12 | 700, UPPERCASE, 0.12–0.14em, muted |
| ticker number | Finlandica | clamp(28, 5vw, 38) | 700, tabular, gold / accent-hi / good / hot by meaning |
| stat number | Finlandica | 32 | 700, tabular |
| table | Finlandica | 14 | tabular; head 11 |
| chip | Finlandica | 10.5–11 | 700, UPPERCASE, 0.1–0.12em |
| copyable | Inconsolata | 12.5–14 | emails, codes, paths |

Nothing is under 11px. Numbers are 700 and tabular everywhere, so a column of
them lines up and a changing value does not reflow.

## Accent budget

Gold carries **numbers and the one primary action**. Accent carries
**interaction** — ON states, the active tab, focus, section numbers, links.
`--good` / `--hot` are states, never decoration. A view with two gold fills has
no primary action.

## Layout

A single centred column, `max-width: 1040px`, 18px side padding, 28px above and
90px below. Header first: wordmark, page tag, then right-aligned chips and
links. Then the ticker if the page has headline numbers, then sections — each a
sentence-case `h2` with its number, a `.sub` line, and panes under it. A side
rail may hold the queue of things to act on; it is fixed on wide screens and an
overlay drawer below 1240px.

## Motion

Per `UX.md`, with this look's expression:

| State | WaveLoop Admin |
| --- | --- |
| Hover | the fill steps up — 7% → 13% on buttons, 2.5% → 5% on rows — over 0.15s |
| Focus | 2px `--accent` ring, 2px offset; the only ring in the look |
| Press | the fill holds; nothing moves |
| Busy | a pulsing bar the size of the value it will become (1.15s), so nothing reflows when the number lands |
| Disabled | 50%, with the reason beside it |
| Selected | an accent fill: 22% for a tab, 26% for a control, 17% for a chip |
| Error | the state's tint and its text colour — `--hot` at 16% |

Everything animates fill, not geometry. Nothing moves on the page.

## Voice

Operator register: plain, exact, no adjectives. Labels are nouns in capitals —
`UNITS`, `REVENUE`, `TESTERS`, `LAST SEEN`. Numbers carry their unit and their
provenance: a modelled number wears a `MODELLED` chip beside it so it never
reads as a measured one. Sentence-case headings read as statements of what the
section is: `Revenue by product`, `Codes issued this week`.

## Components in the stylesheet

`.wrap` `.hdr` `.wordmark` `.pgtag` `.navlink` · `.pane` `.card` `.tile`
`.sunk` `.grid` `.cols` · `.ticker` `.stats` `.stat` · `table` zebra ·
`.rows` `.row` `.key` · `.chip` (`.good` `.warn` `.bad` `.info`) `.gchip`
`.chips` · `.btn` (`.on` `.primary` `.big` `.danger` `.done`) `.btn-row` ·
`.tabs` `.tab` · `.field` `.in` `.inl` `.check` `input[type=range]` ·
`.verdict` (`.bad` `.good`) · `.steps` `.step` · `.skel` · `.modal`
`.modal-box` · `.rail` `.qitem` · `.ax` `.gr` `.lbl` `.legend` `.spark` ·
`.foot` `.err` `.note`. The console's own names — `.zap` `.trow` `.basis` —
are kept as aliases.

## Filling gaps

- **A new surface** — pick the next tone up, never a border. Page → `--s1` →
  `--s2` → `--s3`; anything a value sits *in* goes to `--well` or `--sunk`.
- **A new control** — start from `.btn`: a 7% fill, capitals at 11.5px, 0.12em.
  If it toggles, ON is the accent 26% fill.
- **A new state** — tint the surface with the state's colour at 9–18% and put
  the text in that same colour.
- **A meter or progress track** — the track is `--line` (10% white), the fill
  is gold. This and chart axes are the only strokes allowed.
- **A dialog** — `.modal-box`: a raised opaque fill and a big soft shadow.