Acerca de Scale Composer

Scale Composer deriva un sistema de diseño completo — escala tipográfica, rampas de color, espaciado y rejilla — a partir de un tamaño base, una razón y un número de notas. Cambia la razón y todo se mueve a la vez, porque todo se calcula a partir de los mismos tres números.

¿Por qué una sola escala?

La mayoría de los sistemas de diseño se ensamblan con herramientas separadas: una calculadora de escala tipográfica aquí, un generador de paletas allá, el espaciado por convención. Cada pieza puede estar bien por sí sola y aun así no pertenecer a las demás. La premisa de esta herramienta es que las relaciones son el sistema — así que los números que espacian tus titulares deberían ser los números que dan forma a tus rampas de color y tu rejilla.

Cómo funciona

La escala es la musical: un valor base multiplicado por una razón constante, subdividido en notas como una octava se divide en tonos. La tipografía lee los tamaños directamente de la escala. Las rampas de color la usan para dar forma a sus curvas de luminosidad. El espaciado y la rejilla de maquetación toman sus pasos de la misma secuencia. Los roles semánticos de color — texto, bordes, botones, estados — se derivan automáticamente, con pisos de contraste WCAG verificados mientras trabajas, y el modo oscuro generado como su propia derivación en vez de una inversión.

Todo se exporta sin dependencia: propiedades personalizadas de CSS, Tailwind (v4 y v3), temas de shadcn/ui y Figma Variables. Las sesiones se comparten como enlaces — el estado completo va codificado en la URL, sin cuenta de por medio.

Este sitio funciona con su propia salida

Las páginas que estás leyendo tienen el estilo de la propia exportación de la herramienta: base 16, razón 1,333, dos notas. Los verdes, los neutros, los radios, las sombras y los tamaños de letra salen todos de un único archivo de tokens generado. Si el diseño se sostiene, ese es el argumento funcionando.

Quién la hace

Scale Composer se construye en Suecia, como parte de una cadena de herramientas mayor para construir marcas y sistemas de diseño — la herramienta es la cara pública de la maquinaria usada en trabajo real con clientes. Las guías de Aprender están escritas para ser útiles por sí solas; la herramienta está ahí cuando quieras probar las ideas con tus propios números.

Abrir Scale Composer — gratis, en el navegador, sin registro.