Free accountant website template

Live demo GitHub Download ZIP Use this template

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

Tallyhouse template: first screen on a phone

About this template

Tallyhouse is an accountant website template for a small practice that keeps the books, files tax returns and runs payroll for sole traders and local businesses. A bookkeeper or payroll bureau can use it as it is by trimming the three service slabs.

A one-page site for a local accountancy firm that serves sole traders and small businesses, with a sample monthly report, services, a tax-year calendar, client stories, team and fixed fees. Flat orange, lavender and sage blocks, hairlines and huge tight type, like an annual report; as you scroll, a black cover spreads over a collage of tinted photos, a dot screen resolves into each service photo, the tax year slides past a line that ticks off each deadline, and the fee blocks rise to their prices.

Good for:

Accountant or bookkeeperTax adviser or payroll bureauSmall professional practice with fixed monthly plansAny service business that sends clients a regular report

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

How to use the accountant website template

With an AI coding agent

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

curl -LO https://raw.githubusercontent.com/8bsite/accountant-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/accountant-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/accountant-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/accountant-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 site for <your practice: what you do (bookkeeping, tax, payroll…), for whom, where, your plans and prices, how to book a call>. Keep the layout, the motion and the single-file format; replace the brand name, copy, the sample report, the deadlines for your country, client stories, team, photos, prices, links and contacts, 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/accountant-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.

Accountant website design and motion

Palette

#ffffff page background#0b0b0b text, cover, tax year, footer#fe7141 orange slab, highlights, buttons#cdabfe lavender report section, slab#d1ddd3 sage questions section, slab#595959 secondary text#a8a8a8 muted text on black

Fonts

Google Sans: all text: huge, tightly tracked medium headings; bold wordmark and year

A twelve-column grid of hairline rules and flat colour that reads like an annual report. Headings are huge and tightly set, with highlighter marks on key words. Photos are greyscale, multiplied into orange, lavender or sage tints. Services are full-screen colour slabs, and fees are blocks whose heights follow their prices.

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

What is on the page

Navigation
Top bar: wordmark with the year, section links, Book a free call button; phone menu overlay
Accounts, kept plainly.
First screen: a black cover square with headline and two buttons over a collage of eight tinted photos with captions (demo: the trades of the clients), then a black statement screen
Smooth scrolling throughout; rules draw in and highlights sweep over key words. On the held first screen the black cover spreads as eight photo tiles fly outward.
Your month, on one page.
Sample one-page report beside four numbered notes (demo: a bakery's September)
Reading the four notes turns each number black and moves a sage band to the matching part of the sample report.
Three jobs, done every month whether you remember or not.
Three full-width colour slabs, one per service, each with a big name, included list, button and a tinted photo
On large screens the colour slabs stack as you scroll, each pushing the last back while its photo resolves from coarse dots.
Switching takes one phone call.
How to switch: a large photo, a heading with a highlight and three numbered steps
In view, the photo opens upward from a slight zoom and the heading's last words get an orange highlight.
The tax year, handled before it's due.
Pinned horizontal track of twelve months with colour-coded deadline chips (demo: UK tax year April to March)
Pinned, the twelve months slide past a fixed orange line, and each deadline chip fills with colour as it crosses.
Three kinds of year, kept.
Three client quotes as split blocks: dark panel with portrait and name, colour panel with the quote
Each portrait opens upward from a slight zoom, and a white highlight sweeps over a phrase in every quote.
Four accountants. You will know one of them well.
Team of four: portraits, names and what each looks after
Tied to scroll, the four portraits start gathered and tilted towards the middle, then spread into a row.
Questions people ask before they switch.
Questions and answers on a sage ground (native <details>)
Fixed monthly fees. The height of each block is its price.
Three fixed monthly plans as colour blocks whose heights follow their prices
Tied to scroll, the three colour blocks rise from the baseline in turn, lifting their prices to their heights.
Book a free twenty minutes.
Office, phone, email and hours, plus a booking form in a black panel (placeholders)
Footer
Black footer: address and contacts, links, a giant year and a width-filling wordmark, copyright and the Design: 8B credit
As the footer scrolls in, the full-width wordmark settles into place and the giant 26/27 slides to the right.

What is inside

Files: index.html (112 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: Google Sans 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 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, phone number, email address and contact form (sends nothing yet), 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 buttons in the nav, the phone menu and the first screen lead to #contact now; point them to your booking page (Calendly, Cal.com) or keep them on the contact form.
Start as a sole trader / Start as a company / Start with your team in fees lead to #contact now; point them to your sign-up or onboarding URL for each plan.
Start the switch in switching lead to #contact now; point them to your onboarding form or booking page.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
The tax-year track is pinned for about 2.7 screens of scroll on desktop and about 4 on phones, so that each of the twelve months gets its moment; cut months or chips to shorten it.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this accountant website template

Do the fee blocks change if I edit the prices?

Yes. A short script reads each price and sets the block heights against the highest one, so changing £45, £125 or £210 in the HTML redraws the chart.

Can I use it outside the UK?

Yes, with edits. The tax-year track lists UK dates and mentions HMRC. Each deadline is a plain HTML chip, so swap in your own dates and keep the colour key.