Organism

While parts were collected only as buttons and input fields, the same combination got assembled differently on every screen. A search box is one input plus one button, and across three screens the gap between them comes out as 8, 12, and 16.

That happens because the parts were shared and the assembly was not. Whoever draws the mockup and whoever writes the code each redecide the same thing every time, and fixing one of the three leaves the other two alone. Six months on, the same search box exists in five shapes scattered through the product.

So the combination itself got promoted to a part. Small combinations were named molecules, and larger regions carrying one role on a screen were named organisms, which made both of them things to maintain.

The boundary is whether the chunk still means something once detached. A search box built from an input and a button doesn't say what is being searched, so it stays a molecule; a top header holding that box plus the logo and the account menu does the same job on any screen, so it becomes an organism. Three things get settled in practice.

1. Let it hold state. An atom, the smallest indivisible unit, and a molecule take values and render them, while an organism carries its own appearance for an empty list, a loading list, and a failed one. Use one document-list organism and those three cases stop being redrawn screen by screen.
2. Watch the size. Three to six organisms on one screen is typical. When one covers the whole screen, it isn't a part any more but something closer to a template, which fixes layout without content.
3. Keep the build order. Settle atoms and molecules first and assemble organisms from them. Reverse it — look at a screen and build the organism first — and the buttons inside end up specific to that region, unusable anywhere else.

Not spending time enforcing the layer names is also practical. Half a day spent arguing whether a new part is a molecule or an organism costs more than it returns. Many teams cut the layer names down to three, or rename them in whatever words the team already uses.

"Let's promote this to an organism. We're using the same shape on three screens."

The same combination repeats across screens, so it should become a part.

"Put the empty list state inside this organism. It isn't something to redraw per screen."

The part should carry its states too.

"We can decide later whether this is an organism or a molecule. Let's just get it in one place."

Removing duplication comes before classifying layers.

At Pagedeck, Noa promoted three chunks to organisms: the document list, the top header, and the left menu. The document list carries its empty and loading appearances inside it.