O item ativo da navegação levava um filete vertical à esquerda (box-shadow inset) que o dono já havia reprovado uma vez, como ornamento sem base no sistema. Ele voltou por descuido nos organismos novos e na barra lateral deste manual; agora saiu dos dois. O estado ativo separa só pelo que o sistema já tem: superfície afundada, cor primária e peso. E para não reincidir, a bateria do navegador ganhou a regra R20, que reprova qualquer box-shadow inset no item ativo de navegação, testada plantando o ornamento de volta e vendo a regra flagrá-lo.

A navegação virou vocabulário de primeira classe, na escola do UI Shell do IBM Carbon: um topo e uma lateral que compõem um shell de aplicação ou funcionam sozinhos, cada um servindo os três contextos. A barra de topo (.ds-barra-de-topo) tem uma variante por contexto: sistema (menu + título + ações), institucional (logo + páginas + CTA) e e-commerce (topbar + categorias + carrinho): o antigo cabeçalho virou a variante e-commerce dela, sem organismo duplicado. O menu lateral (.ds-menu-lateral) traz grupos, itens com ícone e contador, estado ativo por superfície e peso, rodapé de usuário, além do rail compacto (só ícones) e da superfície inversa. E a própria barra lateral deste manual passou a falar essa gramática. O documento se navega com a própria linguagem que ensina.

A causa raiz de "fontes que não são da marca": a Inter vinha do Google Fonts por link, mas o artifact publicado bloqueia rede externa (CSP), então ela nunca carregava lá e o texto caía em Arial. As duas famílias passaram a ser arquivo local (Inter e Playfair variáveis), embutidas como dado na publicação: o artifact é 100% autossuficiente, sem depender de nenhum servidor de fora. De quebra, dois vazamentos antigos: o título para leitor de tela e o botão de voltar ao topo herdavam a fonte do navegador (controles de formulário não herdam família), corrigidos na fonte com a âncora de marca no corpo do documento e a herança dos controles. Guardas novas: o auditor estático barra qualquer fonte externa ou família fora do par, e a bateria do navegador agora varre também os diálogos e os elementos soltos, não só o corpo principal.

O jeito dos grandes sistemas de apresentar componentes: o índice é leve e o mergulho é fundo. No grid, cada peça agora é um tile de galeria: demo, nome e a missão em duas linhas. Clicar no card abre a ficha da peça, um diálogo com tudo o que o tile guarda: papel completo, o quando NÃO usar, onde é usada, estados, e os demos com ampliar e ‹html› funcionando lá dentro (dica "ficha ↗" aparece no hover). Nada foi removido: os detalhes mudaram de lugar, da parede para a profundidade.

O nível 1 era a última grade chapada do documento: 19 cards em fila. Agora os átomos vivem em cinco categorias funcionais (Ação & navegação · Formulário · Rótulo & feedback · Conteúdo & superfície · Fundações com casa própria), na mesma mecânica de Moléculas e Organismos. E toda categoria do documento, nos três níveis, ganhou uma linha de missão embaixo do título dizendo o trabalho daquele grupo ("O que a pessoa aperta"; "A primeira dobra: onde a atenção nasce"). O filtro da navegação já entende os blocos novos e os recolhe quando vazios.

Do GOV.UK veio a metade que faltava do conselho: cada organismo da tela agora diz também quando NÃO usar, em vermelho de estado, ao lado do papel ("carrossel com um slide só vira hero com controles mortos"; "newsletter no checkout é fricção, não relacionamento"). E a Composição ganhou o bloco Acessibilidade embutida: contraste provado nos pares da Paleta, alvo tátil de 44px, foco visível em todo controle, semântica além da cor (aria-invalid, aria-busy) e movimento que respeita prefers-reduced-motion. De passagem, as medidas do cabeçalho nos tokens ainda descreviam a anatomia antiga de marca composta (brand_mark + brand_name): corrigidas para o slot de logo, que recebe o arquivo completo.

