MENTAL MODEL · M3512

Atomic Design

BusinessHigh supportManagement

Included

Updated 2026-08-05

Loading revision record…

INTRODUCTION

English translation pending.

CORE DEFINITION

A design system methodology introduced by Brad Frost and set out in his book. It borrows the language of chemistry to organise interface parts into five levels: atoms, the smallest functional units such as a label, input, or colour; molecules, small groups of atoms that work together, such as a search field; organisms, larger sections such as a page header; templates, page-level layouts that arrange organisms without real content; and pages, templates filled with actual content. The hierarchy turns consistency and reuse into something checkable rather than aspirational.

SCAFFOLDING EFFECT

psychology

Reduce cognitive load

- Component thinking: Define the smallest reusable unit before designing any screen or document. - Reuse assembly: Build complex artefacts by combining proven parts rather than starting from scratch. - Consistency check: Audit whether each new element already exists at a lower level.

anchor

Anchor fast decisions

Interfaces drift when each screen is designed in isolation, so the same problem gets solved many slightly different ways. A fixed hierarchy pushes decisions down to the smallest level, where a single change propagates everywhere at once. Reuse compounds: the more artefacts are assembled from shared atoms, the cheaper each new one becomes and the smaller the surface where inconsistency can appear.

MINIMUM ACTION

In progress 0/1

Practice this model in one real situation:

List the atoms for your project, such as colours, type styles, and buttons. 2. Combine atoms into molecules for patterns that repeat. 3. Group molecules into organisms such as headers and cards. 4. Arrange the organisms into page-level templates with placeholder content. 5. Fill templates with real content and reuse the atom library next time.

Check to track your progress (stored locally)

Learning progress0%

account_treeGenealogyexpand_more

menu_bookReferencesexpand_more

Source support: Explicit

link
baike.baidu.comhttps://baike.baidu.com/item/%E5%8E%9F%E5%AD%90%E8%AE%BE%E8%AE%A1ZH · Explicit
verified