Customize LoomiUI without rebuilding every component
Choose a production-ready preset, adapt a shared token system to your brand, and export a theme that stays consistent across every LoomiUI component.
One contract across every component
Tokens are built in, not another destination to learn
Every preset uses the same semantic --loomi-* contract. Change a role once and buttons, forms, navigation, tables, and product shells update together.
:root {
--loomi-primary-500: #2563eb;
--loomi-surface: #ffffff;
--loomi-text: #0f172a;
--loomi-radius-md: 0.625rem;
}- Color
- Brand, semantic, surface and text roles
- Foundation
- Typography, spacing, radius and shadow
- Behavior
- Density, motion, focus and component tokens
Start visually
Theme presets
The baseline LoomiUI Pro theme with a confident blue primary and cool slate neutrals.
Indigo-forward theme tuned for dense SaaS control surfaces and settings-heavy apps.
Deep teal with tight radii and compact density for numbers-first financial products.
Calm sky blue with generous spacing and soft shapes for patient-facing clarity.
Friendly violet with rounded corners and relaxed line heights for learning tools.
Bold rose accent with expressive shadows for creative and media workflows.
A simple workflow
From preset to product
Presets are the starting point. Tokens and tooling make them yours.
- 01 Choose a preset
Start with a visual direction designed for a real product category.
- 02 Adjust the tokens
Tune color, typography, radius, density, and light or dark surfaces.
- 03 Export and ship
Generate CSS variables, JSON, or TypeScript for your application.
Quality is part of the preset
Accessible defaults without a separate checklist page
Theme choices are reviewed where they matter: contrast, focus, motion, and readability. The High Contrast preset gives teams a stronger review baseline when requirements are stricter.
Readable light and dark surfaces Visible keyboard focus Reduced-motion preferences High-contrast starting point
Go deeper when you need to
Tools and resources
Everything supporting the presets, organized by the job it helps you complete.
Included with LoomiUI Pro
Design and code from one system
Get every preset, the Theme Builder, token exports, Figma resources, private docs, and updates.