Skip to the page
TACTILE UI

Template

Sign-in · Vault

A two-step sign-in with nothing else on the page: one screwed plate whose lit display says LOCKED, the sign-in part (Google, GitHub or an email code), then the code dialled into a tumbler lock, and the display opening.

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

What it is made of

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

Field

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

96.4MHz

VFD

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

Sign-in

Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that re-prints the plate, and errors that say how to fix them.

Key

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

Output

Panel

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

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.

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.

Tumbler lock

A PIN or one-time code dialled into a combination lock: number wheels behind a slot in the plate, turning on detents. Right, a locking bar drops into their notches; wrong, they spin back to blank.

02

The recipe

A bare desk, the name and the finish · one screwed plate: a lit display that reads the lock’s state · step 1: the sign-in part · step 2: the tumbler across the plate, a contrast key, a resend key counting down, small print · a footer line of status and links.

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