Estudo de caso
A identidade visual
O brandbook e o design system decidem o que a identidade é. Esta página conta o que aconteceu quando ela encontrou uma entrega real — uma página que tem de abrir na ligação de uma escola pública, sem build, sem CDN e sem servidor. É por isso que ela nomeia também as três coisas em que a especificação e o produto discordam, em vez de mostrar só as que combinam.
01 · O símbolo
uma peça, três aplicaçõesO símbolo é o botão de ação: círculo verde, cruz amarela vazada, núcleo azul. Soma, mira e direção na mesma forma, tudo em grade de 8 px — o mesmo módulo do pixel art. Ele tem um ficheiro, não dois: o trio é exclusivo do símbolo e não muda com o tema, porque ali o contraste que importa é entre as três cores, não com a página. Só o wordmark troca de cor com a superfície.
🔴 O símbolo está certo. A razão escrita não está.
O brandbook justifica o trio dizendo que as três matizes «ficam distantes entre si e distantes em
luminosidade — continuam distinguíveis em escala de cinza, em deuteranopia e em protanopia».
Medido: o verde #0B7A46 e o azul #2E5BFF dão
—. São a mesma luminosidade. Em cinza são o mesmo cinzento,
e a peça ao lado mostra isso.
A peça sobrevive — mas por outro motivo. Na geometria, o azul ocupa
x 26–38, y 26–38, e as duas barras amarelas cobrem y 12–52 e
x 12–52: o azul nunca encosta no verde. A cruz amarela separa-os
nos quatro lados, a — do verde e — do azul, ambas
acima do piso de 3:1 que a WCAG 1.4.11 pede para objeto gráfico. O que segura o símbolo em cinza e
em daltonismo é a cruz, não a distância de luminosidade entre verde e azul.
Consequência prática, e é a única que importa: nunca pôr verde e azul da marca em contacto direto — nem num gráfico, nem num ícone novo, nem num estado de interface. Fora do símbolo, o amarelo não estará lá para os separar.
02 · A cor
razões calculadas nesta páginaVerde, amarelo e azul da bandeira, empurrados para o registo neon do fliperama. Amarelo é marca e destaque; o azul-cheio é ação e foco, e a sua versão neon carrega ligações, códigos e rótulos; o verde carrega confirmação e progresso. Cor nunca é o único portador de informação — a secção 05 demonstra a regra em funcionamento.
⚠️ Os números acima são calculados no instante em que esta página abre, lendo os próprios tokens CSS que a pintam, pela fórmula de luminância relativa da WCAG 2. Não foram transcritos de lado nenhum. A razão é concreta: o brandbook afirma sete razões e cinco divergem do medido — quatro para melhor, e o verde neon para pior (diz 13,1:1, mede 11,9:1). Um número que vive noutro ficheiro que a cor envelhece sem avisar; um número derivado da cor não pode.
🟡 O amarelo tem dois papéis, e eu tinha-os colapsado num só
O conjunto de tokens do protótipo traz --yellow e --yellowLine /
--yellowInk. Ao trazer a paleta para esta entrega eu fundi-os, e a distinção parecia
redundante — no tema escuro as duas são a mesma cor. Foi esta página, ao medir-se a si
própria, que mostrou porque não são.
No tema claro, o amarelo de preenchimento mede
1,4:1 contra a página, 1,5:1 contra a superfície e 1,3:1 contra a superfície 2.
Ou seja: uma borda amarela num fundo claro não desenha linha nenhuma. O efeito estava em
quatro sítios — a pastilha do passo corrente, o botão primário, a barra do aviso e o estado
selecionado do chip — e no pior deles, a pastilha, o «passo em que você está» ficava a apoiar-se
em negrito e pouco mais. --yellowInk mede 5,4 a 6,1:1 nas mesmas superfícies.
Sobrava um caso que nenhuma cor resolve: o anel de foco à volta do botão primário
é amarelo sobre amarelo, 1,0:1, nos dois temas. Esse resolve-se por geometria e não por paleta —
outline-offset:2px afasta o anel do botão e assenta-o sobre a página, onde ele mede
14,4:1 no escuro e 5,8:1 no claro.
A regra que fica, e cabe numa frase: --yellow preenche,
--yellowInk faz linha. Toda borda, fronteira e contorno usam o segundo.
03 · A tipografia
a divergência maior
A especificação fixa quatro famílias em todo locale — Jersey 15 para display,
logotipo e placar; Lexend para rótulos curtos e códigos BNCC;
Atkinson Hyperlegible para todo o texto corrido, porque diferencia as letras
ambíguas (I l 1, O 0, b d p q); e Andika para
leitor iniciante, ligada sozinha no perfil de 1º a 5º ano — mais uma quinta, regionalizada: a
Playwrite do país, que é a única fonte que muda com o locale, porque a forma das
letras cursivas ensinada na escola muda de país para país.
Esta página não carrega nenhuma delas. É decisão, não esquecimento.
O protótipo puxa cinco famílias de um provedor externo. O achado 04 do próprio Postmortem manda parar, e o brandbook concorda consigo mesmo na secção da tipografia: «em produção as fontes são empacotadas com o produto e servidas pelo próprio servidor local, com subsetting por idioma — nada de CDN, porque a promessa de funcionar sem internet vale também para a tipografia, e dado de aluno não deve sair da rede da escola».
Uma página que promete funcionar offline e pede a letra a um terceiro já quebrou a promessa antes de desenhar o primeiro botão — e quebra-a de forma invisível, porque na máquina do programador a fonte está em cache. Então esta entrega usa a pilha do sistema: pior de olhar, e honesta.
📌 A dívida, nomeada: a Jersey 15 do wordmark e a Atkinson Hyperlegible do
corpo voltam no dia em que houver passo de build que as empacote com subsetting. O wordmark do
cabeçalho já contorna: os ficheiros em img/logo/ trazem a Jersey 15 convertida
em contornos, sem @font-face nenhum. O custo é o de sempre — ali o texto deixou de ser
texto, e muda-se regenerando, não editando.
04 · A geometria
quatro regras, sem exceçãoEscala de espaço
8 · 16 · 24 · 40 · 72. Nada fora da escala — o mesmo módulo de 8 px do símbolo e do pixel art, para que a interface e a arte partilhem a malha em vez de se aproximarem.
Cantos retos
Zero border-radius em toda a interface. A geometria reta é o eco do
pixel, e é também a decisão mais fácil de quebrar sem reparar — um único canto arredondado num
componente novo denuncia-se ao lado de qualquer outro.
Alvo de 44 px
Piso de 44 px (WCAG 2.5.5) em tudo que se toca, e pela geometria: o
token --tap entra como min-height na regra, não como número repetido em
cada componente.
Movimento
Transições de 120–200 ms, só em opacidade e cor. Nada pisca. Tudo desliga com
prefers-reduced-motion — e esta página não declara animação nenhuma, o que é dito e não
presumido, para quem for acrescentar a primeira.
05 · Cor nunca sozinha
estado com três sinaisO chip de habilidade é o átomo do produto, e o seu estado selecionado carrega três sinais e não um: borda mais grossa, fundo trocado e um ícone. Experimente — e depois volte a olhar com o tema claro, ou com o ecrã em cinza: o estado continua legível em qualquer um dos três, mesmo que dois se percam.
O estado vive em aria-pressed, e o CSS lê o atributo em vez de uma classe paralela. Isso
fecha por construção a falha mais comum do componente: a classe que diz «selecionado» ao olho e o
atributo que diz «não» ao leitor de ecrã, cada um atualizado por um sítio diferente do código.
06 · O balanço
o que existe e o que é só especificaçãoUm estudo de caso que só mostrasse o que funciona seria um anúncio. Esta é a conta inteira, e a coluna da direita é a que interessa a quem vai continuar o trabalho.
| Peça | Nesta entrega | Estado |
|---|---|---|
| Símbolo e wordmark | SVG em contornos, no cabeçalho e no favicon | Em uso |
| Trio da marca e tokens | Os mesmos tokens no index.html, no 404 e aqui | Em uso |
| Tema claro e escuro | Alternador com preferência guardada no aparelho | Em uso |
| Alvo de 44 px e foco visível | Regra global, não decisão por componente | Em uso |
| Estado com três sinais | Chips do passo 1 da jornada | Em uso |
| As cinco famílias tipográficas | Pilha do sistema, à espera de build que empacote | Especificação |
| Barra global de acessibilidade | AAA, texto 125%, reduzir movimento, fonte de leitor iniciante, idioma | Especificação |
| Moldura de jogo com HUD fora do canvas | Depende do cartucho, que ainda não é publicado | Especificação |
| Perfis de acesso | Estudante, professor, profissional externo, gestão | Especificação |
| Currículo por país e caligrafia regional | 55 currículos extraídos, à espera de leitura humana | Especificação |