Skip to the page
Tactile UI

Templates

Blog · The Slackwater Log

An engineering journal for a fleet of neighbourhood batteries: a nameplate, the newest entry as a cover whose picture is its own reading, a ruled ledger of numbered entries, and a long read with notes in the margin and a figure you can replay. Loading, no-entries, error and sign-ups-paused states included.

On this page
  1. Anatomy
  2. Usage notes

Anatomy

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.

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.

Progress

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

Combo

One field with its one action in a shared well: subscribe, search, add.

Key

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

Tag

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

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.

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.

Glass

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

Spec list

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

Table

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

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.

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.

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.

LCD

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

Fader

A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.

Panel

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

Tabs

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

Readout

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

Status

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

Toast

A confirmation after an action.

Skeleton

The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work.

Empty state

What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.

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.

Usage notes

A slim bar whose rule becomes a reading groove · a nameplate with a subscribe field and a dateline · the newest entry as a cover: display title, its reading as a plot in glass, an italic standfirst, a byline, one contrast key · a ruled ledger of numbered entries with a topic selector · filed under, older and newer · a key at the foot that shows the other states (?state=).