Widget
zoo

One number, --u: 4px, and every spacing value in the system is a multiple of it. The binder calls this the primary grid unit and it is the reason a memory monitor lines up with the table beside it. This page is sitting on the grid: the faint rule behind everything is 8×--u.

Four voices. Display for section headers only, in caps and tight. Sans for interface. Mono for anything the machine produced: an address, a count, a node id. Serif for documentation prose, and only there, because a serif paragraph next to a hex dump is what makes the hex dump look like data rather than text.

Every Earth Conductor hue ships twice: a base that reads on the panel and an -ink form that reads on paper. Using the wrong one is the fastest way to make this palette illegible, so the pairs are named rather than derived at the call site. Ratios below are computed, not eyeballed.

Two variants, no third. Primary carries a 3px hard shadow and translates the full 3px on :active, so the press is a detent with a hard stop rather than a fade. Press one: the travel is the whole point, and it is 90ms.

Mono, uppercase, burnt ink, with a rule that fills the rest of the line. Marks a section without spending a heading level, which matters on docs pages where the heading levels are the table of contents.

Read-only status. Not interactive: if it can be clicked it is a chip, not a tag. .fail is red and red means one thing in this system: an invariant that is asserted somewhere in the test suite did not hold. Not "bad", not "important". Broken.

The repo's own rule made visible: every number on the site says which run produced it. The glyph lives in ::before so it never lands in a copy-paste. A figure without one of these is a figure somebody typed, and the reader is entitled to know which they are looking at.

One per page at most: a second one means neither gets read. Orange edge for something a human needs to know; red edge only when an assertion fired.

The binder's H1 layout: display caps, heavy and tight, over a serif lede and a CTA row. This page's own header is the same grammar; the kit class is what the front page wears. --text-hero existed unused from the day the tokens landed, and this is the component it was cut for. The CTAs are .btn, never .push: chrome stays at the paper/panel boundary.

The page identity block. The tile is a die pad (ink ground, mustard legend) and it carries the card shadow so it reads as a component sitting on the paper rather than a shape printed on it.

Mono uppercase. The current level is a <b>, not a link: a link to the page you are on is a dead control.

Rendered from the directory under docs/, never from a nav.ts. Two levels of visual treatment because the tree has two kinds of node, directory and page; if a third appears, the answer is to flatten the tree rather than invent a third style. A page with no frontmatter title fails the build instead of appearing here as "Untitled".

Real <button>s with aria-pressed, because colour is never the only status signal: the pressed state inverts the fill and the text colour. Try them.

Chrome is an edge, never a fill. The bezel is a 3px brushed gradient ring with an inner dark lip, and its whole job is to mark where the documentation stops and the instrument starts. If chrome shows up anywhere that is not that boundary, it has become decoration and should be deleted.

The signature of the whole system, and the one component that exists because of what this simulator is. Two cells, φ1 and φ2, and they are never both lit: the non-overlap guarantee is an axiom of the engine, so the component makes the illegal state unrenderable: lit-ness comes from one data-phase attribute on the parent, not from a class on each cell. Every live panel wears one.

Ticks are half-cycles, not cycles. h is the unit the engine counts in and an axis that quietly converts to cycles will disagree with every log line the reader is holding. Alternating fills carry the phase so a glance tells you whether you are parked on a precharge or an evaluate.

Left rule is forest when the value held across the half-cycle and blue when it changed, so a scan down the column reads as "what moved". The settle flash is 150ms and does not repeat: a register that changes every half-cycle would otherwise strobe the page.

Eight cells, always eight, always in NV‑BDIZC order. Bit 5 does not exist as a flag but still occupies its position at reduced opacity, because renumbering the bits to close the gap is how a reader ends up counting wrong against the datasheet.

Address is ocean, data is glass, and they are different hues on purpose: an address is an index and a byte is a value, and reading one as the other is the classic error a hex dump invites. Bytes touched this cycle are marked (burnt fill for a write, mustard text for a read) so the dummy write on a read-modify-write instruction is visible rather than inferred.

Rows are grids of half-cycle cells: a high cell draws a top border, a low cell draws a bottom border, and the vertical edge falls out of adjacency. That is why transitions land exactly on the grid and never a pixel off: the geometry is doing the alignment rather than a hand-placed line. Bus rows carry values, not levels, and hatched means high-Z.

Colour follows the Drive enum, and the legend is printed in ordinal order (Floating, ChargedHigh, PullDown, PullUp, Vcc, Vss), because that order is the resolution rule. Do not sort it alphabetically. ChargedHigh is deliberately the dimmest lit state: it ranks below the real pulls, and that ranking is what makes dynamic retention work across a phase, so the colour should say "held, not driven".

A node in two groups pulling against each other. contested_groups is asserted zero in the test suite, so this cell should be unreachable in a healthy run, which is exactly why it gets the only red in the system and the only strobe. Four hard steps in 160ms and then it holds red; it does not blink forever, because a permanent blink becomes wallpaper within a minute.

Binary status at a glance for a set of like things: one cell per opcode, per test, per cartridge. Each cell carries its label as text so the grid is readable with colour removed entirely.

