The missing things about the Atomic Design metaphor

The design system created by Brad Frost and Dave Olsen — Atomic Design— inspired by high school biology classes, has some conceptual problems in its metaphor, which also brings an architectural debt to the Pattern Lab.

Problem 1

First of all, some of the problems in the metaphor have already been solved. Read this article:

A brief look at Atomic Components

In the concept of Atomic Design, we have two levels that do not have any relation to the metaphor: Templates and Pages.

In the article above, these nomenclatures were adjusted to have a closer relation to the metaphor, so we have: Ecosystems and Environment.

Problem 2

The Pattern Lab treats all global styles (color palette, font families, and animations) on the same level as atoms. However, these visual elements, technically, are not components, but styles. As they themselves say:

“The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.”

Pattern Lab — “Global” category on the same level as atoms.

Global styles should not be treated as components. Therefore, they can not be treated as atoms. Makes sense?

Resolving the problem

Following the biological metaphor behind the methodology, what most is related to visual styles are our hereditary genetic characteristics. Our genome. In other words, it is responsible for telling us the color of our eyes, hair, skin tone and told up our behavior. Biologically, genes live in the DNA (and RNA).

DNA is a molecule, so to put this to the flow of Atomic Design, we will have something like this:

Adding the DNA to Atomic Design.

We can understand that genes, technically, would be themes. Thus, any custom visual style would work this way. And it would no longer be necessary to declare the global category, as it is written in the Pattern Lab. Initially, all atoms would be born with the default visual style of the browsers (native), but at last they would receive the custom style defined by a theme.

Fixing the Pattern Lab architecture

Adding the DNA to Pattern Lab.

An example using Mustache (to understand, watch the video of Brad Frost’s presentation), we would have something like this:

{{> dna-gene-global}}
Output:
<link rel="stylesheet" src="/dna/genes/global.css" />

References

Atomic Design

Pattern Lab | Build Atomic Design Systems

The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch