Template

Billing · Plumb

A billing statement you can operate, for a nine-seat studio: the amount due in display type, usage on LED bars, the plan changed by a rotary selector with the proration printed as invoice lines, seats and notices, and a guarded danger plate.

On this page

What it is made of
The recipe
Use it

What it is made of

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

FMAMLW

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.

Tabs

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

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.

Weight: 2.4 kg
Power: 18 W

Spec list

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

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.

Output

Panel

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

Knob

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

Key

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

Reel 3	42:10
Mixed	0:30

Table

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

Commit key

A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says how it ended.

Project

Field

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

TRMH

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.

Switch

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

Grille and cloth

Perforated metal and speaker cloth, for the place where a real device would breathe or sound.

Rocker

A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.

Confirm

Erase reel 3?

KeepErase

Dialog

A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.

Preset saved.

Toast

A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.

The recipe

Bar · one printed column: the total due in display type over the period groove · tabs · LED bars over invoice lines with overage terms · a rotary selector beside an open three-plan compare, proration as invoice lines, a commit key · payment, seats and notices behind tabs · a perforation · a danger plate in the other finish, with a rocker and a guarded key.

The brain holds this as a composition recipe, so an agent asked for “a billing” starts from the same plan.

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/billing.html
ok — 1 page(s), no violations