majiayu000 The instrument panel
A committed aesthetic in the sense of
skills/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 re-discover.
What NOT to port
| Do not take | Why | Instead |
|---|---|---|
| The 30–32px control heights, to anything touched by a finger | rule 10 — this is a pointer surface for one operator | 44px minimum, keep rules 1–9 |
clamp() fluid type from the site, to the board |
a marketing page is read at every width; an instrument at one | fixed steps from rule 7 |
| The dark ladder, to a client product | rule 0 — it is our identity | choose through committed-aesthetic |
--max: 1100px, to board screens |
the board's content is rows and cards, not paragraphs | only the Docs reader caps measure, at 72ch |
The component gallery
Rendered, with every measurement on the artboard, in the published board spec —
foundations, components, shell, screens, typography and the open findings. Working
sources in .design-spec/. Read the gallery before adding a component; it is
faster than deriving one from the rules and it is what the rules were written from.
Where the rules came from, and where they are still broken
This aesthetic is measured, which means it is also measured to be imperfect.
docs/reference/ and the spec's findings artboard carry the open list — spacing
and radius are not tokenised (11 raw gap values, 11 raw radii), the site carries
46 distinct font sizes against rule 7, and the light theme has three values under
the AA floor. A rule this file states and the source violates is a finding, not a
licence to violate it further.
Related: skills/committed-aesthetic/SKILL.md
for the form · skills/ui-ux-pro-max/SKILL.md for the
catalogue you consult when this does not apply.