Atomic design: atoms, molecules, components and their states

Atomic design builds an interface from five levels: atoms, molecules, organisms, templates and pages. A component is a part with a name, a makeup and states.

A page made of parts

Open any site and look at it with your eyes half shut: it turns out to be built of repeating parts. Buttons of one shape, cards of one kind, headings in one style. If these parts are named and described, a page can be assembled, not drawn from scratch every time.

In 2013 Brad Frost put this thought into words and called it atomic design, after chemistry: atoms make molecules, molecules make organisms. He has five levels.

1. Atoms. What can’t be taken apart further without losing meaning: a heading, a paragraph, a link, a button, a label, a field.
2. Molecules. Several atoms working as one: an item card (a heading, a description, a link), a field with a label and a hint.
3. Organisms. A self-contained part of a page made of molecules and atoms: a header with a menu, a section with a grid of cards, a footer.
4. Templates. The skeleton of a page made of organisms, with no real words. It shows the structure apart from the content.
5. Pages. The template with the real content of your project. Here you find out whether the parts fit life: long titles, no picture, an empty section.

Choose a level on the diagram: the parts it needs are outlined. And lower on the same diagram are the states of a button, which we will come to in a minute.

AtomsMoleculesOrganismsTemplatePage

Your project Menu

What we do

First item A one-line description Read more

Second item A one-line description Read more

Third item A one-line description Read more

Main action

Atoms. They cannot be taken apart further without losing meaning: a heading, a paragraph, a link, a button, a label, a field. On the diagram they are outlined.

The states of one button

DefaultHoverFocusPressedDisabledLoading

Main action

How the button looks while nothing is being done to it.

Don’t take the levels too literally. Sometimes it isn’t clear whether something is a molecule or an organism, and that is fine: what matters is that the part has a name and you know where it lives. The value of atomic design is not in the classification but in the habit of thinking in parts.

Check yourself: how does a molecule differ from an organism?

A molecule is several atoms working together (a card). An organism is a self-contained part of a page made of molecules and atoms (a section of cards, a header).

What a component is

A component is a part of an interface with a name, a makeup and rules. A real component has these described:

• a name and a purpose: what it is and when to take it;
• an anatomy: the parts it is made of (for a card these are the border, the heading, the description, the link);
• variants: primary and secondary, large and small;
• states: how it looks at each moment (below);
• content: how many words it holds, what happens when a field is empty;
• accessibility: how to work with it by keyboard and with a screen reader;
• tokens: which values it uses (color, spacing, radius).

A card of six or seven such lines is already a system. It is exactly what you will find on the component pages of Material, GOV.UK, Carbon and other systems: anatomy, variants, states, rules, code.

States: the most forgotten part

Beginners draw a component in one state, and then the code meets the others and a developer invents them along the way. So the list of states is written down beforehand.

• Default. The resting state.
• Hover. Hints that the part can be pressed. A phone has no hover, so the meaning must not rest on it alone.
• Focus. Visible when the part has been reached with the Tab key. The focus outline must not be removed: without it a keyboard user can’t see where they are. If you dislike the default outline, replace it with your own visible one using the rule :focus-visible: it switches on only for keyboard control.
• Pressed (active). A short reaction while the button is pressed.
• Disabled. The action is impossible right now. Explain nearby why: a gray button with no explanation is annoying.
• Loading (busy). Work is in progress. The label changes (“Sending…”), and a second press is blocked.
• Error, selected, empty: as the meaning of the component requires.

.btn:hover { filter: brightness(1.15); }
.btn:focus-visible { outline: 3px solid #ffdd00; outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

The check can’t “hover” a mouse or “press” Tab, so it checks the static states (disabled, loading), and hover, focus and press are left to your conscience. Press Tab in the preview and look at whether the focus is visible.

Check yourself: why must the focus outline not be removed?

A person who moves around the page with the Tab key would stop seeing where they are. If the outline is in the way, replace it with your own visible one.

A component in one place

A component’s rule lives in one place, and any change changes all its instances. If you copied a card’s markup into five places and fixed the style in each, in a month you have five different cards.

So that class names don’t get tangled, people agree on names. A well-known way, BEM (block, element, modifier), was devised at Yandex: card is the block, card__title is its element, card--featured is its variant. From a class name you can see what the part is and which of its parts.

Teams with many components need a showcase: a page where all of them are shown in every state. A popular tool for this is called Storybook. For your small project the showcase is an ordinary “States” page on the site, like the one you make in the practice.

Practice

Style two parts of your project as components. The item card: one rule for all the cards. The button: three states side by side, default, disabled and loading. Describe the other states with rules and check them by hand.

And write into “My components” one example at each of the three levels, to get used to naming parts.

What was wrong with 2014

In 2014 buttons and cards were often drawn as pictures or given a separate rule on every page. States (except hover) were forgotten, and the focus outline was removed because it “spoiled the look”. The habit of describing states beforehand came with design systems.