Atomic Design Methodology | Atomic Design by Brad Frost

1. Átomos (Atoms) são elementos da interface do usuário que não podem ser mais decompostos e servem como blocos de construção elementares de uma interface.
2. Moléculas (Molecules) são coleções de átomos que formam componentes da interface relativamente simples.
3. Organismos (Organisms) são componentes relativamente complexos que formam seções distintas de uma interface.
4. Modelos (Templates) colocam os componentes em um layout e demonstram a estrutura do design.
5. Páginas (Pages) aplicam conteúdo real aos modelos e articulam variações para demonstrar a interface final e testar a resiliência do Design System.

Ícones das pastas

Configuração no arquivo settings.json do VSCode utilizando o Material Icons Theme:

"material-icon-theme.folders.associations": {
    "organisms": "content",
    "molecules": "components",
    "atoms": "lua",
  },

Referências

Atomic Design

Como criar componentes React com uma arquitetura escalável usando Atomic Design