Rounds to convergence against the MAX_SETTLE_ROUNDS = 100 ceiling: X is rounds taken, Y is how many half-cycles took that many. The number that matters is the rightmost bar, not the tallest: the mode tells you what is typical, the tail tells you what the ceiling has to survive. So the tail gets the red and the mode gets nothing, because colouring the mode would answer the wrong question.

The lever throws the full height of its slot on the detent curve: fast out, hard stop. On is signalled three ways at once: position, glow, and the label's colour, so it survives both greyscale and reduced motion. Click it.

Knurled ring, polished cap, and a value that steps rather than slides: the knob rotates to the next detent in 150ms and never lands between them. The readout carries both the decimal and the hex because the person turning it is picking an address. Drag it or use the arrow keys.

Linear travel, 3px down and no bounce. The armed variant is backlit in Signal Orange and is reserved for an action that changes machine state you cannot get back: a reset, a flash. If nothing is destroyed, it is not armed.

The track is ticked at the grid so drag feels granular rather than continuous, and the ends print their values because a fader with no scale is a guess. Handle is brushed, not polished: it is the part that gets touched, and polish on a touched surface reads wrong.

Eight switches on a burnt-silicon carrier, for the places where the setting genuinely is a bit field: trace channel enables, a mask. Do not reach for this when a checkbox would do; it earns its keep only when the reader is thinking in bits and the on-screen arrangement should match the one in the register.

The dense table. Numeric columns are right-aligned and tabular so digits stack; the name column is sans, because it is the only column that is prose. Status carries a word, never a bare dot.

Sticky at ≥64rem. Keys are mono uppercase muted, values are bold and right-aligned. Values stack under their keys on narrow screens rather than squeezing to three characters.

The hatched fill means partial or provisional. A placeholder must stay visually distinguishable from verified data at a glance and in greyscale, which is why the difference is a texture and not a lighter shade of the same green.

Coins are given away, never sold: decided, and closed. So the meter shows a budget remaining and there is deliberately no "buy more" affordance to design around; when it empties, the copy points at a way to earn rather than a checkout. Designing a price into this reopens a question that is currently shut.

Code is panel, because a code block is the machine talking. Any block that states an output carries a RAN stamp with the date, which is the docs rule with a place to live: if it says the answer is $42, somebody ran it, and the page says when.

# step one instruction and dump the accumulator
halfphi run "LDA #\$42" --halt-on sync --dump a

A = 0x42   h=4   φ2   settled in 7 rounds

One card per route, generated from the Pydantic model that validates the request, so the field list here and the validation cannot drift. Every parameter carries a description because a parameter with no description is the thing the reference is for.

Label in the mono uppercase voice the rail's keys already use, so a form and a readout describe their contents the same way. The hint sits under the control rather than beside it: beside it, it is the first thing lost when the column narrows.

The invalid state is a border and a message, never colour alone: red means ASSERTION FAILED in this palette, and it is also invisible to a reader who cannot see it. The message says what is wrong, so the control is not merely marked bad.

Two button variants and no third, so a toolbar is one primary action and the rest ghost. The select keeps its native control: replacing the disclosure arrow means drawing one, and a drawn arrow is a mark rather than structure.

Not decoration standing in for a missing avatar: img-src here is 'self' data:, so a picture on another host is blocked by the browser and renders as a broken image with no error on the page. A letter is a true thing to draw when the picture cannot be fetched, and the URL goes beside it as a link rather than being pretended into an image.

Two variants and no third. Both are shaded now: the secondary was background: transparent with no shadow, which made it a rectangle of text inside a hairline. One is the action, both are controls, and the difference between them is weight rather than whether they look pressable at all.

It carries the word. A hamburger drawn as three bare lines is an icon with no border, no ground and no label: a control a reader has to already know. The bars are drawn as elements rather than typed as a glyph, because a glyph comes from whatever font resolved and this is the one control that cannot afford to render as a box in a fallback face. Open, they become a cross, so it says what pressing it does now rather than what it did a moment ago.

Paper, not panel: panel means the machine talking and a navigation menu is not the machine talking. Each entry carries one line of what it is, which is the part a bare list of nouns cannot do. Where you are standing gets the Burnt Silicon edge, the same mark the docs tree uses, so the two navigations agree about what "here" looks like.

Derived from the path, not written per page. Every part is a link except the last, because a link to the page you are already on is a control that does nothing, and it is marked aria-current rather than merely styled. They were plain text before: the one element on a page that most looks like a way back was the one thing you could not click.

STYLE.md §9 left the rule for die imagery open; this closes it, decided against the walk-snake page. A pulled schematic is panel content, so the page frames it in the same 3px brushed bezel the kit's .panel wears, at its own width, never bled to the edge: an instrument photographed into the binder. The selector is the shape markdown gives a lone image, so the generated docs get this without knowing any class names. The image here is a stand-in drawn for this zoo; the real figures derive from the die data, which is CC BY-NC-SA and served, never committed.

STYLE.md §9, verbatim: the 13px mono workhorse is right for a docs page, and a full-screen instrument wants 12px with 1.35 leading. .dense is that, as a container-scoped override of --text-data and --leading-data rather than a second scale: everything inside that reads those tokens tightens together, and nothing else moves. Draft until a real full-screen surface wears it.