Méthodologie de conception d'interfaces qui décompose l'UI en cinq niveaux hiérarchiques : atomes, molécules, organismes, templates et pages. Proposée par Brad Frost en 2013. Les atomes sont les éléments HTML de base (bouton, input, label). Les molécules combinent des atomes en composants fonctionnels. Les organismes assemblent des molécules en sections complètes. Cette approche systématise la construction d'interfaces et alimente directement les design systems.
Commencer par inventorier les atomes existants dans l'interface. Construire les composants du bas vers le haut, pas l'inverse. Documenter chaque niveau dans un outil comme Storybook ou Figma. L'atomic design fonctionne mieux sur les projets à composants réutilisables : un site vitrine de 5 pages n'en tire pas grand bénéfice. Nommer les composants par fonction, pas par apparence ("card-produit" plutôt que "boîte-grise").
Le design system de Shopify (Polaris) structure ses composants selon les principes de l'atomic design. Chaque composant a un niveau de complexité documenté et des règles de composition avec les autres.