Dowel

Theme Studio

A preset in this system reassigns four tokens and inherits everything else, so building one means picking a primary and answering three questions: what it looks like pressed, what it looks like in dark mode, and what text can be read on it. The last one is checked here with the same conversion that gates CI — so a colour this page passes is one the build will pass too.

Applied as data-theme="brand".

oklch(0.545 0.196 275)

Lightness0.545
Chroma0.196
Hue275°
Dark mode lightness0.660
Radius1.00×

Every state passes WCAG AA.

Text on this colour reaches 4.5:1 in both modes, hovered and pressed.

Light: primary-foreground on primary5.04:1 — passes, minimum 4.5:1
Light: primary-foreground on primary-hover6.14:1 — passes, minimum 4.5:1
Light: primary-foreground on primary-active7.27:1 — passes, minimum 4.5:1
Dark: primary-foreground on primary6.03:1 — passes, minimum 4.5:1
Dark: primary-foreground on primary-hover6.99:1 — passes, minimum 4.5:1
Dark: primary-foreground on primary-active5.03:1 — passes, minimum 4.5:1

Light

ActiveDraft

Create project

Projects group your deployments.

Dark

ActiveDraft

Create project

Projects group your deployments.

Export

The same file format as the presets that ship. Save it into your project’s stylesheet, or into packages/themes/src/presets/ in a fork, and it is covered by the same audit as everything else.

brand.css
/* Theme preset: brand.
 * Apply with data-theme="brand" on the <html> element. Only the brand-carrying
 * tokens are reassigned; every neutral, radius and motion token is inherited. */

[data-theme="brand"] {
  --primary: oklch(0.545 0.196 275);
  --primary-hover: oklch(0.5 0.196 275);
  --primary-active: oklch(0.462 0.196 275);
  --primary-foreground: oklch(0.985 0.002 265);
}

.dark[data-theme="brand"] {
  --primary: oklch(0.66 0.181 275);
  --primary-hover: oklch(0.705 0.181 275);
  --primary-active: oklch(0.615 0.181 275);
  --primary-foreground: oklch(0.155 0.03 275);
}

For Figma

The same theme as W3C design tokens — every colour in both modes as sRGB hex, the radius ladder at the scale above, the type scale — which Tokens Studio for Figma imports as three sets: core, light and dark. Generated from the CSS, so it cannot disagree with it.