Documentación de Scale Composer

Scale Composer deriva un sistema de diseño completo — escala tipográfica, rampas de color, espaciado, rejilla de maquetación y efectos de sistema — a partir de tres números: una base, una razón y un número de notas. Cambia cualquiera de los tres y todo lo que depende de ellos se recalcula en conjunto. Esta página explica la teoría y el razonamiento; el resto de la documentación recorre la herramienta vista por vista.

Un poco de teoría de escalas

Una escala modular es un conjunto fijo de valores donde cada valor es el anterior multiplicado por una razón constante:

size(i) = base × ratio^i

Con una base de 16 y una razón de 1,5, la escala recorre 16 · 24 · 36 · 54 … La idea es antigua — viene de la tipografía impresa y, antes de eso, de la música. Las razones mismas están tomadas de los intervalos musicales: 1,5 es una quinta justa (la razón de frecuencias 3:2), 1,333 una cuarta justa (4:3), 1,618 la sección áurea. Eso no es numerología — refleja cómo funciona la percepción. Juzgamos los tamaños (y los intervalos sonoros) proporcionalmente: el salto de 16 a 24 se siente como el salto de 24 a 36, porque ambos son ×1,5. Una escala construida sobre la multiplicación produce pasos que se sienten uniformes, cosa que los valores de píxeles elegidos a mano rara vez logran.

La fórmula pura tiene un defecto práctico: los huecos crecen demasiado rápido justo donde las interfaces necesitan precisión. Con base 16 y razón 1,333 no hay nada entre 16 y 21 — pero una UI real necesita constantemente un 18. Por eso Scale Composer subdivide cada salto de razón en notas, igual que una octava se divide en tonos:

size(i) = base × ratio^(i/notes)

Con dos notas por intervalo, los tamaños intermedios siguen viviendo en la escala — son semitonos, no excepciones — así que la consistencia proporcional se conserva mientras la escala se vuelve lo bastante densa como para usarse de verdad. Este es el control central de la herramienta: razón preajustada o personalizada, número de notas y base, siempre visible en la barra superior.

Las cuatro vistas: Color, Tipografía, Rejilla y Sistema

Por qué una sola escala para todo

La mayoría de los sistemas de diseño se ensamblan a partir de herramientas separadas — una calculadora de escala tipográfica, un generador de paletas, el espaciado por convención. Cada parte puede ser razonable por separado y aun así el conjunto se siente inconexo, porque nada ata unas partes con otras.

La premisa de Scale Composer es que las relaciones son el sistema. Los mismos tres números impulsan:

  • Tipografía — cada tamaño de fuente es un paso de la escala; los interlineados descansan sobre una rejilla de línea base derivada de la base (línea base = base ÷ 2).
  • Color — la razón moldea la curva de luminosidad de cada rampa, de modo que la distancia entre los pasos de color sigue la misma progresión que la distancia entre los tamaños tipográficos.
  • Espaciado y rejilla — los márgenes, los medianiles y los pasos de espaciado son valores de la escala; empujar un medianil aterriza en el siguiente valor de la escala, nunca en un píxel arbitrario.
  • Efectos de sistema — los radios de esquina, los grosores de borde, la elevación y las duraciones de movimiento se derivan de la misma base y razón (una duración es base × razón^n milisegundos).

La coherencia deja de ser una cuestión de disciplina y se convierte en una propiedad del sistema: no es que alguien se acordara de alinear las partes — es que no pueden separarse.

Semántica derivada, no colores elegidos

No eliges diecisiete colores; eliges uno (o unos pocos) y el resto se deriva. A partir de cada color semilla la herramienta genera una rampa OKLCH completa, y de las rampas deriva roles semánticos — texto sobre fondo, texto atenuado, bordes, estados de botón, anillo de foco, los cuatro colores funcionales — con los mínimos de contraste WCAG aplicados y APCA mostrado junto a ellos. El modo oscuro se genera como su propia derivación con su propia curva de luminosidad, no como una inversión del tema claro. La documentación de color cubre la mecánica; la teoría vive en la sección de aprendizaje.

Cómo está construida la herramienta, y por qué

Dos decisiones dan forma a todo lo demás:

La escala es lo primario. Los controles de la escala están en la barra superior, por encima de las cuatro vistas, porque no son un ajuste de tipografía — son el ajuste. Todo lo demás edita interpretaciones de la escala.

El cliente presenta; el servidor calcula. Cada rampa, cada derivación semántica, cada exportación se calcula en el servidor a partir del estado de tu sesión. Tu navegador recibe valores ya terminados. Esto mantiene una única fuente de verdad para las matemáticas — los números en la herramienta, en las exportaciones y en las capturas de la documentación nunca pueden discrepar, porque todos provienen del mismo motor. Tu trabajo nunca sale de tu navegador salvo como solicitudes de cálculo: las sesiones se guardan y se comparten como enlaces, con todo el estado codificado en la propia URL (ver compartir).

Una convención que conviene conocer desde el principio: casi todo se ajusta por pasos con las teclas de flecha, y avanzar por pasos siempre se mueve a lo largo de la escala. Selecciona un bloque de texto y pulsa ↑/↓ — el tamaño se mueve al siguiente valor de la escala. Selecciona un medianil — lo mismo. La referencia de teclado está bajo el botón ? en la barra superior.

Adónde ir a continuación