Generador de tokens de diseño
Cree tokens de color semántico, espaciamiento, radio y tipografía con una vista previa del componente en vivo. Exportación CSS propiedades personalizadas JSON, libre sin AI.
Tokens de diseño
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}El texto exportado sigue en inglés; tus datos se conservan tal como los escribiste.
No hay señalización. No hay créditos de inteligencia artificial. Esta herramienta monta su salida en su navegador.
De una idea a algo útil.
- 01
Establezca sus colores semánticos y valores de base.
- 02
Inspeccione la muestra en vivo y la escala de espaciamiento generada.
- 03
Copiado CSS variables o exportar el emparejado JSON valores.
Un pequeño contexto.
Las fichas semánticas dan un nombre a las decisiones de diseño repetidas. Esta herramienta construye una paleta compacta y escala de espaciamiento de sus opciones. CSS y JSON las exportaciones comparten los mismos valores. El JSON es un simple documento token de valor clave, no una reclamación de cumplimiento de un estándar de intercambio de fichas.
Buenas preguntas.
¿Puedo usar esto con mi tema existente?
Sí. Mapear o renombrar los tokens exportados a las convenciones de su tema en lugar de reemplazar un sistema establecido ciegamente.
¿Esto crea temas ligeros y oscuros?
Exporta una paleta a la vez. Cree y descargue cada paleta por separado y revise el contraste en cada modo.