Viewing: Default
All components respond live to the active theme's CSS variables.
Color Palette
Typography
UI / Sans
—
The quick brown fox
Used for all interface labels, buttons, navigation, and body text throughout the UI.
AaBbCcDdEeFfGgHhIiJjKkLlMm 0123456789
Text / Serif
—
The quick brown fox
Used for long-form content, article bodies, editorial text, and typographic headings.
AaBbCcDdEeFfGgHhIiJjKkLlMm 0123456789
Code / Mono
—
const x = 42;
const greet = (name) => `Hello, ${name}!`;
AaBbCcDd 0123456789 !@#$%^&*()
Buttons
All button variants using theme tokens.
Badges & Status
Inline labels using theme accent colors.
Primary
Secondary
Accent
Muted
Form Inputs
Toggles & Progress
Storage 68%
Bandwidth 42%
Chart Colors
Five data visualization tokens.
Alerts
New features are available in this release.
Your session will expire in 5 minutes.
This action cannot be undone.
Code Block
const theme = 'default';
// Apply CSS variables to :root
function applyTheme(name) {
document.getElementById('theme-css')
.href = `themes/${name}.css`;
}