Design System uMode
Manual estático navegável
Visão Geral
Manual oficial do Design System uMode
A referência visual unificada para CriAI, PlanejAI, GEST HUB, Mapa de Assuntos Hering e todo produto que precise nascer com consistência semântica, velocidade e escala.
single source of truth
uMode Core System
Design System uMode
Tokens, componentes, padrões e blocos de código prontos para replicar a mesma linguagem visual em todas as frentes do ecossistema.
Fonte oficial
Inter
Raio base
0.5rem (8px)
Cor-chave
#973BEB · 271° 82% 58%
Tokens semânticos
20+
base unificada
Componentes-chave
12
documentados
Modos de tema
2
persistente
Visão Geral
Mapa completo do sistema visual uMode.
Cores
Tokens semânticos, HSL e HEX em light e dark.
Tipografia
Hierarquia com Inter e escalas.
Espaçamento
Grid, radius, sombras e breakpoints.
Padrões
Responsividade, contraste e combinações recorrentes.
Código
Snippets copy-paste prontos para novos projetos.
Logos & Ícones
Marca uMode oficial em todas as variações.
Regras de ouro
Aplicação obrigatória em qualquer interface uMode.
Todas as cores via variáveis HSL CSS.
Componentes sempre usam tokens semânticos.
Sidebar acessível com estado colapsável por ícones.
Snippets com botão de copiar em toda documentação.
Sinal visual
Assinatura recorrente do sistema.
#973BEB · 271° 82% 58%
Roxo uMode usado em hero areas, CTAs e pontos de diferenciação.
Inter (400/500/600/700) + contrastes suaves de superfície.
Light/dark consistente com persistência local.