Atomic Design is a user interface frontend design system that helps you organize your codes and components in a clear and reusable way.

Atoms — input text field, button

Molecules — groups of atoms, like search field and button

Organisms — groups of molecules, like the search nav bar

Templates — groups of the organism, where design come together to layout actions

Pages — specific instances of templates, where users will ultimately see

Screenshots from the Youtube Video above: