Foundations

Volumes

Two amounts of depth for the same parts. Tactile stands keys on skirts and cuts wells into the plate; Quiet keeps every size, word and lamp and draws hairlines instead. One attribute switches it.

On this page

The same parts, two volumes
When to use which
Setting it
What changes, and what does not
Your own shadows

The same parts, two volumes

A finish is what a part is made of. A volume is how much depth is drawn on it. Tactile, the default, is the kit as it was built: keys stand on a skirt and drop by it when pressed, fields are cut into the plate, plates cast a shadow. Quiet turns the depth nearly off. Edges become hairlines, a plate keeps one catch light and a 2px whisper of shadow, a pressed key sinks 1px, and the lamp is still the only colour.

Both panels below are the same markup. The left one is Tactile, the right one Quiet, in whichever finish the page is in. Press the keys and flip the switches.

Tactile

RecordingLive

Project name

Auto-save Share publicly

Preset saved to Studio A.

Quiet

RecordingLive

Project name

Auto-save Share publicly

Preset saved to Studio A.

When to use which

Screen	Volume	Why
Settings, account, forms	Quiet	People read and fill them in for minutes. The controls should step back and let the words lead.
Tables, lists, admin, a dashboard open all day	Quiet	Forty keys with skirts and shadows is noise. Hairlines keep the grid readable.
A device, a player, a hero, a product demo	Tactile	The controls are the point. Their depth is what makes them worth pressing.
A landing page	Tactile, or Quiet with one Tactile device	Let the object you are selling have the depth and keep the rest calm.

Keep one volume per screen. The exception is a deliberate region: a Tactile instrument on a Quiet dashboard, set with data-volume="tactile" on its container.

Setting it

Put the attribute on <html> for the whole page, or on any element for part of it. Everything inside follows, finishes included.

<html lang="en" class="tui" data-volume="quiet">

<section data-volume="tactile">
  <!-- a Tactile device on a Quiet page -->
</section>

To let visitors choose, remember the choice as tui-volume and set it in the head before the first paint, beside the finish, so nothing flashes. These docs do exactly this: the Tactile and Quiet switch is at the foot of the list on the left.

<script>try{if(localStorage.getItem('tui-volume')==='quiet')document.documentElement.dataset.volume='quiet'}catch(e){}</script>

import { setVolume, volume } from '/kit/kit.mjs';

setVolume('quiet');            // on <html>, and remembered
setVolume('tactile', panel);   // one region only, not remembered
volume(someKey);               // 'quiet' or 'tactile', from the nearest data-volume

What changes, and what does not

Part	Tactile	Quiet
Plates: panels, cards, cases	A catch light, a ring of shade, a cast shadow	A hairline, one catch light, a 2px whisper
Keys	A cap on a skirt; pressed, it drops by the skirt into the plate's shadow	A flat cap on a hairline; hover and press are one tint step each; pressed sinks 1px
The contrast key	A lit cap on a black skirt	A flat contrast cap with a dark ring
Wells: fields, tracks, trays, windows	Dark under the upper wall, a lit lip below	Flat, a shade lighter, ringed by a hairline
The switch	A ridged grip; on, the slot glows green	A smooth thumb; on, the slot takes the contrast colour and a lamp lights in it
Menus, popovers, toasts, dialogs	A deep drop shadow	A hairline and one soft shadow
The bead-blast grain	Full strength	Fainter

What never changes: sizes, radii, spacing, type, the printing and its contrast, focus rings, lamps and lit displays. A part has the same box in both volumes, so switching never moves the page.

Your own shadows

Every shadow in the kit reads a depth token. A volume sets the tokens; Tactile leaves them unset, so each part falls back to its own Tactile drawing. Write yours the same way and it follows the volume too.

.my-case {
  box-shadow: var(--tui-depth-plate, inset 0 1px 0 var(--tui-hl), 0 6px 14px -6px rgb(var(--tui-sh) / 0.5));
}

--tui-depth-plate: A plate on the surface: panels, cases, thumbs
--tui-depth-key: A key at rest
--tui-depth-key-hover: A key under the pointer
--tui-depth-pressed: A key held or latched
--tui-depth-well: A recess: fields, tracks, windows
--tui-depth-shade: Shading drawn inside a recess
--tui-depth-float: A plate above the page: menus, toasts, dialogs
--tui-depth-cap: The face of a raised cap, as a background

--tui-raised, --tui-inset, --tui-pressed, --tui-well and --tui-well-fill already follow the volume. A lamp's light, --tui-glow, is the same in both.