Themes · Studio

Theme Studio

A preset reassigns four tokens and inherits everything else. Pick a primary, decide how it looks pressed and in dark mode, and see whether text can be read on it — checked with the same conversion that gates CI, so a colour this page passes is one the build will pass too.

Browse the presets

Preset name

Applied as data-theme="brand".

Primary colour

oklch(0.54 0.196 275)

Lightness0.540

Chroma0.196

Hue275°

Dark mode lightness0.655

Radius1.00×

Every pair passes WCAG AA.

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

Light: primary-foreground on primary5.16:1

Light: primary-foreground on primary-hover6.28:1

Light: primary-foreground on primary-active7.43:1

Light: primary on the soft tint4.57:1

Light: primary-hover on the soft hover tint5.11:1

Light: primary-hover on the soft pressed tint4.96:1

Dark: primary-foreground on primary5.91:1

Dark: primary-foreground on primary-hover6.88:1

Dark: primary-foreground on primary-active4.93:1

Dark: primary on the soft tint5.28:1

Dark: primary-hover on the soft hover tint5.63:1

Dark: primary-hover on the soft pressed tint5.45: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.54 0.196 275);
  --primary-hover: oklch(0.495 0.196 275);
  --primary-active: oklch(0.457 0.196 275);
  --primary-foreground: oklch(0.985 0.002 265);
}

.dark[data-theme="brand"] {
  --primary: oklch(0.655 0.181 275);
  --primary-hover: oklch(0.7 0.181 275);
  --primary-active: oklch(0.61 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.

Download brand.tokens.json

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.54 0.196 275);
  --primary-hover: oklch(0.495 0.196 275);
  --primary-active: oklch(0.457 0.196 275);
  --primary-foreground: oklch(0.985 0.002 265);
}

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