Choose. Inspect.
Export one system.
Use 3 palettes, 4 fixed font pairings and 3 layouts across three preview modes, then copy the CSS tokens. The separate paid file contains 7 palettes, 12 pairings, 6 layouts, 4 Finish and 5 Detail sliders and 7 outputs.
Build one system. Inspect every choice.
Free demo: 3 palettes, 4 font pairings, 3 layouts, three preview modes and CSS tokens. Pro: every preset, four Atmospheres, 9 Finish and detail sliders, and all 7 export formats.
A controlled four-stage sequence
Pick your system
Choose a palette, fixed font pairing and layout. Each option provides a coherent starting point, but the final choice still needs to fit the product and audience.
See it live
The preview updates immediately. Clean isolates the layout. Rich shows the selected values. Chart keeps that specimen and swaps in the original glass dashboard card with its slim 12-bar treatment.
Export what you need
CSS tokens, DESIGN.md, an implementation prompt or a starter HTML navigation and hero component using the selected colours, fonts and layout.
Verify the implementation
Use the same values during browser review. Guard Lite can identify outside literal values before a full rendered check.
Use every preset and every output.
The demo gives you 3 of 7 palettes, 4 of 12 pairings, 3 of 6 layouts and CSS tokens. The paid file includes every preset, four Atmospheres, 4 Finish sliders, 5 Detail sliders, all 7 outputs and the updates included under the current product terms.
A few quick answers
What's the new Full HTML export?
A fourth output tab generates an HTML and CSS starting component with navigation, a hero, selected tokens, a Google Fonts reference and an optional GSAP snippet. Review dependencies, accessibility and project conventions before production use.
I'm not a designer. Will this work?
The controls reduce the number of open visual decisions and make the result easier to inspect. They do not guarantee quality. You still need to choose a direction that fits the product and review the rendered interface.
What do I actually get with Pro?
All 7 palettes, 12 pairings and 6 layouts; Pure, Aura, Spotlight and Tactile Atmosphere; 9 Finish and detail sliders; and all 7 outputs: CSS, DESIGN.md, AI prompt, Full HTML, Tailwind, design tokens JSON and WCAG report.
Are there keyboard shortcuts?
Yes. Left and Right cycle palettes, Up and Down cycle font pairings, [ ] cycles layouts, and S shuffles all three at once. The signal bar updates live to tell you what each combination communicates.
Does it work offline?
The core paid file runs in the browser without an account or backend. External fonts and optional third-party snippets still require a network connection unless you replace or host those dependencies locally.
Is this a one-time payment?
The listed price is a one-time payment for the paid file. Download access and updates follow the current Gumroad product terms.