Quick answer
Atomic design is a way of building websites from small reusable parts: basic elements like colours, fonts and buttons combine into components such as forms and cards, which combine into sections, page templates and finished pages. It matters because it keeps a site consistent, easier to edit and cheaper to extend, even if your designer never uses the term.
Where the idea comes from
The web designer Brad Frost popularised the term in his book Atomic Design, which he published online. He borrowed a chemistry metaphor: just as atoms combine into molecules and molecules into larger structures, small interface elements combine into components and then into whole pages. The idea was not entirely new; designers had built reusable components for years. Atomic design gave it a clear structure and a shared vocabulary.
The five levels
| Level | What it is | Small business example |
|---|---|---|
| Atoms | The smallest building blocks | Brand colours, fonts, a button, an input field |
| Molecules | Atoms working together | A labelled email field with a submit button |
| Organisms | Larger sections | The header, a grid of service cards, the footer |
| Templates | Page layouts without final content | The service page layout |
| Pages | Templates with real content | Your “Boiler servicing” page |
Why it matters to a business owner
- Consistency. Every button looks and behaves the same, every card has the same structure, every page feels like the same website. That consistency reads as professionalism.
- Easier editing. New pages are built from existing parts, so you add a service page by filling in a template, not designing from scratch.
- Cheaper changes. Change the button style once and it updates everywhere.
- Accessibility. Get a component right once, with proper contrast, labels and keyboard support, and every use of it inherits that. The WCAG standards are easier to meet that way.
What it looks like without it
Sites built without reusable components drift. Five slightly different button styles. Headings in three sizes that should be one. Contact forms that look different on each page. A footer edited separately on every template. Each difference is small; together they make a site look assembled rather than designed, and every update takes longer because there is no single source of truth. Our post on a brand that is inconsistent everywhere covers the same problem across print and social.
How big organisations use it
Large organisations run full design systems built on this thinking. The UK government’s GOV.UK Design System is a well-known example: a library of tested components and patterns that hundreds of services reuse, so citizens meet the same buttons, forms and layouts everywhere. A small business does not need anything like that scale, but the principle is the same.
How much a small site needs
For a small business website, you need a light version: a defined set of colours and fonts, a handful of components (buttons, cards, forms, testimonials, call-to-action strips), and a few page templates (home, service, about, contact, blog post). That is enough to keep the site consistent and make adding pages easy. You do not need a documented design system, a separate component library or a specialist team.
Questions to ask a designer
- Will new pages be built from existing templates and components?
- If I change a colour or button style, does it update everywhere?
- Which parts can I edit, and which are fixed to protect the design?
- Are components checked for accessibility once, centrally?
Clear yes answers mean the atomic idea is being used, whatever it is called.
Where content fits in
Atomic design is about structure, but it also changes how you plan content. If you know a service page is built from a fixed set of components (an intro, a list of what is included, a testimonial, FAQs and a call to action), you know exactly what to write for every service. Our guide on planning website content works well alongside a component-based design, because each component becomes a short, clear writing task rather than a blank page.
A worked example
A landscaping firm’s site had grown over five years, page by page, built by three different people. It had four button styles, three versions of the contact form and service pages that each looked different. The rebuild defined the atoms (two brand colours, one heading font, one body font, one button style), a small set of components (service card, testimonial, gallery strip, quote form) and two templates (service page and project page). Every existing page was rebuilt from those parts. Adding a new service later took the owner ten minutes.
Getting it built
Our custom WordPress websites are £499 one-off for up to eight pages, hand-coded from reusable components so the site stays consistent as it grows. If the brand itself needs defining first, our brand identity design is £299. Our guide to bespoke WordPress and themes covers the build options, and all our prices are on the pricing page.
Get the UK Website Project Brief Template (free)
A two-page template for briefing any UK web designer: sitemap, integrations, audience and deliverables. Cuts revision rounds in half.
No spam. UK GDPR compliant. We only use your email to send this resource, unless you tick the box to hear from us.
Frequently asked questions
Who created atomic design? +
The term was popularised by the web designer Brad Frost, who described it in a book and articles published online. He borrowed the chemistry metaphor to explain how interfaces are built from small elements that combine into larger components and then into whole pages. The ideas build on long-standing practice in design systems.
Is atomic design the same as a design system? +
Not quite. A design system is the full set of reusable components, styles and rules an organisation uses, plus the guidance on how to use them. Atomic design is one method for organising and thinking about those components. Many design systems use atomic thinking without using the exact labels.
Do I need atomic design for a small business website? +
You do not need the terminology, but you benefit from the idea. A small site built from consistent, reusable parts looks more professional, is easier to edit and is cheaper to extend. Ask whether new pages can be built from existing components; if the answer is yes, the principle is being used.
