Methodology definition
Last updated
Last updated
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.
Quantum is rooted in the philosophy of Atomic Design
atoms (a) → molecules (m) → organism (o)
(a) An atom is the smallest indivisible and meaningful component.
(m) A molecule is a combination of at least two different atoms
(o) An organism is a combination of at least two different molecules or a mix of atoms and molecules.
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 (q) → atoms (a) → molecules (m) → organisms (o)
(q) A quark is the most indivisible value of an element (tokens).
(a) An atom is the composition of an element made up of quarks.
(m) A molecule is the combination of at least two different atoms.
(o) An organism is the combination of at least two different molecules or a mix of atoms and molecules.
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.
