Skip to the page
TACTILE UI

Template

Website · Quiet

An uptime product site that speaks in specimens: “Nothing to report.” at display size, a live check of your own address, a year of its own alerts as lamps, three controls that are the whole setup, how it decides to speak, a printed rate card and questions.

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

What it is made of

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

Output

Panel

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

Field

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

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.

Latency p95182ms

Readout

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

Tray

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

  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.

Key

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

HTTPMost teams

Tag

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

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.

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.

Knob

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

Switch

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

Tariff

Three rates a day.

Reserve

—

Accordion

Printed sections that open in place. Each head ends in a small square key printed +; open, the key latches below the plate and reads −.

02

The recipe

Bar · a display headline over one sentence and a key, beside a screwed panel that checks an address from six regions · numbered specimens in a margin: a year of alerts on a heatmap with four figures · three controls in trays · the alert sequence as a timed list · a rate card as a table with a cadence selector · questions in an accordion · a panel to start.

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