> For the complete documentation index, see [llms.txt](https://rangle-io.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle-io.gitbook.io/react-training/index-1/atomic_design.md).

# Atomic Design

## Atomic Design

<http://bradfrost.com/blog/post/atomic-web-design/>

> *We're not designing pages, we're designing systems of components* -- Stephen Hay

## Atomic Design Principles

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6FVBcsxPoBUOqvFH%2Fatomic-design.png?generation=1551374291943458\&alt=media)

But we are designing a *single-page application*. We should never think of our interfaces as *Pages*.

Instead we should think in terms of *stateless*, *dynamic abstractions*, which are rendered based on the state provided