internal — not linked, not indexed
Neon as a state channel
A neon sign is not decoration; it is a status indicator legible from across a room, and its off state is a real object — grey glass you can still read. That maps onto the one thing a host needs from this console while they are busy running an event: is it live. So the rule here is that a tube is unlit by default and lights only when the thing it names is true. Colour becomes information, and rationing stops being a matter of taste.
01 — Anatomy
Three layers, one element. The glass is the real text a screen reader reads and the only layer with a contrast obligation. The two blurred layers behind it are duplicates that carry all the colour — which is why the lit tube itself is near-white, the way real neon reads. Nothing here animates a blur or a shadow; state is one number driving three opacities.
02 — States
Five, and only one of them is "on". Dying and dead segment are the reason this is worth doing at all: a real sign fails in a way you can see from the door, which gives the console a degraded state that isn't a red toast.
03 — Tube bore
In a monoline face the weight axis is not emphasis — it is how fat the glass is. So the bore is a dial, not a set of sizes: drag Gauge in the bar to re-bend every sign on the page. These three are pinned so there is something fixed to judge against. Real shops bend 8, 12 and 15mm; 500 is the 12mm.
04 — Three colour rules, same sign
The bar at the top switches every other section between these. Here they sit side by side, because the differences are small in isolation and obvious in a row.
C is kept so the comparison isn't a straw man, but note what it costs: with everything lit, nothing is signalled. The off state is the whole mechanism, and a board where every tube burns has thrown it away.
05 — The object on the wall
Pins, a transformer box, plaster tooth, and the spill the sign throws onto the wall behind it. None of this is legible individually; together it is the difference between an object and glowing text.
06 — Applied to real console components
The specimens above will always look good; this is the test that matters. The shell below is the genuine cascade — tokens, components, host, dashboard — with neon layered on top of .ts-btn, .stat-card and the nav rail. One lit thing per view is the budget.
Reese & Sam — Saturday
Opened 7:12pm · closes at midnight
The third button is a stock console control left alone, as a reference for how far the neon ones have drifted from the kit.
07 — Hover and focus
A control is not a sign, so it never gets a permanent tube — it borrows the
warm-up, the second before a real sign settles. Hover flickers once;
focus holds steady, deliberately, because a flicker under a stationary
caret reads as a fault rather than a response. Tab through these to feel the
difference. On touch the flicker is suppressed entirely: :hover
fires on tap and would strand a control mid-flicker after the finger lifts.
08 — The empty state
The best fit for the whole idea. An empty dashboard is not an error; it is a sign nobody has switched on yet. Unlit glass says that in a way a grey illustration and a sentence cannot, and it makes the primary action read as literally turning something on.
Every event starts with one code on a table. Make a pool, print the code, and the tube lights when the first guest scans it.
09 — Photos landing
The claim, in motion: at zero the tube is cold glass; the first photo strikes it; after that the count just climbs and the sign stays lit. Nothing else on the board changes. That is the entire proposal — one channel, one meaning, and the rest of the console stays flat.
10 — What this has to survive
Measured, not asserted. The unlit tube is the risk: an off state is only
legitimate if you can still read it. Ratios are computed live against the
console background, so changing a stop in neon.css changes this table.
| Stop | Unlit glass | On #0f1011 | Verdict |
|---|
Also live on this page, and worth checking by hand: reduced motion stops every buzz and warm-up with no residual movement (the media query is the enabling condition, so an unsupported query fails to still, not to strobing). Forced colours drops every blurred layer and falls back to CanvasText/LinkText. Print strips the glow rather than smearing grey ink.