Atomic Design

Methodology for creating design systems.

Atoms

• The most basic building blocks.
• Not very useful on their own.
• HTML tags, such as a label, a button, or an input.

Molecules

• Combination of reusable atoms in its smallest fundamental unit.
• Backbone of our design system.
• Do one thing and do it well.
• Example: Search widget.

Organism

• Group of molecules joined to form a relatively complex, distinct section of an interface.
• Example: Navigation bar or Footer

Templates

• A group of organisms forms a template.
• The design comes together in this stage.

Pages

• A page is an instance of a template.

Resources

• Atomic Web Design #media/article