TQ Legal: Rebranding a Live Barrister’s Website Without Breaking It

Project overview

TQ Legal is the practice of Tanveer Qureshi, a UK barrister specialising in health & safety defence, regulatory investigations, ESG risk, commercial litigation, civil fraud and serious financial crime. Working with the client’s marketing agency, I rebuilt the public site into a new navy / gold / cream brand: a homepage and 5 practice-area pages, plus enquiry forms, booking, conversion tracking, cookie consent and a navigation tidy-up, all on top of the existing custom WordPress theme rather than a rebuild. Every page is an ACF flexible-content stack, so the finished site is fully editable by a non-technical owner: no copy, image or section lives hardcoded in a template.
The defining constraint shaped every decision: the old design had to keep working while the new one shipped. The rebrand rolled out as an additive “v2” component layer running alongside the original components, so the blog and every un-migrated page stayed visibly untouched throughout the build. The work overlaps most closely with custom WordPress theme development and ongoing WordPress support.

The challenge

A barrister’s website has one job: read as credible enough that someone facing a regulatory investigation or prosecution will pick up the phone. The existing site had a working component system and years of indexed content, but the design no longer matched the seriousness of the practice. The rebrand had to land a completely new visual identity, with a new palette, new typography and new layouts from Figma desktop frames, and do it without a rebuild, without breaking anything already live, and without ever taking the site down.

What was delivered

I built the new brand as a second component layer inside the existing theme. Legacy components were never edited; each redesigned section became a new _v2 flexible-content layout with its own ACF fields, its own scoped CSS and its own registration in the page renderer, so old and new designs coexisted in the same install for the entire build. On that foundation I delivered the homepage and all five practice-area pages, then wired the conversion journey end to end: enquiry forms, Calendly booking, a thank-you page firing an analytics conversion, GDPR cookie consent and the go-live navigation swap.

Core functionality included

Key architecture decisions

The guiding principle was additive, never destructive. Rather than editing the components the live site depended on, every redesigned section became a new file with a new layout key, registered alongside the old ones. The legacy layer keeps powering the blog and any un-migrated page indefinitely; the v2 layer owns the rebrand. That one rule turned a risky in-place redesign into a safe, incremental rollout: at any point during the build, both designs were fully working in the same install.
Keeping the layers apart was mostly a CSS discipline problem. The legacy stylesheet styles bare elements and uses ID selectors with !important, so any v2 markup that borrowed a legacy class name silently inherited a decade of old rules, a lesson learned early when a reused navigation class broke the new menu. The fix became a standing convention: v2 markup uses only its own prefixed classes, all v2 CSS is scoped under the section wrapper, and on the rare occasion a legacy rule must be beaten, the override deliberately matches its specificity, ID for ID, instead of escalating a war of !importants. Full-bleed backgrounds and max-width constraints are always split across an outer and inner element, another rule written down after it bit once.
Field definitions follow the same additive pattern. New v2 field groups are registered in versioned PHP and injected into the existing database-defined flexible-content field at load time, with every injected sub-field run through ACF’s own validation so it behaves exactly like a natively defined one. Legacy field groups stay in the database untouched; the new ones ship through git.

Results and outcomes

The practice now has a site that finally matches its calibre: a confident navy, gold and cream identity across the homepage and all five practice areas, a measurable enquiry-and-booking journey, and a component system the owner and their agency can edit without a developer. And because the rebrand shipped as a parallel layer, the transition carried none of the usual redesign risk: the legacy pages and blog rendered identically on the day the new design went on as they did the day the project started.

Technology used

TQ Legal runs on WordPress with a bespoke theme and ACF Pro flexible content driving every page. The v2 design layer is hand-written CSS on custom-property design tokens with Fraunces and Manrope typography, scroll animation via a small IntersectionObserver script, and SVG line iconography tinted per section with CSS filters. Forms are Gravity Forms restyled to the brand; booking is Calendly’s popup widget; measurement is Google Tag Manager and GA4 with a data-layer conversion event on the thank-you page; consent is a GDPR cookie banner wired to the tracking stack.