Building modularly

Patterns are not built page-first. Build the smallest pieces, then compose.

Start at the smallest screen. Narrow space forces prioritisation, and the result stays simpler when it widens. Starting wide invites filling the space, and filled space is cognitive load charged to every user. Widening should add breathing room and, only where it earns its place, more content.

1. 1.
   Primitives — button, input, avatar, badge, icon. No layout assumptions, no page knowledge.
2. 2.
   Composites — field (label + input + error), card, table row, empty state. Built only from primitives.
3. 3.
   Templates — an arrangement of composites that recurs across pages.

Two consequences worth stating, because they are what the discipline buys:

• A change to a primitive propagates. Fix the button once and every composite inherits it.
• If a primitive needs a special case to serve one composite, the composite is wrong, not the primitive. Resist adding a variant prop for a single call site.

Before writing a new component, check whether it is a composite of things that already exist (H-45). Most are.