Componentes essenciais.
Poucas famílias, estados claros e comportamento consistente em todas as páginas.
Matriz de estados
Primário sempre em azul SouTech. Cores das unidades apenas nas páginas específicas. Estados simulados estaticamente.
| Variante | Default | Hover | Focus | Active | Disabled | Loading |
|---|---|---|---|---|---|---|
| Primário | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista |
| Secundário | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista |
| Texto | Saiba mais | Saiba mais | Saiba mais | Saiba mais | Saiba mais | Saiba mais |
| Com seta | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista | Fale com um especialista |
No mobile, o alvo de toque mínimo é 44px: o tamanho pequeno sobe para 44px de altura em contextos de toque.
Quatro famílias, não mais
Passe o cursor para ver o estado hover.
Gestão integrada para mais controle e resultado.
Conhecer →
Gestão, sistemas e infraestrutura trabalhando juntos.
- Card de solução: borda escurece e o link desliza 4px.
- Card de case: imagem amplia 3% em 500ms.
- Card de benefício: linha superior estica de 32px para 64px.
- Card de conteúdo: título e seta ficam azuis.
Nenhum card muda de tamanho ou posição no hover. Transições de 150 a 200ms, imagem 500ms.
Componentes de conteúdo
Interaja para ver os estados. Todos com ARIA completo.
Resposta objetiva em até três frases, com link para a solução relacionada.
Tags de unidade usam as variantes text-safe. A cor original aparece só como marcador.
Prova e processo
- 1DescobertaDescrição curta da etapa.
- 2ProtótipoDescrição curta da etapa.
- 3DesenvolvimentoDescrição curta da etapa.
- 4EvoluçãoDescrição curta da etapa.
Logos em escala de cinza, mesma altura óptica. Cor apenas no hover, se houver link.
Estudo de header
Clique em Soluções para abrir/fechar o menu.
Footer institucional simples
ERP, desenvolvimento e infraestrutura de TI.
- ERP
- DEV
- TI
- Cases
- Sobre a SouTech
- Conteúdos
- Suporte
- Ajuda
- Fale com um especialista