/aesthetic-instrument

name: aesthetic-instrument
description: "great_cto's own committed aesthetic — the instrument panel. Dark five-step surface ladder, exactly one accent, two faces divided by MEANING (Geist speaks, Geist Mono is machine-truth), tabular numerals, and a dash that is not a nought. Twelve checkable rules measured from packages/board and greatcto.systems, not designed for this file. Use when building or extending any great_cto surface — the board, the site, a report, a share page."
when_to_use: |
  Apply when:
  - building or extending ANY great_cto surface (board screen, site section, share report)
  - a new element must sit beside existing ones without re-deciding the system
  Do NOT apply when:
  - designing a CLIENT product — this is our identity, not a default. See rule 0.
effort: low
allowed-tools: Read, Write, Edit, Grep, Glob

The instrument panel

A committed aesthetic in the sense of [`skills/committed-aesthetic/SKILL.md`](../committed-aesthetic/SKILL.md): every rule below is checkable, and every value was **read out of the source** — `packages/board/public/index.html` and `great_cto-site/styles.css` — rather than chosen to write this document.

The subject is an instrument, not a brochure. One person reads it to decide what a machine may do next. Everything below follows from that.

Rule 0 — this is the CATEGORY default, and calling it ours was wrong

The first version of this file opened "this is ours, not a default". Measured against a real corpus on 2026-09-01, that is false, and the correction matters more than anything below it.

Refero's top ten styles for a dark technical developer landing describe: near-black canvas (Depot, Warp, Supabase, Trunk, Checkly, Cron, Linear, Eraser), depth from surface shifts or borders **rather than shadows** (Warp, Supabase, Trunk, Linear), and **one green accent used sparingly** (Depot, Warp, Supabase, Trunk). Four of them are described with the words "instrument panel", "command center" or "cockpit".

Every one of those is a rule below. This aesthetic is not great_cto's identity — it is what every infrastructure product looks like, and this file codified the modal choice and labelled it a differentiator. A skill that does that produces template work while asserting it does not.

**What follows is still correct, and its correctness is functional, not distinctive.** Dark, dense, one accent, tabular numerals and a dash that is not a nought are right for a surface one operator reads all day to decide what a machine may do next. Keep them for the BOARD. Just do not mistake them for a voice.

Where the category default costs something is the LANDING, where a visitor who has seen Depot, Warp and Supabase cannot tell us apart. Differentiation there is a brand decision made through `committed-aesthetic`, not a repaint of this file. And for a client product — a dental practice does not want an instrument panel — go through `committed-aesthetic` and choose deliberately.

The DNA

**1. Five surface steps, each about 5% apart, and depth is always a step.** `--bg-page #0a0e0c` → `--bg-card #11161a` → `--bg-muted #161c1f` → `--bg-elevated #1a2025` → `--bg-strong #1e272c`. A raised element takes the next step up. It does not take a shadow.

**2. Exactly one accent, and it is mostly not a fill.** `--accent #00d97e` appears as a 1px border, a 3px rail on the active nav item, and a 6% glow. It fills only a badge count and a swatch. Two accents is a different design; adding one is a decision, not a tweak.

**3. One shadow in the system carries colour.** Card hover: `0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,217,126,.06)` — the accent at 6%. Everywhere else depth is rule 1.

**4. Two faces, divided by MEANING rather than by taste.** Geist is the voice the surface speaks in — headings, navigation, controls, prose. Geist Mono is *machine truth*: anything a person would select and paste. Ids, agent slugs, paths, money, versions, timestamps, verdict tokens, commands. The test is one question: **would someone copy this?** Measured: 115 mono uses against 9 display. A task title is Geist and its id beside it is Geist Mono — the two faces on one row are the point, not an inconsistency.

**5. Numerals are tabular, always.** `font-variant-numeric: tabular-nums` at `letter-spacing: -0.02em`. A figure that changes width as it changes value reads as motion the operator did not cause.

**6. A dash is not a nought.** Unmeasured renders as `—` in a lighter weight and `--text3`; a measured zero renders as `0` in the numeral treatment. Every count on every surface carries a third state, and it must be visibly different from zero. This is the house rule the whole product rests on; it is a typographic rule here.

**7. Twelve type tokens, never a raw size.** 11 · 12 · 13 · 14 · 15 · 16 · 19 · 22, plus numerics 24 · 30 · 36 · 52, as `--fs-*`. If a size is not on the scale, either the scale is wrong or the element is.

**8. Tracking moves one way at each end.** ≥22px → `-0.02em`. 11px uppercase → `+0.10em`. Nothing in between is tracked.

**9. Geist Mono never above weight 500.** It is vendored `wght 400 500`; above the axis the browser synthesises a smeared bold. Geist runs 400–700; 500 is the workhorse, 600 is emphasis, 700 exists for badge counts only.

**10. Desktop density is deliberate, and does not travel.** Controls are 30–32px, chips 20px — below the 44px touch floor on purpose, because this is a pointer surface for one operator. **A mobile or client surface must not inherit these numbers**; it takes rules 1–9 and its own sizes.

**11. One hue per meaning, and colour never carries meaning alone.** Every status colour is paired with a glyph or a word. A ▲/▼/— goes with the green/red/grey, so the row survives a reader who cannot distinguish them.

**12. Latin subset, self-hosted, 52 KB.** Two variable faces, `font-display: swap`, no CDN. Cyrillic and anything outside latin falls to the system stack mid-line — a known look, decided for the byte count, not a bug to