In atomic design, what is an organism, and why is an airline booking site's flight-results list a good example of one?
answer
- third of five levels
- a distinct section of the screen
- dissimilar parts or one part repeated
- may hold atoms and other organisms
- context for the smaller parts
basics
~20 sAn organism is a relatively complex component, built from molecules, atoms or other organisms, that forms a distinct section of an interface. A flight-results list qualifies: one flight-option molecule repeated into a self-contained section of the booking screen.
solid answer
~40 sIn Brad Frost's atomic design, organisms are *relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms* that form distinct sections of an interface. They come in two shapes: **dissimilar parts**, like a header of logo atom, navigation molecule and search molecule, and **one part repeated**, like Frost's product grid. An airline's flight-results list is the second shape: the same flight-option molecule — times, stops, duration, fare — repeated into one section. It is self-contained: it can move between the search page and a 'change flight' screen without knowing where it sits. The level matters because it shows the smaller parts working in context and yields a pattern teams reuse again and again.
go deeper
Recall Frost's definition — groups of molecules, atoms or other organisms forming a distinct section — and name a header and a repeated results list as examples.
Explain the two shapes, dissimilar parts and one repeated part, and what self-contained means: own internal layout, movable, reviewable alone.
Place real sections of a product correctly, and explain how organisms expose problems molecules hide, such as a fare line that wraps once forty results stack.
Discuss how naming a section-level tier helps design and engineering agree on reusable chunks, and when the vocabulary stops helping stakeholders.
## The definition Brad Frost's **atomic design** names five levels: atoms, molecules, organisms, templates and pages. **Atoms** are basic elements such as a label or a button. **Molecules** are simple groups of atoms with one focused job, such as a search field. **Organisms** are the third level: *relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms*, which **form distinct sections of an interface**. Two phrases in that definition do most of the work: - **'and/or'** — an organism is not restricted to molecules. Frost's own header organism contains a logo **atom** directly, next to two molecules, and an organism may contain another organism. - **'distinct sections'** — an organism is something a person would point to as a part of the screen: the header, the results, the filter panel. ## Two shapes of organism | Shape | What it is made of | Frost's example | Airline booking example | |---|---|---|---| | **Dissimilar parts** | different molecules and atoms, each with its own job | header: logo, primary navigation, search form | booking header: logo, trip-type switcher, route-and-date search, account menu | | **One part repeated** | the same molecule, many times | product grid of repeated product-item molecules | flight-results list of repeated flight-option molecules | The flight-results list is the clearer teaching example. Each **flight-option molecule** shows one itinerary: departure and arrival times, airports, number of stops, duration and the lowest fare. The organism repeats that molecule for every result and turns the repetition into one section with its own internal rhythm, ordering and dividers. ## Other organisms in a booking flow - **Fare-family comparison** — several fare columns (basic, standard, flexible), each a molecule of price, baggage allowance and change rules. - **Itinerary summary** — outbound and return flight molecules plus a price-breakdown molecule. - **Seat map** — rows of seat atoms grouped by cabin, plus a legend molecule. - **Filter panel** — stop filters, time-range molecules and airline preference toggles grouped under one heading. Each is a section a designer could lift from one screen and drop onto another. ## What 'self-contained' means in practice An organism is self-contained when: 1. It **carries its own internal layout** — the spacing and order of its parts — but not the layout of the page around it. Where it sits is the template's decision. 2. It **can be moved** between screens that need the same job, such as the search page and the 'change flight' screen, without edits. 3. It **can be reviewed alone**, in a component workshop or a design editor's library, with representative content. ## Why the level is worth naming Frost's argument is **context**. Molecules on their own are abstract; organisms show them working together, which is where problems appear — a fare molecule that looks fine alone may wrap badly when forty results stack. Organisms also become **distinct, reusable patterns**: Frost's product grid can appear in category listings, search results and related products, just as a flight-results list can appear in search and in rebooking. ## Not only the web Frost applies the method to a native mobile photo app, where the photo organism — author, timestamp, photo, action bar, caption — is stacked repeatedly into the feed. An airline's native app has the same shape in its trip list. The level is about how parts relate, not which platform draws them. ## Common misreadings - 'Organisms contain only molecules' — Frost's header contains an atom directly. - 'An organism must mix different kinds of molecules' — the repeated-molecule shape is equally valid. - 'An organism is a whole page' — a page arrangement of several organisms is a template; with real content it is a page. - 'Bigger always means organism' — the test is whether it forms a distinct section of the interface, not its pixel size.
- Can an organism contain another organism?Yes. Frost's definition explicitly allows organisms composed of other organisms. A booking header might contain a compact itinerary-summary organism on the payment step. The constraint is not nesting depth but that each organism still forms a distinct section with its own job.
- Why does Frost say to drop the chemistry names with stakeholders after organisms?Because the metaphor helps the team reason about granularity but confuses clients and managers if pushed too far. From templates onward the language switches to page-level words that match the final output, and teams usually present organisms to stakeholders as sections or components.
An organism is like one carriage of a train: made of seats, doors and luggage racks, complete in itself and able to be coupled into different trains, while the timetable deciding its position belongs to someone else.
saying these in an interview costs you the question
- Organisms may contain only molecules, never atoms directly.
- An organism must combine different kinds of molecules.
- An organism is the same thing as a whole page layout.
- Any large component is an organism, whatever it does.
- Organisms are a web concept that does not apply to native apps.