Tune it to your brand

Try it

Pick a brand and lean the greys toward a hue. The panel is the same markup as everywhere else in the kit; only the properties on it change, and the CSS you would paste is underneath. It follows the finish and the volume of this page.

/* the kit as it is: nothing set */

Three knobs

Each is a custom property you set once, on :root or on any element that carries a data-finish. They work in all twelve finishes and both volumes, and they need no script. Leave one unset and the kit is unchanged: the tokens in every finish are the same as before the knobs existed, character for character.

:root {
  --tui-brand: #2f6fde;       /* the primary key, the focus ring, a ticked box, a progress fill */
  --tui-tone: 261;            /* lean the greys toward this hue... */
  --tui-tone-strength: 0.08;  /* ...by this much */
  --tui-red: #c0392b;         /* a status colour, set in one place */
}

A brand colour

The kit has no accent of its own, and its showcase stays that way. Set --tui-brand and these take it, and nothing else does:

• the primary key, in Tactile and Quiet, with a darker side and a catch light worked out from it;
• the focus ring, kept dark enough on a light finish and light enough on a dark one to read at 3:1 against the plate;
• the tick in a checkbox and the dot in a radio;
• a progress fill;
• the underline of a link in prose;
• a chosen row in a table, as a bar down its left edge, and the chosen day of a calendar.

Text is never coloured with it. What is printed on a brand surface takes black or white, whichever reads better on that brand: the choice turns on the brand's relative luminance, the quantity the contrast ratio is made of, so any brand you set reads at 4.5:1 or better. Hover and press move the key away from its ink, which can only add contrast.

A tone for the greys

Every finish has neutrals: the desk, the faces, the wells, the rules and three tiers of ink. --tui-tone is a hue in degrees and --tui-tone-strength says how far each neutral leans toward it, from 0 (nothing) to 0.12 (about half way). Each neutral is mixed in OKLab toward a colour of its own lightness, so lightness never moves; the tint grows with the square root of lightness, so a dark desk is tinted less than a light one and neither goes muddy.

/* A cool slate, from a blue brand */
:root { --tui-tone: 261; --tui-tone-strength: 0.08; }

/* A warm stone, from an orange one, on one band only */
.promo[data-finish] { --tui-tone: 49; --tui-tone-strength: 0.06; }

The printing keeps reading. The kit's tests measure ink, ink-2 and ink-3 on the desk, the face and both wells, in every finish, at hues 0, 60, 120, 180, 240 and 300 and strengths up to 0.12, and hold them to the thresholds the untinted finishes already meet.

Status colours

Green, amber, red and blue are each declared once, on :root, so a value set on :root or on a container reaches every finish inside it. Everything derived from them follows: the lamp's glow, a meter's lit segments, a switch's "on", the legend of an alert. The red used as text, --tui-red-ink, is worked out from --tui-red in each finish, with that finish's own lightness, so a new red stays readable as text.

:root { --tui-green: #1f8a5b; --tui-red: #c0392b; }

Keep a status meaning what it says: red for a fault, green for on, amber for a warning, blue for linked. The knob changes the shade, not the job.

Where to set them

Put the knobs on :root, after kit.css and the family stylesheets, for the whole page. For one region, put them on the element that has its own data-finish: the tokens are worked out where a finish is set, so a band takes its own knobs and a band nested in it takes them too. The status colours are the exception and work on any container.

The knobs use relative colour syntax, light-dark() and sqrt() (Chrome and Edge 123, Safari 17.5, Firefox 128). Where a browser cannot work out a derived colour, the part keeps the kit's own.

What never changes

• The kit's own defaults and this site: no brand, and a lamp is the only colour.
• Body text, headings and labels: no brand colour, ever.
• The objects (a knob, a rocker, a displayed material) keep their own finish and anodising.
• A lamp still means its status, next to words.