Ilustrações de Cartões
A Ideia
Um cartão mostra a coisa em si, simplificada ao que o leitor precisa, enquadrada com intenção, e cada anotação tem um motivo. Um fragmento de interface ou documento, plano, grande, sobre um fundo cinza claro; ao redor, algumas notas técnicas em monospace ligadas por uma linha fina. Deve-se entender o recurso sem ler o texto do cartão.
O Vocabulário
Cada cena é composta de três a cinco destas peças, nunca todas.
Referências visuais, a olhar antes de desenhar uma cena:
references/vocabulaire.png(e.svg): as doze peças, cada uma isolada em seu painel, com sua regra em uma linha.references/exemplo-noir-et-blanc.pngereferences/exemplo-accent-couleur.png(e.svg): a mesma cena completa nos dois modos. Apenas a cor do elemento destacado muda.references/accent-palette.pnge.json: as dez matizes da paleta, com suas versões suaves.
| Peça | O que é |
|---|---|
| Fundo | Painel cinza claro (#F3F3F2 a #F5F5F4), cantos 16 a 24 px, formato 13:10. Sem sombra ou borda marcada. |
| Cena (stage) | Retângulo pontilhado gray-300, com uma grade muito pálida no interior: a área de trabalho. Opcional, para dizer "isto é um espaço de design". |
| Janela | Janela branca, barra de título com três pontos cinza, linha gray-200, sombra suave. Ela extrapola a cena ou o painel (cortada na direita ou embaixo): o enquadramento é intencional. Barra de endereço se a URL importa. |
| Esqueleto | O texto secundário em barras cinza arredondadas (gray-200), as linhas de lista separadas por uma linha, os avatares em discos cinza. Apenas o elemento que carrega significado tem palavras reais ("Share", "Publish"). |
| Pilha | Vários cartões empilhados com um leve deslocamento vertical, apenas o topo de cada um visível (um nome de arquivo, um título); o de cima está completo com título e parágrafo. Para mostrar um conjunto de documentos. |
| Popover | Pequeno cartão branco que sobrepõe a borda da janela (um montante, uma fileira de caixas), sombra mais marcada que a janela: está por cima. |
| Anotação | Texto monospace gray-500, 11 a 13 px, posicionado fora do objeto: um atributo (data-target="share"), um estado ({ open: false } em um pequeno cartão), um caminho de arquivo, uma decisão. Nomeia o que a imagem mostra, em linguagem de oficina. |
| Linha de chamada | Linha fina gray-400 que parte da anotação e termina no elemento com um ponto sólido de 4 px. Reta, ou uma única curva suave. Uma seta tracejada para um retorno. |
| Linha do tempo de etapas | Linha horizontal com círculos vazios e um rótulo monospace abaixo de cada um; a etapa atual está preenchida. Para situar o recurso em um processo. |
| Contato | Grade de pequenas miniaturas numeradas (01 a 06), apenas uma selecionada, ligada por uma linha à sua versão ampliada. Para uma série da qual se observa um elemento. |
| Cota | Uma medida desenhada (linha, dois batentes, "4px"), como em um mockup anotado. Para um detalhe de precisão. |
| Pastilhas numeradas | Discos sólidos 1, 2, 3 colocados sobre os elementos, na ordem de leitura. Com um cursor se uma ação está em andamento. |
Dois Modos
A skill é executada em um dos dois modos, que mudam apenas uma coisa: a cor do único elemento destacado. Fundo, superfícies, esqueleto, anotações, composição e gestos permanecem idênticos.
| Modo | Como chamar | Elemento destacado |
|---|---|---|
| Preto e branco | /card-illustrations preto e branco, "em preto e branco", "monocromático", "sem cor" | tinta gray-900 sólida (texto branco sobre ela) |
| Destaque colorido | /card-illustrations destaque, "com cor de destaque", "colorido" | uma matiz da paleta, extraída de um identificador estável |
Escolha do modo: o argumento ou as palavras da solicitação primeiro. Sem indicação, retomar o modo das cenas já online para que a biblioteca permaneça homogênea; se não houver nenhuma, preto e branco. Nunca misturar os dois modos na mesma grade: mudar de modo é refazer todos os cartões visíveis juntos. No código, o modo é uma única constante (ACCENT_MODE: 'ink' | 'color') lida por todas as cenas, para alternar a biblioteca em uma linha.
O Destaque: Cinza, e um Toque de Cor (Modo Destaque Colorido)
A cena permanece cinza (fundo, superfícies brancas, esqueleto, anotações). Apenas um elemento carrega uma cor de destaque: a etapa atual, a miniatura escolhida, a cota, a caixa marcada, o botão principal, o elemento retido. Todo o resto é cinza ou tinta. O destaque reservado às ilustrações deixa a interface do site (botões, links, navegação) monocromática.
A paleta tem dez matizes com a mesma luminosidade e a mesma saturação em OKLCH (L 0,655, C 0,11), apenas a matiz muda. Esta é a configuração mais viva que mantém as dez cores no gamut sRGB e com no mínimo 3:1 sobre branco (limiar dos elementos gráficos). Cada matiz tem uma versão suave (L 0,95, C 0,03) para uma pastilha colorida ou um fundo leve. Amostra em references/accent-palette.png, valores em references/accent-palette.json.
| Nome | Destaque | Suave |
|---|---|---|
| vermelho | #CB756E | #FFE7E4 |
| coral | #C87A56 | #FFE9DE |
| laranja | #BF8242 | #FDEBDA |
| âmbar | #AF8B37 | #F8EDD8 |
| verde | #63A266 | #E3F4E2 |
| esmeralda | #42A680 | #DDF5E9 |
| turquesa | #0DA5A5 | #D8F5F5 |
| céu | #389DC7 | #DBF3FF |
| azul | #6B90D4 | #E4EFFF |
| violeta | #9284CE | #EEEBFF |
Regras de uso:
- Uma matiz por cena, escolhida ao acaso mas de forma estável: uma função
accentFor(id)extrai a matiz do identificador do recurso (um hash simples), para obter a mesma cor no servidor e no navegador, sem erro de hidratação. Não usarMath.random(). - Sobre um destaque sólido, o texto é branco e em negrito (11 px no mínimo); sobre um fundo suave, o texto assume o destaque sólido.
- Nunca duas matizes na mesma cena, nunca degradê entre matizes. Uma barra de disponibilidade verde e laranja continua sendo uma exceção onde a cor é o assunto.
- Tom de referência: uma placa de elementos de interface onde a aba ativa é colorida, o botão principal é sólido, a caixa marcada é colorida e o cursor tem uma matiz viva sobre um fundo quadriculado cinza, em tom mais suave.
Adicionar uma matiz: calculá-la com L 0,655 e C 0,11, verificar se está no gamut sRGB e com 3:1 sobre branco, então colocá-la entre suas vizinhas de matiz.
Composição
- O objeto à esquerda ou ao centro, as anotações à direita ou abaixo, nunca sobre o conteúdo.
- O enquadramento corta: uma janela que extrapola o painel parece maior e mais real do que uma janela inteira reduzida.
- Margens do painel generosas (8 a 10%); três a cinco peças; se houver dúvida em adicionar uma, não adicionar.
- Legível no tamanho do cartão (cerca de 350 px de largura): texto 11 px mínimo, monospace incluso.
- Fontes: uma fonte sem serifa para a interface simulada, monospace do sistema (
ui-monospace,font-mono) apenas para anotações.
O Que a Cena Deve Mostrar
O fragmento diz o que o recurso é e para que serve, sem mostrar sua mecânica interna. Um workshop de inteligência coletiva se mostra pelo seu quadro (post-its de várias mãos, o post-it retido com seus votos), em vez de seu cronograma; uma checklist pelas suas caixas marcadas; um ritual pelas suas duas reuniões na semana. Se o fragmento precisa de explicação para ser entendido, é o fragmento errado. As anotações precisam, não compensam uma imagem imprecisa.
Ao Passar o Mouse
Apenas um gesto por cena, que diz o que o documento faz: uma caixa é marcada, a pastilha seguinte é preenchida, o popover levanta, a miniatura seguinte é selecionada. Transform e opacidade, 300 ms, uma curva de aceleração suave, apenas dispositivos apontadores, no máximo alguns pixels.
Implementação (React e Tailwind)
- Um componente por painel (o fundo) e um componente por cena, escolhido pelo identificador do recurso.
- Alguns blocos compartilhados por todas as cenas: uma superfície (cartão branco, sombra suave), uma pastilha, uma barra de esqueleto, as constantes de gesto ao passar o mouse (duração, deslocamento).
- A mesma função de renderização alimenta a grade, os cartões "para continuar" e os carrosséis.
- A página de detalhes de um recurso pode abrir na coisa em si (diagrama de um modelo, slides de um deck) em vez de sua miniatura.
Adicionar um Recurso
- Uma frase: qual fragmento representa o recurso, qual é o único elemento que recebe a cor, qual anotação (no máximo duas) o nomeia.
- Escolher três a cinco peças do vocabulário. Escrever a cena em HTML e Tailwind, posicionada em porcentagens do painel, as palavras em um dicionário por idioma (espaços inseparáveis em português).
- Adicioná-la ao seletor de cenas, com seu gesto ao passar o mouse.
- Capturar a grade em 1280 px em 2x e em 390 px, em repouso e ao passar o mouse. Verificar: legível no tamanho do cartão, apenas uma cor em apenas um elemento, anotações fora do objeto, nada cortado sem intenção.
O Que Foi Descartado
- Folhas isométricas "papel": parecem material físico.
- Miniaturas de um diagrama reduzido: texto ilegível, muitos elementos.
- Cronograma para um workshop: mostra a mecânica, não a coisa.
- Gradientes, múltiplas cores em uma cena, cores saturadas fora da paleta.