One scale. A whole design system.
Elige una base, una razón y en cuántas notas dividirla. Scale Composer deriva el resto — tamaños de fuente, rampas de color, espaciado y rejilla — de esos mismos tres números, para que todo pertenezca al conjunto.
Abrir el compositor — gratis, sin registro Ver cómo funciona
Una razón. Cada panel responde a la vez — esa es toda la idea.
Tres herramientas, tres lógicas, un sistema que no encaja
Una escala tipográfica de una calculadora, una paleta de otra, el espaciado a ojo. Cada elección puede ser razonable por sí sola y aun así el conjunto se desvía — porque nada ata las partes entre sí. Cuando los tamaños, las rampas y los espacios vienen de una sola escala, la coherencia deja de ser cuestión de disciplina y se vuelve una propiedad del sistema.
Tres vistas, una escala debajo
-
Color
Parte de un color de marca y obtén rampas OKLCH completas — marca, neutros matizados y los cuatro colores funcionales — con roles semánticos y pisos WCAG derivados automáticamente.
Prueba una rampa en vivo ↗ -
Tipografía
Cada tamaño de fuente sale de la escala, los interlineados se apoyan en la rejilla de línea base, y el espaciado entre elementos usa los mismos pasos — un único ritmo vertical de principio a fin.
Prueba una escala en vivo ↗ -
Rejilla
Breakpoints, columnas, medianiles y márgenes recorren la misma escala. Ajusta un medianil con las flechas y aterriza en un valor de la escala, nunca en un píxel arbitrario.
Prueba una rejilla en vivo ↗
Análisis a fondo: escalas de color · escala tipográfica · rejillas de maquetación
No eliges 17 colores. Eliges uno — el resto se deriva.
Texto sobre fondo, texto atenuado, bordes, estados de botón, anillos de foco, los cuatro colores funcionales: todos roles con nombre, derivados de tu semilla con pisos de contraste WCAG aplicados y APCA mostrado en paralelo. El modo oscuro se genera como su propia derivación — su propia curva de luminosidad, no una inversión. Cómo funciona la matemática del contraste · por qué el modo oscuro es una derivación.
Una sesión, todos los formatos que tu stack lee
Los mismos tokens salen de la herramienta como cualquiera de estos — generados, completos y consistentes entre sí:
CSS custom propertiesTailwind v4 @themeTailwind v3 configshadcn/ui themeFigma VariablesGrid CSS
Más sobre la capa de tokens: guía de design tokens
La teoría detrás de la herramienta, en 152 guías
escala tipográfica
Qué es una escala tipográfica, cómo elegir una proporción y cómo una sola escala puede regir todo tu sistema de diseño. Guías, ejemplos resueltos y una herramienta en vivo.
16 guíassistema de espaciado
Cómo funcionan los sistemas de espaciado: la rejilla de 8pt, los medios pasos de 4pt, las rejillas de línea base y las escalas de espaciado que crecen a partir de una sola fórmula. Guías y una herramienta en vivo.
14 guíasoklch
OKLCH explicado para diseñadores y desarrolladores — luminosidad, croma, tono, gamas y por qué las herramientas de color modernas generan paletas con él. Guías y una herramienta en vivo.
15 guíasescala de color
Cómo funcionan las escalas de color: los pasos 50–900, las rampas a partir de un color de marca, los roles semánticos y las paletas que pasan el contraste por construcción. Guías y una herramienta en vivo.
17 guíasratio de contraste wcag
Ratios de contraste WCAG, APCA, daltonismo y paletas accesibles: qué exigen las reglas, por qué existen y cómo cumplirlas por construcción.
13 guíasdesign tokens
Qué son los design tokens, el formato DTCG, las capas de nomenclatura, los temas y el camino de exportación de una fuente a CSS, Tailwind y Figma. Guías y una herramienta en vivo.
12 guíasrejilla de 12 columnas
Cómo funcionan las rejillas de maquetación: columnas 4/8/12, medianiles, márgenes, breakpoints y anchos de contenedor, construidos con CSS moderno en lugar de clases de framework.
9 guíastipografía fluida
Tipografía fluida con clamp(): tamaños que escalan con suavidad según el viewport en lugar de saltar en los breakpoints. Las matemáticas, las reglas de accesibilidad, las guías.
11 guíasdiseño de modo oscuro
Cómo funciona de verdad el modo oscuro — paletas derivadas en lugar de inversión, pérdida de croma, elevación, errores de contraste y tokens de tema. Guías y una herramienta en vivo.
11 guíascolores de marca
Cómo los colores de marca se convierten en sistemas que funcionan: elegir un color, sobrevivir a la accesibilidad, traducir de impresión a pantalla, rediseños y auditorías. Guías y una herramienta en vivo.
12 guíascombinación de fuentes
El lado artesanal de la tipografía web: combinar fuentes, serif frente a sans, longitud de línea, legibilidad y qué transmite un tipo de letra. Guías y una herramienta en vivo.
13 guíassistema de diseño con ia
Las herramientas de IA construyen interfaces e imágenes rápido, pero no sostienen un sistema. Cómo los design tokens y una paleta con nombres mantienen el resultado de la IA fiel a la marca: guías y una herramienta en vivo.
9 guíasPreguntas comunes
¿Es gratis?
Sí. La herramienta es gratis y no requiere cuenta. Tu trabajo vive en tu navegador, y una sesión se comparte copiando un enlace — el estado completo viaja en la URL.
¿Qué es un design token?
Una decisión de diseño con nombre — como color.brand.500 o spacing.md — almacenada como dato para que cada herramienta y plataforma lea el mismo valor. Nuestra guía de design tokens cubre la idea a fondo.
¿Qué formatos puedo exportar?
Propiedades personalizadas de CSS, Tailwind v4 @theme y configuración de Tailwind v3, un tema de shadcn/ui, Figma Variables, y CSS de rejilla con media queries — todo generado desde la misma sesión.
¿En qué se diferencia de un generador de paletas?
Un generador de paletas te da colores; esto deriva un sistema. Una sola escala da forma a las rampas de color, los tamaños de fuente, el espaciado y la rejilla a la vez, y los roles semánticos con pisos de contraste WCAG se derivan de tus elecciones en vez de elegirse a mano.
¿Funciona para el modo oscuro?
Sí — 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 guía de modo oscuro explica por qué esa distinción importa.
¿Puedo usarlo para una marca existente?
Sí. Parte la paleta con tu color de marca exacto y las rampas, neutros y roles semánticos se derivan a su alrededor — la escala se adapta a tu color, no al revés.