> For the complete documentation index, see [llms.txt](https://quantum-design.gitbook.io/qd-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://quantum-design.gitbook.io/qd-docs/overview/methodology-definition.md).

# Methodology definition

## History

Our goal was to create a design system that could be applied to any product. This purpose led us to conduct an in-depth exploration of how the best design systems achieve their effectiveness. Inspired by Brad Frost's book *"Atomic Design"*, we embarked on this journey.

We delved into best practices for components, elements, and values, the hierarchy of tokens, naming conventions for components, efficient workflows in Figma, and exporting to JSON, among many other aspects. Along the way, we read the work of and learned from truly brilliant individuals we deeply admire: Brad Frost, Dan Mall, and Nathan Curtis. Though we’ve never met them, we are grateful for their guidance and insights.

All this research was driven by a single mission:

> ***To build a consisten and scalable design system for any project.***

## Definition

### Atomic Design concept

Quantum is rooted in the philosophy of Atomic Design

*atoms* *<mark style="color:yellow;">(a) →</mark>*  *molecules <mark style="color:yellow;">(m) →</mark>*  *organism <mark style="color:yellow;">(o)</mark>*

* <mark style="color:yellow;">**(a)**</mark> **An atom** is the smallest indivisible and meaningful component.
* <mark style="color:yellow;">**(m)**</mark> **A molecule** is a combination of at least two different atoms
* <mark style="color:yellow;">**(o)**</mark> **An organism** is a combination of at least two different molecules or a mix of atoms and molecules.

<div align="left"><figure><img src="https://content.gitbook.com/content/yC6g0Uu522bosLUsSHQC/blobs/n4zA6BW0CUNADaVstMfY/atomic-design-example.png" alt=""><figcaption></figcaption></figure></div>

### Quantum Design concept

In the Quantum method, an **atom (a)** is a divisible component, as it consists of at least two values that we call **quarks (q)**. In the world of UI design, these are more commonly known as "tokens."

*quarks <mark style="color:yellow;">(q) →</mark>  atoms* *<mark style="color:yellow;">(a) →</mark>*  *molecules <mark style="color:yellow;">(m) →</mark>*  *organisms <mark style="color:yellow;">(o)</mark>*

* *<mark style="color:yellow;">(q)</mark>* **A quark** is the most indivisible value of an element (tokens).
* <mark style="color:yellow;">**(a)**</mark> **An atom** is the composition of an element made up of quarks.
* <mark style="color:yellow;">**(m)**</mark>**&#x20;A molecule** is the combination of at least two different atoms.
* <mark style="color:yellow;">**(o)**</mark> **An organism** is the combination of at least two different molecules or a mix of atoms and molecules.

<div align="left"><figure><img src="https://content.gitbook.com/content/yC6g0Uu522bosLUsSHQC/blobs/6OEBIOpYZugG2WD4tiCh/quantum-example.png" alt=""><figcaption></figcaption></figure></div>

## Why use Quantum?

Our methodology is designed to create consistent and scalable design systems. We aimed to evolve the atomic concept by integrating design tokens into the design system. Starting from the idea of creating *"a design system that works for any product,"* our goal is to enable a complete transformation of a product's look and feel simply by changing the tokens. At the same time, we preserve the atomic concept, allowing new atomized components to be built—just like assembling Lego pieces.

Using Quantum allows you to build interfaces much faster than with traditional methods. It also makes it easier to scale a digital product, whether by creating new components or developing alternative versions of the same product. But the best part about Quantum is its architecture, which ensures a 100% consistent design system. This significantly enhances the user experience of any digital product.