The 10 axes
Each one changes a visible part of the site — without us writing custom code.
1Color palette
Pick a color identity. Each preset has a deliberate mood — think Rock vs Jazz vs Ballet vs Boardroom, not "navy with a different accent."
ROCK
Onyx + Crimson — trial-lawyer punch
Jazz Lounge
Midnight + Brass — sophisticated, intimate
Ballet
Dusty rose + champagne — soft, refined
Classical
Ivory + navy + gold — white-shoe firm
Modern Professional
Navy + emerald — confident, clean
Established
Navy + gold — warm + trustworthy
Folk / Boutique
Forest + cream — calm, approachable
Tech / IP
Electric blue + slate — precise, modern
Boardroom
Slate + soft gray — safe corporate
Why it matters: this is THE biggest mood-setter. A criminal trial lawyer should not be using the same palette as an estate-planning boutique. Pick the music.
If you're a…
- PI / trial lawyer → Rock (Onyx + Crimson) — aggressive, decisive, jury-ready
- Estate planning boutique → Ballet (Dusty Rose + Champagne) or Classical (Ivory + Navy + Gold)
- Family law / mediation → Established (Navy + Gold) or Folk (Forest + Cream) — warm, approachable
- Tech / IP / startup counsel → Tech / IP (Electric Blue + Slate) — clean, precise
- Big-firm refugee solo → Jazz Lounge (Midnight + Brass) — sophisticated, intimate
- Old-school general practice → Boardroom (Slate + Soft Gray) — safe, predictable
- Modern professional default → Modern Professional (Navy + Emerald) — confident, clean
2Navigation style
Where the menu lives.
Top bar — logo left
Top bar — logo centered
Left sidebar (desktop)
Why it matters: left-sidebar is rarer and distinctive; top-bar is what every visitor expects.
If you're a…
- Solo with 3-4 practice areas → Top bar, logo left — what every visitor expects, low friction
- New solo wanting a warmer feel → Top bar, logo centered — feels more boutique, less corporate
- Multi-attorney firm with 6+ practice areas → Left sidebar — fits more navigation, distinctive look
3Hero style
The first screen — what visitors see before scrolling.
Photo background + headline
Split: headline left / portrait right
Text-only with pull-quote
Floating status cards (like YourNewFirm.com itself)
Why it matters: biggest perceived-uniqueness lever. The 4 samples each use a different hero.
If you're a…
- Trial / PI lawyer → Split: headline left, portrait right — you ARE the product (see Brennan Trial)
- Family law / warm practices → Photo background + headline overlay — see Smith Family Law
- Criminal defense / decisive → Text-only bold statement — see Garcia Defense
- Estate planning / refined boutique → Text-only with pull-quote — see Liu Estate Planning
- Modern tech / IP firm → Floating status cards — see this very site (yournewfirm.com)
4Typography pairing
How your headlines and body text feel. As much mood-setting as color.
All Sans (Inter)
Modern, clean, approachable
Display Serif + Sans
Magazine-style — established but readable
High-contrast Display
Sophisticated, editorial, boutique
Slab Serif
Heavyweight, confident — trial lawyer energy
All Serif (Lora)
Refined, unhurried — estate / wills
Why it matters: serif says "tradition." Slab says "I'm going to win." Display says "boutique." Sans says "modern." Pick to match the music.
If you're a…
- Trial / PI lawyer → Slab Serif (Roboto Slab) — heavyweight, confident
- Estate planning boutique → High-contrast Display (Cormorant) — sophisticated, editorial
- Wills / trusts / refined practice → All Serif (Lora) — unhurried, traditional
- Family / immigration / approachable → All Sans (Inter) — modern, friendly
- White-shoe firm → Display Serif + Sans body (Playfair + Inter) — magazine-style, established
5Practice areas presentation
How your areas of practice get listed.
Card grid with icons
Accordion (click to expand)
Image-led tiles
Simple bulleted list
Why it matters: solo with 2 areas wants minimalism. Firm with 8 areas wants the grid.
If you have…
- 2-3 practice areas with detail → Simple bulleted list — let the prose breathe
- 4-6 distinct areas → Card grid with icons — scannable, scannable, scannable
- 5-8 areas you want clients to dig into → Accordion (click to expand) — keeps the page short, lets curious clicks reveal depth
- 3-4 areas + you want it photo-rich → Image-led tiles — visual storytelling per area
6Attorney bio treatment
How you present yourself.
Large portrait left + bio right
Centered portrait + bio below
Small thumbnail + bio
Text-only (no photo)
Why it matters: some lawyers hate their photo. Removes an objection.
If you're…
- Photogenic + your personal brand IS the firm → Photo left + bio right — lead with you
- Mid-size firm or shared identity → Centered portrait + bio below — equal weight on text and image
- Not into your headshot but want some image → Small thumbnail + bio — minimizes the photo without hiding it
- No professional headshot yet, or genuinely don't want one → Text-only (no photo) — see Liu Estate Planning
7Social proof section
Credibility signals.
Testimonial cards (3-up)
Single rotating quote
Affiliation strip (bars / schools)
Hidden entirely
Why it matters: new firms have no testimonials yet — affiliation strip still signals credibility.
If you have…
- 3+ real client testimonials → Testimonial cards (3-up) — strongest social proof
- 1 strong testimonial you're proud of → Single rotating quote — front and center
- Brand new firm with no client reviews yet → Affiliation strip — bar associations, law school, certifications fill the gap
- Practice area where testimonials are awkward (criminal defense, sensitive family) → Hidden entirely
8Insights / blog section
Whether to include space for articles you'll write later.
Include with 3-post placeholder
Skip entirely
Why it matters: most lawyers don't actually blog. Hiding it removes the "Coming Soon" embarrassment.
If you…
- Will actually write 1+ post/month (for SEO or thought leadership) → Include with 3-post placeholder — we'll seed it with 3 starter posts you can replace
- Won't write this year, but want the option later → Skip entirely — hiding "Coming Soon" beats showing it
9Footer style
How thorough your footer is.
Minimal: name + phone + address
Full: + hours + map + service areas
Why it matters: full footer helps local SEO; minimal is cleaner for virtual practices.
If you…
- Have a physical office clients visit → Full footer (hours + map + service-area list) — feeds Google's local-SEO signals
- Virtual practice / no walk-ins → Minimal footer (name + phone + mailing address) — cleaner, no fake "hours"
10Primary call-to-action
How you want prospects to reach you.
"Book a consultation" → Calendly
Phone prominent (header + sticky)
Short contact form on every page
Why it matters: matches how your leads actually reach you today.
If your prospects…
- Urgent situations (criminal, PI, family-crisis) → Phone prominent — sticky on mobile, header-displayed; they need to dial NOW
- Planning-ahead situations (estate, business formation, IP) → "Book a consultation" → Calendly — friction-removing for non-urgent
- Want detail before talking (insurance, complex matters) → Short contact form on every page — they describe the matter; you reach back when you've read it