About This Tool
Documentation
What does this tool do?
A live UI theme sandbox that maps your custom color palette (primary, secondary, background, surface, text, border, accent) directly onto realistic interactive components (navbars, metric cards, charts, data tables, modals, and buttons) to evaluate visual balance before coding.
When should you use it?
Use this tool when prototyping new theme concepts, testing dark vs light mode variations, verifying component contrast in context, or presenting color proposals to stakeholders.
Key Capabilities & Features
Highlights
Visualize custom color palettes mapped onto complete realistic website and dashboard UI mockups
Assign palette colors to background, primary button, secondary accents, text, and borders
Side-by-side comparison between light mode and dark mode layout renderings
Simulate mobile, tablet, and desktop viewports with applied palette styles
Export tokenized CSS design system tokens matching the visualized layout