Templates /

Free accounting firm website template

Live demoGitHubDownload ZIPUse this template

Repository: github.com/8bsite/accounting-firm-website-template · Live demo: 8bsite.github.io/accounting-firm-website-template/ · MIT license

Evenkeel template: first screen on a phone

About this template

Evenkeel is an accounting firm website template for a small practice doing books, tax returns and payroll for local businesses. It suits a bookkeeping service too, or a US CPA once the UK tax terms change. The look is Swiss: strictly black and white, red only in small marks.

A one-page site for a small firm of accountants in Bristol: services, a month of work, clients, fixed fees, team, reviews and a booking form. Swiss and strict: black type on white hung on one hairline rule like a ledger, a turning sphere of client cards, a month drawn as a ruler with a red marker, and the brand's two halves meeting in the footer.

Good for:

Accounting or bookkeeping firmTax adviser or payroll bureauSmall professional practice with fixed fees (lawyer, consultant, financial planner)Any service business that wants a calm, typographic, black-and-white look

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation.

How to use the accounting firm website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/accounting-firm-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/accounting-firm-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/accounting-firm-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/accounting-firm-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a website for <your firm: what you do (accounts, tax, payroll…), for whom, where, your fees, opening hours and how clients book a call>. Keep the layout, the motion and the single-file format; replace the brand name, copy, client list, team, reviews, prices, photos, links and contacts, adapt the UK tax terms to your country, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/accounting-firm-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Accounting firm website design and motion

Palette

#ffffff page background#0b0b0b text, vertical rule, buttons, black second screen#f2f2f2 grey client cards and review sheets#6b6b6b labels, roles, captions#8f8f8f grey wordmark halves in the screen corners#dadada hairlines between service rows#d12a1e the only accent: level bubble, month marker, rings, button hover, full stop

Fonts

  • Host Grotesk: the only typeface: huge, tight medium-weight headings, small semibold labels

One vertical hairline rule runs down the page a third of the way in, and everything hangs on it: headings split into lines either side, services and fees read as ledger rows across it. Photos are greyscale. A drawn spirit level with a rocking red bubble sits under the headline.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

  • Navigation
    Round logo mark top-left and a Menu button; full-screen menu with section links, address and phone
  • Evenkeel Accountants
    Two screens: big type hung on a vertical hairline rule with a booking button, then a black screen with a statement, a paragraph and four photos

    Smooth scrolling runs page-wide. On scroll the headline parts at the rule, the black screen opens from a slit there and four photos rise unevenly.

  • Four things we keep for you.
    Ledger of four services: what the client sends left of the rule, what the firm returns right of it, how often

    Row by row, hairlines draw across and the two columns slide in from opposite sides of the rule.

  • A month on the books
    A month drawn as a ruler: a red marker sweeps across and four dated tasks turn from grey to black

    Pinned: a red marker crosses the month's ruler with your scroll, turning each dated task from grey to black.

  • Clients since 2009
    Turning 3D sphere of 28 client cards (names and photos) between the two halves of the title

    Pinned: the sphere of client cards rises and turns almost a full circle as the title's two halves part.

  • Fixed fees, paid monthly.
    Fee table: four plans in hairline rows with who each is for, what is included and the monthly fee

    Each fee row draws its rule across and its fee slides in from the right on arrival.

  • Moving to us takes one afternoon.
    Three steps of moving from another accountant, each tile completing with a closing red ring

    Pinned: three red rings close in turn as you scroll; each tile turns black when its ring completes.

  • Four people, one desk.
    Four team portraits with names, roles and one line each

    The portraits start piled and tilted mid-row and deal out to their places as you scroll.

  • Principle
    One large staggered quote on the rule, ending in a red full stop

    Each quote line thickens from light to medium weight as it rises, then the red full stop pops in.

  • Questions we hear every week.
    Questions and answers (native <details>)

    A hairline draws across above each question on arrival; opening one turns its plus into a minus.

  • What our clients say.
    Four client reviews on sheets that stack as you scroll

    Review sheets stick near the top and stack, each shrinking slightly as the next slides over.

  • Book a free first call.
    Opening hours set large in brackets with a small photo, phone, email, address and a call-booking form (placeholders)

    Phone, email, office and first-call details slide in from the left as they scroll into view.

  • Footer
    Tagline, links, call/email/map icons, the full-width wordmark in two halves, copyright and the Design: 8B credit

    The grey half-names waiting in the screen corners drop away as the full-width wordmark grows out of them.

What is inside

Files
index.html (86 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion
GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts
Host Grotesk from Google Fonts (SIL Open Font License)
Photos
19 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers
Chrome and Edge 108+, Safari 15.4+, Firefox 121+ (it uses :has(), cascade layers, small/dynamic viewport units).
Replace before publishing
Social preview image, favicon, phone number, email address, contact form (sends nothing yet) and map, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License
MIT

Good to know

  • One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
  • Book a free call button in the first screen lead to #contact now; point them to your booking calendar URL (Calendly, Cal.com) if you take bookings there, or keep it on the contact form.
  • The map icon in the footer lead to an OpenStreetMap search for Bristol now; point them to the map URL of your office.
  • The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
  • The grey corner halves are mid grey (about 3.2:1 on white) so they stay visible; they sit behind the content.
  • Review sheets keep some empty space under short quotes, so the stack keeps its rhythm.
  • The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this accounting firm website template

Can I show my own clients on the sphere?

Yes. Replace the names, trades and photos of the 28 cards in place in the HTML. The stylesheet turns every photo greyscale, so any picture keeps the black-and-white look.

Does the call-booking form send anything?

Not yet. It checks name and email and shows a thank-you line, but sends nothing until you connect a form service such as Formspree or Netlify Forms.

For agents and LLMs

More templates

Hushkey, a free product landing page template: first screen
Linea, a free app landing page template: first screen

App

Free
softlife, a free community website template: first screen

All 20 templates