Logotipo de Volt UI
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
FondoLienzo de la página#f7fbffTextoTexto principal#172938SuperficieTarjetas y paneles#f7fbffTexto de superficieTexto sobre superficies#172938AtenuadoRellenos suaves#eef6fbTexto atenuadoTexto secundario#647888BordeLíneas y contornos#d4e6efCampoBordes de formulario#d4e6efPrimarioAcción principal#1896d4Texto primarioTexto sobre primario#ffffffSecundarioAcción secundaria#32b7cfTexto secundarioTexto sobre secundario#ffffffÉxitoEstado positivo#2bb891Texto de éxitoTexto sobre éxito#ffffffAvisoEstado de precaución#d9b03dTexto de avisoTexto sobre aviso#172938ErrorEstado de error#d64c7aTexto de errorTexto sobre error#ffffffInfoEstado informativo#268ee8Texto de infoTexto sobre info#ffffffAnilloColor de foco#1896d4
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…