Three Passes, Less and Less
Three restyling commits, one direction: drop the ring, drop the icon wrapper, delete the duplicated certification strip. Negative diff.
TL;DR
After three restyling passes, the author realized less is more. Removing a decorative span wrapper around Lucide icons let them breathe with thinner strokes and larger sizes, while deleting a duplicated certification strip cut 34 lines. The takeaway: successful restyling is reduction, so run a deletion sweep and ask who would miss each decoration.
11:23 PM. I stared at the screen after three consecutive commits restyling the services grid on a company profile site. My cursor hovered over icons that still looked "boxed in," while the reference cards above them sat calm and spacious. Something was off with this visual rhythm, and this time, one element was practically begging to be pulled out of there.
A Wrapper That Was Just Habit
At first, I thought the problem was just the border. I deleted the ring-1 and hover accent classes from the two icon tiles. Two lines of code gone. A quiet change. But when I saved and reloaded, it still felt off. The tile was still there. The span wrapper with its tiled background and flex centering was still choking the icon's breathing room.
I briefly convinced myself this little ornamentation was necessary for visual consistency, especially at night when tired eyes get tricked by poor contrast. But after comparing it directly with the original design, it was just an old habit carried over from previous projects. The Lucide icon itself is already a standalone component and doesn't need a wrapper. I deleted the span wrapper and rendered the Icon component from lucide-react directly. I set the stroke width to 1.5 and bumped up the size to 8 for services, and 7 for certificates [4].
// Before: a wrapper span doing a prop's job
<span className="bg-tile flex items-center justify-center p-4">
<ServiceIcon className="text-accent" size={20} />
</span>
// After: bare icon with the right props
<ServiceIcon className="text-accent" size={32} strokeWidth={1.5} />The result? A larger icon with a thinner stroke actually feels much lighter than any bounding box. Markup that does a job a single prop could handle is just bloated markup.
34 Lines That Disappeared
I scrolled down, and the next surprise popped up. At the bottom of the services section, there was an ISO certification strip consisting of 34 lines of code. It had a list of certificate cards, a certifications property, and a BadgeCheck import. The problem was obvious: the exact same certification was already rendered as a card in the hero section, higher up on the same page.
This content was duplicated twice on a single page. I deleted the entire block. 34 lines of code vanished into thin air. No sense of loss, just relief seeing the DOM structure suddenly breathe easier.
This reduction isn't just about aesthetics or cleaning up code. Fewer wrappers mean fewer places where hover exceptions or animations can go rogue. The motion accessibility contract stays intact. Scaling or panning animations can trigger vestibular discomfort in certain users, so we must respect the prefers-reduced-motion setting [5]. This isn't just about following standards; it's about empathy for users who are genuinely sensitive to excessive on-screen movement.
By removing unnecessary elements, we also ensure that Tailwind CSS motion-reduce variant only needs to be applied to elements that actually move, not to decorations that should have been static from the start [1]. This is the kind of noise we often ignore when we're too focused on purely visual tweaks.
Matching a reference design is a journey that often ends in deletion. The first pass mimics the outer frame. The second pass reveals that the inner ornamentation is just habit, not a requirement. The third pass proves that content duplicated by the design is merely a distraction.
My practical rule going forward is simple: after an adjustment pass, do a deletion sweep. Ask every decoration: who will miss it if it's gone? Successful restyling is reduction, until the diff goes quiet. Three passes, less and less, and the result is far better.