Skip to the page
TACTILE UI

Template

Docs · Switchyard

Documentation as a printed service manual, for a feature-flag service: a numbered contents with a search that filters it, a display chapter numeral, code on dark plates with copy keys, printed warnings, and an instrument on the bench that runs what the page describes.

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

What it is made of

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

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.

Weight
2.4 kg
Power
18 W

Spec list

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

Reel 342:10
Mixed0:30

Table

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

Output

Panel

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

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.

Field

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

Key

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

03600:0012:0024:00

Glass

Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.

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.

Knob

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

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.

02:52min

LCD

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

Tabs

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

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.

02

The recipe

Bar · a sticky numbered contents with a search field · a chapter opener with a display numeral · numbered sections in a reading measure: code on dark plates with copy keys, language tabs, a fields table, printed warnings, a limits list · a screwed instrument on the bench (knob, ring, field and key, LCD, request and response in glass) · the manual’s page foot.

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