43 — BROWNFIELD DISCOVERYVitrine
Brownfield
Discovery.
Guia para aplicar o Design System Maggium em projetos existentes: auditoria visual, migração de tokens e adoção gradual.
Processo
5 passos para
adoção.
01
Auditoria Visual
Catalogar todas as cores, fontes, espaçamentos e componentes existentes. Identificar inconsistências e desvios da identidade Maggium.
02
Mapeamento de Tokens
Mapear valores hardcoded para seus equivalentes no token system Maggium. Substituir hex codes por CSS variables.
03
Migração de Componentes
Substituir componentes custom por equivalentes do DS Maggium. Começar por botões e inputs (maior impacto visual).
04
Alinhamento de Layout
Alinhar grids e breakpoints ao sistema Maggium. Aplicar spacing scale e border-radius tokens em containers.
05
QA e Validação
Teste visual em 375px e 1440px. Validar contraste WCAG. Verificar se todos os tokens estão sendo consumidos corretamente.
Checklist de Migração
Pré-lançamento
validation.
Todas as cores usam CSS variables do token system
Fontes Urbanist e Space Mono carregadas corretamente
Botões seguem as 4 variantes definidas no DS
Inputs possuem os 4 estados (default, focus, error, success)
Contraste de texto atende WCAG AA (4.5:1 mínimo)
Responsivo testado em 375px, 768px e 1440px
Nenhum emoji Unicode — todos substituídos por SVG inline