Pixel-Perfect Brand Control.
The bridge between marketing and design systems. The Advanced Site Theme Customizer allows brand managers to control 108+ design tokens—from deep typography scales and border radii to semantic color palettes—instantly generating strict CSS variables for the frontend to consume.
The Global Design System Engine
Semantic Color Palettes
Define your Primary, Secondary, Accent, Success, Warning, and Error colors. The system automatically computes and generates accessible contrast shades (from 50 to 900) ensuring UI elements always maintain WCAG accessibility standards.
Dark Mode Overrides & Frontend Switcher
Don't rely on CSS hacks. Explicitly define your Dark Mode semantic overrides within the Customizer. The API delivers both the Light and Dark tokens, allowing your frontend to flip palettes instantly based on the user's OS preference. You can even drop a natively-supported `ThemeToggle` block anywhere on your page for manual light/dark/system mode switching.
Fluid Typography & Modular Scaling
Establish strict visual hierarchy. Select web fonts (Google Fonts integration) for Headings, Body, and Monospace. Define your Base Font Size and the Modular Scale ratio. The backend automatically calculates slope parameters and generates responsive CSS `clamp()` functions, guaranteeing text smoothly scales down on smaller viewports.
Spacing & Layout Tokens
Ensure components breathe consistently. Define your `containerMaxWidth`, baseline `unit` spacing, and section padding multipliers to guarantee your grids align perfectly across every page on the site.
Borders & Shadows
Fine-tune your UI aesthetics. Adjust global border radii (Small, Medium, Large, Full) and configure precise box-shadow elevations to create consistent depth across cards, modals, and buttons.
Developer API Delivery & Live Sync
A single API call to `GET /api/content/site` delivers the entire token matrix. For editors in the CMS, the preview iframe updates instantly as you type, giving zero-latency visual feedback for breakpoint tweaks without ever needing to hit "Save".
Frequently Asked Questions
No. You define your semantic colors — Primary, Secondary, Accent, Success, Warning, Error — and the system computes the full 50-to-900 shade ramp for each, checking contrast so UI elements hold up against WCAG accessibility standards. You tune the anchor colors; the scale is generated.
A single call to `GET /api/content/site` returns the entire token matrix — colors, typography, spacing, borders, and shadows, plus the dark-mode overrides. Inject those values as CSS variables on your `:root` and your components restyle instantly. There's no proprietary theming SDK to adopt; it's plain CSS variables.
No. You define dark-mode overrides alongside your light tokens, and the API delivers both sets. Your frontend flips palettes based on the user's OS preference, or you can drop the natively-supported `ThemeToggle` block onto a page for manual light/dark/system switching.
You pick your heading, body, and monospace fonts (with Google Fonts integration), a base font size, and a modular scale ratio. The backend calculates the slope parameters and emits responsive CSS `clamp()` functions, so text scales smoothly between viewports instead of jumping at fixed breakpoints.
Not while editing in the CMS — the preview iframe updates as you type, giving zero-latency feedback on color, spacing, and breakpoint tweaks before you commit anything.