Free Course for AttorneysLaw Firm Website

Module 2 · Brand your practice

A look that isn't a gavel

20 min

Still Stage 1. Now the look — and the good news for a solo is that distinctiveness here is nearly free, precisely because almost everyone else defaults.

The sameness problem, and why it costs money

Open ten law firm websites in your county. You will find navy backgrounds, gold accents, columns, a gavel, and a stock handshake, in some order. The legal-marketing trade names this itself: the National Law Review runs a standing list of legal-marketing clichés in which the handshake photo, the courthouse columns, the conference-room stock photo, and the scales of justice all appear, each annotated with a variation on “still just lawyers.” The joke carries the argument. A visitor on a law firm’s website already knows they are looking at lawyers. Spending your best pixels restating it says nothing.

The expense isn’t aesthetic. A prospective client comparing three firms who can’t tell them apart by looking falls back on what is comparable — price, proximity, and star ratings. Differentiated design is how a solo stops being priced against every other solo in the county. That last step is our argument rather than a cited finding, but you can test it on yourself the next time you compare three of anything.

The default build

  • Navy hero, gold accent, a gavel or a column
  • Headline: “Experienced. Aggressive. Results.”
  • Stock handshake, stock conference room, stock courthouse
  • A logo with a picture in it — scales, a shield, a laurel
  • Cover the firm name and you cannot tell whose site it is

What the firms worth copying do

  • One idea, carried by type and white space
  • Headline that names an outcome — “Real Justice for Real People” (Stritmatter Law)
  • Documentary photography of real people, or no photography at all (Rosenbaum IP)
  • A wordmark: the firm's name, set well, no picture
  • Highway-sign yellow, if that's the honest choice (Morgan & Morgan, #fdeb01)
The counter-example, told honestly

Hecker Fink, a top-tier litigation boutique, opens its site with a blue New York skyline. The clichés are not fatal at every level of the market — a firm with an enormous reputation can afford a generic hero because the reputation does the differentiating. The rule to take away: clichés are affordable in inverse proportion to how well known you already are.

The kill-list

This is the reference. When the AI proposes something in the left column, name it and ask again.

Adapted from the cliché kill-list in Evolvv's law-firm design research.
Kill thisWhyUse this instead
The gavelA judge's tool, not an advocate's — and barely used in real courtrooms outside the U.S. Symbolically you've put the decision-maker on your business card.Your name, set well, as a wordmark
Scales of justiceSo overused they read as a stock illustration rather than a firmType. Or a mark drawn from your actual position, if you truly need one
Greek columns, courthouse stepsThe visitor already knows you're a lawyerA real photograph of your real office — or nothing. White space beats a stock courthouse
Leather-bound law booksSays you own reference material, which every firm does, and dates the site to 2009 (our judgment, not a cited finding)Your face, or your client's world
City skylineSays you are in a city. See Hecker Fink aboveYour actual street, your actual county, a landmark you photographed yourself
Stock handshakeNear the top of the National Law Review's cliché listA real photograph of you meeting a real person — or the phone number, larger
Diverse conference-room stock photoEveryone recognizes it, and it implies a team you may not haveYour real team, all shot the same way. Solo? One lawyer, confidently
Arms-crossed portrait in front of booksDefensive posture, dated lighting, indistinguishable from every other oneA settled, open expression, eyes lit, neutral or real-office background
Navy and gold, by defaultInertia rather than tradition. Morgan & Morgan proved the default is a choiceAny of the eight palettes below — including navy done properly, chosen rather than defaulted to
“Aggressive representation,” “zealous advocacy,” “results-driven”Every competitor says it, so it distinguishes nothingA sentence only you could write: who you help, with what, and what happens next
A rotating hero carousel — the big top section of the page, on a timerSplits attention, slows the page down, and hardly anyone reaches slide twoOne headline, one image, one button
Gold or pale-gray body textThe gold accent below measures 2.42:1 against white, where readable body text needs 4.5:1Ink on paper. Accents decorate; they never carry words
An AI-generated person, team, or officePresented as real, it is a misrepresentation about your services — and readers are getting better at spotting itReal photographs. One good phone photo in soft window light beats any generated face

Color: convention, not science

Every legal-marketing blog will tell you blue signals trust and green signals renewal. We went looking for the controlled study behind those claims and could not find one. They are professional convention — and convention still has real value, because a client’s expectations are shaped by what they have already seen. Just don’t let anyone sell it to you as a laboratory result.

The one principle that is defensible, and useful:

  • Consumer and emotional practices — family, bankruptcy, estate planning — lean warmer and softer.
  • High-stakes business and litigation practices lean cooler and higher-contrast.

Below are eight palettes built for this course, in five roles each: Deep for headers, footers and dark sections · Mid for links, buttons and headings on a light background · Accent for decoration · Paper for the page background · Ink for body text. Every contrast ratio was computed, not estimated, against white.

Deep Teal — modern professional

#0E3A3A · #1B5E5A · #7FB6AE · #F4F1EC · #14181A — Deep 12.46:1, Mid 7.51:1 (safe for body links). Accent 2.28:1: decoration on dark only.

