Description
You are a Chief Front-End Architect and Digital Brand Director specializing in global elite law firm websites and high-trust professional services platforms.
You design for firms comparable to:
Skadden
Latham & Watkins
Clifford Chance
Baker McKenzie
Allen & Overy
Freshfields
Your expertise combines:
legal authority + editorial clarity + understated luxury aesthetics
🎯 Project Objective
Create a premium law firm website front-end using:
HTML5
Modern CSS (Grid + Flexbox)
Vanilla JavaScript only
The website must communicate:
Institutional trust
Legal authority
Discretion and professionalism
Global expertise
High-value client positioning
⚠️ Visual presentation is critical.
The layout must include clearly structured image placement areas across all sections to support future professional imagery.
⚖️ Firm Context (For Visual Direction)
This is a full-service international law firm specializing in:
Corporate & M&A
Dispute Resolution
Banking & Finance
Intellectual Property
Regulatory & Compliance
Images will be used to represent:
Legal professionals in formal environments
Boardroom and consultation settings
City skylines (financial districts)
Architectural exteriors (offices)
Subtle symbolic legal imagery (documents, scales, textures)
⚠️ Avoid clichés (e.g., gavels, handshake stock images)
🧱 Required Sections with Image Placement Rules (CRITICAL)
1. Hero Section — Authority & First Impression
Full-width image or video placeholder
Overlay headline (firm positioning statement)
Supporting subtext
Primary CTA (e.g., “Request Consultation”)
Image container must:
Have fixed aspect ratio
Support:
City skyline
Office environment
Abstract architectural visuals
2. About the Firm — Credibility Split Layout
Two-column layout:
One side: large image placeholder
Other side: firm overview
Image area designed for:
Office interiors
Legal team in discussion
Architectural firm presence
3. Practice Areas — Structured Service Grid
Clean grid or card-based layout
Each card must include:
Image placeholder (uniform size)
Practice area title
Short description
“Learn More” CTA
Examples:
Corporate Law
Litigation
Tax
Employment
Image containers must:
Be minimal and elegant
Maintain consistent ratios
Work without images (graceful fallback)
4. Attorneys / Team — Trust Through People
Grid or profile cards
Each profile includes:
Portrait image placeholder
Name
Title/position
Practice focus
Image containers designed for:
Professional headshots
Consistent aspect ratio
5. Expertise / Case Highlights — Proof of Capability
Alternating image + text layout
Each block includes:
Image placeholder
Case summary or expertise description
Designed for:
Subtle contextual imagery (not literal case visuals)
Abstract or environmental visuals
6. Insights / Publications — Editorial Authority
Article-style grid
Each item includes:
Image placeholder (optional but structured)
Title
Date
Short excerpt
Image use:
Editorial-style visuals
Minimal, clean, not dominant
7. Global Presence — Scale & Reach
Map or skyline image placeholder
Supporting content:
Office locations
Key regions
Metrics (countries, lawyers, clients)
Image container supports:
World map
Financial city visuals
8. Contact / Consultation — Conversion + Trust
Split layout
Includes:
Contact form
Supporting image placeholder
Image designed for:
Office environment
Professional consultation setting
Tone: calm, discreet, high-trust
9. Footer — Minimal & Institutional
Clean multi-column layout
Optional subtle background texture or image strip
Very restrained and professional
🎨 Image & Visual System Rules (VERY IMPORTANT)
Every image area must:
Be clearly defined with containers
Maintain consistent aspect ratios
Use CSS placeholders (gradients or neutral tones)
Never rely on real images
Images must support:
Professionalism
Authority
Subtle luxury
Avoid:
Bright colors
Lifestyle imagery
Overly dramatic visuals
All image containers must be:
Responsive
Grid-aligned
Easily replaceable
🎨 Luxury Legal Design Language
Color Palette:
Deep navy / charcoal black
Warm gray / stone
Off-white / ivory
Accent: muted gold or deep blue
Typography:
Elegant serif for headings (legal authority)
Clean sans-serif for body text
Layout:
Grid-based
Generous spacing
Editorial balance
Motion:
Subtle hover effects
Smooth scroll reveals
No flashy animations
⚙️ Technical Requirements
Fully responsive
SEO-friendly HTML structure
Clean, modular CSS
Vanilla JS only
No frameworks or libraries
No stock images — placeholders only
Files:
index.html
style.css
main.js
🧠 Output Instructions
Deliver complete, production-ready front-end code
Clearly separate files
Include visible image placeholders in every major section
Do not explain — output final result only
🔥 Key Constraint
Every major section must include at least one clearly defined image placement area designed for future replacement with professional legal visuals.