Clara
Hierarquia nítida, textos diretos e componentes previsíveis. Tecnologia útil não precisa parecer complicada.
TBrWeb Design System · 2026
Criamos pontes digitais.
Uma linguagem de produto que transforma a nova marca TBrWeb em interfaces consistentes, acessíveis e reconhecíveis — da primeira ideia ao site publicado.
01 · Direção
Uma marca madura, sem perder energia.
A identidade parte de três ideias encontradas no brandbook: solidez para entregar, clareza para conectar e brasilidade com propósito. Cada decisão visual deve reforçar pelo menos uma delas.
Vibrante
Verde e amarelo dão energia às ações e destaques, sempre com disciplina de contraste e sem excesso decorativo.
Confiável
O azul-marinho ancora a experiência. Estados completos, acessibilidade e padrões repetíveis tornam a promessa visível.
02 · Marca
Logo com espaço para respirar.
Use os SVGs oficiais sem redesenhar, inclinar, condensar ou recolorir. A versão horizontal é prioritária em navegação e assinatura; a vertical atende formatos compactos e institucionais.
Faça
- Preserve a proporção original do arquivo.
- Mantenha reserva mínima equivalente à espessura do “t”.
- Use 2 cm no impresso horizontal e 1 cm no vertical como redução mínima.
- Escolha a versão com contraste adequado ao fundo.
Evite
- Distorcer, achatar, comprimir ou inclinar.
- Rotacionar em qualquer direção.
- Alterar a estrutura ou a relação entre letras.
- Aplicar cores fora da paleta ou sobre baixo contraste.
03 · Cor
Cor com função, não apenas presença.
O azul-marinho sustenta navegação e confiança. Verde orienta ações positivas, amarelo chama atenção e azul-ciano organiza informação. Branco e neutros mantêm a leitura confortável.
Primarycolor-primary
Accentcolor-accent
Infocolor-info
Successcolor-success
Warningcolor-warning
Dangercolor-danger
Canvascolor-canvas
Textcolor-text
04 · Tipografia
Barlow fala digital com naturalidade.
Família oficial do brandbook, Barlow combina formas técnicas, largura eficiente e boa leitura. Use peso 700 para mensagens de marca, 600 para hierarquia e 400 para conteúdo contínuo.
Pontes para o futuro.
Tecnologia que aproxima.
Criamos experiências digitais claras, humanas e confiáveis. Cada detalhe da interface ajuda pessoas e marcas a avançarem com segurança.
Projeto em desenvolvimento
05 · Estrutura
Ritmo que organiza.
O sistema usa múltiplos de 4 px, contêiner máximo de 1216 px e texto longo limitado a 68 caracteres. Espaço, forma e elevação comunicam hierarquia antes da cor.
Espaçamento
Escala enxuta para manter consistência entre componente e página.
04
space-108
space-216
space-424
space-632
space-848
space-1264
space-16Raios
Formas discretas e técnicas; pílula reservada a badges e controles binários.
6 px
10 px
16 px
24 px
Pill
Elevação
Sombras frias derivadas do azul-marinho, usadas apenas para sobreposição.
sm
md
lg
Densidade
Alvos interativos têm no mínimo 44 px. Use altura 36 px apenas em ações secundárias densas no desktop.
06 · Movimento
Movimento explica causa e efeito.
Transições duram de 120 a 320 ms, usam opacidade ou transformação e nunca bloqueiam a interação. O sistema respeita automaticamente prefers-reduced-motion.
Curva padrão
cubic-bezier(0.2, 0, 0, 1) cria entrada firme e desaceleração natural.
Duração por intenção
Escolha o menor tempo capaz de comunicar a mudança sem parecer abrupto.
- 120 ms — pressão, hover e feedback imediato.
- 200 ms — troca de estado e expansão local.
- 320 ms — entrada de painel, modal ou rota.
- Saídas devem ser mais rápidas que entradas.
07 · Componentes
Ações com hierarquia inequívoca.
Uma tela deve ter uma ação primária. Accent serve a momentos promocionais ou positivos; secondary e ghost reduzem competição; danger fica isolado de fluxos normais.
Button
.tbr-buttonBadge e card
.tbr-badge · .tbr-card
Em análise
Publicado
Experiências que conectam.
Site institucional
Estrutura clara, marca consistente e desempenho desde o primeiro acesso.
08 · Entrada
Formulários orientam a correção.
Labels permanecem visíveis, helper text antecipa dúvidas e erros explicam causa e solução junto ao campo. A validação ocorre depois da tentativa ou ao sair do campo.
Campos e seleção
.tbr-field09 · Retorno
Todo estado precisa de próximo passo.
Feedback combina cor, ícone e texto. Mensagens informam o que aconteceu, o impacto e, quando necessário, como a pessoa pode se recuperar.
Alert
.tbr-alertPublicação agendadaO site entrará no ar hoje às 18h.
Domínio conectadoA configuração foi validada com sucesso.
Revisão pendenteHá duas páginas aguardando aprovação.
Falha no envioVerifique a conexão e tente novamente.
Toast
aria-live="polite"10 · Qualidade
Acessibilidade é parte da marca.
A meta mínima é WCAG 2.2 AA: contraste 4,5:1 para texto normal, navegação completa por teclado, foco visível, alvos de 44 px e conteúdo compreensível sem depender só da cor.
| Par | Amostra | Contraste | Uso | Status |
|---|---|---|---|---|
#FFFFFF / #00355B | Texto | 12,65:1 | Texto e ação primária | AAA |
#00355B / #87B037 | Texto | 5,00:1 | Texto em destaque verde | AA |
#00355B / #F0CE00 | Texto | 8,15:1 | Foco, aviso e promoção | AAA |
#FFFFFF / #1782B5 | Texto | 4,29:1 | Apenas texto grande ou gráfico | Limitado |
#FFFFFF / #87B037 | Texto | 2,53:1 | Não usar para texto | Reprovado |
Alvo mínimo
Controles interativos devem ter ao menos 44 × 44 px, inclusive botões apenas com ícone.
Foco visível
Contorno de 2 px com afastamento de 3 px. Amarelo sobre marinho garante alta percepção.
Leitura confortável
Textos longos não ultrapassam 68 caracteres por linha; o corpo começa em 16 px.
11 · Entrega
Pronto para usar e evoluir.
Os arquivos abaixo formam a fonte de verdade inicial. Alterações futuras devem começar nos tokens semânticos e ser verificadas nos dois temas e nos estados de interação.
Tokens CSS
Variáveis primitivas, semânticas, tema escuro, tipografia, espaço e movimento.
Tokens JSON
Estrutura portátil para integrar ferramentas, apps e pipelines de design tokens.
Especificação mestre
Regras de governança, decisões de marca, componentes e critérios de aceite.
Auditoria da marca
Inventário da pasta original, divergências cromáticas e recomendações de consolidação.
Revisão UI/UX
Decisões aplicadas a partir do UI/UX Pro Max, com critérios, exceções e validação.
Brandbook 2026
Documento original usado como base para identidade, redução e regras de aplicação.
Logo primário SVG
Versão horizontal oficial em vetor, selecionada para produtos digitais.