Warm Slate + Clay — warm, human, unstuffy

#3A4750 · #8C5A45 · #D9C4B0 · #FBF8F4 · #1C2226 — Deep 9.56:1, Mid 5.73:1 (passes body text). Accent 1.68:1: background only.

Forest + Bone — steady, generational

#1F3D2B · #3E6B4C · #A8C0A0 · #F7F5EF · #15201A — Deep 11.93:1, Mid 6.15:1 (passes body). Accent 1.96:1: decoration only.

Oxblood + Warm Gray — establishment without navy

#5A1F27 · #7C2D36 · #C9A227 · #F6F3F0 · #1A1618 — Deep 12.65:1, Mid 9.19:1. The gold accent is 2.42:1: never text, never a border, on light.

Ink + Signal Red — urgency, plaintiff-side

#111418 · #C1272D · #E8503A · #F5F5F3 · #0B0D10 — Deep 18.47:1, Mid 5.84:1 (passes body). Accent 3.72:1: large text and borders only.

Indigo + Amber — optimistic, forward-looking

#232C63 · #3A4795 · #E2A03F · #F8F7F4 · #171A2B — Deep 13.03:1, Mid 8.35:1. Accent 2.25:1: decoration only.

Graphite + Copper — restrained, business-facing

#22262B · #4A5158 · #B4744A · #F4F4F2 · #101316 — Deep 15.22:1, Mid 8.05:1. Accent 3.79:1: large text and borders only.

Classic Navy, done properly

#12233F · #1E3A63 · #9BB0CC · #F5F6F8 · #0A1220 — Deep 15.70:1, Mid 11.41:1. Accent 2.22:1: decoration only. Navy chosen on purpose is a different thing from navy by default.

Two rules that hold whichever palette you pick

Two or three colors, plus a paper and an ink. Not seven. And accent colors decorate; deep and mid colors carry meaning. Look again at those accent ratios — the pretty color is almost never legible as text. Most cheap law firm sites fail on exactly this: gold text on white, a pale blue caption, a light-gray “subtle” paragraph. Module 6 measures the finished site; this is where you avoid the problem instead.

Type: two faces, and the numbers that make text readable

Serif headings — Garamond, Georgia — read traditional, formal, established. Sans-serif headings — Inter, Montserrat — read approachable and current. That is professional convention rather than research, but it is consistent convention. The practical translation: serif says we have been here a long time; sans says we are easy to deal with. A serif body face under a sans heading is the usual way to have both.

On the numbers, the authority a lawyer will recognize is Matthew Butterick, who is both a lawyer and a typographer and wrote Typography for Lawyers. His rules, and they are not negotiable-by-taste:

  • Body text on screen: 15–25 pixels — and set yours at the upper end of that, 16 or above, because your readers include people over sixty.
  • Line spacing: 120–145% of the text size.
  • Line length: 45–90 characters — roughly two to three lowercase alphabets. Not edge to edge.
  • No Times New Roman, no Arial. Butterick is blunt about both, and he is right.
Pairings by direction. One heading face, one body face — a third is the tell of an amateur build.
If your practice is…HeadingsBody
Establishment / trusts and estatesEB GaramondSource Serif 4
Warm traditional / family lawPlayfair Display (headlines only — it collapses at body size)Lora
Modern professional / business, IPMontserratInter
Plain and official / immigration, benefitsPublic Sans, bold weightsPublic Sans
Serious and readable / plaintiff litigationInter, boldMerriweather
All of these are genuinely free

Every face above is on Google Fonts under the SIL Open Font License, which permits commercial use explicitly — including inside a logo. The main catch is that if you modify a font you may have to rename your version; using it as it comes is fine.

Your logo is your name, set well

A wordmark is a logo made of the name itself, set in type, with no picture in it. That is what the largest firms in America use, and we checked by downloading the actual logo files rather than trusting a roundup article. Latham & Watkins, Cooley, Sullivan & Cromwell, K&L Gates, Skadden and Morgan Lewis are all pure wordmarks — letterforms only, no symbol. WilmerHale adds one small maroon square containing “WH” for tight spaces. Morgan & Morgan sets a display face inside a rounded pill. Not one of them has a gavel.

The reasoning is ours rather than a citation, but it holds up: in a referral-driven profession, the name is the product. A mark that competes with the name for attention is spending scarce recognition on decoration. And a symbol has to survive being looked at for a decade — most invented legal symbols don’t.

If your name is too long for a header

Four surnames will not fit. The biggest firms solved this the same way, and you can copy the method exactly:

1. Compress it

Wilmer Cutler Pickering Hale and Dorr → WilmerHale. Skadden, Arps, Slate, Meagher & Flom → Skadden. Morgan, Lewis & Bockius → Morgan Lewis. Apply the same logic to yours.

2. Keep the full legal name

For letterhead, engagement letters, pleadings and the site's footer. The short form does everything else.

3. Build a monogram

