BUREAU / Documentação / Linguagem visual

Linguagem visual

Pantone, OKLCH, tipografia, motion e prova tecnológica.

Para cada conceito, registre decisões de UI, UX e inovação e um plano de evidências usando skill/references/16-review-circuit.md. São interpretações da BUREAU das definições do CSS Design Awards, não subcritérios oficiais nem uma previsão de prêmio.

Fontes de logos (15 coleções e ferramentas, com licença e tamanho em 2026-10-27) e como usar marcas de terceiros com permissão: skill/references/37-logo-sources.md. Plataformas, foundries e famílias de fontes abertas (19, com licença em 2026-10-27) e como verificar uma fonte antes de publicá-la: skill/references/38-open-fonts.md.

Fontes de fotos e vídeos de banco de imagens (30, com licença e status em 2026-10-27) e como encontrar, licenciar e verificar um asset antes e depois do build: skill/references/36-stock-media.md.

Bibliotecas de construção de UI por camada (estilo, componentes, comportamento), como escolhê-las antes do build e verificá-las depois: skill/references/35-build-libraries.md.

Bibliotecas de cor por fase (geração e extração antes do build; checagem de contraste, gamut e temas depois dele) estão em skill/references/34-color-tooling.md. Nenhuma é dependência do BUREAU.

Para um vocabulário prático de estilos visuais e seus trade-offs, use skill/references/32-visual-style-vocabulary.md. Escolha uma lente a partir do briefing e teste com conteúdo real; um rótulo de estilo não comprova usabilidade ou conversão.

BUREAU não tem um estilo fixo. Tem um método para construir um estilo que pertença ao assunto.

1. Pantone como âncora, não como paleta

Pantone é uma linguagem padronizada de cor para impressão, têxtil e marca. Não é um espaço de cor CSS.

• PMS / Solid — tintas de impressão.
• TCX / TPG — têxtil.
• Pantone Connect — bibliotecas licenciadas.
• Hex/sRGB — aproximações de tela.

Use Pantone para nomear e ancorar a paleta no brief; implemente em OKLCH e verifique contraste. Nunca afirme que uma cor de tela é Pantone. Para impressão, use bibliotecas licenciadas e prova física.

Color of the Year — referência

Tabela completa (2000–2026) em skill/references/05-color-pantone.md. Valores são aproximações do BUREAU, não conversões oficiais.

Direção 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 não é "branco". É material: papel, gesso, linho, luz difusa. Use com uma seção escura dura e um accent saturado para evitar a monotonia.

2. Cor como sistema

• 60/30/10 com intenção: ground, ink/superfícies, accent/signal.
• 5–7 papéis semânticos, não 30 hex soltos.
• OKLCH para escala perceptualmente uniforme.
• Contraste AA em todos os estados.
• Dark mode recalculado, não invertido.
• Gradiente só quando representa luz, calor, profundidade ou material. Nunca em texto.
• Dados com paleta colorblind-safe e rótulos; cor nunca sozinha.

Paletas de partida:

3. Tipografia

• Máximo 2 famílias + 1 mono.
• Display com voz; corpo com legibilidade.
• Escala fluida com clamp, testada em 320–2560.
• Display: leading 0.9–0.98, tracking -0.02 a -0.04em.
• Corpo: 55–75ch, leading 1.55–1.7.
• Números tabulares em dados.
• Acentos PT/ES testados: ã, ç, é, ñ, ü.
• Fontes self-hosted, subset, font-display: swap.

Pares que funcionam:

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

Evite Inter + Space Grotesk como identidade inteira.

4. Motion

Um caráter por projeto:

Regras:

• uma sequência de entrada;
• uma narrativa de scroll;
• uma assinatura de interação;
• transform e opacity;
• reduced motion desenhado;
• 60 fps com CPU 4×;
• nada de scroll hijack.

5. Prova tecnológica

Escolha uma por projeto:

A prova serve ao argumento. Shader em padaria não é ambição; é confusão.

6. Assinatura

Um signature move é a única coisa que alguém descreveria a um amigo. Precisa ser:

• legível sem explicação;
• possuível pela marca;
• repetível em outros viewports;
• performático;
• acessível.

Exemplos de tipo, nunca de cópia:

• produto que se monta no scroll com peças rotuladas;
• hero tipográfico que se comporta como uma impressora;
• dados ao vivo como escultura;
• vídeo que vira UI no momento da história;
• navegação como mapa do argumento;
• sistema de cor que muda com a hora, dentro de uma faixa desenhada.

7. Biblioteca de referência

Use para calibrar, não para montar:

• land-book.com — estrutura de landing;
• minimal.gallery — contenção;
• godly.website — ambição;
• mobbin.com — fluxos reais de app;
• refero.design — padrões de produto;
• 60fps.design — timing de motion;
• vibrant.design — UI e interação;
• recent.design — radar diário;
• backgrounds.supply — material;
• footer.design — fechamento;
• promptmotionsite.com — vocabulário de motion;
• april-zhu.com/colorfigures — objetos isométricos com corte;
• Font Awesome — fallback de ícones;
• Impeccable — detecção e disciplina de artefatos.

Protocolo de extração: impressão → estrutura → ofício → comportamento → princípio transferível. Nunca abra uma referência e code imediatamente.

Lista completa e ética em skill/references/20-reference-library.md.

8. Linhagem e mescla

BUREAU nunca copia uma fonte única. Toda direção é uma mescla de três linhagens documentadas, cada uma dona de um eixo diferente, passada pelo assunto até que nenhuma fonte isolada possa ser nomeada.

Receita: dominante 50–60% (estrutura) × contraponto 25–35% (expressão, puxando contra) × acento 10–20% (um comportamento), mais um ingrediente que só o assunto tem. Escreva em .bureau/comps/blend.md (Gate 1).

Os treze templates são exemplos resolvidos, cada um com um LINEAGE.md. Eles também contam como fontes:

Um projeto criado a partir de um template começa como cópia. Antes do Gate 2 ele precisa estar em 0.35 ou menos contra todos os templates:

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

Cânone, regras e testes de originalidade em skill/references/23-lineage-and-blend.md.

9. Passes de refinamento

Entre o primeiro build e o QA, sete passes da estrutura ao detalhe. Um por vez; nova captura após cada um.

Limites e evidências em skill/references/24-refinement-passes.md.