Theme Studio
One variable re-skins everything. Pick a color and the whole ramp rebuilds — twelve accent steps, brand-tinted neutrals, and a text color chosen to stay readable on top of your fill. No JavaScript runs in the library to make this happen; it is relative color syntax in plain CSS.
Start a project
A new app — Vite or Next.js, Tailwind optional — themed like this one.
Appearance
Presets
Brand colors
Neutral tint
How much of the brand hue bleeds into the grays. 0 is pure neutral.
Radius
Density
Motion
Typography
Fonts load from Google Fonts; the copied CSS shows how.
Contrast
- Text on solid fill
- 5.35:1 AA
- Accent text on background
- 7.82:1 AAA
Auto-contrast picked white text.
Palette
Your theme
:root {
--forte-accent-seed: #0f7a52;
--forte-secondary-seed: #a16207;
/* Measured rather than derived, so it is exact in every browser. */
--forte-color-on-primary: white;
--forte-color-on-secondary: white;
}Typography
Sphinx of black quartz, judge my vow.
The quick brown fox jumps over the lazy dog.
A palette rebuilt from one seed, in plain CSS. Twelve accent steps, brand-tinted neutrals and a text color chosen to stay readable on top of your fill — 0123456789.
Caption — the smallest size a label is set in.
npm install @forte-ui/reactButtons
Form controls
Lowercase letters, numbers and dashes.
Pickers
Feedback
Navigation
Overlays
Content
Table
| Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-2041 | Northwind | Paid | $1,250.00 |
| INV-2040 | Fabrikam | Due today | $840.00 |
| INV-2039 | Contoso | Failed | $2,100.00 |
| INV-2038 | Litware | Draft | $415.50 |