← Volver al listado de tecnologías ← Índice de Impeccable

Estructura visual: layout, typeset, colorize

Por: Artiko
impeccablelayouttypesetcolorizevisual

Estructura visual: layout, typeset, colorize

En el capítulo 7 vimos los comandos de refinamiento (bolder, quieter, distill, harden) que ajustan la intensidad y la solidez de una interfaz ya construida. Ahora bajamos un nivel más: dejamos de hablar de cuánto grita o susurra un diseño y empezamos a trabajar los tres materiales fundamentales con los que se construye cualquier interfaz visual. El espacio, la letra y el color. Impeccable dedica un comando especializado a cada uno: layout, typeset y colorize.

La idea de fondo es la misma que recorre todo el curso. Un agente de coding, cuando se le deja a su aire, produce lo que Paul Bakaus llama AI slop: layouts hechos de tarjetas idénticas, Inter para absolutamente todo y degradados violeta-azul por defecto. Estos tres comandos son la herramienta deliberada para sustituir esos automatismos por decisiones intencionales, y lo hacen materializando lo que escribiste en tu DESIGN.md (que vimos en el capítulo 3) y corrigiendo exactamente las reglas que dispara el detector (el capítulo 4).

Por qué tres comandos y no uno

Podrías preguntarte por qué Impeccable separa espacio, tipografía y color en tres comandos distintos en lugar de un único “embellecedor”. La respuesta es la misma que defendería cualquier director de arte: cada uno de estos materiales tiene su propio sistema de reglas, su propia escala y sus propios anti-patrones. Mezclarlos en una sola pasada produce decisiones tibias. Trabajarlos por separado, en cambio, obliga al agente a razonar dentro de un único dominio cada vez, con criterios concretos y verificables.

flowchart TD
    D[DESIGN.md<br/>contexto de diseño] --> L[layout<br/>espacio y composición]
    D --> T[typeset<br/>tipografía]
    D --> C[colorize<br/>color y tintes]
    L --> R{Detector<br/>44 reglas}
    T --> R
    C --> R
    R -->|verifica| OK[Interfaz coherente]
    P[palette.mjs] -.alimenta.-> C

Los tres comparten una estructura común. Cada uno define un target (su contexto de aplicación), diagnostica un conjunto de debilidades típicas, prohíbe explícitamente una lista de anti-patrones y termina con una checklist de verificación. Y los tres exponen parámetros para el modo live, que veremos en el capítulo 11. Vamos uno por uno.

layout: el espacio como material de diseño

El comando layout trata el espacio como un material primario, no como un relleno que se decide al final. Su premisa es que la mayoría de las interfaces generadas por IA no tienen un problema de color ni de fuente, sino de composición. Todo está a la misma distancia de todo, nada agrupa lo que va junto y la jerarquía es plana.

Las cinco debilidades que diagnostica

layout busca cinco categorías de problema espacial:

  1. Espaciado errático: valores arbitrarios fuera de escala, padding uniforme en todas partes y ausencia de agrupación jerárquica.
  2. Jerarquía débil: no se entiende qué es importante, aunque los colores y las fuentes ya estén pulidos.
  3. Monotonía de grid: tarjetas idénticas repetidas hasta el infinito (el patrón icono + título + texto clonado).
  4. Falta de ritmo: no hay contraste entre espacios apretados y espacios generosos.
  5. Densidad inadecuada: el layout está demasiado comprimido o desperdiciadamente vacío para el tipo de contenido.

Anti-patrones que evita

Aquí está el corazón del comando. layout tiene prohibido, de forma explícita, hacer lo siguiente:

Estos anti-patrones no son caprichos: son precisamente los que el detector señala. Cuando el detector marca un card-within-card o un padding inconsistente, layout es el comando que lo resuelve.

El sistema de espaciado

La estrategia de layout parte de una escala de 4 puntos: 4, 8, 12, 16, 24, 32, 48, 64 y 96 píxeles, expuesta mediante tokens semánticos del estilo --space-xs hasta --space-xl. Además prefiere gap por encima de los márgenes, porque elimina los problemas de colapso de márgenes.

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
}

.card-list {
  display: grid;
  gap: var(--space-md); /* gap, no margin */
}

Para la composición, layout distingue herramientas según la dimensión:

La jerarquía, según el comando, se construye combinando dos o tres dimensiones a la vez: tamaño, peso, espacio, color y posición. Y subraya una idea poderosa: el espacio por sí solo puede bastar. Un whitespace generoso alrededor de un elemento ya atrae la mirada sin necesidad de nada más.

Ejemplo de invocación

/impeccable layout dashboard

Sobre un dashboard, layout revisaría el grid, agruparía las métricas relacionadas, introduciría ritmo entre secciones densas y zonas de respiro, y eliminaría cualquier anidamiento de tarjetas.

Cómo verificar el resultado

El comando se autoevalúa con una checklist concreta:

typeset: el sistema tipográfico

typeset sistematiza las mejoras tipográficas sustituyendo los defaults genéricos por una tipografía intencional, alineada con la marca, que mejora la legibilidad y la jerarquía. Es el antídoto directo contra el reflejo de “Inter para todo”.

El target: brand frente a product

typeset adapta su estrategia según el contexto:

Un detalle importante: el cuerpo de texto siempre se fija, incluso en páginas de marketing. Solo los titulares fluyen.

Las cinco áreas de evaluación

  1. Elección de fuentes: rechazar los defaults invisibles (Inter, Roboto, Arial), asegurar alineación con la marca y limitarse a un máximo de 2-3 familias.
  2. Jerarquía: distinción visual instantánea; evitar tamaños que difieran solo 1 o 2 píxeles entre sí.
  3. Tamaño y escala: una escala de tipo consistente, con el cuerpo nunca por debajo de 16px.
  4. Legibilidad: longitud de línea de 45 a 75 caracteres y un line-height ajustado a cada contexto.
  5. Consistencia: el mismo estilo para los mismos elementos en todo el producto.

Reglas exactas

Pesos. Cargar y usar solo 3-4 pesos en total (Regular, Medium, Semibold, Bold). Nunca distinguir mediante “Medium frente a Regular”: el contraste es demasiado sutil para leerse como jerarquía.

Interlineado. De 1.1 a 1.2 para titulares; de 1.5 a 1.7 para el cuerpo. En texto claro sobre fondo oscuro, compensar subiendo el line-height entre 0.05 y 0.1 y añadiendo un letter-spacing de 0.01 a 0.02em.

Medida (measure). Usar max-width: 65ch para los contenedores de texto, y nunca poner el cuerpo por debajo de 16px / 1rem.

.prose {
  max-width: 65ch;      /* medida legible */
  font-size: 1rem;      /* nunca < 16px */
  line-height: 1.6;     /* cuerpo cómodo */
}

.heading {
  font-weight: 600;     /* Semibold, peso real de jerarquía */
  line-height: 1.15;
}

Actos tipográficos prohibidos

typeset no puede:

Sobre la carga de fuentes web, recomienda font-display: swap, ajustar las métricas del fallback con size-adjust, ascent-override y descent-override, precargar solo el peso crítico (la fuente del cuerpo en Regular) y emplear fuentes variables cuando se necesitan tres o más pesos. El comando referencia internamente brand.md para el procedimiento de selección de fuentes y su lista de rechazo por reflejo, y comparte sección con bolder.md.

Ejemplo de invocación

/impeccable typeset landing

Verificación

La checklist de typeset comprueba que la jerarquía se identifique al instante, que el cuerpo sea cómodo en pasajes largos, que los elementos del mismo rol estén estilizados igual, que la tipografía refleje la personalidad de la marca, que las fuentes web carguen sin layout shift y que el texto cumpla el contraste WCAG y sea ampliable al 200%.

colorize: color y tintes

colorize guía la introducción estratégica de color, sustituyendo diseños tímidos en escala de grises por paletas con propósito que refuerzan la jerarquía, el significado y el interés sin abrumar. Su lema lo resume todo: “el color estratégico le gana al vómito de arcoíris”. Cada color debe servir a un propósito semántico.

La regla 60-30-10 y la relación con palette.mjs

El comando aplica la regla 60-30-10: un 60% de neutros, un 30% de color secundario y un 10% de acento. Aquí conviene conectar con el detector: entre sus módulos de reglas está palette.mjs, que es justamente el que verifica de forma determinista las violaciones de color (negro puro, gris puro, degradados típicos de IA, contraste insuficiente). colorize es el comando que produce y corrige; palette.mjs es el juez que comprueba. Trabajan en pareja: lo que palette.mjs marca como infracción, colorize lo resuelve generando una paleta correcta.

