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.
ProjetoStatusOwner
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.
Ir para componentesAbrir snippets copy-paste
Nunca usar cores diretas em componentes.