# Tallyhouse, a free accountant website template

> Website for a small accountancy practice that does bookkeeping, tax returns and payroll. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/).

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.

- Page: https://8b.com/templates/tallyhouse/
- Live demo: https://8bsite.github.io/accountant-website-template/
- Repository (GitHub template): https://github.com/8bsite/accountant-website-template
- Download ZIP: https://github.com/8bsite/accountant-website-template/archive/refs/heads/main.zip
- Size: 112 KB, 19 photos (Unsplash), fonts: Google Sans
- Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll

## Use it with an AI coding agent

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

```bash
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:

```text
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.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/accountant-website-template my-site`.

## Design

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.

- 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.

## Sections and motion

- **Navigation** (navigation): top bar: wordmark with the year, section links, Book a free call button; phone menu overlay
- **Accounts, kept plainly.** (opening): 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. Motion: 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.** (monthly-report): sample one-page report beside four numbered notes (demo: a bakery's September). Motion: 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.** (services): three full-width colour slabs, one per service, each with a big name, included list, button and a tinted photo. Motion: 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.** (switching): how to switch: a large photo, a heading with a highlight and three numbered steps. Motion: 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.** (tax-year): pinned horizontal track of twelve months with colour-coded deadline chips (demo: UK tax year April to March). Motion: 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.** (client-stories): three client quotes as split blocks: dark panel with portrait and name, colour panel with the quote. Motion: 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.** (accountants): team of four: portraits, names and what each looks after. Motion: 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): questions and answers on a sage ground (native <details>)
- **Fixed monthly fees. The height of each block is its price.** (fees): three fixed monthly plans as colour blocks whose heights follow their prices. Motion: Tied to scroll, the three colour blocks rise from the baseline in turn, lifting their prices to their heights.
- **Book a free twenty minutes.** (contact): office, phone, email and hours, plus a booking form in a black panel (placeholders)
- **Footer** (footer): black footer: address and contacts, links, a giant year and a width-filling wordmark, copyright and the Design: 8B credit. Motion: As the footer scrolls in, the full-width wordmark settles into place and the giant 26/27 slides to the right.

## Good for

- accountant or bookkeeper
- tax adviser or payroll bureau
- small professional practice with fixed monthly plans
- any service business that sends clients a regular report

## Questions

**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.

## Before publishing

Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.