Rodada guiada pelas referências que definem a categoria. Do Material Design, os pares não-faça/faça agora vivem onde a regra vive: Tipografia (Playfair em caixa alta; preço em Playfair), Paleta (exclusivas das duas marcas misturadas) e Curvatura (borda de repouso versus superfície com sombra), cada erro mostrado de verdade e isento das baterias por escopo cirúrgico (provado nos dois sentidos: com isenção, conforme; sem ela, a R3 flagra na hora). Ainda do Material, o botão e o input mostram estados reais renderizados pelo próprio CSS: repouso, disabled, loading, erro via aria-invalid. Do IBM Carbon, todo demo de tela ganhou o botão ‹html›: um clique copia o markup pronto para colar no projeto. E a fonte única ficou de bolso: tokens.json ↓ na navegação (no artifact, embutido e auto-contido).

Rodada de excelência na experiência de quem navega: o filtro da navegação agora alcança as peças e receitas (digite "busca" e o documento mostra só o que interessa, com contador; Esc limpa; "/" foca); todo endereço .ds- é copiável no clique, no chip do card e nas receitas, com o mesmo feedback do hex e dos prompts; o marcador de seção ativa na navegação trocou de mecanismo para funcionar em qualquer ambiente; as descrições ganharam largura de leitura confortável (72 caracteres); a rolagem ficou suave (respeitando quem prefere movimento reduzido); e a aba do navegador ganhou o selo DA como favicon, direto do arquivo oficial.

Sem flagrante do dono, o sistema inteiro foi varrido com olhar crítico. Achados: a página rolava de lado em telas de 1280px (a coluna da grade crescia com os previews em px reais; agora minmax(0,1fr) e a fileira rola por dentro, com a regra R19 de guarda); o feed dizia "4:5" na desc de Espaçamento, nos passos de prompt de IA e no próprio token ratio, sendo que 1080×1440 é 3:4 (o prompt ensinava a gerar foto na proporção errada); a desc de Sombras dizia "nunca em peças sociais" enquanto o card de produto do canvas sempre teve elevação (agora documentado: ele veste o shadow/md, única sombra dos criativos, com linha própria na régua); a chave preco-display dos tokens não tinha classe correspondente (virou preco = .ds-preco); a Papelaria usava um cinza fora da paleta nas assinaturas de e-mail; e o auditor estático ganhou o validador da fonte única (ratio confere com as dimensões, receitas resolvem, referências existem, endereços citados existem, toda peça tem casa na folha), que na estreia flagrou a deriva do preço e um travessão recém-escrito.

Três flagrantes seguidos do mesmo tema provaram que regra fora do auditor não é regra. A bateria dinâmica ganhou a R17 (todo endereço é .ds-<slug do nome>, o chip deriva do título, demos de tela carregam a classe que declaram no rótulo, receitas usam .ds-) e a R18 (peça sem amostra renderizada é violação; nenhum "undefined" vaza). Testadas por injeção: quatro violações plantadas, quatro flagradas. De quebra, os rótulos dos demos de tela nas peças de canvas agora declaram a correspondência (tela · .ds-tag no card da tag de categoria; tela · .ds-badge--oferta no chip de cupom): peça irmã tem endereço próprio, não rótulo mudo.

As peças de tela endereçavam como .ds-newsletter e as do canvas como bloco-de-oferta, seco: dois formatos. Agora o endereço de toda peça é .ds-<nome>, nas duas vertentes: na tela ele é a classe CSS, no canvas ele endereça a chave das receitas. Chips, receitas dos templates (.ds-moldura-de-foto:full-bleed + .ds-bloco-de-oferta + .ds-assinatura:feed) e as linhas de uso cruzado ("usada em", "no canvas:") falam o mesmo formato. A exceção de ontem morreu junto: hashtag e assinatura agora também mostram .ds-hashtag e .ds-assinatura.

Os três últimos átomos que eram ficha de texto ganharam amostra renderizada: o tooltip aparece aberto sobre um link, a tipografia mostra as três famílias de escala em uso, e o ícone traz três traços reais da Iconografia. O chip da tipografia parou de prometer uma classe que não existia: o endereço verdadeiro é a família .ds-display-* · .ds-heading-* · .ds-body-*. De quebra, o card do botão exibia "undefined" na linha de uso (resto do renomeio) e foi corrigido.

"Cabeçalho" com endereço .ds-header era nome duplo: duas palavras para a mesma peça. Agora o endereço técnico é o próprio nome codificado (sem acento, espaços viram hífen): o cabeçalho mora em .ds-cabecalho, a barra de busca em .ds-barra-de-busca, a tag de categoria na chave tag-de-categoria. Todas as classes da tela e chaves das receitas foram renomeadas; quando o nome já é o endereço (hashtag, assinatura), o chip nem aparece. Só o vocabulário da plataforma permanece em inglês: atributos do HTML e os grupos internos do motor de tokens.

Todo card agora tem o nome da peça em português como título e o endereço técnico como chip de código: a classe .ds-* nas peças de tela, a chave das receitas nas peças do canvas. Moléculas e organismos foram agrupados por categoria de função, os cards se adaptam ao porte da peça, e o bloco de depoimento virou um card só com os dois tamanhos (era a mesma peça com dois nomes).

As 17 peças de tela que eram só ficha ganharam amostra renderizada de verdade: as 6 moléculas restantes ao natural, e os 8 organismos de página inteira (cabeçalho, rodapé, carrossel, vitrines) em escala com clique para ampliar em tamanho real, a mesma mecânica dos templates. As personas ganharam a foto de clima de cada marca, os cards da Arquitetura ganharam os wordmarks reais, a Composição ganhou o par visual não faça / faça, a Tipografia ganhou um parágrafo de leitura real, e os divisores internos de Templates ficaram à altura da seção. O card-ponteiro de preço foi fundido à peça única.

O termo revogado "cor-ponte" saiu da Paleta; as descrições das cores pararam de repetir o papel já dito no selo; o histórico do changelog voltou a colapsar, com as três decisões recentes visíveis; e a folha de estilo do sistema web foi limpa de nomes e termos internos.

Montar a logo na mão (o selo ao lado do nome digitado) inventa um lockup que não existe. A seção Logos ganhou a proibição e um exemplo lado a lado (não faça / faça), e o componente de header do sistema web deixou de modelar marca + nome: agora tem um slot que recebe o arquivo de logo completo. Cada situação usa um arquivo pronto: horizontal no header, selo em espaços mínimos, vertical empilhado.

No Anúncio B (Split), a metade inferior do Don Artesano tinha texto branco sobre fundo branco: o fundo sólido da marca estava definido como branco, quando o texto do DA é branco por design (como no arquétipo C, de fundo Titânio). O fundo passou a Titânio, e o texto voltou a aparecer. A varredura não achou outro caso. O auditor ganhou a regra que teria pego isso: nenhum texto pode ter a cor (quase) igual ao fundo sólido atrás dele.

A migração dos previews para px reais tinha deixado os elementos não-textuais (botão CTA, pill de preço, chip de salário, rodapé, cargo da vaga) nos tamanhos antigos minúsculos, quase invisíveis num canvas de 1080. Todos voltaram aos tamanhos reais dos tokens. Os headlines de exemplo que estouravam a zona foram encurtados para caber (como um designer escreve para o template), o corte rígido do texto saiu, o botão passou a se ajustar ao texto, e os estilos escritos em texto livre passaram a ser lidos (o eyebrow voltou a bold).

Os previews e os diagramas de medida passaram a ser construídos em resolução real (1080px) e apenas reduzidos por transform para caber. Clicar em qualquer um abre a peça em tamanho real: ajustada à tela ou 1:1 pixel a pixel. As medidas ganharam numeração nas zonas, com legenda numerada embaixo (número, nome e coordenadas) casando com a lista de specs.

Os previews de arquétipos e Stories estavam pequenos demais para julgar a composição. Mais que dobraram (feed 167→346px, story 124→270px), ganharam sombra de peça e passaram a viver numa faixa de rolagem horizontal: no desktop, Don Artesano e CubasFarm aparecem lado a lado; em telas estreitas, desliza sem quebrar a página. O wireframe de medidas ficou compacto ao lado.

Os previews de arquétipos, Stories e organismos assinavam com um "DA" em texto genérico. Agora usam o símbolo DA real (o mesmo átomo de identidade da seção Logos), lido da fonte e colorido por contexto: Branco sobre foto e fundo escuro, Titânio sobre claro.

