Free law firm website template

Law firm website template: one free index.html for a commercial practice advising companies and boards, with four full-screen practice panels, a table of recent matters, three offices, six partners, a fee scale and a contact form. Most photos are greyscale; one red marks the practice shapes and fee bars. AGENTS.md tells Claude Code or Cursor what to keep and replace.

At a glance, October 2026. One 94 KB index.html with its CSS and JavaScript inside, 12 sections, 26 Unsplash photos credited in CREDITS.md, Host Grotesk and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

For commercial lawyers, websites are read by founders and boards who ask the same things: which practices, what the firm has done, where it sits, who leads it, how it bills. The page answers in that order and ends at a form asking the type of matter. It makes a website for lawyers in corporate, disputes, employment or property work, or for barristers' chambers. US attorney web design follows the same order once UK and Irish terms are swapped.

Start a vibe coding pass in Claude Code, Cursor or Codex with the legal facts: the footer's legal form, registration and regulators, then the six matters, published only with clients' consent. The partners' stock portraits show real people: replace them along with names and direct lines. Each practice panel keeps its data-figure and red pieces. The fee cap's stop line sits where its bar ends, now 52%. The head count, founding year, team sizes, deal ranges, response times and pro bono figures are invented; the agent asks for each.

Pick it for a firm that wants to look composed and will explain its fees up front. Bookkeeping and tax practices will find more ready parts in the template built for accountants. Law firm websites for family, criminal or injury work can start here, but most copy changes: it speaks to founders and boards. The gap is depth: it is one page, with no page per practice area or partner profile, and the four team links go to the contact section.

Good for:

Palette

Fonts

• Host Grotesk: everything except the promises and fee names: body text at 400; headings, the huge h1 and practice titles, uppercase labels, buttons and the letter-spaced logo at 500
• Source Serif 4: light 300 weight in red, only for the five promises and the three fee names

Four sections open alike: a large heading at the left, a short note at the right aligned to its foot. The opening is two full screens over one fog photo. Each practice panel is a three-column grid: a tall photo in the middle over red blocks, a two-line title across the grid at mid-height, text lower left, terms lower right. Hairlines divide table rows, offices, fee rows and questions; the promises stand in a staircase of bordered cells.

This law firm website design rations its red to the logo square, practice shapes, serif promises and fee names, fee bars and hover fills. Only the ten city photos on the ring keep their colour. Most motion is scrubbed to the scroll; with reduced motion the page reads in full.

Every value of this law firm website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

• Navigation
  Fixed bar: logo, seven section links and a Book a first call button; hides on scroll down; full-screen menu below 1000 px

  While you scroll down the bar slides up out of view, and it slides back as soon as you scroll up.

• Hold your ground.
  Two screens: a monochrome mountain photo in fog with the stepped h1 and a lead, then a statement and a paragraph about the firm inked out of the white

  On load the photo settles from a zoom, the three heading words rise in turn and two fog bands drift sideways; scrolling then grows, brightens and (on wide screens with a mouse) blurs the photo, pushes the lines apart until they fade, lifts the mist and inks the statement word by word.

• Four practices, one standard: advice you can act on the same day.
  Intro and four full-screen practice panels that stack, each with a photo over red shapes, a two-line title, text and key terms

  Pinned while you scroll, each full-screen panel slides up over the one before, which darkens, as its red pieces open out of one small block into the panel's own figure and the title slides in from the left; the index of the four practices stays in view, underlines the current one and fades after the last panel.

• Five promises, written into every engagement letter.
  Five promises in red serif in a two-column staircase of hairline cells, beside an intro and a link to fees

  On wide screens the staircase assembles with the scroll, right-hand cells stepping down from half a cell higher while left-hand cells rise 60 px; on phones every second cell slides in from the left edge to its place on the right.

• Recent matters, told plainly.
  Table of six recent matters: year, client, matter, outcome

  Once, as each of the six rows comes into view, its hairline draws from the left and the year, client, matter and outcome rise into place.

• Three offices, and partner firms in twelve more countries.
  An arc of ten city photos turning around a paragraph, then three office addresses and phones

  Scrolling turns the ring of ten city photos 40 degrees into place as it rises, each photo settling from a closer crop; below it, a hairline draws over each office and its lines rise once.

• Seventy lawyers. Six partners sign the letters.
  Six partner portraits with practice, city and direct line, carried sideways by the scroll

  Pinned while you scroll, the row of six portraits travels sideways from the first to the last, each photo shifting a little inside its frame; tabbing to an off-screen card scrolls the page to it.

• One working day in ten belongs to people who could never pay for it.
  A photo beside a large statement and three items of pro bono work

  The statement darkens word by word from pale grey as you scroll it up, and the mountain photo drifts slowly inside its frame.

• Fees agreed before the work, in writing.
  Three fee types on one scale: red bars for fixed, capped and hourly, with their terms

  Row by row with the scroll, each red bar grows from a small square to its reach, the cap's dark stop line grows upward, and the fee name and terms fade in from 25% opacity.

• Questions clients ask before the first call.
  Six questions and answers (native <details>) beside a heading and a Book a first call button

  Once, as each question arrives, its hairline draws across and the question rises into place; opening an answer turns its plus into a minus.

• Tell us where you need to stand. A partner will call you back within one working day.
  Closing statement, four office photos dealt into a row, a contact form (no back end yet) and phone, email and out-of-hours line

  The four office photos start as one tilted pile in the middle of the strip and deal out into their row as you scroll (two by two on phones), while the statement above darkens word by word.

• Footer
  Logo, five policy links, the regulation line and the copyright with the Design: 8B credit

• Replace social preview image, favicon, phone number, contact form (sends nothing yet), email address and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
• Book a first call buttons in the nav bar, the phone menu and the questions section lead to #contact now; point them to your booking calendar URL (Calendly, Cal.com) if clients book first calls there, or keep #contact once the form is connected.
• Talk to the corporate, disputes, employment and property team links in the four practice panels lead to #contact now; point them to a page per practice area or the lead partner's contact, or keep #contact.
• Privacy notice, Cookies, Complaints, Terms of engagement and Modern slavery statement links in the footer lead to #footer (nothing) now; point them to the URLs of your own policy pages, or remove the ones you do not publish.
• The form sends nothing: with JavaScript it checks the fields and shows the thank-you line; without it the browser posts to #contact on the same page. Connect Formspree, Netlify Forms or your own endpoint.
• The statements with the ink effect (opening, pro bono, contact) start in the pale hairline grey (#dcdcdc on white, about 1.4:1) and reach full ink only when their centre comes to about 58% of the screen.
• On phones a stuck practice panel is taller than the screen: it is lifted so its terms stay in view, and the top of its photo passes under the index row.
• The ten city photos on the ring carry no visible labels; only their alt texts and the paragraph inside the arc name the cities.

It support

Free

Accounting firm

Free

Motion design studio

Free

All 55 templates