06 AMBER CONSOLE · SYSTEM GUIDE
DISPLAY
The machine's own voice: frames, strips, readouts, and the single loudest element the system permits.
STATUSBAR — INVERSE (MACHINE VOICE) AND LINE (DATA ROW)
class="ac-statusbar" ac-statusbar--line role="status"
Prose. A status bar holds KEY:VALUE strings, not sentences.
PANEL — LEGEND CHIP BREAKS THE BORDER
Show Information
TRAILER:
TITLE:HEAT
<div class="ac-panel"><span class="ac-panel__title">Show Information</span>…</div>
A panel over a non---ac-screen background, unless you also set
--ac-panel-title-bg — the chip paints its own background to mask the border.
PANEL — INVERSE BAR TITLE
<div class="ac-panel ac-panel--bar"><div class="ac-panel__barTitle">Frame Count</div>…</div>
READOUT — INSTRUMENT VALUE
Three sizes and one arrangement.
Lamp Volts
41.0V
Lamp Amps
154A
Frames
255315
Reel
04
--lg is the hero value a room reads from the doorway;
--inline puts the label beside the number instead of above it, for a status
strip or a menu bar where a stacked readout would double the height of the row. The label
is still a label — inline is about where it sits, not about dropping it.
<div class="ac-readout">
<div class="ac-readout__label">Lamp Volts</div>
<div class="ac-readout__value">41.0<span class="ac-readout__unit">V</span></div>
</div>
class="ac-readout ac-readout--lg" ac-readout--inline
Text. A readout is for a number that changes.
BADGE — MICRO TAGS, PIXEL FACE
CH 04ArmedSpare
class="ac-badge" ac-badge--filled ac-badge--dim
Anything the operator must read at a glance — 8px is a label, not a message.
TABLE — THE DATA GRID THIS GENRE LIVES ON
The same table
| TIME | CODE | DESCRIPTION | FRAME | STATE |
|---|---|---|---|---|
| 22:28:41 | E-114 | DOUSER NOT CONFIRMED | 255315 | ACTIVE |
| 22:14:02 | W-062 | LAMP CURRENT LOW 148A | 234880 | CLEARED |
| 21:58:37 | W-041 | REEL UNIT SLACK | 212104 | CLEARED |
--dense, which pulls the cell padding in from 6/12 to 2/10. It is for a log
that has to show twenty rows in the space of eight — the type size does not change, so
nothing gets harder to read; only the air between rows goes:
| TIME | CODE | DESCRIPTION | FRAME | STATE |
|---|---|---|---|---|
| 22:28:41 | E-114 | DOUSER NOT CONFIRMED | 255315 | ACTIVE |
| 22:14:02 | W-062 | LAMP CURRENT LOW 148A | 234880 | CLEARED |
| 21:58:37 | W-041 | REEL UNIT SLACK | 212104 | CLEARED |
| 21:41:19 | I-003 | SHOW STARTED | 000000 | LOGGED |
class="ac-table ac-table--zebra ac-table--dense" <td class="ac-table__num">
<tr class="ac-table__row--active ac-blink">
A fixed set of named readings — that is .ac-list.
LIST — KEYED LOG WITH LEADER DOTS
- Lamp Hours
- 1284
- Reel
- 04 / 06
- Format
- 70MM
- Lamp V
- 41.0
- Lamp A
- 152
- Rack
- B
- Bay
- 12
--dense is spacing — it tightens the rows, and it is what the State panel on
the board above uses. --dim and --bright are
drive level, not decoration: a dim list is context you are not reading
right now, a bright one is the reading the screen exists for. They compose, and they
follow the same law as everything else here — the halo moves with the ink, so a dim list
scatters less light rather than merely being greyer.
<dl class="ac-list"><div class="ac-list__item">
<dt class="ac-list__key">Reel</dt><span class="ac-list__fill"></span>
<dd class="ac-list__value">04 / 06</dd></div></dl>
class="ac-list ac-list--dense" ac-list--dim ac-list--bright
Sortable or multi-column data. That is a table.
METER — STEPPED BARGRAPH, NEVER A SMOOTH FILL
Three modifiers.
050100
050100
050100
--dim recedes, --lg is the tall bar for the one reading a
supervisor watches from across the room, and --alarm is the bar in a
condition — it is a state, so drive it from your data and take it off again when
the value comes back, exactly as you would the blink on a row.
The fill is always stepped, at every size: a smooth bar implies a
resolution the instrument does not have.
<div class="ac-meter__track" style="--ac-meter-value: 72">
<div class="ac-meter__bar"></div></div>
class="ac-meter ac-meter--lg" ac-meter--dim ac-meter--alarm
A single precise reading. A number the operator can write down beats a bar
they have to estimate — use an .ac-readout.
SPINNER — A CHARACTER, NOT A CIRCLE
LOADING PRESET BANK
steps(4), 0.8s
<span class="ac-spinner" role="status" aria-label="Working"></span>
Anything whose duration you know. A machine that can measure progress should
show an .ac-meter; a spinner admits it cannot.
BANNER — ONE PER SCREEN, THE LOUDEST ELEMENT
✳✳ glyphs are added by the component. Blink is reserved for a live, unacknowledged condition — and it is always paired with inverse video and the glyphs, so it still reads as an alarm when blink is switched off.
--filled is inverse video and the loudest thing
the framework can draw. --dim is the other end: a standing notice that is true
but is not news — a scheduled window, a mode the operator already knows about. It is the
variant that lets the rule above stay honest, because "one banner per screen" is only
keepable if there is somewhere to put the condition that does not need shouting.
<div class="ac-banner ac-banner--filled ac-blink" role="alert">Lamp Fault</div>
class="ac-banner" ac-banner--filled ac-banner--dim
Two loud banners on one screen. The second one makes the first one furniture.
PANEL — DIM FRAME (RECEDES)
Interlocks
SECONDARY REGION — READ-ONLY INSTRUMENTATION
class="ac-panel ac-panel--dim" ac-panel--bar
RULE — THE ONLY DIVIDER
.ac-hr — a section break inside a region
.ac-hr--bright — a break between two things that are not the same kind of thing
Two weights and no others, both at the 2px stroke — there
are no hairlines on this panel. Reach for a rule only when a region border would be
heavier than the separation deserves; most of the time the answer is two
.ac-hr — a section break inside a region
.ac-hr--bright — a break between two things that are not the same kind of thing
.ac-panels.
<hr class="ac-hr"> <hr class="ac-hr ac-hr--bright">