AMBER CONSOLE

SYSTEM GUIDE

REV 2.1.0 · MONOCHROME PLASMA UI · INDUSTRIAL CONTROL PANEL GENRE

A design system for interfaces that look like they run machinery. Everything here is derived from the physical limits of a late-80s amber plasma display: one lit color, a character grid, 2-pixel strokes, and no time for decoration. The constraints are the design. Eleven displays ship with it, each fitted from the spectrum of a real emitter rather than tinted by eye: four plasma gases — neon, helium, argon, krypton — that glow directly, and seven CRT phosphors — P1, P3, P4, P7, P11, P31, P39 — that are struck by a beam and then persist. Switch between them on the board at the top of any page. Every one is solved to the same contrast ratios, so what changes is the hue and how the glass holds it, never the legibility.

Recommended Displays

Iconic and common back in the day, and probably the best ones to build an app or site on:

Neon — plasma. The orange-red this framework opens to.
P3 — CRT. The amber office terminal.
P31 — CRT. The green office terminal/lab scope. Similar to, but brighter, sharper, and more readable than P1.

Other iconic looks:

P1 — CRT. The very first computer screens.
P4 — CRT. The television white.

The other six — helium, argon, krypton, P7, P11 and P39 — were specialized or experimental. Use those when the instrument is the point, or for an alternative look.

PHILOSOPHY

Six laws, each inherited from a hardware limitation rather than a style preference. Break one and the illusion collapses.

ONE EMITTER, MANY INTENSITIES

Whatever is making the light, there is only ever one of it. A monochrome plasma panel is a grid of gas gaps holding a neon–argon mixture, and the orange-red is neon emitting directly when the gap strikes — its strongest visible line is at 585.2nm, though the hue you see is the eye integrating every line at once rather than that one number. No phosphor is involved in that case at all; phosphors arrive with colour plasma, where xenon UV excites red, green and blue stripes. A monochrome CRT is the other way round — the persistence is a phosphor coating, and the catalog above fits seven of them. Either way the panel lights one colour and varies only how hard. Hierarchy comes from brightness, inverse video, and blink — never hue. There is no red, no green, no success color.

INVERSE VIDEO IS IMPORTANCE

A solid amber block with dark text is the machine speaking: live status, section headers, the active mode. Ration it — two or three per screen, no more.

EVERYTHING IS A BOX

Regions are drawn with rules. Controls are large bordered rectangles with the label parked top-left and empty space below — targets for a gloved finger. Borders do the layout work; elevation and shadow do not exist.

THE CHARACTER GRID RULES

Text sits on terminal rows. Labels are KEY:VALUE pairs, columns align, leading is tight at 1.15. Space is measured in 4px half-cells, never eyeballed.

CASING IS SEMANTIC

System and machine text is ALL CAPS. Operator-facing soft keys — the labels a human presses — are Title Case. That split is information, so preserve it.

ORNAMENT IS TYPOGRAPHIC

Emphasis is built from repeated glyphs, dashes, and colons: ✳✳ REMOTE MODE ✳✳. No icon libraries, no illustration, no imagery of any kind.

Say STATUS:AUTO MODE — terse, declarative, no pleasantries.
Abbreviate like firmware: MM:SS, FRM, LAMP V.
Zero-pad fixed-width numbers: 0000:00, 07/23/26.
Signal danger with blink plus inverse video.

DO NOT

Write "Your presets have been completed!" — no exclamation, no second person.
Introduce a second hue, a gradient, or a drop shadow.
Use emoji or an SVG icon set. Ever.
Animate with fades, eases, or slides — state changes are instant redraws.

START HERE

One file at the root of the repository, called starter.html. It is the shortest path from reading this page to having a panel on screen — not a snippet to assemble, but a whole working page you open by double-clicking it. No build step, no server, no package manager, and no JavaScript on the page at all.

STARTER — ONE FILE, ONE STYLESHEET, NO BUILD OPEN starter.html ► It arrives as a small console rather than a swatch sheet: the .ac-grid--console split, with an operating panel on the left — status strip, four button states, an input well, a select, status bits, an unscripted toggle, a meter with its scale and a blinking alarm — and a dimmed instrument panel on the right carrying two readouts, a rule, a keyed list and badges. Under both, a third region on .ac-rounded, so both corner styles are on screen at once. The instruction is to start deleting. Every block is commented with what it is and why it is shaped that way before you remove it, and what survives is your page.

<!-- this is the whole setup -->
<link rel="stylesheet" href="dist/amber-console.css">

<body class="ac-screen ac-bloom">
  <span class="ac-mesh"></span>
  <div class="ac-screen__body"> … </div>
</body>

WHAT IT IS DEMONSTRATING

That the framework is CSS. The glow, the cell mesh, the chamfered corners and the toggle flipping between ON and OFF are all stylesheet — the file carries no script, deliberately, so that nobody comes away thinking a runtime is required. The two optional modules in dist/ add the setup board's switches and the three persistence effects that genuinely cannot be done in CSS, which 04 PERSISTENCE is about. You do not need either to build with this.

That you pick one technology. .ac-bloom and .ac-crt are not two layers of glass, they are two kinds of display, and no panel is both — a screen door is not a scanline, and there is no scan in a plasma panel to blank. So the starter ships plasma alone, and writes the tube out beside it as a swap: class="ac-screen ac-crt ac-afterglow" on the body, the .ac-mesh child replaced by .ac-retrace and .ac-persist, and a phosphor set on <html>. Afterglow rides with the CRT because it is not a third technology — it is what the phosphor does after the beam has gone. amber-console.js enforces the exclusivity and switches one off when the other comes on; CSS cannot, so on a hand-authored page it is on the author. 03 EFFECTS makes the argument in full.

