> For the complete documentation index, see [llms.txt](https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/principles/atomic-design-system.md).

# Atomic Design

### A shared language

Atomic design **isn't a CSS architecture**. 

{% hint style="info" %}
AD is a convention to organize the interfaces design patterns in a **hierarchic** system.\
It uses the **Atoms** / **Molecules** / **Organisms** allegory.
{% endhint %}

The goal is to share a language between designers, developers, stakeholders regardless of there technical background (technical teams, creative teams, stakeholders ...etc). **AD** was introduced by ***Brad Frost***

### A bottom up approach

**ADS** invite us to create the more global, smalls, atomics parts first and using them as building blocks for higher-level entities, and repeating the process to produce pages.

![](https://1359002107-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LT6wegWUrSWtGdfz9YO%2F-LT7-Gh_rxKXFaCaatYq%2F-LT73-8sYjbMHTZT4ldB%2Fatomic-web-design.png?alt=media\&token=a8361fc5-b669-4f43-abcb-8dbec1e78e48)

We will se later how we integrate ADS to our CSS architecture, and even **slightly deviate from the original definition.** 

{% hint style="info" %}
**More informations about Atomic design :** \
[**a great article**](https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e)\
[**the original documentation**](http://atomicdesign.bradfrost.com)
{% endhint %}