Design your system.
Tune every semantic token, compare light and dark modes, and export a production-ready Volt UI theme without leaving the browser.
Editor
Theme foundations
Start from
Generate a palette
Perceptual OKLCH scales with contrast-checked text colors, for both modes at once.
Background Page canvas
#f7fbff Foreground Main text
#172938 Surface Cards and panels
#f7fbff Surface text Text on surfaces
#172938 Muted Subtle fills
#eef6fb Muted text Secondary text
#647888 Border Lines and outlines
#d4e6ef Input Form borders
#d4e6ef Ring Focus color
#1896d4 Primary Main action
#1896d4 Primary text Text on primary
#ffffff Secondary Secondary action
#32b7cf Secondary text Text on secondary
#ffffff Success Positive state
#2bb891 Success text Text on success
#ffffff Warning Caution state
#d9b03d Warning text Text on warning
#172938 Error Error state
#d64c7a Error text Text on error
#ffffff Info Informational state
#268ee8 Info text Text on info
#ffffff Radius
6pxBorder
1pxFocus ring
2pxShadow
10%Loading editor...