The WordPress ecosystem has spent more than a decade chasing pixel perfection, a habit inherited from print that treats a screen like a glowing sheet of paper. Matching a static mockup coordinate for coordinate gets you a layout that holds up until the first condition nobody planned for. Design intent is the alternative, and it comes down to agreeing on rules instead of positions.
The sequence is always the same. A designer hands over a 1440px Figma file, the client wants it to look exactly like that, and the developer starts sprinkling magic numbers through the CSS: arbitrary offsets, negative margins, whatever forces an element into place. Then someone opens the site on a foldable phone, or with a high-contrast setting turned on, and the whole thing folds.
There is no fixed canvas
We used to tame the web with table layouts and spacer GIFs, and it half worked because you could pretend you knew the user’s resolution. That assumption is gone. Between spatial interfaces and ultra-wide monitors, the viewport is whatever the user happens to have in front of them. Tuning individual pixels against a target that keeps moving is wasted effort, and it comes at the cost of the design intent underneath.
A layout that falls apart when someone increases their font size is not perfect, whatever the mockup comparison says. That is the gap in plenty of modern CSS architectures: they are built around the visual snapshot rather than the rules that produced it.
Pixel perfection is technical debt
Getting that last pixel usually means working around the browser’s layout engine rather than with it, and the result is expensive to maintain and hard to extend. The difference between the two approaches shows up plainly in the CSS.
/* The Fragile "Pixel Perfect" Approach */
.card-title {
font-size: 24px;
margin-top: 13px; /* Forced alignment for a specific font on one screen */
margin-left: -2px; /* Optical adjustment hack */
}
/* The "Design Intent" Solution */
.card-title {
font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem); /* Fluid scaling */
margin-top: var(--space-m); /* Systemic spacing */
align-self: start; /* Logical alignment */
}Design intent and tokens
None of this licenses sloppy work. It moves the conversation to the rules behind the design. When a designer and a developer agree on --spacing-large rather than 32px, they have agreed on the logic and not only the number, so the relationship between elements survives when the value changes on a narrower screen.
I made a similar point in my post on building maintainable design systems. The web is fluid, and CSS container queries with relative units are how you let a design respond to that instead of fighting it.
Speaking the same language
The teams that handle this well have replaced the match-or-fail question with better ones. Instead of “why is this three pixels off?”, the review asks:
- “Is this consistent with the design system?”
- “Does the alignment logic hold across viewports?”
- “What happens to this component when the content is localized?”
Localization is the clearest test of design intent. A button sized to fit its English label will overflow in German unless the constraints are fluid. Specify the behavior rather than the position and the component copes with content you have not seen yet.
If front-end work like this is eating your dev hours, I can take it on. I have been working with WordPress since the 4.x days.
A better standard
The tooling is already here. Intrinsic web design covers most of it: elements arrange themselves according to the space that exists rather than the space someone assumed. Leave exact measurements to the architects.
Stop counting pixels and write down the design intent instead. The CSS gets shorter, and it stops breaking in the places you never tested.
