About this site

Four layers of tokens

Every colour, space and radius is a token, and tokens come in four layers. A consumer touches only the top two, which is why this site can look nothing like Tangible's plugins and apps without targeting a single class.

1. 1

   Primitives Set by the site

   The theme contract. This site remaps the primary ladder to purple and the neutrals to warm paper.

   --tui-theme-primary-base: var(--purple-500);
2. 2

   Component API Set by the site

   These are hooks each component reads but never defines. The tag colours come in here.

   --tui-chip-bg: oklch(0.93 0.032 var(--tag-hue));
3. 3

   Component-private TUI only

   Each component’s own wiring, with a fallback to the layers above. These aren't meant to be set by the consumer, even when the consumer is me!

   --_bg: var(--tui-chip-bg, var(--tui-theme-secondary-subtle));
4. 4

   Sass TUI only

   Build-time constants. They compile away so they never reach the browser.

   $spacing-multiplier-default: 4;

Colour by contrast

Theme colours form a ladder ordered by contrast with the background, not by lightness. "Stronger" always means further from the page, so one token reads correctly in both modes: -strong is deep purple on paper and pale lilac at night. The ratios below are measured from these panels as they render. Pick a colour and watch them stay constant.

AA requires 4.5:1 for body text and 3:1 for large text and interface parts, like a form control's border, while AAA asks 7:1. Dividers and decorative borders are meant to be quiet.

Type

From the kit

The TUI components this site uses, as they appear here:

• ButtonButton
• LinkButton, link variant
• practiceChip, tag colours
• IconButton
• JCAvatar

Made here, on TUI’s tokens: the index cards, the polaroids and post-its, the printed menu and the light-box image viewer.