The previous post examined Wilkinson's Grammar of Graphics - a formal system for specifying statistical visualisations through composition of fundamental elements. Wilkinson showed that a creative domain could have grammar without losing expressiveness.
This post explores a different approach to compositional design: Brad Frost's (2016) Atomic Design. Where Wilkinson provides a grammar (rules for combining elements), Frost provides a hierarchy (levels of composition). Both aim to bring structure to design, but they do so differently.
The Design System Problem
Frost's work emerged from a practical problem: how do you design user interfaces at scale? A small website might have dozens of interface elements. A large application has thousands. An enterprise design system serves multiple products, each with hundreds of screens. At this scale, designing element by element becomes unmanageable.
The traditional approach was page-based design: you design the homepage, the product page, the checkout page, each as a separate deliverable. But pages share elements. The header appears on every page. The button style is consistent throughout. The form fields follow the same pattern. Designing page by page means redesigning these shared elements over and over - or, worse, designing them inconsistently. The alternative is to design the elements, then compose them into pages: build a library of components, assemble pages from the library, update the library and all pages update. This is the design system approach. Frost's contribution was to provide a mental model for organising design systems: atomic design.
The Five Levels
Atomic Design structures interface elements into five hierarchical levels. Atoms are the smallest possible components - elements that cannot be broken down further without losing their meaning as interface elements: buttons, text inputs, labels, icons, headings. By themselves, they are not particularly useful - a label without a field, a button without context - but they are the foundation from which everything else is built.
Molecules are simple groups of atoms functioning together as a unit. A search form (combining an input, a button, and a label) is a molecule; so is a navigation item (combining an icon with text) or a media block (combining an image, a heading, and text). The molecule is the simplest level at which you get something useful. A search form does something - it accepts input and triggers an action. The individual atoms do not do that alone.
Organisms are relatively complex components composed of groups of molecules and atoms: a website header (combining a logo, a navigation molecule, and a search molecule), a product card grid (multiple product card molecules), a footer (multiple navigation molecules, social links, and legal text). Organisms are the level at which distinct sections of an interface emerge. A header is recognisably a header. A footer is recognisably a footer. They are reusable across pages but have their own identity.
Templates are page-level objects that place components into a layout. At this level, we are no longer talking about visual components but about structure. A homepage template specifies: header organism at top, hero organism below, product grid organism in the middle, footer organism at bottom. Templates are abstract - they define slots, not content. They say "a heading goes here" not "the heading is 'Welcome'".
Pages are specific instances of templates with real content. The homepage page is the homepage template filled with actual headlines, actual images, actual products. Pages are what users actually see.
Hierarchy as Composition
The key insight is that each level is composed from the level below: atoms combine into molecules, molecules into organisms, organisms into templates, templates into pages. This is hierarchical composition. The metaphor is chemistry - atoms combine into molecules, molecules into larger structures - but the principle is general: complex things are composed of simpler things according to consistent rules. Frost describes it as "Russian nesting dolls" - the smallest atoms are included in bigger molecules, and those molecules get included in even bigger organisms.
This hierarchy enables several things. Each element is defined once and reused everywhere: change the button atom, and every molecule containing that button updates. This is the DRY principle (Don't Repeat Yourself) applied to design, reducing inconsistency and making maintenance tractable. Different team members can work on different levels, with the hierarchy providing interfaces between workstreams. The design system can be documented level by level. Each level can be tested in isolation, making testing modular. And teams have a shared vocabulary: "that's an organism, not a molecule" is a meaningful statement that shapes design decisions.
Atomic Design vs Grammar of Graphics
How does Atomic Design compare to Wilkinson's Grammar of Graphics? The Grammar of Graphics is generative: it provides rules for combining elements, and any combination that satisfies the rules is a valid graphic, generating infinite variety. Atomic Design is hierarchical: it provides levels of composition, with elements at lower levels composing into elements at higher levels, organising complexity. Wilkinson's grammar is more formal - there is a syntax, and specifications either satisfy it or they do not. Frost's hierarchy is more flexible - there is judgment about what level something belongs to. Wilkinson offers specification; Frost offers a component library. Wilkinson's validation is syntactic; Frost's is a matter of level-appropriate complexity.
But both share a commitment to composition: complex things built from simpler things according to structure.
Limitations
Atomic Design has real limitations. The boundaries between levels are ambiguous - what distinguishes a molecule from an organism? Frost admits this is fuzzy, noting that atomic design is a mental model to help thinking rather than a rigid taxonomy. Is a complex form a molecule or an organism? Reasonable designers disagree. The hierarchy is suggestive, not definitive.
The framework addresses composition of visual elements but does not directly address behaviour (what happens when you click?), state (what variants exist?), or transitions (how do elements animate?). These require additional frameworks - state machines, animation libraries, interaction patterns. Curtis (2015) and Kholmatova (2017) both address aspects of this gap, with Curtis focusing on modular web design patterns and Kholmatova on design systems as broader organisational tools, but neither fully resolves the question of how compositional hierarchies relate to dynamic behaviour.
Unlike the Grammar of Graphics, Atomic Design does not have formal rules for what combinations are valid. You can compose any atoms into a molecule. Whether it is a good molecule is a matter of design judgment, not syntactic validity. And the hierarchy culminates in pages, but modern interfaces are not always page-based - apps have views, states, flows. The page metaphor does not always fit.
From Interfaces to Services
What might Atomic Design teach us about services? Services, like interfaces, are composed of smaller elements. A healthcare service includes appointments, consultations, prescriptions, referrals. Each of these could be decomposed further. An appointment includes scheduling, confirmation, reminder, check-in.
Could services have levels like atoms, molecules, organisms? Service atoms might be the smallest meaningful service interactions: a notification, a form submission, a status check, a payment, an acknowledgment. Service molecules might be simple combinations: an appointment (scheduling plus confirmation plus reminder), a purchase (selection plus payment plus confirmation), an enquiry (submission plus response). Service organisms might be larger service components: an onboarding flow (registration plus verification plus setup plus welcome), a support journey (contact plus triage plus resolution plus follow-up). Service templates might be service patterns: the "check something" pattern, the "book something" pattern, the "apply for something" pattern. And service instances would be specific services: this particular GP appointment booking service, this particular benefits application service.
This is speculative, but it shows how hierarchical composition might apply to services. The GOV.UK service patterns (which the next post discusses) move in this direction.
Hierarchies and Grammars Together
Atomic Design and Grammar of Graphics are not mutually exclusive. You could have both: a hierarchy that organises elements by level of composition and a grammar that specifies rules for valid combinations within and across levels. Wilkinson's grammar specifies six components (DATA, TRANS, SCALE, COORD, ELEMENT, GUIDE) and rules for combining them. Frost's hierarchy specifies five levels (atoms, molecules, organisms, templates, pages) and principles for composition.
A service grammar might specify both: components (actors, promises, states, transitions, channels, evidence), levels (atoms, molecules, organisms, patterns, instances), and rules for combination at each level. This would be more structured than current service design practice, which has neither explicit components nor explicit levels.
Where Wilkinson is about generation - rules producing valid outputs - Frost is about organisation: levels enabling manageable complexity. Where Wilkinson emphasises formal syntax, Frost emphasises practical taxonomy. Both are about composition: building complex things from simple things. The next post examines service patterns - the closest thing service design has to either grammars or hierarchies. GOV.UK's patterns, Lou Downe's principles, and emerging work on service building blocks.
Next: "Service Patterns: From GOV.UK to Holliday" - how service design has begun developing reusable patterns, and what they reveal about the possibility of service grammars.
References
Curtis, N. (2015). Modular Web Design. New Riders.
Frost, B. (2016). Atomic Design. Self-published. https://atomicdesign.bradfrost.com/
Kholmatova, A. (2017). Design Systems. Smashing Magazine.