Generador de Tokens de Diseño
Genera escalas de color (50-950), tokens semánticos y preview de componentes desde tu paleta
Escalas de Color(clic para copiar)
Tokens Semánticos
Preview de Componentes
En VivoEsta tarjeta usa tus tokens de superficie, texto y borde.
Cómo funciona
El Generador de Tokens de Diseño transforma una paleta de colores simple en un sistema de diseño completo listo para producción. Asigna roles semánticos a tus colores y obtén automáticamente escalas, tokens y código exportable.
¿Cómo funciona?
1. Elige tus colores base
Asigna 6 roles semánticos: Primary (marca/CTAs), Secondary (acentos secundarios), Accent (destacados), Background (fondo de página), Surface (tarjetas/secciones) y Text (tipografía). Puedes empezar con un preset, generar una paleta aleatoria o ajustar cada color manualmente.
2. Escalas automáticas (50-950)
Para cada color base (Primary, Secondary, Accent) se genera una escala de 11 pasos similar a Tailwind CSS. Los tonos claros (50-400) se mezclan con blanco y los oscuros (600-950) se oscurecen añadiendo saturación. El paso 500 es siempre tu color original. También se genera una escala neutral/gris derivada de tu color de texto.
3. Tokens semánticos
Se auto-generan tokens para Success, Error, Warning e Info, cada uno con variantes light, base y dark. La saturación se ajusta automáticamente para coincidir con la intensidad de tu paleta.
4. Preview de componentes
Ve en tiempo real cómo quedan tus tokens aplicados a componentes UI reales: botones, formularios, alertas, tarjetas, badges, notificaciones y barras de progreso.
5. Exportar
Exporta en 4 formatos: CSS Custom Properties, config Tailwind CSS, variables SCSS o JSON tokens (compatible con Style Dictionary y Figma Tokens).
💡 Ejemplos de uso prácticos
Caso 1: Diseño de un Design System corporativo
Tu marca usa azul #3B82F6 como primary. Necesitas toda la escala para botones, hover states, backgrounds sutiles, etc.
→ Introduce el color como Primary y obtén 11 tonos (del #EFF6FF claro al #1E3A5F oscuro)
→ Exporta como Tailwind config y pégalo directamente en tu proyecto
Caso 2: Implementar modo oscuro
Tienes una paleta clara y necesitas validar cómo se ve en dark mode.
→ Haz clic en "Invertir" para intercambiar fondo y texto automáticamente
→ El preview de componentes muestra al instante cómo quedan las alertas, badges y tarjetas en modo oscuro
Caso 3: Tokens para Figma / Style Dictionary
Necesitas entregar tokens de color al equipo de diseño en formato JSON estándar.
→ Configura tu paleta → Exporta como JSON → El formato es compatible con Style Dictionary y Figma Tokens
→ Incluye escalas completas + tokens semánticos con variantes light/base/dark