The architecture of our design system is based on the atomic web design principles.
As Brad Frost wrote:
The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.
Or, if you’re more into a playful mood, think about Lego for UI components ;-)
This styleguide is based upon these 3 layers of complexity:
1. atoms 2. molecules 3. organisms
Atoms are the most basic, unbreakable building blocks of the design system: these are the little Lego colorful basic bricks.
Molecules are atoms linked together: to build a wall for the castle of your dreams in your next Lego building project, you need to stack bricks on top of each other.
Organisms are the highest order of web components, built by assembling molecules together. Organisms fulfill a purpose and form a complex view. For instance, the mobile menu itself is an organism that you can integrate into your environment.
TO GET DEEPER: To avoid adding complexity, we don’t make any difference between:
After all, both of these are just molecules, such as water is as simple as three atoms linked together (H2O) whereas, for instance, macromolecules found in living organisms might include dozens — if not hundreds — of atoms bound together, but still form a single, unique molecule.