Poucos elementos, aplicados com rigor.
Base institucional azul, tipografia Manrope com forte contraste de escala e espaço em branco como elemento de design.
Base institucional
O azul unifica. Navy e neutros sustentam a leitura. Os hex abaixo são os oficiais e os tokens do CSS foram calibrados para reproduzi-los exatamente.
- Azul sobre branco · CTA principal
- Branco sobre navy · blocos institucionais
- Cor da unidade como marcador, linha ou tag
- Cores das unidades combinadas entre si
- Gradientes entre azul e cores das unidades
- Página de unidade sem presença do azul SouTech
- Laranja ERP ou verde TI como texto sobre branco (usar as variantes text-safe)
Fonte única de cor
Contraste medido sobre os três fundos do site. Verde: aprovado para texto (≥4,5:1). Laranja: só elementos não textuais (≥3:1). Vermelho: reprovado. Tokens marcados são novos no sistema.
| Token | Hex | Uso | Sobre branco | Sobre off-white | Sobre navy |
|---|---|---|---|---|---|
| primary | #123CE8 | CTAs, links, anel de foco | 7,40:1 | 6,85:1 | 2,45:1 |
| navy | #0B1238 | Textos de destaque, fundos institucionais | 18,14:1 | 16,78:1 | 1,00:1 |
| paper | #FFFFFF | Fundo de conteúdo | 1,00:1 | 1,08:1 | 18,14:1 |
| offwhite | #F5F6F9 | Fundo de seções alternadas | 1,08:1 | 1,00:1 | 16,78:1 |
| border | #E3E5EB | Apenas divisores 1px, nunca texto nem campo | 1,26:1 | 1,17:1 | 14,40:1 |
| muted-foreground | #6B7080 | Textos auxiliares sobre branco | 4,94:1 | 4,57:1 | 3,67:1 |
| erp | #F28A2E | Linhas e marcadores decorativos ERP | 2,49:1 | 2,30:1 | 7,30:1 |
| dev | #6646D9 | Marcadores DEV, texto aprovado | 6,10:1 | 5,64:1 | 2,97:1 |
| ti | #1FA372 | Linhas e marcadores decorativos TI | 3,21:1 | 2,97:1 | 5,65:1 |
| erp-textToken novo | #A8540A | Texto e ícones informativos ERP | 5,33:1 | 4,94:1 | 3,40:1 |
| ti-textToken novo | #14704F | Texto e ícones informativos TI | 6,07:1 | 5,62:1 | 2,99:1 |
| border-fieldToken novo | #8A8F9C | Borda de campos de formulário | 3,24:1 | 2,99:1 | 5,60:1 |
A exportação inclui cores, tipografia, espaçamento, radius, breakpoints e movimento.
Meta: WCAG 2.2 AA
Correções para as reprovações de contraste e regras de interação.
Para texto e ícones informativos, mínimo 4,5:1 sobre branco. As cores originais ficam só para linhas e marcadores decorativos.
- erp-text · #A8540A5,33:1
- dev-text · #6646D9 (original)6,10:1
- ti-text · #14704F6,07:1
Campos de formulário usam border-field #8A8F9C (3,24:1, mínimo 3:1). O cinza #E3E5EB fica só para divisores.
- Anel de foco de 2px em azul com offset de 2px, sempre visível via teclado.
- Alvo de toque mínimo de 44×44px em botões, links e controles.
- Skip link "Ir para o conteúdo" como primeiro elemento da página (já aplicado neste painel, aperte Tab).
- Nunca remover o outline sem substituto equivalente.
O azul #123CE8 tem só 2,45:1 sobre navy. Regra: sobre fundo navy o botão primário vira branco com texto navy (18,14:1).
Com prefers-reduced-motion, todas as animações e transições são desativadas (já aplicado no CSS deste painel). Conteúdo nunca depende de movimento para ser compreendido.
Manrope
Texto corrido nunca abaixo de 14px. Labels em caixa alta podem ter 12px, exceção documentada.
Família principal. Pesos usados: 400 Regular, 500 Medium, 600 Semibold, 700 Bold e 800 Extrabold.
Labels técnicos, índices e o snippet de código do hero DEV. Pesos 400 e 500.
Self-host dos arquivos woff2 com font-display: swap, sem depender de CDN externa.
Conteúdo importante deve respirar.
Largura máxima de 1200px, 12 colunas, gutter de 24px e margens laterais generosas.
Tabela por breakpoint
Conteúdo com largura máxima de 1200px. Acima de 1440px o conteúdo fica centralizado em 1200px e só os fundos de seção se estendem até a borda.
| Item | Desktop ≥1200 | Tablet 768 a 1199 | Mobile <768 |
|---|---|---|---|
| Display | 64 / 1.05 · Bold | 52 / 1.08 | 40 / 1.1 |
| H1 | 48 / 1.1 · Bold | 40 / 1.12 | 32 / 1.15 |
| H2 | 36 / 1.15 · Bold | 30 / 1.2 | 26 / 1.2 |
| H3 | 22 / 1.3 · Semibold | 20 / 1.3 | 19 / 1.35 |
| Texto | 17 / 1.6 | 16 / 1.6 | 16 / 1.6 |
| Espaço entre seções | 120px | 96px | 80px |
| Margem lateral mínima | 80px | 48px | 20px |
| Colunas | 12 · gutter 24px | 8 · gutter 24px | 4 · gutter 16px |
| Grid de cards | 3 por linha | 2 por linha | 1 por linha |
| Menu | Horizontal com mega menu Soluções | Painel lateral | Painel em tela cheia |
| Hero | Assimétrico 7 + 5 colunas | Texto acima, imagem 16:9 abaixo | Uma coluna, CTA em largura total, imagem 16:10 no fim |
Escala de base 4, um uso por degrau
Radius com moderação
Bordas sutis de 1px. Sombra apenas quando há sobreposição real.
Durações curtas, easing único
Valores já usados nas pranchas, documentados para implementação.
- duration-fast150msHover de links e tags
- duration-base200msHover de cards e botões
- duration-enter450msEntrada de seções (fadeUp)
- easingease / ease-outPadrão em todas as transições
- fadeUp · entrada de seções, 450ms ease, sobe 8px.
- Hover de cards: borda ou fundo muda em 150 a 200ms.
- Seta de links desliza 4px no hover, 150ms.
- Imagem de case amplia 3% no hover, 500ms.
Regra: com prefers-reduced-motion, tudo é desativado. Nenhuma informação depende de animação.
Direção de fotografia
Ambientes reais, empresas, equipes e infraestrutura. Fotografia própria em todas as páginas.
- Ambientes reais
- Indústrias e empresas
- Equipes em situação profissional
- Infraestrutura
- Interfaces reais
- Detalhes de operação
- Robôs
- Hologramas
- Cérebros digitais
- Mãos em telas futuristas
- Imagens genéricas de IA
- Gráficos holográficos
Lineares, mesma espessura, poucos
O ícone ajuda na leitura, não decora frases.
Regras de comportamento
Não é o site mobile completo, apenas como componentes se adaptam.