Skip to the page
TACTILE UI

Template

Dashboard · Hearth

A home-energy screen for a house, not an ops room: the headline says what the house is doing, three big readouts, the ground floor drawn as a plan of circuits with their switches and a room gauge, the day on the chart recorder, the battery and tonight’s rules.

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

What it is made of

16 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.

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.

Latency p95182ms

Readout

A printed label over a value: key figures, with the unit small and the change in 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.

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.

02:52min

LCD

A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.

Ladder

An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.

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.

Output

Panel

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

Tray

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

Switch

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

Tabs

Views of the same thing, switched in place: keys in a tray, the chosen view a raised cap.

Key

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

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.

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.

Knob

A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.

02

The recipe

A slim bar with the address and the finish · a display headline beside three big printed readouts · the floor plan: circuits as trays in a panel, each with a switch, a reading and a lamp, one room with a gauge · the day on a recorder in a panel with period tabs · the battery (LCD, ladder, a knob for the reserve, a selector for the mode) beside tonight’s rules as switches.

The brain holds this as a composition recipe, so an agent asked for “a dashboard” 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/dashboard.html
ok — 1 page(s), no violations
Docs
Finish
Volume