TYPE & GEOMETRY
Two bitmap faces and one grid. Text sits on terminal rows, space is measured in 4px half-cells, and a stroke is 2px because a hairline cannot exist on this panel.
TYPE
Two bitmap faces. VT323 — a digitization of the DEC VT320 terminal ROM — carries everything at 18px and above. Silkscreen handles 8px bit labels where VT323 loses its grid. Below 18px, VT323 is unreadable: that is the floor, not a guideline.
CASING
ALL CAPS for machine text,
Title Case for operator soft keys. SHOW LOCAL - AUTO MODE is the system reporting;
Change Show is a key a human presses.
SUBSTITUTION NOTE
The source
hardware used a mask-ROM face with no digital release. VT323 and Silkscreen are era-correct
stand-ins. Supply a licensed bitmap face and only --ac-font-terminal changes.
GEOMETRY
.ac-badge, which is a chip rather than structure.--ac-radius to
2 4 8 4 and --ac-radius-sm to 1 2 4 2, deepest at the
near corner; .ac-rounded spends the same budget on an arc, 8px and 4px. A strip
is square in both. Never pills.LAYOUT
Flex and grid, with gap everywhere and never a margin
between siblings — a margin is a distance nobody declared, and it would fight the 4px
half-cell the rest of this chapter is snapped to. Two containers, one grid, and a handful of
child utilities. Every one of them carries min-width: 0, which is not a detail:
a grid or flex item's automatic minimum size is its content, and
.ac-btn--pad's 130px floor will push a track wider than its share and overflow the
page. That has happened, and it is what the responsive probe in the test suite exists to
catch.
Both containers take their gap from --ac-gap, which you set on
the element rather than on :root — it is a per-instance dial, not a token with a
global value. Unset, a row or stack is --ac-space-4 (16px) and a grid is
--ac-space-6 (24px), because a grid separates regions and a row separates
controls.
class="ac-row ac-row--center" --center --baseline --between --end --wrap
style="--ac-gap: 12px" <!-- per instance, not a root token -->
Reaching for --between to push one item right in a row that
has three. It justifies every gap; use .ac-spacer below, which pushes
exactly where you put it.
.ac-grow absorbs leftover space (and carries
min-width: 0 with it, which is why a row of touch pads needs it).
.ac-spacer is an empty element that eats the slack at exactly one point.
.ac-push is margin-top: auto — the one margin in the system, and it
is a layout instruction rather than a distance.
class="ac-grow" <span class="ac-spacer"></span> class="ac-push"
Nothing — these are the pinned-footer and fill-the-row idioms, and the
console screen uses all three. .ac-push only works in a flex column.
--ac-cols on the grid, and the
spans are on the children: .ac-col-2, -3, -4,
-6. There is no -5 and there will not be — the console layouts are
halves, thirds and quarters of six, and a span nobody can divide evenly is a layout that will
not survive the next breakpoint. Below 900px every span resets to
auto and the grid becomes its declared track count of narrow columns;
set --ac-cols: 1 in your own media query if that is not what you want.
<div class="ac-grid" style="--ac-cols: 6">
<div class="ac-col-3">…</div> <!-- half -->
<div class="ac-col-2">…</div> <!-- third -->
</div>
<div class="ac-grid ac-grid--console"> <!-- the canonical split, no --ac-cols -->
<div class="ac-stack">…operate…</div>
<div class="ac-stack">…instrument…</div>
</div>
A span larger than --ac-cols. It does not error, it just
overflows the track and takes the page with it.
minmax(0, 1fr) beside minmax(280px, 380px), with no
--ac-cols to set. It stacks below 900px, which is the width at
which the instrument column can no longer hold its 280px floor beside a usable operating
column. That number is measured off the source console screen rather than picked off a
device list — there is no phone/tablet/desktop ladder in this framework, only the two widths
where something specific stops fitting.
Three columns. The split is an argument about where an operator looks, and a third column has nowhere to be in it.
.ac-screen is the full-height frame that hosts
the simulations — 100svh, not 100vh, so a retracting URL bar
cannot leave a screenful of nothing to scroll past, and overflow: clip rather
than hidden, so the sticky nav inside it still has the viewport to stick to.
.ac-screen__body is the padded content well inside it, overridable with
--ac-screen-pad.
.ac-root is the scoped reset:
put it on a wrapper when you are embedding the framework in a page you do not own, and the
box-sizing and type reset applies inside it instead of to body. It needs the
swap to go with it — base/reset-scoped.css in place of
base/reset.css in amber-console.css, then rebuild; the shipped
bundle carries the global reset, so on that build the class styles nothing on its own. The
palette attributes may go on the wrapper rather than on <html> and
resolve correctly either way.
.ac-sr-only is the visually-hidden utility — it exists for the
<legend> of a bit group whose visible label is already the panel's own
title, which is the one place the accessible name and the drawn name legitimately
differ.
<div class="ac-screen" data-ac-screen>
<div class="ac-screen__body" style="--ac-screen-pad: 20px 24px"> … </div>
</div>
<div class="ac-root"> … </div> <legend class="ac-sr-only">Status bits</legend>
Nesting .ac-screen. Once per page, on the outermost frame.