# TBrWeb Design System

Versão 1.1.0 - agosto de 2026

## 1. Propósito

Este documento é a fonte de verdade do design system digital da TBrWeb. Ele traduz o rebranding de 2026 em decisões replicáveis para sites, landing pages, sistemas web e materiais digitais.

O sistema deve comunicar três atributos em conjunto:

- **Clareza:** conteúdo direto, hierarquia inequívoca e interação previsível.
- **Energia brasileira:** verde e amarelo aparecem com intenção, nunca como decoração excessiva.
- **Confiança tecnológica:** azul-marinho ancora navegação, texto e ações críticas.

Direção estética: **tecnologia brasileira madura**. O visual é editorial, limpo e preciso, com momentos de cor concentrada. Evitar gradientes genéricos, excesso de glassmorphism, sombras ornamentais e composições de agência baseadas apenas em cards centralizados.

## 2. Fontes da marca

- Brandbook TBrWeb 2026, 17 páginas.
- Logos horizontal e vertical em SVG/PNG.
- Avatares oficiais em SVG/PNG.
- Materiais de aplicação: cartão, vestuário, brindes, fundo digital e landing page.

Os arquivos digitais exportados são a referência cromática para produto, porque são os ativos efetivamente aplicados. As divergências encontradas no PDF estão registradas em `BRAND_AUDIT.md`.

## 3. Identidade verbal e visual

### 3.1 Ideia central

> Criamos pontes digitais claras, humanas e confiáveis.

### 3.2 Tom de voz

- Direto, sem linguagem excessivamente técnica.
- Seguro, sem promessas grandiosas ou vagas.
- Humano, com verbos ativos e foco no resultado da pessoa.
- Brasileiro pela energia e proximidade, não por clichês.

### 3.3 Logo

- Priorizar a versão horizontal em cabeçalhos e assinaturas.
- Usar a versão vertical em formatos quadrados, compactos ou institucionais.
- Manter reserva mínima equivalente à espessura do caractere “t”.
- Redução mínima indicada no brandbook: 2 cm horizontal e 1 cm vertical em materiais impressos.
- Nunca distorcer, inclinar, rotacionar, comprimir ou alterar proporções.
- Nunca recolorir fora das versões oficiais.
- Não aplicar sobre fundos que reduzam o contraste.

## 4. Cor

### 4.1 Primitivas oficiais para digital

| Token | Valor | Função principal |
|---|---:|---|
| `brand.navy` | `#00355B` | Confiança, navegação, texto, ação primária |
| `brand.green` | `#87B037` | Crescimento, ação positiva, destaque |
| `brand.yellow` | `#F0CE00` | Energia, foco, atenção |
| `brand.blue` | `#1782B5` | Tecnologia, informação, dados |
| `brand.ink` | `#211915` | Aplicação monocromática escura |
| `brand.white` | `#FFFFFF` | Respiro e contraste |

### 4.2 Regras de uso

- Azul-marinho é a base dominante da marca e a cor primária no tema claro.
- Verde funciona com texto azul-marinho; branco sobre verde não atende contraste de texto normal.
- Amarelo funciona com texto azul-marinho e como anel de foco.
- Azul-ciano oficial não deve receber texto branco em tamanho normal, pois o contraste é 4,29:1. Usar `blue-800` em superfícies funcionais ou limitar o azul oficial a gráficos e texto grande.
- Estados de erro usam vermelho semântico, acompanhado de ícone e texto.
- Temas claro e escuro devem mapear tokens semânticos, sem inverter primitivos de forma automática.

## 5. Tipografia

Família oficial: **Barlow**.

- Display: 60 px / 700 / line-height 1.08 / tracking -0.025em.
- Heading 1: 44 px / 700 / line-height 1.1.
- Heading 2: 32 px / 600 / line-height 1.2.
- Heading 3: 24 px / 600 / line-height 1.25.
- Body large: 18 px / 400 / line-height 1.6.
- Body: 16 px / 400 / line-height 1.55.
- Small: 14 px / 400 / line-height 1.45.
- Label: 12 px / 700 / uppercase / tracking 0.06-0.12em.

Texto contínuo deve permanecer entre 45 e 68 caracteres por linha. O corpo nunca deve ficar abaixo de 16 px em interfaces móveis.

## 6. Layout

- Escala de espaço baseada em 4 px.
- Contêiner principal: máximo de 1216 px.
- Breakpoints de referência: 375, 768, 1024 e 1440 px.
- Gutter mínimo: 20 px no celular, 32 px no tablet e 64 px no desktop.
- Alvos interativos: mínimo de 44 × 44 px.
- Componentes e textos devem se adaptar sem rolagem horizontal em 320 px.
- Evitar scroll aninhado e conteúdo oculto por barras fixas.

## 7. Forma, elevação e ícones

