Design System uMode
Manual estático navegável
Padrões
Combinações reutilizáveis para produtos uMode
Esses arranjos aceleram construção de telas reais preservando a mesma assinatura visual entre plataformas, áreas de negócio e níveis de densidade informacional.
recipes visuais
Sidebar estilo CriAI
Navegação vertical com foco em contexto e ícones legíveis.
Workspace
Área principal sempre clara
A sidebar é suporte contextual. O conteúdo mantém respirabilidade, foco em métricas e navegação contínua.
Hero com gradiente
Assinatura para páginas de entrada, hubs e áreas de overview.
hero section
Resumo operacional com leitura instantânea
Use o gradiente principal em áreas de destaque com uma promessa clara, CTA único e hint do conteúdo seguinte sempre visível.
KPIs em grid
Padrão para páginas de overview e dashboards executivos.
Leads ativos
1.284
+12.4%
Engajamento
74%
Dentro da meta
Risco
3 alertas
Monitorar
Badge de status em tabela
Status rápido e escaneável para listas operacionais.
| Projeto | Status | Owner |
|---|---|---|
| PlanejAI Sprint 18 | Saudável | Ops |
| Mapa Hering | Atenção | Conteúdo |
| GEST HUB rollout | Crítico | Produto |
Como navegar entre padrões e código
Fluxo recomendado para usar este manual em novos projetos.