THEME STUDIO
Visual Website Design — No Code Required
Theme Studio is LuperIQ CMS's built-in design system. Customize every visual aspect of your website — colors, fonts, layouts, navigation, popups, dark mode — through a visual interface. No CSS files to edit, no HTML templates to hack, no "custom code" snippets to paste.
How Theme Studio Works
Theme Studio generates CSS from design tokens. Instead of writing color: #2563eb in a stylesheet, you pick a color in the design panel and the system compiles it into optimized CSS. Change one token and every element that uses it updates instantly.
This is not a page builder that generates bloated HTML. It's a design system that produces clean, semantic CSS. Your pages stay fast because Theme Studio adds zero JavaScript to the frontend — it's all server-rendered Rust.
11 Submodules, 6,228 Lines of Rust
50+ Content Blocks
Hero sections, testimonials, galleries, pricing tables, feature grids, CTAs, FAQs, team profiles, and more. Each block type is a structured template — consistent styling, semantic HTML.
Mega Navigation Builder
Multi-column dropdown menus with tabbed categories, item counts, descriptions, and "view all" links. The same navigation system powering the LuperIQ.com header right now.
Popup & Toast System
Schedule modals, slide-ins, and toast notifications by time, page, scroll depth, or exit intent. Visitor targeting rules control who sees what.
Page Studio
Drag-and-drop page layouts using pre-built block types. Arrange sections, set responsive breakpoints, and preview across device sizes.
Layout Version History
Every layout change is event-sourced. Roll back to any previous design. Compare revisions side by side. No "I broke it and can't undo" anxiety.
Dark Mode
Full dark theme support with automatic color token inversion. Toggle between light and dark themes without maintaining separate stylesheets.
32+ REST API Endpoints
Theme Studio exposes its full functionality through a REST API. Create theme profiles, update navigation structures, manage popups, and compile CSS programmatically. The admin panel uses the same API — anything you do in the UI can be automated.
Design Tokens, Not Hardcoded CSS
Colors, fonts, spacing, border radii, shadows — everything is a token. Tokens cascade through a system hierarchy: global defaults → theme profile → page overrides. Change your brand color in one place and it propagates everywhere. No search-and-replace across CSS files.
WordPress Theme Import
Migrating from WordPress? Theme Studio includes an import module (2,677 lines) that translates WordPress theme settings into LuperIQ design tokens. Your existing color scheme, font choices, and layout preferences carry over.