Crear paleta personalizada

Qué

El generador de paletas personalizadas de Converly es una herramienta basada en navegador para definir los tokens de diseño principales de un proyecto y documentarlos en un archivo Design.md. Está dirigida a diseñadores y desarrolladores front-end que necesitan un registro coherente y compartible de colores, tipografía, bordes, espaciado y botones, en lugar de decisiones de estilo ad hoc. La página lo presenta como un flujo de varios pasos: primero colores y radio de borde, con la tipografía de encabezados como paso siguiente.

Características

• Entradas de color primario, secundario y de fondo — establece los colores semilla a partir de los cuales se deriva el resto de la paleta.
• Control de radio de borde — un control deslizante con valores predefinidos (0, 4, 8, 12, 16 px, mostrado en 8 px) que establece el redondeo de esquinas como un token reutilizable.
• Documentación Design.md generada — la herramienta genera un archivo Markdown que cubre colores, tipografía, bordes, espaciado y botones, con escalas de color de 12 pasos y variables CSS.
• Compatibilidad con modo claro y oscuro — ambos modos se incluyen en el archivo generado en lugar de tratarse como una pasada manual separada.
• Enlace de exportación compartible — cualquiera que abra el enlace compartido puede exportar el mismo Design.md, manteniendo a los destinatarios en un conjunto de tokens idéntico.
• Catálogo de fuentes categorizado — las fuentes se agrupan como Sans Serif, Serif, Display, Monospace y Handwriting, con una etiqueta de origen mostrada por entrada (principalmente Google) y un paso dedicado para la tipografía de encabezados.

Consejos útiles

• Dado que el flujo es secuencial, define la paleta de colores y el radio antes de pasar a la tipografía; cambiar las semillas después puede requerir regenerar el archivo y volver a comprobar las referencias de tokens posteriores.
• Trata el Design.md generado como la única fuente de verdad para los tokens y confírmalo en el control de versiones para que los cambios de paleta sean revisables en lugar de silenciosos.
• Define el modo claro y el oscuro juntos durante la primera pasada; adaptar el modo oscuro después de la implementación suele producir decisiones de contraste inconsistentes.
• Verifica la disponibilidad real y la licencia de cada fuente según su origen listado antes de incorporarla a un stack de producción, ya que el catálogo etiqueta las entradas con una fuente pero no documenta los términos de uso.