That every companion node is paired with its class. Each simulation paints into a child of the frame, and the file says so at each one: keep the <span> for the class you keep, and delete both together. A class with no layer to paint into renders nothing, which is the single most common way a first page comes out flat.

That spacing is a box you write, not something a component does for you. .ac-panel draws a border and pads its inside; it does not space its own children, because nothing in this system puts margins between siblings — they would fight the 4px half-cell grid. So each panel in the starter holds one .ac-stack, and the rows inside it are 16px apart because that is --ac-gap's default. The same applies to a fieldset of status bits: the framework styles the controls, not the elements it never claimed, so the UA border on a <fieldset> is yours to clear — and the file does it inline where you can see it happen.

THREE THINGS TO TRY, WHICH THE FILE ENDS ON

TO CHANGE	WRITE	THE CHAPTER FOR IT
The hardware	`<html data-ac-tech="crt" data-ac-emitter="p3">` — the classic amber terminal. Eleven emitters across the two technologies, and the pair is always stated together.	01 COLOR
The blinking	`data-ac-style-blink="off"` on the root. Alarms still read — they keep the inverse fill, because blink was never the only thing saying it.	03 EFFECTS
Anything else	`:root { --ac-radius: 0px; --ac-type-body: 20px }`. Every color, size and space is a custom property, and they survive into `dist/` unresolved.	08 REFERENCE

Accessibility is already handled and the starter says so: reduced motion, forced colors and print are all respected, and every color pair in the system is contrast-checked. There is nothing to add to get that. The file also ships inside the npm package — npm i amber-console puts a copy at node_modules/amber-console/starter.html.

Adding the framework to an app that already exists. That is dist/amber-console.layer.css plus your own markup, so the framework loses specificity fights against your rules — see 07 SCREEN & BOARD for how a full console assembles.

THE GUIDE

Nine chapters — seven that argue and two that only list. Every specimen on every one of them is live markup from the library, running under whatever hardware the board above is set to, so the guide is also the largest test of the system in the repository. Read 01–07 in order if you are learning the system; go straight to 08 REFERENCE if you already know it and want to know whether a given class, attribute or token exists.

01 COLOR Five intensities over three warm blacks, two technologies, eleven emitters. Why a palette is a piece of hardware and not a theme, and why naming one takes two attributes. 02 TYPE & GEOMETRY Two bitmap faces, an 18px floor, 4px half-cells and a 2px stroke. The character grid, and the box rules that fall out of it. 03 EFFECTS Glow, blink and scanlines — the only three — plus the screen simulations that layer over them. A screen door is not a scanline, and the difference is the whole point. 04 PERSISTENCE Eight separate phenomena, four of them pure CSS and the rest needing JavaScript for what a stylesheet genuinely cannot express. What a long phosphor costs, and the PPI sweep that is the argument in one widget. 05 CONTROLS Live specimens: buttons and touch pads, both corner styles, tabs, recessed wells, status bits, toggles, the keypad and the dialog. Every one with its class string. 06 DISPLAY The machine's own voice — status strips, panels, readouts, tables, keyed lists, stepped meters, the spinner and the one banner a screen is allowed. 07 SCREEN & BOARD How a full console assembles, zone by zone — and every control on the setup board at the top of these pages: what it writes, where it starts, whether it is remembered. 08 REFERENCE The index rather than the argument: every class, every root attribute, every token split by whether you set it or the framework does, every key the board remembers you by, and the four environments the stylesheet answers on its own. 09 DEPRECATED Everything taken away since 1.0 and everything going in 3.0, with what to write instead. The token rename is the only breaking change in 2.0, and it fails silently — start here if you are upgrading.

THE DEMOS

Four assembled screens, none of them a component gallery. Each is a whole product built only from what this guide documents, and each puts a different part of the system under load — which is why the effect worth watching is a different one on each.

CONSOLE — ORION-70 PROJECTION CONSOLE SHOW LOCAL - STANDBY ► The reference screen, and the one SCREEN & BOARD is describing: operating column left, instrumentation right, destructive actions bottom-right. Show information in input wells, an alarm log, interlock bits, lamp values, a frame counter. Watch ghosting here — the clock and the frame counter rewrite themselves in place, which is the one persistence effect CSS cannot do at all.

SERVER — D-STAR NODE DASHBOARD NODE 01 · 8 OF 8 SERVICES UP ► Node vitals, host load, network throughput, disks, daemons, containers, ZFS pools and an event log, behind tabs. The density case: tables that scroll rather than fold, and a stopped container that recedes to the faintest ink with its halo off because there is no red to say it in. Watch a load bar under P39 — a lit area shrinking is the eighth persistence effect, and the bar is where it was most obviously missing.

RADAR — SEASCAN RM-12 RM-12 · 3 NM · HEAD-UP ► A PPI with a bearing ring, contacts, a guard sector, an electronic bearing line and a variable range marker, plus an A-scope, receiver controls and a target plot. Every mark is a rotated zero-width span, because law 6 bans the SVG element and npm run check greps for it. Watch it under P7 — the leading edge turns blue against a yellow-green wake, which is the two coatings doing what they did on the real tube.

TERMINAL — TELEMARK 400 FXSP · SPOT FOREIGN EXCHANGE ► A dealing-room page: spot FX, cross rates, eurocurrency deposits, government bonds, an index summary, an order book and a crawling tape. The law-1 answer to the question every market screen has to answer — how do you flag a change with no color to flag it in? Watch a quote update: the cell inverts for a beat, which is what these screens did before color tubes were affordable.

Reading any of them as a component gallery. They are four different products that happen to share a stylesheet — the point is that the constraints survive being taken somewhere they were not designed for.