> 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.

![](/files/-LT73-8sYjbMHTZT4ldB)

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 %}