# Finishes and themes
Finishes in families of two, a light one and a dark one, switched by one attribute on any element. What you can change, and the one thing you cannot.
Foundation · Free · https://tactileui.dev/docs/foundations/finishes
## data-finish on any element
Every colour in the kit is a token, and the tokens are defined per finish. Set `data-finish="graphite"` on any element and everything inside it recomputes: a graphite call-to-action band on an aluminium page, a dark console in a light site.
This is the page’s finishThis band is graphiteThis band is aluminium
```
Set it up in the time it takes to read this.
Start free
```
## Following the system
The head script sets the page finish before the first paint: the stored choice if there is one, otherwise graphite for a dark system and aluminium for a light one. `setFinish()` puts a finish and its tone on the page and stores the choice:
```
import { setFinish } from '/kit/kit.mjs';
for (const r of document.querySelectorAll('input[name="finish"]')) {
r.checked = r.value === document.documentElement.dataset.finish;
r.addEventListener('change', () => setFinish(r.value));
}
```
## Families and tones
Every finish belongs to a family of two, a light finish and a dark one: Machined, aluminium and graphite; Wood, oak and walnut; Materials, porcelain and black; Light, daylight and night; Printed, paper and phosphor; Screens, e-paper and amoled. Machined is `kit.css` itself; each other family is one stylesheet, linked after it:
```
```
With the finish goes `data-tone="light"` or `"dark"`, which the head script and `setFinish()` set. Where you mean a dark page rather than one material, read the tone. `setFamily('materials')` keeps the visitor's tone, and `setTone('dark')` flips within the family, as the finish key on this site does.
## The finish tokens
These change with the finish. Read them in your own CSS; never write a literal colour instead.
| Token | For | Aluminium | Graphite | Oak | Walnut | Porcelain | Black | Daylight | Night | Paper | Phosphor | E-paper | AMOLED |
| - | - | - | - | - | - | - | - | - | - | - | - | - | - |
| --tui-desk | The page | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-face | Panels | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-face-hi | Raised caps | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-face-lo | Slots, lamp lenses | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-well | Recesses | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-skirt | Key sides | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-ink | Printing | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-ink-2 | Second printing | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-ink-3 | Scales, hints | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-cap | Contrast cap | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-cap-ink | Contrast printing | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
| --tui-focus | Focus ring | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ | __ |
Constant across finishes: the lamps (`--tui-green`, `--tui-amber`, `--tui-red`), grid, radii and `--tui-ease`; and, in Machined and Materials, the displays (`--tui-lcd`, `--tui-lcd-ink`, `--tui-vfd-bg`, `--tui-vfd`) and type. Daylight shows an LCD in the sun it reads best in, and night backlights it amber, since a reflective LCD is blank in the dark. Paper and phosphor print an LCD as a tint and a lit window solid, and set labels, keys and the figures in displays in Departure Mono (`--tui-mono`), a pixel face at 11px that `kit/themes/printed.css` loads. E-paper and AMOLED set every word in it (`--tui-sans` too) on its 11px grid, with their own type scale (`--tui-t-*`) and smaller corners (`--tui-r-*`); `kit/themes/screens.css` loads it for them. The light stacks (`--tui-raised`, `--tui-inset`, `--tui-pressed`) are drawn from the finish tokens and change with the [volume](https://tactileui.dev/docs/foundations/volumes); porcelain and black draw their own recess, daylight and night draw the light itself (the sun’s short, hard shadow; no shadow at all and every edge lit from inside), paper and phosphor draw every edge as a line of ink, and e-paper and AMOLED draw it as a rim of whole pixels, with a hard pixel shadow on e-paper and dithering for a key that is down. `--tui-hl` is the catch light on an edge and `--tui-sheen` the broad light on a cap: unset, the sheen is the catch light, and black sets it apart so a bright chamfer can sit on a satin cap.
## What there is no token for
An accent colour of its own. The kit ships without one and its restraint is the product; `--tui-brand` is a layer for whoever ships it, left unset here (see [Tune it to your brand](https://tactileui.dev/docs/foundations/brand)). You can also change the finishes’ values (a warmer desk, a colder aluminium) by overriding the finish tokens on `[data-finish="aluminium"]` (a recess takes its colour from `--tui-tactile-well` or `--tui-quiet-well`, one for each volume); the verify tool will still refuse purple and orange literals.
## 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.