Atomic Design Methodology

Atoms, molecules, and organisms

Based on Atomic Design by Brad Frost

Protons

While the Atomic Design Methodology doesn't go this deep, it's important to point-out that the chief component of the DDS will be the Theme. It will be pervasive throughout the system, just like protons (and electrons) are found in all atoms, and thereby in all things that have atoms.

The rule of thumb for what belongs in the theme vs what belongs as inline CSS within a component's code will be whether >1 component needs the detail: One component: Specified as inline CSS within the component's code. Multiple components: Specified as a property in the theme, and promoted to the theme if it's already used inline within another component.

Atoms

These are the smallest building blocks of the system: All atoms will reference the Theme properties, as illustrated by the smaller blue squares.

Molecules

These are larger items that are still quite generic in use and still fairly reusable: Here, we have a Search component, which is composed of the Icon, Button, and Input atoms, all of which reference the Theme.

Organisms

These will be the larger, complex components that are comprised of atoms, molecules, and even other organisms. They are more specific in use, yet still usable across at least 2+ UI apps. Here, we have a Header component, which is composed of the Search and Avatar molecules, and some Label and Icon atoms.