O topo da hierarquia ganhou casa: um feed e um story em fidelidade e uma página de produto da CubasFarm montada só com os organismos do sistema web, tudo com produto e preço reais. Compor de verdade revelou o que os componentes isolados escondiam e já foi corrigido: bordas de repouso nos componentes web viraram superfície e sombra (fluidez da SSM), a marca no cabeçalho saiu do Dourado, ícones sociais e setas passaram a preenchidos, e a escala de sombras (que existia decomposta mas nunca fechava num valor usável) foi composta na fonte.

A terceira fonte (mono, exceção antiga dos documentos) foi revogada: o sistema tem Playfair Display e Inter, e nada mais. Literais técnicos agora são Inter sobre chip neutro. O leque de tokens ganhou a seção Curvatura & bordas: escala de raios com papéis, espessuras de borda com a política (nada tem borda por padrão), tintas de branco sobre escuro em cinco pontos e os três véus de foto. Véus e tintas agora vivem nos tokens e alimentam os previews.

Auditoria automatizada de conformidade contra as próprias regras, agora permanente em Scripts (varredura estática dos arquivos + varredura dinâmica dos estilos renderizados). Corrigidos: par de texto que combinava exclusivas de marcas diferentes (removido), superfícies do documento que usavam cores exclusivas (agora nas principais), numerais lining aplicados por herança a todo o documento, raios fora da escala, rótulo em Playfair caixa alta e CSS herdado sem uso nos dois documentos.

A proibição de Dourado em ícones valia só para a Don Artesano na documentação original. O uso foi liberado na CubasFarm como acento, contando no limite de 1-2 por peça. A regra "logo nunca em Dourado" foi ratificada. O exportador de ícones oferece Dourado com a etiqueta "só CubasFarm".

Nó web no tokens.json, seis átomos essenciais (button, link, tag, input, card, ficha) com marca via data-brand e Web/ds-web.css como entregável real. Especificações herdadas da versão anterior do sistema, atualizadas pelas decisões vigentes. Ver os níveis Átomos, Moléculas e Organismos.

Os arquétipos foram decompostos em 8 organismos (moldura-de-foto, bloco-editorial, card-de-produto, bloco-de-oferta, bloco-de-depoimento, assinatura, faixa-de-hashtags, ficha-de-vaga) e 5 moléculas sociais. Cada arquétipo agora declara sua receita, e combinações inéditas são legítimas: nascem como experimento e, quando vencem na prática, são promovidas a arquétipo. A variedade do feed é combinatória: as peças são fixas, as combinações não.

Quatro pontes (Titânio, Cinza Quartzo, Branco Resina, Branco SSM) e duas exclusivas de destaque: Ônix na DA, Dourado na CF. Com o Titânio como ponte, o texto Titânio na CubasFarm, a logo CF em Titânio e o lockup "by Don Artesano" são uso normal do sistema. Na CF, contexto escuro vem de fotografia, nunca de cor chapada.

Legibilidade validada nas três combinações de fundo. Os ratios WCAG permanecem documentados como nota informativa (2.40:1 sobre brancos, 6.73:1 sobre Ônix): achado técnico informa, não decide. Em corpos pequenos sobre claros, preferir tamanho generoso. Segue proibido em Don Artesano e em ícones.

Story passa de 80px no topo esquerdo (que colide com o avatar/nome do perfil na UI do Instagram) para 120px no canto inferior direito, respeitando a safe zone de 350px. Uma regra só para feed, carrossel, story e capa de Reel.

Nó templates com os 8 arquétipos de feed + Reels + Stories e geometria completa; direção fotográfica a partir dos anúncios que mais performaram; padrão de prompts de imagem com negative prompt oficial; motion; e método atômico: o método com o status de cada nível. Moléculas e organismos web: congelados até o projeto do site.

Após a extração final (templates, ícones, tokens), o Figma passou a fonte histórica de consulta. Quando superfícies divergem, o tokens.json vence: sempre. Documentos separados por natureza: Design System (visual) e Marca & Voz (estratégia e linguagem verbal).

Auditoria interna alinhou a interface dos documentos às regras que eles documentam: só cores da paleta (ou transparências delas), logo em cor aprovada, pesos de fonte do trio oficial e vocabulário do glossário. Exceção documentada: JetBrains Mono para trechos de código, exclusiva destes documentos.