---
title: "Atomic design – building UIs from small parts | Sweet Lava"
description: "Atomic design builds interfaces from atoms (buttons, fields), through molecules and organisms, to full pages. See why teams design this way."
url: https://sweetlava.eu/en/glossary/atomic-design/
lang: en
alternate_pl: https://sweetlava.eu/pl/slownik/atomic-design/
---

Design & branding 

# What is Atomic design?

Atomic design is a methodology for building interfaces from the smallest elements (atoms – button, field, label), through their combinations (molecules, organisms), up to templates and finished pages.

Brad Frost's metaphor organises interface thinking the way chemistry organises matter: **atoms** (button, icon, text field) combine into **molecules** (a search box = field + button), molecules into **organisms** (a page header), and organisms fill **templates** and **pages**.

The practical benefit: a change to an atom propagates everywhere it's used – you fix a button once, not on forty screens. It's also a shared team language: "this should be a molecule" says more than an hour of discussion.

Atomic design leads naturally to a design system and vice versa: most design systems are organised in its spirit.

## Related services

- [ Brand identity design & design systems → ](https://sweetlava.eu/en/services/branding-design-systems/)
- [ UX audits & UX/UI design → ](https://sweetlava.eu/en/services/ux-ui-ax/)

## Related terms

- [Design system](https://sweetlava.eu/en/glossary/design-system/)
- [Design tokens](https://sweetlava.eu/en/glossary/design-tokens/)
- [UI kit](https://sweetlava.eu/en/glossary/ui-kit/)

## A new brand identity ahead, or a clean-up of the current one?

We design marks, brand books and design systems, and deliver the guidelines in a format AI tools understand. Scope and quote within a few days.

[ Get in touch ](https://sweetlava.eu/en/contact/?source=glossary-atomic-design)