Design e Acessibilidade
O que é Atomic Design?
Atomic Design é a metodologia que organiza componentes em 5 níveis: átomos, moléculas, organismos, templates e páginas — proposta por Brad Frost.
Átomos são os blocos mais simples (input, label, botão). Moléculas combinam átomos (campo de busca = input + botão). Organismos combinam moléculas (header inteiro). Templates definem layout sem conteúdo. Páginas são templates com conteúdo real.
Útil pra organizar bibliotecas em Storybook. Crítica comum: produtos modernos pulam alguns níveis (componentes vão direto pra app sem virar "templates"). Use o vocabulário, não o método ortodoxo.
Termos relacionados
Perguntas frequentes
Atomic Design é obrigatório pra ter design system?
Não. É um vocabulário útil, mas times maduros adaptam (alguns juntam moléculas e organismos, ignoram templates).
Como diferenciar molécula de organismo?
Molécula faz UMA coisa (campo de busca); organismo é um bloco de UI (header com nav + busca + avatar).