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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/principles/atomic-design-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.