Legal Advocatuur Design Polish

Legal / Advocatuur Design Polish Reference

Class-level workflow for refining Dutch legal/advocatuur websites to a premium standard. Use for Soleiman-like boutique law firm projects.

Two aesthetic paths are documented below — choose based on the client brief and reference inspiration:

Design Principles (shared)

• Empathy + Authority: warmth toward the client, sharpness toward the adversary
• Dark sophistication: deep navy/ink + champagne-gold accents
• Typography: editorial serif for display (Cormorant Garamond), clean sans for body (Manrope)
• No gavels/scales stock imagery; prefer real office context, desaturated photography

Path A: Classic Sharp Polish (default)

Harvey Specter / Suits aesthetic. Sharp confidence, structured and traditional premium.

Find/replace pattern

Path B: Mercury Premium Polish

Inspired by Mercury (refero.style/3172cd4d). "Authority through restraint" — lighter, airier, with extreme typography and minimal chrome.

Typography

Buttons & radius

Elevation

• No shadows on cards — use 1px borders (border border-[#0f2644]/8) instead
• Card hover: border-[#d4b07a]/20 + hover:bg-white (no translate)
• CTA: no shadow, let color speak
• Navy section: solid bg-[#0a1628] instead of overlay

Section spacing

Navigation

• Fade-out on scroll down, fade-in on scroll up (use framer-motion with useScroll / useMotionValueEvent)
• Phone number as ghost button (.border border-white/18) instead of plain text
• CTA in header is pill-shaped

Icons

• Replace Lucide static icons with Framer Motion animated SVG components for key spots (scale, heart, building, file, shield, phone, mail, check, arrow)
• If LottieFiles CDN blocks downloads (HTTP 403), do not fight it — use Framer Motion animated inline SVGs instead
• Lightweight: each icon adds ~0.5KB, no extra dependency, full color control, intersection-observer Pause/Play

Scroll progress bar

• Thin gold line (3px), origin-left scaleX via useScroll + useSpring
• Color: #d4b07a (single solid, not gradient)

Header fade-on-scroll pattern

const [hidden, setHidden] = useState(false);
const [atTop, setAtTop] = useState(true);
const { scrollY } = useScroll();

useMotionValueEvent(scrollY, "change", (latest) => {
  const prev = scrollY.getPrevious();
  setHidden(latest > 120 && latest > (prev ?? 0));
  setAtTop(latest < 20);
});

<motion.header
  animate={{ y: hidden ? -100 : 0, opacity: hidden ? 0 : 1 }}
  transition={{ duration: 0.35, ease: "easeOut" }}
  className={`... ${atTop ? "border-transparent bg-transparent" : "border-white/10 bg-[#0a1628]/90 backdrop-blur-2xl"}`}
>

Revision Workflow (shared)

1. Research — Exa AI for premium legal design references (PaperStreet, Clio, Dan Gilroy, Mercury, PxlPeak intl + Onwaarts, iO Digital, Legalista NL)
2. Visual audit — load live site in browser (Chrome DevTools MCP), screenshot, vision_analyze with a specific prompt
3. PRD first — document before/after, tokens, plan
4. CSS tokens first — update globals.css
5. Bulk replace via subagent — define ALL find/replace pairs in a structured list (color codes, radius tokens, button styles, shadow values), then dispatch a delegate_task with file paths and list. The subagent runs every replacement in sequence. Verify with search_files afterward. Saves ~15-20 manual patch calls.
6. Also update components: SiteHeader, ScrubHero, SiteFooter, TeamSection — these often have separate inline styles
7. Build + preview deploy (npm run build, then vercel --yes)
8. Client review on preview URL
9. Production push: GitHub auto-deploy (git add && git commit && git push origin main) or manual vercel --prod --yes
10. Verify production URL with curl and optionally a screenshot

Research reference

Full Exa search results with URLs in references/legal-design-exa-research-2026-06.md