Atomic design in practice

Atomic design in practice

Atomic design helps you build a design system instead of separate screens. In the example, one Explore button is reused on a desktop landing page, a mobile catalog and a product card.

When the button is defined once, a change to it can carry through to every place that uses it. This keeps the product consistent and saves time.

The five levels are a way to think, not strict rules. Teams often skip or rename levels, and that is fine as long as everyone shares the same vocabulary.