Colour

Two themes carry Tempio’s colour. neutral is the app’s and the console’s look, measured off Attio: a near-black ink on white, colour by alpha, Inter. tempio is the site’s, the docs’ and the emails’, built on the kit’s purple. This page opens on neutral. Pick tempio above and the semantic layer, the feel colours, the chart series and the objects repaint, with the values printed under them. The lane colours and the ramps are the same in every theme, and the grounds specimen always draws tempio.

Semantic layer

What components read. Each theme maps these once per mode: tempio onto the scale steps further down, neutral onto the values measured off Attio, except success and warning, which read green.9 and amber.9. Brand primitives (--brand-*) never change.

Feel colours

The roles beside the semantic layer, among them the hover and active fills, the placeholder and subtle inks, the selection, cell and row tints, the skeleton pair, the tooltip, the sidebar’s hover and labels, a dialog’s frosted frame, a count badge’s ink, and the edges of a checkbox and a toggle’s thumb. Most of neutral’s are measured off Attio; the $comment in neutral.json names the few that were not. tempio writes most of its own as references to its roles, such as var(--muted); three are transparent, because tempio draws no cell or enrichment tint and no frost round a dialog. Every theme without a feel of its own takes tempio’s, so it draws what it drew before the feel existed.

Chart series

Charts read seven series, in order. chart-1 to chart-5 are semantic slots; chart-6 and chart-7 are feel colours, which tempio points at destructive and warning. Under neutral the seven are the fit sheet’s blue, green, orange, violet, pink, red and amber, and a chart that asks for a wash paints none behind it.

Objects and tiles

Each object in the app and the console has a colour: the fill of its tile, then a tint, the tint’s inset ring and the ink written on the tint, for a chip that names it. Each row starts with the chip as ObjectChip draws it, then the fill, the ring and the ink. Below the objects are the tile’s own colours: the 1px ring every tile wears, the glyph’s white, the grey tile in ⌘K and toasts, and the fallback tile of a record with no logo. The icons page draws them as tiles.

Categorical

The planner’s lane colours: fifteen a person can give a bar on the Gantt. Each is a fill, the ink written on it and a hover shade for its handles, then a tag style for a chip that names the colour: a tint, the tint’s ring and the ink written on the tint. All six come per mode and are the same in every theme. The first row is the fill with its name in its own ink, then the ink, then the hover shade. The second is the tint with its name in the tag’s ink inside its ring, then the ring, then the ink. build:tokens stops on an ink that reads below 4.5:1 on the fill, the hover shade or the tint. The planner page draws them on bars.

• red
  red
• orange
  orange
• amber
  amber
• yellow
  yellow
• lime
  lime
• green
  green
• teal
  teal
• aqua
  aqua
• blue
  blue
• indigo
  indigo
• purple
  purple
• magenta
  magenta
• pink
  pink
• rose
  rose
• slate
  slate

Status colour

Status as a fill is the semantic solid with its foreground: bg-success with text-success-foreground. Status as text or an icon is step 11 of the hue: text-green-11, text-amber-11.

Under tempio, the solids are the kit’s own success, warning and danger colours. White reads 2.6:1 on the green and 2.2:1 on the amber, so success and warning carry dark ink in both modes. destructive is red.11 under white in light, the one red step that also reads as text on the paper, and red.9 with the ground as its ink in dark.

Grounds and the sidebar

Under tempio, only the page changes with the mode. In light, the page is the kit’s pink-white paper and cards are white on it. In dark, the page is the ground, the near-black moved onto the purple’s hue, and a card is one step above it. The sidebar is the kit’s purple, plum.9, in both modes, under white ink. The specimen below draws tempio whatever the switcher shows.

The dark theme writes the sidebar and the primary as plum.light.9, a reference that holds the light ramp’s value: the dark ramp lifts its own step 9 so a solid shows on the ground, and white on the lifted step fails AA. The sidebar’s hover is plum.10, its border plum.8, and its ring and its one filled mark peach.9, so nothing on it is black.

Step roles

Twelve steps per hue, generated from a seed in tokens/brand.json. Geist numbers ten steps 100–1000 and holds its two page backgrounds in a separate pair; those ten are steps 3–12 here and the pair is steps 1–2. The slots in the table are tempio’s; neutral reads two steps, green.9 and amber.9.

background reads no step: it is the paper in light and the ground in dark, both brand primitives. chart-5 is neutral.9.

Scales

Light and dark ramps; toggle the mode above and the labels follow it. The ramps are the same in every theme. An accent hue’s seed is its step 9 in light, verbatim. The neutral’s seed is a ground rather than a solid, so it sets the lightness of the ramp’s ends instead: step 12 in light, step 1 in dark.

Themes

The Theme control on these pages offers tempio, neutral, ember and ocean; the last two are demos of a theme file. The 36 themes imported from the shadcnblocks Admin Kit’s presets stay in tokens.css and nothing offers them. Each is a [data-theme] block that remaps the semantic layer and sets its own --radius, takes tempio’s feel, and leaves the face alone.

neutral is the one theme besides tempio with a feel of its own, so its radius steps, shadows, motion, type, focus ring and icon stroke differ too; the Feel table on the DESIGN.md page lists every value beside tempio’s.

pnpm --filter @tempio/ui import:themes runs scripts/import-theme-presets.ts, which rewrites the set from the kit. Where a preset fails a pair, the script moves the colour until it reads AA and writes the move into that theme’s $comment. A preset whose page fails the step 11 gate is skipped, which is why Doom 64 is not in the set.

Contrast

Four gates run at build, before anything is written. checkContrast holds every theme and mode to WCAG AA (4.5:1) on the text pairs in scripts/tokens/contrast.ts. checkFeelContrast holds the feel’s inks to the same bar in the two themes that set a feel, tempio and neutral, each object chip’s ink on its tint among them. checkScaleText holds step 11 of every hue to the same bar on background and on card, which is what makes the status-text rule above safe. checkCategorical holds the lane colours’ inks, as the Categorical section says.

A failing pair is fixed in the theme, the seed or the ladder, never by deleting the pair. A theme that fails cannot ship.