Design System V2.0
Alma da Marca Pitch V2.0 Dark Side
[34]Design System // Layouts Avancados

Advanced
Layouts

Composicoes multi-camada para dashboards, command centers, split views e interfaces data-heavy do ecossistema Maggium.

MAGGIUM COMMAND CENTER RECEITA R$84K LEADS 3.5K ROAS 4.2x CPL 9.8
Design System Maggium6 Padroes Avancados2026
[01]Command Center

Dashboard interativo multi-camada.

Layout classico de app com sidebar fixa, KPI grid no topo e area de graficos — usando tokens Maggium.

01DashboardFrame// Sidebar + KPI + Chart
Maggium
Dashboard / Overview
GC
Overview
Campanhas
Leads
Relatorios
Config
Faturamento
R$84K
+12.5%
Leads
3.534
+8.2%
ROAS
4.2x
+15.1%
CPL
R$9,80
-6.3%
[02]Split View

Visualizacao dividida master-detail.

Lista de leads a esquerda, detalhe individual a direita — padrao classico de CRM e painel de atendimento.

02SplitView// Master + Detail
Leads Recentes 24 leads
Roberto Mendes
Qualificado / 2h atras
Ana Cristina
Em nutricao / 5h atras
Carlos Eduardo
Proposta enviada / 1d
Juliana Ferreira
Novo lead / 2d
Roberto Mendes
Qualificado Score: 87 B2B Sao Paulo
Lead qualificado via campanha Meta Ads Q1. Interesse em pacote Enterprise. Ultimo contato ha 2 horas via WhatsApp. Ticket medio estimado: R$ 8.500/mes. Pipeline ativo.
[03]Command Palette

Acesso rapido via atalho.

Modal centralizado ativado por Cmd+K com busca instantanea e lista de acoes. Padrao de apps modernos.

03CommandPalette// Cmd+K Modal
⌘K
Abrir Dashboard⌘D
Novo Relatorio
Gerenciar Leads⌘L
Ver Campanhas
Alternar Tema
[04]Padroes Reutilizaveis

Receitas de layout prontas.

6 padroes de composicao validados para interfaces data-heavy, com todos os tokens Maggium aplicados.

Pattern 01
Sidebar + Content
Layout classico de app: sidebar fixa 200-260px + area de conteudo flexivel com scroll independente.
Pattern 02
KPI Grid + Chart
4 KPI cards no topo (grid 4col) + grafico principal abaixo. Padrao de dashboard analytics.
Pattern 03
Split View
50/50 ou 40/60 split horizontal. Lista de leads a esquerda, detalhe individual a direita.
Pattern 04
Drawer Overlay
Painel lateral que abre sobre o conteudo (w: 400px) com backdrop blur semi-transparente.
Pattern 05
Sticky Header + Scroll
Header fixo com filtros + area de conteudo scrollable. Tabelas longas e feeds infinitos.
Pattern 06
Command Palette
Modal centralizado (max-w 600px) com search input no topo + lista de acoes. Ativado por Cmd+K.