# Revisão UI/UX — TBrWeb Design System

Versão revisada: **1.1.0**  
Data: **3 de agosto de 2026**

## Referência utilizada

A revisão usou o **UI/UX Pro Max 2.11.0**, repositório `nextlevelbuilder/ui-ux-pro-max-skill`, commit `4d140cf8ff6842de13213c7214eff3810371beb2`.

O mecanismo foi consultado em quatro frentes:

- recomendação ampla de design system para uma agência digital brasileira;
- auditoria de acessibilidade, navegação, responsividade e desempenho;
- padrões de confiança, autoridade e storytelling para serviços;
- diretrizes da stack `html-tailwind`, adaptadas ao HTML, CSS e JavaScript sem framework deste projeto.

## Direção adotada

A recomendação **Vibrant & Block-based**, com variância 7/10, movimento 3/10 e densidade 5/10, reforçou a direção já encontrada no rebranding: blocos editoriais, geometria forte, alto contraste e energia concentrada.

A identidade oficial continua sendo a fonte de verdade. Por isso, as recomendações automáticas de paleta índigo, CTA laranja e fontes Archivo/Space Grotesk não foram aplicadas. A interface mantém:

- azul-marinho `#00355B` como âncora de confiança;
- verde `#87B037`, amarelo `#F0CE00` e azul `#1782B5` como acentos proprietários;
- Barlow como tipografia oficial;
- logos e avatares originais, sem recoloração ou alteração de proporção.

## Melhorias aplicadas

### Descoberta e orientação

- Busca local na sidebar, tolerante a acentos, com atalho `/` e envio para o primeiro resultado.
- Seção atual visível na sidebar e no cabeçalho, inclusive em telas pequenas.
- Indicador de progresso de leitura para a página longa.
- Links profundos preservados por seção e estado ativo atualizado durante a rolagem.

### Navegação móvel e teclado

- Drawer móvel com botão explícito de fechar, `Escape`, clique no scrim e retorno de foco ao acionador.
- Sidebar fechada recebe `inert`, impedindo tabulação em conteúdo fora da tela.
- Ao selecionar uma seção no drawer, o foco segue para o heading de destino.
- Itens da navegação passaram de 40 para 44 px de altura mínima.

### Interação e formulários

- Estados pressionados adicionados a botões de ícone, links de navegação e cards de recurso sem deslocar o layout ao redor.
- Campo de demonstração valida ao perder o foco e após envio, informa causa e mantém foco no primeiro erro.
- Ícone textual do toast foi substituído pelo SVG do mesmo conjunto visual da interface.

### Desempenho e estabilidade

- A fonte Barlow saiu do `@import` bloqueante no CSS e passou para um `<link>` antecipado no documento.
- A documentação continua sem framework e sem dependências JavaScript de animação.
- Imagens abaixo da dobra mantêm carregamento tardio e dimensões declaradas.
- Movimento continua baseado em `transform` e respeita `prefers-reduced-motion`.

## Recomendações não aplicadas

- **GSAP/ScrollTrigger:** não oferece ganho proporcional para uma documentação estática e aumentaria custo de rede e JavaScript.
- **Scroll horizontal, scroll-snap e narrativa imersiva:** prejudicariam a leitura de referência, a previsibilidade e os gestos do sistema no mobile.
- **Breadcrumb completo:** a arquitetura atual tem apenas um nível de profundidade; o contexto compacto TBrWeb/seção é suficiente.
- **Tailwind:** as regras semânticas foram aproveitadas, mas migrar a stack não resolveria um problema do produto.

## Matriz de validação

A versão 1.1.0 foi verificada e aprovada nos seguintes cenários:

- 375 × 812, 768 × 1024, 1024 × 768 e 1440 × 1000;
- temas claro e escuro;
- navegação por teclado, foco do drawer e atalho `/`;
- preferência de movimento reduzido;
- busca, indicador de seção, progresso de leitura e validação do formulário;
- zero rolagem horizontal, IDs duplicados, saltos de heading, alvos abaixo de 44 px ou erros de JavaScript nos cenários automatizados.