202306011245 Status: #the-standards #lam-zett Tags: #process # Atomic Design Any one that has ever done a digital design before has probably heard of some form of Atomic design principles. They’ve probably also watched [this video](https://vimeo.com/109130093), or, read [this article](https://blog.usejournal.com/thinking-about-react-atomically-608c865d2262). Atomic design principles are a key system in digital design. It involves breaking down an entire website into key components, so that these components can be used consistently throughout the site. There are 2 main reasons for doing things this way: speed and consistency. - Speed: So that we don’t have to re create the element each time it needs to be used, we can just reuse the original one. It also makes updates much quicker as we only need to update the parent or master component and all its children will also be updated. - Consistency: This is more from a dev perspective but if we constantly reuse the same components then spacing and alignment will always be the same everywhere. Nothing worse than the same elements being slightly differently spaced each time they appear. But for Love and Money, the real unlock came from questioning why the metaphor ran out. Templates and Pages hardly feel like a logical extension of the Atoms, Molecules and Organisms metaphor. More over, and more importantly, why did we stop at digital products? Why would a systematised approach that’s been so successful in creating complex systems at scale stop on the waters edge of digital products? If we’re taught anything as designers it’s the importance of systems, and how one system depends on another. Why then are we so reluctant to consider the bigger systems our systems are part of? Why do we not think bigger?  It turns out that what works locally for digital products scales seamlessly into bigger and bigger systems. It turns out that there’s an atomic-lead (or at least inspired) approach to entire brand systems. Starting with a simple, essential idea and creating a flexible, interdependent system of logos, type, colour, motion, and everything else, and then componentising those elements into  interchangable characteristics allows for incredible efficiency and control. In fact, the domain of applicability for a system that concurrently considers both the details and the big picture is not only scalable, it’s extremely powerful. -- This guy is Auguste Comte. Like the cheese. In the 19th century he recognised that the different sciences are all connected in a hierarchy of what we now call “Emergence”. The theory states that as we move up the levels of sciences we “emerge” at different levels of what can be considered as fundamental rules. The most basic level of Chemistry is a recurring pattern of some of complex physics. The same is true of biology to chemistry. Which means that as we go up the levels of sciences, we go from the simple to the inherently complex, as each layer smuggles in the complexity from the level before. Physics, then, is the simplest of sciences: this is the reason why we can use quantum physics to calculate exactly where we are on the planet through GPS, and yet can’t seem to get a straight answer out of the medical community about how to treat cancer or… I dunno, whether to eat eggs.   This is exactly what makes Atomic Design so powerful. Complexity at one layer translates to simplicity at higher levels, because all of the decisions have already been made. So then, Atomic Design has grounding in long-standing scientific theory. My question then is: why does the science run out when we get to “templates”? For that matter, why would we stop at digital products? If we’re taught anything as designers it’s not just the importance of systems, it’s that one system depends on another. Every pixel emerges as part of a bigger picture.  We intuit Comte’s theory every day when we think about how our type structures work with our form fields, our colours with our hover states.  So why then do we not think bigger? Why not extend the scientific metaphor of emergence and see how far it goes? It turns out that what works locally for digital products scales: there’s no bright line between product and brand. Or even between brands and their markets. Only nested components. Levels of emergent complexity.  If we start with simple ideas at the atomic level, then build a flexible system of componentised assets governed by consistent behaviours — chemical reactions if you will… we can move through these chemical compounds to create entire brand eco-systems art the biological level: living, breathing organisms that express themselves at the psychological level, and ultimately exist in society in different, dynamic ways, depending on the environment. We can scale the Atomic approach to build entire brands. Which leads me to our next transformative lesson. --- # References - The guy that developed the system has a book [here](https://atomicdesign.bradfrost.com/table-of-contents/) - We wrote about it [here](https://paper.dropbox.com/doc/Notes-on-Atomic-Design--A4ku5NfSIRasgpnfMqKJm25oAg-uD7j93TONPQikb2wpdHra)