BUREAU / Documentación / Lenguaje visual

Lenguaje visual

Pantone, OKLCH, tipografía, motion y prueba tecnológica.

Para cada concepto, registra decisiones de UI, UX e innovación y un plan de evidencias usando skill/references/16-review-circuit.md. Son interpretaciones de BUREAU de las definiciones de CSS Design Awards, no subcriterios oficiales ni una predicción de premios.

Fuentes de logos (15 colecciones y herramientas, con licencia y tamaño a 2026-10-27) y cómo usar marcas de terceros con permiso: skill/references/37-logo-sources.md. Plataformas, foundries y familias de fuentes abiertas (19, con licencia a 2026-10-27) y cómo verificar una fuente antes de publicarla: skill/references/38-open-fonts.md.

Fuentes de fotos y videos de stock (30, con licencia y estado a 2026-10-27) y cómo encontrar, licenciar y verificar un asset antes y después del build: skill/references/36-stock-media.md.

Bibliotecas de construcción de UI por capa (estilo, componentes, comportamiento), cómo elegirlas antes del build y verificarlas después: skill/references/35-build-libraries.md.

Las bibliotecas de color por fase (generación y extracción antes del build; comprobación de contraste, gamut y temas después) están en skill/references/34-color-tooling.md. Ninguna es dependencia de BUREAU.

Para un vocabulario práctico de estilos visuales y sus trade-offs, usa skill/references/32-visual-style-vocabulary.md. Elige una lente a partir del brief y prueba con contenido real; una etiqueta de estilo no demuestra usabilidad ni conversión.

BUREAU no tiene un estilo fijo. Tiene un método para construir un estilo que pertenezca al asunto.

1. Pantone como ancla, no como paleta

Pantone es un lenguaje estandarizado de color para impresión, textil y marca. No es un espacio de color CSS.

• PMS / Solid — tintas de impresión.
• TCX / TPG — textil.
• Pantone Connect — bibliotecas licenciadas.
• Hex/sRGB — aproximaciones de pantalla.

Usar Pantone para nombrar y anclar la paleta en el brief; implementar en OKLCH y verificar contraste. Nunca afirmar que un color de pantalla es Pantone. Para impresión, usar bibliotecas licenciadas y prueba física.

Color of the Year — referencia

Tabla completa (2000–2026) en skill/references/05-color-pantone.md. Los valores son aproximaciones de BUREAU, no conversiones oficiales.

Dirección 2026: Cloud Dancer como ground

:root{
  --ground: oklch(95.2% 0.008 85);
  --surface: oklch(97.5% 0.006 85);
  --ink: oklch(18% 0.012 70);
  --muted: oklch(52% 0.014 70);
  --line: oklch(30% 0.01 70 / .14);
  --accent: oklch(56% 0.19 32);      /* terracota */
  --accent-ink: oklch(97% 0.01 80);
  --signal: oklch(78% 0.16 92);
}

Cloud Dancer no es "blanco". Es material: papel, yeso, lino, luz difusa. Usar con una sección oscura dura y un accent saturado para evitar la monotonía.

2. Color como sistema

• 60/30/10 con intención: ground, ink/superficies, accent/signal.
• 5–7 roles semánticos, no 30 hex sueltos.
• OKLCH para escala perceptualmente uniforme.
• Contraste AA en todos los estados.
• Dark mode recalculado, no invertido.
• Degradado solo cuando representa luz, calor, profundidad o material. Nunca en texto.
• Datos con paleta colorblind-safe y rótulos; el color nunca solo.

Paletas de partida:

3. Tipografía

• Máximo 2 familias + 1 mono.
• Display con voz; cuerpo con legibilidad.
• Escala fluida con clamp, probada en 320–2560.
• Display: leading 0.9–0.98, tracking -0.02 a -0.04em.
• Cuerpo: 55–75ch, leading 1.55–1.7.
• Números tabulares en datos.
• Acentos PT/ES probados: ã, ç, é, ñ, ü.
• Fuentes self-hosted, subset, font-display: swap.

Pares que funcionan:

1. Bodoni Moda + Archivo + JetBrains Mono
2. Instrument Serif + Libre Franklin + IBM Plex Mono
3. Fraunces + Public Sans + Space Mono
4. Newsreader + Archivo + IBM Plex Mono
5. Syne + Archivo + Space Mono
6. Cormorant Garamond + Work Sans + JetBrains Mono

Evitar Inter + Space Grotesk como identidad completa.

4. Motion

Un carácter por proyecto:

Reglas:

• una secuencia de entrada;
• una narrativa de scroll;
• una firma de interacción;
• transform y opacity;
• reduced motion diseñado;
• 60 fps con CPU 4×;
• nada de scroll hijack.

5. Prueba tecnológica

Elegir una por proyecto:

La prueba sirve al argumento. Un shader en una panadería no es ambición; es confusión.

6. Firma

Un signature move es lo único que alguien le describiría a un amigo. Necesita ser:

• legible sin explicación;
• poseíble por la marca;
• repetible en otros viewports;
• performático;
• accesible.

Ejemplos de tipo, nunca de copia:

• producto que se arma en el scroll con piezas rotuladas;
• hero tipográfico que se comporta como una impresora;
• datos en vivo como escultura;
• video que se convierte en UI en el momento de la historia;
• navegación como mapa del argumento;
• sistema de color que cambia con la hora, dentro de un rango diseñado.

7. Biblioteca de referencia

Usar para calibrar, no para montar:

• land-book.com — estructura de landing;
• minimal.gallery — contención;
• godly.website — ambición;
• mobbin.com — flujos reales de app;
• refero.design — patrones de producto;
• 60fps.design — timing de motion;
• vibrant.design — UI e interacción;
• recent.design — radar diario;
• backgrounds.supply — material;
• footer.design — cierre;
• promptmotionsite.com — vocabulario de motion;
• april-zhu.com/colorfigures — objetos isométricos con corte;
• Font Awesome — fallback de iconos;
• Impeccable — detección y disciplina de artefactos.

Protocolo de extracción: impresión → estructura → oficio → comportamiento → principio transferible. Nunca abrir una referencia y programar de inmediato.

Lista completa y ética en skill/references/20-reference-library.md.

8. Linaje y mezcla

BUREAU nunca copia una sola fuente. Toda dirección es una mezcla de tres linajes documentados, cada uno dueño de un eje distinto, pasada por el tema hasta que ninguna fuente aislada pueda nombrarse.

Receta: dominante 50–60% (estructura) × contrapunto 25–35% (expresión, tirando en contra) × acento 10–20% (un comportamiento), más un ingrediente que solo el tema tiene. Escríbela en .bureau/comps/blend.md (Gate 1).

Las trece plantillas son ejemplos resueltos, cada una con un LINEAGE.md. También cuentan como fuentes:

Un proyecto creado desde una plantilla empieza como copia. Antes del Gate 2 debe estar en 0.35 o menos contra todas las plantillas:

node skill/scripts/divergence.mjs index.html --templates --out .bureau/evidence/divergence.json

Canon, reglas y pruebas de originalidad en skill/references/23-lineage-and-blend.md.

9. Pasadas de refinamiento

Entre el primer build y el QA, siete pasadas de la estructura al detalle. Una a la vez; nueva captura tras cada una.

Umbrales y evidencias en skill/references/24-refinement-passes.md.