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

Foundation · Free · https://tactileui.dev/docs/foundations/materials

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

```
<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](https://tactileui.dev/docs/foundations/finishes) 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, in `materials-and-finishes.md`, written for an agent to follow. It ships with the Kit.