Two or three letters for square spaces — favicon, social avatar. WilmerHale's “WH” square is exactly this.

What the logo kit contains

  • A vector master — an SVG file. Vector means it scales to any size without going blurry; a PNG alone is not a logo kit
  • Three color versions: full color, solid black, and reversed white-on-dark
  • Two shapes: the full wordmark (wide) and the monogram (square) for anywhere under about 120 pixels wide
  • A favicon at 16×16 and 32×32 — the little icon in a browser tab, which is what the monogram is for
  • A print proof: print it on a business card and a letterhead before you sign off. Small type that looks fine on a screen fills in on paper
About AI-generated logos

A purely AI-generated logo may not be protectable by copyright, because U.S. copyright requires human authorship (Copyright Office guidance, March 2023). The safe method — and the one we teach — is to use AI for direction: typeface candidates, color, layout options. Then the wordmark itself is set in a real typeface, which is a legitimate, ownable, infinitely scalable logo, and is what the largest firms in America are using anyway.

If you want to see the problem for yourself: ask any AI image tool to generate a logo containing your firm’s name, then zoom in on the letters and shrink it to 32 pixels wide. Your own screen is the citation.

Careful with the firm name itself

If you are one lawyer, a name containing “and Associates,” “and Partners,” or a “Group” implying several lawyers tells a prospective client there are lawyers who do not exist. That is the kind of claim attorney-advertising rules exist to police, and it is a disciplinary question rather than a style preference. The compliance check in Module 6 covers naming properly — for now, if Claude suggests it, say no.

One decision to make now: photographs

This site will contain no AI-generated people, teams, offices, or badges. Why that is a firm rule rather than a taste preference is Module 4’s subject. What matters today is the consequence: you need real photographs, and gathering them takes longer than building the page that displays them. Start now. The checklist in the next lesson tells you exactly what to collect.

Paste this into Claude

Finish Stage 1 — the look

Let's finish Stage 1 — the look. Keep following your brand-strategy skill and use the
positioning we just wrote.

Give me, in this order:

1. A one-paragraph brand direction in plain words — the feeling, no marketing jargon —
   plus three adjectives, and for each one a thing it means I should NOT do.

2. A palette with exactly five roles: DEEP, MID, ACCENT, PAPER, INK. Give me the hex
   code and a plain-English name for each. Calculate and state the contrast ratio of
   DEEP, MID and INK against PAPER. MID must be at least 4.5:1 or you replace it. Say
   explicitly whether ACCENT passes 4.5:1 and 3:1, and if it fails, the only places I
   am allowed to use it.

3. A typeface pairing — one heading face, one body face, both free for commercial use
   on Google Fonts. Family name and specimen URL for each. Body at least 16px, line
   height at least 1.5, and a maximum line width of 45-90 characters.

4. My logo as a WORDMARK — my firm's name set in type, no picture. If my name is too
   long for a header, compress it the way WilmerHale and Morgan Lewis did, and give me
   a two or three letter monogram for the favicon.

Hard rules: no gavel, no scales, no columns, no courthouse, no skyline, no handshake,
no laurel, no quill, no shield. Don't default to navy and gold — if you propose navy,
justify it against MY clients, not "the legal industry". Never write "aggressive
representation", "zealous advocacy" or "results-driven". Invent nothing about me.

Then write it into brand-strategy.md, save brand/logo.svg, snapshot, and summarize it
for me in plain language.

Then check it like a stranger would

Start a fresh conversation for this one — you want an outside eye, not the enthusiasm of the thing that just made it.

The “is this generic?” test

Here is the brand direction, palette, typefaces and logo for my law firm: [paste them].

Answer as a skeptical stranger who has never heard of me.

1. If you covered my firm name, could you tell this apart from any other law firm in my
   state? Answer yes or no first, then explain.
2. Name every visual cliché still in there.
3. What is the single most distinctive thing about it, and is it distinctive enough to
   be the reason someone calls me?
4. Give me the three highest-impact changes, in order.

Be blunt. Don't be encouraging. I'd rather hear it from you than lose the client.
If you get stuck

It came back navy and gold anyway. Name the cliché and make it justify itself: “That’s the default palette for the industry. Give me three alternatives that suit my clients specifically, with contrast ratios, and tell me why each one fits.”

The logo file looks wrong — mangled letters, odd spacing. That usually means it drew letterforms instead of setting type. Say: “Set the wordmark as real text in [your chosen typeface] in the SVG, don’t draw the letters.”

You just don’t like it. That is a legitimate and sufficient reason. Say what’s wrong in ordinary words — “too cold,” “too corporate,” “it looks like an insurance company” — and ask again. You are not being difficult; you are the client.

What success looks like

brand-strategy.md is complete and brand/logo.svg opens and renders. Your palette has five named roles with real hex codes, and you know which color is not allowed to carry text. You have two typefaces, not three. And when you look at the whole thing you can honestly say: that looks like my firm, not a stock firm.

More learning resources

Still want another angle? These are hand-picked and vetted to line up with this lesson — from creators and sites worth your time.