Atomic Design.

The five levels are easiest to explain with an example. Atoms are the smallest units, which make little sense on their own: a label, an input field, a button, an icon. Molecules are small groups of these with a clear job, such as a search field made of label, input and button. Organisms are larger, self-contained sections such as a header, a product card or a complete enquiry form. Templates are page skeletons in which these building blocks are arranged but still contain placeholder content. Pages are the same templates with real content and are used to test the whole.

The last two levels are the ones most often skipped, and they are the most important. Only with real content does it become clear whether a system holds up: a product name running over three lines, a missing image, a four-digit price, an empty state without results, an error message over two lines. Component libraries that are only checked in the catalogue look flawless there and break in use. That is why every organism needs its states defined (default, hover, focus, disabled, loading, empty, error) and not just its ideal case.

When implemented with React or Next.js, the model is reflected directly in the folder structure and in the documentation. An enquiry form is built once as an organism, including validation, error messages and confirmation state, and then used on twelve service pages. If a test shows that the error message appears too late, it is fixed in exactly one place and takes effect everywhere. Without this order you end up with twelve slightly different forms, three of which handle the required fields differently: a problem that only surfaces in operation and is then expensive to fix.

To be honest about the limits: the chemistry metaphor creates borderline cases that help nobody. Whether a card with an image, title and button is a molecule or an organism can be debated at length without the answer improving anything. Many teams therefore now use flatter classifications with two or three categories and keep only the principle: large things are composed of small things, and every unit has one responsibility. If you are starting fresh, adopt the idea of composition and name the levels in a way your own team understands. The overarching framework remains the design system, and the values in it are design tokens.