Atomic design e um jeito de organizar a interface quebrando ela em pecas reutilizaveis, em camadas que vao da menor pra maior. A ideia vem da quimica: o atomo forma a molecula, e a molecula forma uma estrutura maior.
Sao cinco camadas no total. Os atomos sao as pecas basicas, como botao, rotulo, campo e icone. As moleculas juntam atomos num grupo com funcao, como uma barra de busca (campo mais botao). Os organismos sao blocos maiores, como uma navbar ou um card. Os templates arrumam esses organismos num esqueleto de pagina. E as paginas, por fim, preenchem o template com conteudo real.
O ganho disso e consistencia e escala. Quando voce muda o atomo, a mudanca cascateia pra tudo que o usa. E, de quebra, o vocabulario comum faz design e codigo falarem a mesma lingua.