- Radius 6 px: elementos pequenos.
- Radius 10 px: controles e botões.
- Radius 16 px: cards e painéis.
- Radius 24 px: blocos de destaque.
- Pill: badges, chips e switches.
- Sombras comunicam sobreposição, nunca apenas decoração.
- Ícones devem ser vetoriais, com stroke consistente de 1,5-2 px.
- Não usar emojis como ícones estruturais.

## 8. Movimento

- 120 ms: hover, pressão e feedback imediato.
- 200 ms: estados locais.
- 320 ms: painel, modal ou mudança estrutural.
- Curva padrão: `cubic-bezier(0.2, 0, 0, 1)`.
- Animar `transform` e `opacity`; não animar dimensões quando isso causar reflow.
- Toda animação deve explicar causa e efeito.
- Respeitar `prefers-reduced-motion`.

## 9. Componentes

Cada componente deve documentar anatomia, tamanhos, variantes, estados e acessibilidade.

### 9.1 Button

Variantes: primary, accent, secondary, ghost e danger.

Estados obrigatórios: default, hover, focus-visible, pressed, loading e disabled.

- Uma ação primária por tela ou bloco decisório.
- Danger deve ficar separado de ações normais.
- Loading mantém o rótulo, exibe progresso e bloqueia novo envio.
- Botão apenas com ícone exige `aria-label`.

### 9.2 Input e select

Estados obrigatórios: default, hover, focus, filled, error e disabled.

- Label sempre visível.
- Helper text persistente em campos complexos.
- Erro junto ao campo, com causa e recuperação.
- Validar ao sair do campo ou após tentativa de envio.
- Após erro de envio, focar o primeiro campo inválido.

### 9.3 Alert e toast

- Alert é persistente e pode conter ação.
- Toast confirma ações breves e desaparece em 3-5 segundos.
- Toast usa `aria-live="polite"` e não rouba foco.
- Cor nunca é o único indicador de status.

### 9.4 Card

- Card representa um grupo coerente, não um recurso decorativo.
- Cards clicáveis precisam de affordance, foco e alvo completo.
- Título, texto e ação devem manter hierarquia clara.

### 9.5 Navegação de documentação

- Em telas grandes, usar sidebar persistente; em telas menores, usar drawer com botão explícito para fechar.
- Destacar a seção atual na navegação e repetir seu nome no cabeçalho para manter orientação.
- Em documentos extensos, oferecer busca local, URLs profundas por seção e indicador discreto de progresso.
- Ao fechar um drawer, devolver o foco ao acionador; ao seguir uma âncora no mobile, mover o foco para o heading de destino.
- Itens de navegação e controles devem manter alvo mínimo de 44 × 44 px.

## 10. Acessibilidade

Meta mínima: WCAG 2.2 AA.

- Texto normal: contraste mínimo 4,5:1.
- Texto grande e componentes gráficos: mínimo 3:1.
- Foco visível: contorno de 2-4 px, sem remoção global.
- Ordem de tabulação igual à ordem visual.
- Hierarquia de headings sequencial.
- Imagens significativas com texto alternativo; decorativas com `alt=""`.
- Controles nativos e semânticos antes de soluções customizadas.
- Zoom do navegador nunca deve ser desativado.
- Navegação e formulários funcionam somente com teclado.
- Conteúdo permanece compreensível com 200% de zoom e redução de movimento.

## 11. Tema escuro

- Canvas: `#061721`.
- Surface: `#0B2433`.
- Texto primário: `#F6F8F9`.
- Primária: verde TBr com texto azul-marinho.
- Accent: amarelo TBr com texto azul-marinho.
- Bordas precisam permanecer visíveis; não usar transparência excessiva.
- Validar contraste do tema escuro de forma independente.

## 12. Governança

1. Propor mudança a partir de uma necessidade de produto comprovada.
2. Atualizar primeiro o token ou componente na fonte de verdade.
3. Documentar estados, uso correto e anti-padrões.
4. Verificar temas claro/escuro, 375/768/1024/1440 px, orientação paisagem e teclado.
5. Medir contraste e comportamento com redução de movimento e zoom de 200%.
6. Publicar com versão semântica e nota de migração quando houver quebra.

## 13. Critérios de aceite

- Nenhum valor visual pontual quando já existir um token adequado.
- Todos os componentes interativos têm foco, disabled e feedback.
- Nenhum texto menor que 12 px; corpo móvel em 16 px ou mais.
- Nenhum controle crítico depende apenas de hover.
- Todos os alvos interativos têm no mínimo 44 × 44 px ou área clicável equivalente.
- Nenhum ícone estrutural usa emoji.
- Logo sempre usa arquivo oficial e mantém proporção.
- Contraste AA comprovado nos pares de texto usados.
- Interface verificada em tema claro, escuro, celular e desktop.

## 14. Histórico

- **1.1.0 — agosto de 2026:** busca de seções, orientação contextual, progresso de leitura, drawer com foco gerenciado, carregamento de fonte otimizado e validação de formulário ao sair do campo.
- **1.0.0 — agosto de 2026:** fundações da marca, tokens, temas, componentes e documentação inicial.