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
Plus Jakarta Sans
Raio base
1rem
Cor-chave
263° / 70% / 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 Plus Jakarta Sans e escalas.
Espaçamento
Grid, radius, sombras e breakpoints.
Componentes
Biblioteca shadcn customizada com previews.
Padrões
Combinações recorrentes usadas nos produtos.
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.
Roxo 263° em gradiente
Usado em hero areas, CTAs e pontos de diferenciação.
Plus Jakarta Sans + contrastes suaves de superfície.
Light/dark consistente com persistência local.