Have a look at three service cards on a fictional WordPress website.1 Same company, same page, apparently three separate agreements about how a button should look.
It happens easily. One card came from the original design, another was copied from a newer page and the third received a small improvement that never made it back to its siblings. Nobody did anything outrageous. The website just grew.
A small design system helps a custom WordPress theme grow more coherently. That sounds grander than it needs to be. We can start with a few shared decisions, reusable sections and editing choices that make sense to the person maintaining the site.
A quick check of those three cards
The differences are clues. Some may serve the content. Others are accidental. Here’s how I’d separate them.
The heading should have a shared role
A short service name and a longer one need room to behave differently without looking unrelated. Test both, rather than designing around three conveniently identical demonstration headings.
Set the type style and spacing centrally where appropriate. If every card needs an individual font-size adjustment, the layout may be asking the editor to solve a design problem each time.
The aim isn’t to make all titles occupy exactly two lines. Real words have an inconsiderate habit of arriving in different lengths.
Custom WordPress themes are our bread and butter. See our WordPress services.
The button needs a consistent promise
Decide how the primary and secondary actions differ. Then carry their appearance and behavior across the components using them.
A View Service link and a Submit Inquiry button can share visual rules without pretending to perform the same action. Focus and disabled states belong in those rules too.
This is the useful side of component thinking described in Brad Frost’s design-system work: common foundations support the finished website.2 A smaller business can use that principle without inheriting the organizational structure of an international airport.
The content fields should explain the section
A service card might need a title, description, optional image and destination. Give those fields clear names and sensible limits.
ACF Flexible Content allows developers to define layouts with their own subfields.3 A theme can render those structured values into approved sections. Native WordPress patterns offer another approach using arrangements of blocks.
Those are different implementation routes, not two names for the same feature. WordPress 6.4’s pattern-organization improvements, including custom categories, make a useful release context. They don’t decide which route suits a particular editor.
If this was useful, try Which parts of a custom WordPress theme should editors control?
The variation should do a job
An image-led card and a compact text card may both earn a place. A variant with seven extra pixels above the heading probably needs a better explanation.
Document where each variant belongs and show it with realistic content. The editor should be choosing a useful section, not guessing which version of Almost the Same has the correct margins.
Shared styling is also different from shared content. Updating a button style across the site should not unexpectedly change the wording of every button. Make the distinction clear in the editing experience.
Once those decisions are connected to the theme, try building another service page. Can someone choose the right section, add their content and publish a result that belongs to the same website?
That’s the test I’d trust. Not the number of components in the design file.
A small working collection can cover the common sections and expand when a real page needs something new. Keep it understandable, check it on phones and let actual content expose its weak spots.
The cards can still have different jobs. They should simply look as though they’ve met.