# Legal Advocatuur Design Polish > Class-level workflow for refining Dutch legal/advocatuur websites to a premium standard. Two aesthetic paths: Classic Sharp (Harvey Specter / Suits) and Mercury Premium (light-weight + pill CTAs). - Skill: `s3yed/legal-advocatuur-design-polish` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add s3yed/legal-advocatuur-design-polish` - Raw SKILL.md: https://api.skillmd.com/api/skills/s3yed/legal-advocatuur-design-polish/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Productivity - Author: S3YED (https://skillmd.com/u/s3yed) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/s3yed/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. | Token | Value | Usage | |-------|-------|-------| | Navy | `#0f2644` | Buttons, headings, brand | | Deep ink | `#06111f` | Hero, footer, dark sections | | Ivory | `#f5efe6` | Backgrounds, light cards | | Champagne | `#c9a76b` | Accents, thin rules, gold details | | Charcoal | `#1a232e` | Body text | | Button radius | `rounded-[4px]` | Sharp corners | | Card radius | `rounded-[4px]` | Sharp corners | | Shadows | `box-shadow` present | Structured card elevation | ### Find/replace pattern | Pattern | From | To | |---------|------|-----| | Navy | `#102b4e` | `#0f2644` | | Ink | `#071522` | `#06111f` | | Champagne | `#b9945d` | `#c9a76b` | | Ivory | `#f7f2ea` | `#f5efe6` | | Button radius | `rounded-full` on buttons | `rounded-[4px]` | | Card radius | `rounded-[5px]` | `rounded-[4px]` | | Legal blue | `#184a78` | `#1a5276` | | Muted text | `#43505b` | `#3a4753` | | Text muted | `#5c6873` | `#4f5d6a` | --- ## Path B: Mercury Premium Polish Inspired by Mercury (refero.style/3172cd4d). "Authority through restraint" — lighter, airier, with extreme typography and minimal chrome. | Token | Value | Usage | |-------|-------|-------| | Navy deep | `#0a1628` | Hero, footer, dark sections (not `#06111f`) | | Navy card | `#0f2644` | Section backgrounds | | Champagne | `#d4b07a` | **Single accent** — CTA hover, icon accent only (not text, not borders) | | Champagne subtle | `rgba(212, 176, 122, 0.2)` | Hover washes | | Ivory | `#f4ede4` | Light canvas | | Ivory card | `#faf6f0` | Card surface | | Warm charcoal | `#2d3d4a` | Body text | | Champagne wash | `rgba(212, 176, 122, 0.08)` | Subtle glow | ### Typography | Role | Style | |------|-------| | Hero display | **72px / weight 300** (font-light), `tracking-[-0.04em]` | | Section heading | 56px / weight 400, `tracking-[-0.03em]` | | Subheading label | 12px uppercase, `track-[0.2em]`, `font-bold` | | Body | 17px, `leading-[1.7]` | | Font stack | Cormorant Garamond (300/500/600/700) + Manrope (400/500/600/700) | ### Buttons & radius | Element | Style | |---------|-------| | Primary CTA | `rounded-full` (pill) | | Secondary button | `rounded-full` (pill) | | Cards | `rounded-[4px]` (keep sharp) | | Input fields | `rounded-full` | | Tags/chips | `rounded-full` | ### 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 | Device | Section padding | Between sections | |--------|----------------|-----------------| | Mobile | `py-16` (64px) | `gap-12` | | Tablet+ | `py-20` (80px) | `gap-16` | | Desktop | `py-24` (96px) | `gap-20` | ### 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 ```tsx 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); });