Design the System, Not the Pages

Somewhere past the fiftieth template, page-by-page design stops scaling, and every team working at institutional size has felt the failure even if nobody named it. Each new section spawns variations of things that already existed. A fourth button style. A fifth callout box. A subtly different card.

Consistency erodes one reasonable decision at a time. The design files become an archaeology site, our stylesheet coverage described the code-side twin, and the redesign that unified everything begins drifting the week it launches.

This year the industry converged on the alternative and, thanks to Brad Frost’s ‘atomic design’ essay this summer, on a name for it: design the system, not the pages. Define the smallest reusable pieces. Compose them upward into components and templates. Document the whole in a living pattern library. Assemble pages from the system instead of inventing them one at a time.

The idea has been building for years. Style guides, the Customizer’s token thinking, and the pattern libraries teams keep publishing this year. Frost’s contribution is a mental model teams can actually share, and the practice has now changed our deliverables permanently. Here is the working version.

The atomic model, usably summarized

Frost’s chemistry metaphor scales cleanly in practice. Atoms: the smallest elements. Type styles, colors, buttons. Form fields and icons. Each defined once. Molecules: small functional combinations. A search field with its button and label. A card with image, heading, and link. Organisms: substantial interface sections built from molecules. The site header, an event listing, a program-finder module. Templates: page-level arrangements of organisms with placeholder content. Pages: templates filled with real content, the only level stakeholders traditionally saw.

The metaphor’s practical force is directional. Decisions flow upward, so a change to the button atom spreads through every molecule, organism, and page that contains it. That is precisely the spread page-by-page design lacks and consistency dies without.

And the model gives teams a shared vocabulary for the conversation that used to be mush. ‘That’s a new organism. Does it earn its place, or is it the events listing wearing different clothes?’ is a designable question. ‘Make this section pop’ never was.

The economics, which favor institutions most

• The twentieth page costs a fraction of the first. Once the system exists, new pages are assembly. Hours instead of weeks. That transforms the economics of the campaign sites, program launches, and section builds that institutional life generates continuously. Our proposals now price system-based production explicitly, and clients see the curve in the numbers.

• Consistency survives dozens of hands. Hundreds of pages maintained by rotating editors and multiple vendors stay coherent when they are assembled from governed components, because coherence is structural rather than vigilant. This is the Customizer’s expose-and-lock principle extended to the whole design layer, and it is the only mechanism we have seen hold at scale.

• Onboarding runs against documentation. The pattern library turns tribal knowledge into an artifact. It is the system’s living reference, with each component rendered, specified, and usage-noted. New designers, developers, and vendors start from the library instead of reverse-engineering the site. The difference shows up in week-one output.

• Responsive forced the issue. Nobody can hand-comp every page at every width. The responsive era’s honest unit of design was always the component and its behavior across breakpoints. Systems thinking is not a preference now. It is how multi-device design is tractable at all, which is why the industry converged this year rather than eventually.

What changes in practice, deliverables included

The shift reorders projects in ways clients should expect. Design phases produce systems. The atom and component definitions, key organisms, and representative templates, with the pattern library as a first-class deliverable. Ours now ship as living HTML, the components rendered in the browser they will actually live in.

‘The homepage comp’ becomes one artifact among many and, we say gently in kickoffs, the least important one to get precious about. The homepage is an assembly, and the assembly parts are the design.

Review conversations improve almost immediately. Stakeholders react to real components with real content at real widths, and the approve-a-painting dynamic gives way to approving a working vocabulary.

Governance acquires its design-layer instrument. The library is where ‘do we already have a pattern for this?’ gets answered, and the answer is usually yes, which is the drift-prevention working.

And the maintenance relationship changes character. System updates spread. The library documents the current truth. The redesign-decay cycle that funded so much of this industry’s repeat business gets structurally dampened, which we consider a trade worth making and saying out loud.

The governance questions a system surfaces

Fair warning from the engagements running this way. The system makes visible a set of decisions page-thinking let organizations defer, and the deferrals arrive as workshop questions.

Who may create a new component? Someone must be able to, or the system fossilizes. Anyone must not, or it dissolves. The answer is a lightweight proposal path to whoever wards the library. The taxonomy-warden pattern, one layer up.

What happens to the patterns the inventory orphans? Deprecation with a sunset, not immortality by inertia. The library should list what is retired and why, or the zombie patterns respawn.

Who arbitrates when a department insists its content is special? Usually it is not, occasionally it is, and the test is the same one navigation governance uses. Demonstrated user need, not organizational pride. ‘We’ll test it’ remains the sentence that ends these arguments kindly.

None of these questions is a burden. Each is a decision the organization was already making implicitly, badly, per page. The system just gathers them into daylight, assigns them owners, and prices them once instead of hundreds of times. That is governance, in every domain it touches. Components, content, permissions, brand: one discipline shared by four departments.

Starting from an existing site

Most readers hold a site, not a blank page, so here is the entry path. Run an interface inventory: screenshot every distinct pattern on the site. The duplication this reveals is the persuading artifact, and audits routinely find button counts in the dozens. Consolidate toward a governed set. Build the library incrementally, section by section, as redesign cycles and ordinary work touch each area.

The inventory takes days. The library grows for a year. The discipline is permanent. It is the same opportunistic-refactor pattern our Sass migration coverage prescribed, operating one layer up, and it works for the same reason. Heat, not ceremony, drives real adoption.

The fiftieth-template wall is real, and every growing site is walking toward it. The system is how you pass through. Design it once, document it living, and let the pages become what they always should have been. Content, assembled from decisions already made well.