Law Firm Website Template
Demo brand: HALLREN Counsel LLP · Corporate & litigation counsel · 7 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this law firm website template
A complete website for a corporate and litigation practice: seven built routes, a practice-area model you edit in one file, a wired blog, and a contact path that already works. It is not a hero section with lorem ipsum underneath — every page in the demo is a page in the repository.
The design is Swiss-modern, ink on bone. A cool bone paper, one signal-blue accent, hairline rules and crop-mark corner brackets. Nothing glows, nothing is rounded, nothing has a drop shadow. It is the visual register a firm charging by the hour can put its name on without apologising for it.
The one thing it does loudly: the argument assembles. Scattered evidence cards snap onto a strict baseline grid as you read, while a static hairline ledger carries the record beside them. The grid is the point — the page performs the thing the firm sells, which is order imposed on a mess of documents.
The 7 pages you get
- Home
/ - The full argument: positioning, the three practice areas, representative matters, the ledger set-piece and the contact close.
- Counsel
/counsel/ - The people page — partners and counsel, with role, admissions and focus. Driven by an array in src/data/site.ts.
- Representative matters
/matters/ - Anonymised engagement summaries, the format firms actually publish — mandate, role and outcome, grouped by practice.
- Engagement & fees
/engagement/ - How the firm takes work on and what it charges for. The page most firms omit and most clients search for.
- Insights index
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Article
/blog/example-post/ - A worked long-form post showing every editorial component: pull quotes, footnotes, figures, callouts and code.
- 404
/404 - Designed, not default. Carries the navigation so a bad link does not end the visit.
What is in the build
- Three practice areas (corporate, litigation, regulatory) with images, tags and copy — all defined in one
src/data/site.tsobject - Scroll-driven evidence-card set-piece built on GSAP, with a static control state when motion is reduced
- Representative matters, counsel profiles, metrics, engagement steps and fee bases — nine typed arrays in site.ts, so the site grows without touching a layout
- MDX blog collection with a full editorial component set already styled
- Six self-hosted woff2 faces — Space Grotesk for display, Inter Tight for text, JetBrains Mono for the ledger
- Working
mailto:contact path throughout; no form backend to wire up before you can ship - Vitest component and content tests plus a Playwright smoke suite, included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Swiss-modern ink on bone. Cool bone paper, one signal-blue accent, hairline rules and crop-mark corner brackets.
- The mechanic
- The argument assembles. Scattered evidence cards snap onto a strict baseline grid as you read, with a static hairline ledger carrying the record.
- Loud channel
- Moving set-piece
- Imagery. Documents, cropped and pinned
- Type & palette
- Space Grotesk · Inter Tight
-
#f4f2ec#14161c#2b4cf0
Who it is for
Built for corporate, litigation and regulatory practices, boutique commercial firms, and the designers and developers who build for them. It suits a firm that wants to read as serious rather than as friendly — no stock handshakes, no gradient hero, no chat bubble. If your positioning is warmth and accessibility rather than rigour, one of the other professional-services builds will fit you better.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Do I have to keep the HALLREN branding?
No — HALLREN Counsel LLP is an invented firm, built purely to have something real to lay out. The name, the people, the matters and the practice copy all live in src/data/site.ts. Replace that one file and the whole site is yours.
Is the evidence-card animation going to hurt my Core Web Vitals?
It is scroll-driven rather than autoplaying, runs on transforms only, and resolves to a static laid-out grid when prefers-reduced-motion is set. The build is static HTML — there is no client framework hydrating behind it.
Can I add practice areas or remove the blog?
Yes to both. Practice areas are an array — add an object, it renders. The blog is a standard Astro content collection; deleting src/pages/blog and its collection removes it cleanly, and the navigation is data-driven so the link goes with it.
There is no contact form. Why?
A form needs a backend, a spam defence and a privacy notice before it is legal to ship, and every one of those is a decision about your practice, not ours. The template ships a working mailto: path so it is usable the moment you deploy. Wiring a form in is a normal Astro action or any endpoint you already trust.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More professional services templates
Sightline Capital
Financial advisory
Loud
Imagery
WARDENBY
Estate agency / lettings
Loud
Imagery
Balsworth & Co.
Chartered accountancy practice
Loud
Imagery
MARLEDGE FINANCIAL PLANNING
Financial planning & advice
Loud
Display type
KEDWORTH & QUIRE
Independent insurance brokers
Loud
Imagery