Foundations
Materials
Every surface is a material with a job. Twelve finishes in six families, from bead-blasted aluminium to soft-touch black, and nothing is a colour for its own sake.
Seven materials
A page is a desk with a device on it. The desk is the background; face plates are panels; raised parts are caps; cuts in the plate are wells. Each has a token, and each is shown here in aluminium and graphite, side by side.
What the moving parts are made of
The finish is the room; the material is the device in it. Set data-material on a part, or on the device that holds it, and every key cap and its skirt, every knob, fader cap and switch thumb inside takes that material. The plate, the desk, the slots cut in the plate and everything printed on it keep the page’s finish, so a porcelain knob sits on a Black page and stays porcelain when the page turns Paper. Eight materials, each a whole device here, in this page’s finish:
aluminiumSpun and bead-blasted; the spun band points at the lamp.graphiteAnodised dark grey with a diamond-cut chamfer.porcelainGlazed hard-paste porcelain: cool white, a sharp window of light in the glaze, a rounded shoulder and no grain.black-anodisedDeeper than graphite and satin: the spun grain shows through the anodising, and the cut chamfer is bare metal.titaniumWarmer and darker than aluminium. Blasting scatters the light, so there is no spun band: one broad, soft highlight.bakeliteMoulded phenolic, walnut brown, glossy as it leaves the mould; the pointer filled cream, as on a 1930s dial.anodised-blueColour in the metal, not on it: the dye sits under a clear oxide, and a cut edge shows bare aluminium.anodised-greenThe same process in a deep green. A whole object in one colour, never one key in a grey panel.<section class="tui-panel" data-material="anodised-blue">
<button class="tui-key">Play</button>
<tui-knob label="Tone"></tui-knob>
</section>
<tui-knob label="Volume" data-material="porcelain"></tui-knob>Each material brings its own printing and its own contrast key: a light one on the dark materials, bare aluminium on the anodised ones. Printing on a part reads at 4.5:1 or more, and an unlabelled part’s edge at 3:1 against the plate, in every finish.
Anodised blue and green colour a whole device. They are the only colour a part takes that is not a lamp’s, and only as an object in one colour, so they go on the device and every part in it takes them. One blue key among grey ones is an accent, and so is a blue link or heading: the verify tool flags an anodised key or knob on its own. Bakelite brown and titanium are materials in the same way, never accents.
Twelve finishes
Aluminium is light: bead-blasted plates on a warm grey desk, printed in near-black. Graphite is dark: soft-touch black plates, warm-white printing, black plastic recesses whose floor picks up the lamp again near the lower wall. The same markup renders both; only the tokens change. They are the Machined family, one of six: Wood, Materials, Light, Printed and Screens each make the same pair of their own.
The finish follows the visitor’s system before the first paint, and remembers an explicit choice. Finishes and themes has the script and the details.
Grain
Every panel carries a fine noise at the finish’s grain strength: the bead-blast. It is what stops a flat colour from reading as a screen. Do not add other textures to panels, and do not remove it to make things look cleaner.
The full law
This page is a summary in plain words. The brain holds the law itself, written for an agent to follow.
The full law, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.