Skip to the page
TACTILE UI

Template

On-call · Tocsin

An on-call console at 3 a.m., for a payments incident: one alarm plate with a pilot lamp, the time open in a lit display and latency on a chart recorder; acknowledge, escalate, page and roll back; the rota as a board of name cards.

On this page
  1. What it is made of
  2. The recipe
  3. Use it
01

What it is made of

29 parts from the kit and page layout in tokens, nothing else. Each links to its page.

Quiet

Bar

The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.

Key

Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.

2 matches
BatteryGB
Set battery reserve

Command palette

Every action and page behind one key: a modal plate whose entry line is a lit display, with the results printed below and the chosen one pressed in.

Output

Panel

A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.

Lamp

The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.

OnlineIn review

Status

A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.

96.4MHz

VFD

A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.

Latency p95182ms

Readout

A printed label over a value: key figures, with the unit small and the change in words.

LED matrix

A dot-matrix display of round LEDs behind smoked acrylic, each with its own bloom and a short warm-up and fade. Status words in a 5×7 face drawn for it, a sparkline, bars, a few icons: “DEPLOY OK”, tokens per second, queue depth.

Chart recorder

A strip-chart recorder: gridded paper advancing under a pen that rides a rail, drawing the live value as the paper moves and printing the time in the margin. For p95 latency, tokens per second, grid frequency, a cold room’s log.

Needle gauge

A moving-coil panel meter: a printed scale under glass, a thin needle that swings past the mark and settles, a lamp for the bands and a small LCD for the exact reading.

Ring meter

The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with the value in lit digits in the middle.

LED bar chart

A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers and a lit readout for the exact value.

Lamp heatmap

A heatmap as a matrix of small panel lamps set into the plate: each lamp’s brightness is the value, off to full in four steps, with a printed legend. Deploys per day over a year, incidents by hour of the week, energy by the hour.

Weight
2.4 kg
Power
18 W

Spec list

Key and value facts, printed like the plate on the back of a device.

HTTPMost teams

Tag

A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.

Tray

A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.

AOTRMH+4

Avatar

A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.

  1. IntroPiano, room mics1:12
  2. LodeFull band4:05
  3. Night reelVocal and tape3:42

List

Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.

Reel 342:10
Mixed0:30

Table

Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.

Commit key

A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says how it ended.

Confirm

Erase reel 3?

KeepErase

Dialog

A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.

Field

Text entry in a recess, the label printed above it, and a hint that says how to fix an error.

Select

A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.

Text area

Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.

Selector

One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.

Switch

On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.

Check

Disk 82% full.

Alert

A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.

Preset saved.

Toast

A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.

02

The recipe

No rail: a slim bar with a Commands key · one screwed alarm plate (pilot lamp, display headline, lit phases, the open-for clock, a full-width recorder with its set-point, keys beside a two-line status sign) · a rack of recessed trays with printed legends: instruments (gauge, budget ring, LED bars by region) · people (a rota board of name cards, responders) · log (timeline, sortable service board) · history (heatmap, figures).

The brain holds this as a composition recipe, so an agent asked for “a on-call” starts from the same plan.

03

Use it

The template is one HTML file with its layout CSS in a <style> block, kit.css, and kit.mjs for the parts that need a script. Copy it, replace the words and the figures, keep the structure. It passes the verify tool as shipped.

node kit/brain/tools/verify.mjs kit/templates/oncall.html
ok — 1 page(s), no violations
Docs
Finish
Volume