Estudio de temasVariables CSS listas para exportar

Diseña tu sistema.

Ajusta cada token semántico, compara los modos claro y oscuro y exporta un tema de Volt UI listo para producción sin salir del navegador.

Editor

Fundamentos del tema

Configuración del temaPonle nombre, elige una paleta de partida y luego ajusta los detalles.
Partir de

Generar una paleta

Escalas OKLCH perceptuales con colores de texto verificados por contraste, para ambos modos a la vez.

Craft one in Palette Crafter ↗
Tokens de colorEdita las paletas clara y oscura de forma independiente.ClaroOscuro
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
Forma y texturaAjusta los tokens estructurales que comparten ambos modos.
Radius 6px
Border 1px
Focus ring 2px
Shadow 10%
CSS generadoPega esto en un preset de tema de Volt o en la hoja de estilos de tu app.
Cargando el editor…