On this page
Tokens and Theming
Batoi UIF themes should be driven by explicit tokens instead of one-off visual overrides.
The Theme Builder example demonstrates how a client-side tool can adjust tokens and export application-ready CSS.
Token Pipeline
Core Tokens
| Token | Purpose |
|---|---|
--uif-brand | Primary brand/action color |
--uif-accent | Supporting accent color |
--uif-neutral | Main text and structural color |
--uif-surface | Primary surface color |
--uif-radius | Control and card radius |
--uif-density | Spacing density |
--uif-font | Font stack |
Example CSS
:root {
--uif-brand: #0f70b7;
--uif-accent: #00a999;
--uif-neutral: #1e293b;
--uif-surface: #ffffff;
--uif-radius: 8px;
--uif-density: 1rem;
--uif-font: Inter, Arial, sans-serif;
}Guidance
- Keep token names stable.
- Avoid per-page color overrides where tokens are enough.
- Preview themes against forms, cards, tables, and primary actions.
- Export CSS and JSON when a theme needs to move between applications.