O Design System desenrolado da Maggium, somos uma empresa de vendas que usa marketing como ferramenta, a fonte única da verdade para marcas que escolheram ser desenroladas
Dark Side Edition, design tokens, motion system, tipografia e cor, tudo governado por CSS custom properties
Cobertura de Tokens
Os princípios que governam o Design System
Regras invioláveis para consistência, performance e conversão
01
Consistência acima de criatividade
Todo valor visual vem de um token que já existe, nenhuma cor, fonte ou espaçamento inventado na hora
02
Um shell, todas as páginas
Cabeçalho, menu, rodapé e controle de tema são o mesmo objeto em toda página, só o rótulo muda
03
Tema é contrato, não enfeite
Nos temas escuro, entardecer e claro, cada página mantém a mesma hierarquia, componentes e legibilidade. Muda a atmosfera visual; contraste, estados e comportamento continuam previsíveis.
04
Página autocontida
Cada página abre sozinha no navegador, sem servidor, sem build, sem dependência externa
05
Estrutura clara e válida
No código, cada parte recebe a função que realmente exerce: título é título, botão é ação e navegação é navegação. Isso deixa a página compreensível para pessoas, leitores de tela, buscadores e IA, sem erros ou identificadores repetidos.
06
Mobile primeiro, sem vazamento
Nasce em 375px e cresce para 768, 1024 e 1440, regra de um breakpoint nunca vaza para outro
07
Movimento com propósito
Animação orienta, nunca impressiona, e sempre com saída para quem não pode ver movimento
08
SVG sobre emoji, sempre
Ícone é SVG inline, emoji é proibido porque você não controla o que o cliente vê
09
Conteúdo real, dado vivo
Nada de placeholder e nada de dado que envelheceu, contador desatualizado é placeholder disfarçado
10
Prova social rastreável
Número, case ou depoimento só entra com origem e autorização registradas
11
Copy que carrega peso
Todo texto informa, prova, diferencia ou conduz, texto que não faz nada disso sai
12
Acessibilidade é piso, não extra
WCAG AA nos quatro pilares e em todas as fases de tema, não só contraste
13
Hierarquia tipográfica inviolável
Um H1 com a promessa principal, H2 são argumentos, H3 são detalhes, sem pular nível
14
Estados completos
Normal, hover, foco, ativo, desabilitado, carregando, erro e vazio, todos desenhados
15
Jornada antes do layout
Nenhuma página começa pelo desenho, começa pelo mapa de atenção, interesse, prova e decisão
16
Conversão acima de estética
Todo elemento justifica sua presença pelo que faz na conversão, estética serve à conversão
17
Velocidade é lucro
LCP abaixo de 2,5 segundos, cada segundo a mais é conversão perdida
18
Descoberta e rastreabilidade
Encontrável por buscador e por IA, pronta para medição e sempre com consentimento