Reglas absolutas

colorize nunca debe:

Espacio de color y construcción de paleta

Una de las decisiones técnicas más importantes: colorize usa OKLCH, no HSL, porque es perceptualmente uniforme. La estructura recomendada es:

La recomendación es saltarse colores secundarios y terciarios salvo necesidad real: un único acento basta para la mayoría de productos. El acento se reserva para la acción primaria, la selección actual o los indicadores de estado, nunca para la decoración.

:root {
  /* Neutros tintados hacia la marca, no gris puro */
  --neutral-900: oklch(0.22 0.01 265);
  --neutral-500: oklch(0.55 0.008 265);
  --neutral-100: oklch(0.96 0.005 265);
  /* Primario con croma real */
  --primary: oklch(0.62 0.18 265);
}

Fíjate en el detalle: ningún neutro es #000000 ni #808080. Todos llevan un croma mínimo orientado al mismo tono que el primario. Eso es lo que separa una paleta intencional de un gris de cajón.

Ejemplo de invocación

/impeccable colorize app

Verificación y herramientas

colorize se apoya en herramientas reales como el WebAIM Contrast Checker, la emulación de deficiencias de visión de DevTools y Polypane para probar accesibilidad en tiempo real. Verifica el contraste WCAG (4.5:1 para texto, 3:1 para elementos de interfaz) y vigila combinaciones peligrosas como gris claro sobre blanco, rojo/verde, amarillo sobre blanco o texto fino y claro sobre imágenes.

Tabla comparativa

Aspectolayouttypesetcolorize
Material que trabajaEspacio y composiciónTipografíaColor y tintes
Target principalDensidad y estructuraBrand (clamp) / Product (rem)Neutros + 1 acento
Sistema baseEscala 4pt (4-96px)Escala 1.125-1.2 o ≥1.25OKLCH, regla 60-30-10
Anti-patrón estrellaCard-within-cardInter para todoDegradado violeta-azul
Regla clavegap sobre marginCuerpo ≥ 16px en remNeutros tintados, nunca negro/gris puro
Param. de livedensity, structurescale, pairingcolor-amount
VerificaciónTest del entrecerrarJerarquía instantáneaContraste WCAG 4.5:1 / 3:1

Cómo encajan con DESIGN.md y el detector

Estos tres comandos no inventan criterios desde cero: ejecutan lo que ya decidiste. Tu DESIGN.md declara la personalidad de marca, la familia tipográfica preferida, el tono del color y la densidad objetivo. layout, typeset y colorize son los brazos ejecutores que convierten esas decisiones en CSS concreto.

Y cierran el ciclo con el detector. Las 44 reglas deterministas del capítulo 4 son el examen; estos comandos son el estudio dirigido para aprobarlo. Cuando ejecutas el detector sobre tu código:

npx impeccable detect src/

cada infracción de espacio, tipografía o color tiene un comando correspondiente que la repara. Padding inconsistente o tarjetas anidadas, layout. Tamaños a 1px de distancia o Inter omnipresente, typeset. Negro puro, gris muerto o degradado de IA, colorize (verificado por palette.mjs). Es un bucle cerrado: el detector marca, el comando corrige y el detector vuelve a verificar.

Resumen

layout, typeset y colorize son los tres comandos que materializan los pilares visuales de un diseño. layout trata el espacio como material primario con una escala de 4pt, prefiere gap sobre márgenes y prohíbe el card-within-card y el padding uniforme. typeset impone un sistema tipográfico con escala intencional, 2-3 familias, 3-4 pesos, cuerpo mínimo de 16px en rem y una medida de 65ch, desterrando el “Inter para todo”. colorize construye paletas en OKLCH con neutros tintados hacia la marca, un único acento y la regla 60-30-10, evitando el negro puro, el gris muerto y los degradados violeta-azul del AI slop; su trabajo lo verifica palette.mjs en el detector. Los tres se invocan como /impeccable <comando> <target>, ejecutan lo escrito en DESIGN.md y cierran el bucle con las 44 reglas deterministas del detector.

Siguiente: Movimiento y deleite: animate, delight, overdrive, onboard

← Volver al listado de tecnologías ← Índice de Impeccable