# 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. Loading, no-sign-in-method, error and closed states included.

Template · Free · https://tactileui.dev/templates/vault

Live: https://tactileui.dev/templates/vault/live

## What it is made of

- [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [VFD](https://tactileui.dev/parts/vfd): A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- [Sign-in](https://tactileui.dev/parts/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](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
- [Lamp](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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.
- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- [Status](https://tactileui.dev/parts/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](https://tactileui.dev/parts/tumbler): 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.
- [Skeleton](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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.

## 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 · a key at the foot that shows the other states (?state=).

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

```sh
node kit/brain/tools/verify.mjs kit/templates/vault.html
```