Skip to the page
TACTILE UI

Template

Analytics · Sounding

A monthly report laid out like a printed annual report: one 176 px LCD figure, the retention cohorts as the centrepiece heatmap, usage in glass, signups by source on LED bars, a sortable feature table and numbered notes. Nothing moves at rest.

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.

Latency p95182ms

Readout

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

96.4MHz

VFD

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

Output

Panel

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

03600:0012:0024:00

Glass

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

Progress

Progress through a task: ink filling a groove, never a coloured bar.

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.

Reel 342:10
Mixed0:30

Table

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

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.

Key

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

02:52min

LCD

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

HTTPMost teams

Tag

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

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.

Switch

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

03600:0012:0024:00

Plot

Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now.

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.

02

The recipe

A bar with a numbered contents · a dateline with period and plan selectors · 01: a huge LCD over three lit readouts · 02: the cohort heatmap in the page’s one panel · 03: a plot in glass beside LED bars · 04: a sortable table · numbered notes.

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