07 AMBER CONSOLE · SYSTEM GUIDE

SCREEN & BOARD

How a full console screen assembles — and what the board at the top of every one of these pages is actually doing.

SCREEN ANATOMY

Title and soft keys on top; the operating column left, instrumentation right; destructive or exiting actions bottom-right, far from RUN.

ZONE	CONTENTS	RULES
HEADER	Wordmark, page title (ALL CAPS, underlined), Title Case tabs right.	One display-size line only.
LEFT COLUMN	Legend panel with input wells, status strips, motion pads, banner.	Reading order top to bottom is the operator's workflow.
RIGHT COLUMN	Bit-field checkboxes in a dim panel, bar panels with readouts.	Read-only instrumentation; dim frames so it recedes.
FOOTER ROW	Mode changes left, exit and destructive actions bottom-right.	Never adjacent to a motion control.
FRAME	`.ac-crt`, `.ac-bloom` and/or `.ac-afterglow` on the outermost element, plus one companion child per simulation: `.ac-mesh` for bloom, `.ac-retrace` for CRT, `.ac-persist` for afterglow. The nav goes inside it.	Once per screen, never nested. All three should be operator-toggleable — the demos put afterglow on the CRT switch.

<div class="ac-screen ac-bloom ac-crt ac-afterglow" data-ac-screen>
  <span class="ac-mesh"></span>
  <span class="ac-retrace"></span>
  <span class="ac-persist"></span>
  <nav class="ac-nav ac-nav--sticky">…</nav>
  <div class="ac-screen__body">
    <div class="ac-grid ac-grid--console ac-grow">
      <div class="ac-stack">…operate…</div>
      <div class="ac-stack">…instrument…</div>
    </div>
  </div>
</div>

See the assembled reference screen: ORION-70 PROJECTION CONSOLE — and the three other demos in the overview. For the smallest frame that still works, starter.html is one commented file with a single simulation on it; START HERE describes what is on it.

THE BOARD

The setup board at the top of every page in this project. It is documentation furniture, not part of the framework — but every control on it writes an attribute or a class the framework actually reads, so it doubles as the worked example of how to drive the system from a UI.

FOUR AXES, AND THEY ARE NEVER THE SAME AXIS

DISPLAY is what hardware is in the panel, and it is the only axis that sets a color. It is split across two quarters — four gases and seven phosphors — because they are two catalogs and not one list of eleven: a gas emits a line spectrum and its peak is the strongest visible line, which is not the perceived hue; a phosphor emits one broad band and its peak is the hue. Argon reads lavender while its strongest line is deep red at 696.5nm. Both numbers are true and they answer different questions.

SIMULATION is what the glass does about it, and it never sets a color. STYLE is a preference that makes no claim about the hardware at all. ENGINE is how much of the library is running — not hardware, and not a preference either. The last three share one quarter with their own labels inside it, because three bordered regions of switches ran 606px on a board that is not allowed to scroll; the labels are carrying what those borders were saying.

EVERY CONTROL ON IT

CONTROL	AXIS	WHAT IT WRITES	DEFAULT	REMEMBERED AS
Gas / phosphor radios	Display	`data-ac-tech` and `data-ac-emitter` on `<html>`, plus the simulation named in that row's `data-ac-sims`.	PLASMA / NEON	ac.sim.tech, ac.sim.emitter
Plasma	Simulation	`.ac-bloom` on the frame and an `.ac-mesh` child.	ON	ac.sim.plasma
CRT	Simulation	`.ac-crt` and `.ac-afterglow` on the frame, with `.ac-retrace` and `.ac-persist` children.	OFF	ac.sim.crt
JS Effects	Engine	`data-ac-engine="css+js"` or `"css"` on `<html>`.	ON, and disabled while it would do nothing	ac.sim.engine
Classic Buttons	Style	`data-ac-style-classic="on\|off"` on `<html>`.	ON, on every preset	ac.sim.style.classic
Retrace Band	Style	`data-ac-style-retrace="on\|off"` on `<html>`.	ON, and disabled under a gas	ac.sim.style.retrace
Reset to Preset	All four	Puts the simulations back to the pairing the current display shipped with, and forgets every style and engine preference — corners, band and JS Effects all return to ON.	—	clears ac.sim.mod, ac.sim.engine, every ac.sim.style.*

FIVE THINGS THE BOARD DOES THAT LOOK LIKE BUGS

PLASMA AND CRT EXCLUDE EACH OTHER Switching one ON switches the other OFF, and both toggles move to prove it. They are not two layers of glass, they are two technologies, and no panel has gas gaps and a scanning beam in one enclosure — a cell mesh and raster blanking gaps at once is the pair EFFECTS spends a paragraph telling apart. Both OFF is allowed: that is a flat lit surface, no particular hardware, and an honest thing to want to look at. Exclusion, not a radio group. The CSS classes themselves still compose if you wire them by hand.

PICKING A DISPLAY MOVES THE SWITCHES Every catalog row carries data-ac-sims, so a preset sets the hardware and the simulation that belongs to it — choosing P39 turns CRT on, choosing helium turns it off again. Everything stays adjustable afterwards, and the moment you adjust it the State panel reads MOD instead of PRESET and the menu bar appends *MOD. Reset to Preset puts it back.

JS EFFECTS GOES DISABLED BY ITSELF The module needs the CRT simulation and a phosphor whose tail is at least 80ms; under a gas, or under P11's 35 microseconds, it would contribute nothing. That figure is a perceptual floor and not a compositing one — much under it and the eye stops reading a relaxation and starts reading a switch — so P1 and P3, at 24 and 25ms, are on the dark side of it too. Rather than let the switch claim otherwise it goes inert and the State panel reads CSS ONLY: the readout describes what is rendering the panel, not what the flag permits. A preference you actually expressed is not clobbered by this; it is restored when it can do something again. Only P39 and P7 clear the floor, which makes them the only two panels where the switch can be clicked at all — and clicking it reads MOD, because Reset puts it back.

THE RETRACE SWITCH GOES INERT UNDER A GAS Same rule, different reason. Every rule drawing the band is scoped to .ac-crt, and there is no sweep across a plasma panel to switch off — a gas cell is driven continuously and the whole surface is lit at once. So under any gas the switch disables itself and says why. Unlike JS Effects it does not care how long the phosphor holds or whether the JavaScript is loaded: the band is pure CSS, so P11 gets a working switch and a dead engine at the same time.

THERE IS NO BLINK SWITCH Deliberate. Blink is law-2 emphasis and half of what the alarm specimens in EFFECTS and DISPLAY are demonstrating, so the guide keeps it on and does not offer to turn it off. The flag is in the framework regardless — write data-ac-style="blink" on a toggle to expose it, or set data-ac-style-blink="off" on <html>. prefers-reduced-motion stops it either way, which is the case that matters.

<button class="ac-toggle" data-ac-sim="crt" aria-pressed="false">…</button>
<button class="ac-toggle" data-ac-style="classic" aria-pressed="true">…</button>
<button class="ac-toggle" data-ac-style="retrace" aria-pressed="true">…</button>
<p data-ac-style-note="retrace">…why the switch above is dead…</p>
<input type="radio" name="ac-display" data-ac-display
       data-ac-tech="crt" data-ac-emitter="p7" data-ac-sims="crt" data-ac-peak="450/558 nm">

Shipping this board in your own app. It is a hardware bench for looking at the system, not a settings screen — pick the palette your product is and write the two attributes once.