Exportaciones

Una sola sesión deja la herramienta en todos los formatos que lee tu stack — y cada exportación cubre el espacio de nombres completo del destino, así nada recurre a un valor por defecto ajeno a la marca.

El menú de exportación

Exportaciones rápidas (portapapeles)

CSS por vista, un clic, directo al portapapeles:

  • Color — CSS — primitivas (--color-brand-500 …) y los roles semánticos derivados (--background, --foreground, --primary, --ring, tokens de superficie y de estado), con una guía de uso en la cabecera del archivo: qué tokens cubren el 90 % de los casos y las reglas de superficies frente a estado.
  • Tipografía — Tokens CSS — la escala como propiedades personalizadas, con interlineados sobre la rejilla de línea base; el modo fluido exporta expresiones clamp().
  • Tipografía — Styles CSS — estilos de elemento listos para usar (encabezados, cuerpo, entradilla, listas) construidos a partir de los tokens.
  • Rejilla — CSS — variables de contenedor y de columna por breakpoint, como media queries.

Archivos de sistema (descarga)

  • Tailwind v4 — un bloque @theme: colores, tamaños de fuente, espaciado, radios, sombras, easing — los espacios de nombres completos, incluida la sustitución de los ease-in/out/in-out de serie por las curvas de tu perfil de movimiento.
  • Tailwind v3 — theme.extend como archivo de configuración: primitivas de color anidadas con tokens semánticos literales, anchos de borde y una fusión DEFAULT donde el nombre de una intención colisiona con el de una paleta.
  • shadcn/ui — el contrato completo en el dialecto actual (:root + .dark + @theme inline): --accent teñido de marca, --secondary de la paleta secundaria, chart-1..5 tomados de los pasos más saturados de tus paletas y la familia sidebar. El formato HSL heredado se incluye como alternativa comentada.
  • Figma Variables — colecciones para color (modos claro/oscuro), tipografía y layout con un modo por breakpoint; valores de efecto como variables float más estilos de efecto de sombra.

Cada archivo se abre con una cabecera generada que nombra la herramienta, los parámetros de la escala y cualquier subconjunto excluido a propósito — una exportación que puedes auditar, no solo pegar.

El principio de exhaustividad

Una exportación que cubre la mitad de un espacio de nombres es una trampa: las utilidades que olvidaste heredan los valores por defecto del framework y el diseño se desvía justo donde nadie está mirando. La regla de Scale Composer es cubrir el espacio de nombres completo del destino — cada nombre de radio que Tailwind conoce, cada tamaño de sombra, cada palabra clave de easing — o declarar la exclusión en la cabecera del archivo. Lo que tu sistema no define, aun así debería decidirlo.

Las guías de design tokens cubren la nomenclatura, la estratificación y cómo los tokens viajan entre herramientas.