Atomic Design

Look at one restaurant card in the Tiffinbox customer app: a photo, a name, a green "veg" mark, a star rating, a delivery time and an "Add" button. Is that one thing, or six? Atomic design gives you a way to see an interface as small pieces that combine into bigger ones, so you know what to build first and what a change will touch.

The rule

Small pieces combine into bigger ones: atoms, molecules, organisms, templates, pages.

Atomic design is a model introduced by the designer Brad Frost. It borrows names from chemistry to describe five levels:

• Atoms. The smallest useful interface elements: a label, a text input, a button, an icon. Split one further and it stops being useful. Design tokens, such as colours and font sizes, are the properties atoms are made of.
• Molecules. A few atoms working together to do one job. A search field is a label, an input and a button.
• Organisms. Larger, distinct sections of an interface built from molecules and atoms. The app header holds the logo, the search field, the cart button and the profile picture.
• Templates. Page layouts that arrange organisms, filled with placeholder content. They show structure, not real data.
• Pages. Templates filled with real content, such as the listing for "Biryani near Koramangala". This is where you test against reality.

The model is a way of thinking, not a strict folder structure. Its real value is ripple awareness: change an atom, such as the button's corner radius, and every molecule, organism and page that contains that button changes with it.

The shortcut

Ask one question at each level: "Can it be split and still be useful?" If no, it is an atom. A few atoms doing one job make a molecule. A distinct section of the screen is an organism. A layout with placeholder content is a template; the same layout with real content is a page.

The trap is arguing for an hour over whether something is a molecule or an organism. The labels exist to help you think about composition. If the team understands what is inside what, the exact label matters little.

Drills

Answer fast — trust the rule.

Remember

• Atoms combine into molecules, molecules into organisms, organisms into templates, and templates become pages with real content.
• Shortcut: "can it be split and still be useful?" No means atom; then climb one level at a time.
• Trap: arguing over labels. The point is knowing what contains what, so you can predict the ripple of a change.