Theme Studio

One variable re-skins everything. Pick a colour and the whole ramp rebuilds — twelve accent steps, brand-tinted neutrals, and a text colour chosen to stay readable on top of your fill. No JavaScript runs in the library to make this happen; it is relative colour syntax in plain CSS.

Start a project

A new app — Vite or Next.js, Tailwind optional — themed like this one.

Appearance

Switch to dark

Presets

Brand colours

#0e76be

#8f5fc0

Neutral tint

1.00

How much of the brand hue bleeds into the greys. 0 is pure neutral.

Radius

Density

Motion

Typography

Sans

Mono

Fonts load from Google Fonts; the copied CSS shows how.

Contrast

Text on solid fill: 4.82:1 AA
Accent text on background: 6.97:1 AA

Auto-contrast picked white text.

Sphinx of black quartz, judge my vow.

The quick brown fox jumps over the lazy dog — 0123456789

npm install @forte-ui/react

Your theme

:root {
  --forte-accent-seed: #0e76be;
  --forte-secondary-seed: #8f5fc0;

  /* Measured rather than derived, so it is exact in every browser. */
  --forte-color-on-primary: white;
  --forte-color-on-secondary: white;
}