---
version: alpha
name: "Accountant template by 8B"
description: "Small accountancy practice website that reads like an annual report: square corners, hairline rules, huge tightly set headings and flat colour slabs. Free HTML template by 8B, MIT."
colors:
  primary: "#0b0b0b"
  secondary: "#fe7141"
  tertiary: "#cdabfe"
  sage: "#d1ddd3"
  caption: "#595959"
  muted: "#a8a8a8"
  surface: "#ffffff"
  on-surface: "#0b0b0b"
typography:
  headline-display:
    fontFamily: Google Sans
    fontSize: 118px
    fontWeight: 500
    lineHeight: 0.94
    letterSpacing: -0.055em
  headline-lg:
    fontFamily: Google Sans
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Google Sans
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -0.03em
  body-md:
    fontFamily: Google Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.01em
  body-sm:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.005em
  label-md:
    fontFamily: Google Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.07em
  numeral-display:
    fontFamily: Google Sans
    fontSize: 200px
    fontWeight: 700
    lineHeight: 0.78
    letterSpacing: -0.065em
  button:
    fontFamily: Google Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  nav-link:
    fontFamily: Google Sans
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: -0.02em
rounded:
  none: 0px
spacing:
  gutter: 20px
  column-gap: 16px
  section: 128px
  nav-height: 48px
  grid-columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0 20px
    height: 60px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0 18px
    height: 48px
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    height: 48px
  nav-link:
    textColor: "{colors.on-surface}"
    typography: "{typography.nav-link}"
    padding: 0 22px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 5px 7px 4px
  highlight-mark:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    padding: 0 0.08em
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    height: 52px
  fee-block:
    backgroundColor: "{colors.sage}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
---

## Overview

Tallyhouse is an accountant template; the demo is a small practice that sells bookkeeping, tax returns and payroll for a fixed monthly fee. The design has one idea: an annual report that someone had fun with. It is a twelve-column grid of hairline rules and flat colour, with huge, tightly set headings, a marker-pen highlight on the key words and photographs turned greyscale and tinted. The tone is plain, exact and a little cheerful. It is for a firm that wants clients to feel the numbers are in order and the people are human.

## Colors

Black, white and three light accents, each used as a large flat field.

- **Primary (#0b0b0b):** ink. Text, the first-screen cover, the statement screen, the tax-year section, the contact form, the footer and the primary button.
- **Secondary (#fe7141):** orange. The orange services slab, the accent button, some highlights, photo tints, the fixed line in the tax-year scroll and the last bar in the chart.
- **Tertiary (#cdabfe):** lavender. The monthly-report section, the default highlight colour, hover fills on links and navigation, the form's thank-you box and a services slab.
- **Sage (#d1ddd3):** pale green. The questions section, a services slab, the moving band over the report, case quote backgrounds and photo tints.
- **Caption (#595959):** secondary text on white.
- **Muted (#a8a8a8):** secondary text, rules and labels on black.
- **Surface (#ffffff):** the page and the first button's hover fill.
- **On-surface (#0b0b0b):** text on white and on accent fields.

Each slab, case card, photo tint and fee block takes one accent, never two.

## Typography

One typeface, **Google Sans** (400 to 700), does everything and gets its character from tracking. Headings are weight 500 with very tight letter spacing, from -0.03em on card titles to -0.055em on the first-screen headline. The headline runs from 44px on a phone to 118px on wide screens, section headings from 34px to 56px. Body is 17px at weight 400 with -0.01em. Labels are 12px, weight 600, uppercase, with 0.07em tracking. The tax-year numeral "26/27" and the footer wordmark are weight 700 and nearly touching: the numeral ranges from 44px on the cover to 200px in the footer. Sizes use `clamp()`; tokens give the desktop maximum.

## Layout

A 12-column grid with a 16px column gap and a page gutter of 16px to 20px; on phones it becomes four columns with a 12px gap. Section headers repeat one pattern: a hairline rule across the full width, a heading in columns 1 to 7 and a short intro in columns 9 to 12. Sections have 88px to 128px of vertical padding. The page is full width; only the footer wordmark is capped at 1800px.

The first screen is a black cover (up to 680px by 640px) centred over a collage of eight tinted photos with small captions, six on a phone. The report section pairs four notes in columns 1 to 5 with a sticky sheet in columns 7 to 12. Services are full-width colour slabs. Fees are three blocks whose heights follow the prices. Under 900px the pairs stack, the slabs stop sticking, the navigation becomes a full-screen black menu and the tax-year months narrow to 76vw.

## Elevation & Depth

No shadows. Depth is made by layering flat shapes: the black cover over the tinted collage, a report sheet that stays put while the notes scroll past, and slabs that stack and shrink to 90% as the next one arrives. The dot screen over each service photo is drawn with CSS radial gradients, and the highlight marks are gradient fills, not glows. Hairlines, 1px in black or grey, separate everything else.

## Shapes

Every corner is square, form fields included. Structure is 1px rules, 44px square number keys, small rectangular caption badges on photos and a 2px orange line. Photos are plain rectangles in 4:5, 1:1 or 4:3. They are greyscale with raised contrast and multiplied into the colour behind them, so each photo takes an orange, lavender or sage tint. There are no icons: buttons carry a plain plus or arrow glyph.

## Components

- **Button primary:** black, 60px high, label on the left and a glyph on the right. On hover a white field opens from the centre and the label turns black.
- **Button secondary:** orange, 48px high, used for "Book a free call"; hover opens a black field from the centre.
- **Nav bar:** 48px, white with a black bottom rule, a black logo block on the left and text links divided by vertical rules. Hover fills a link lavender from the bottom.
- **Badge:** a white label on a photo corner, 11px uppercase.
- **Highlight mark:** a marker-style fill behind a key phrase, lavender by default, sometimes orange, sage or white.
- **Input field:** white on the black form, 52px high, square.
- **Fee block:** a colour block whose height equals the price, with the price in large type on its top edge.

## Motion

The page loads GSAP 3.13 with ScrollTrigger, plus Lenis. The one idea is the page being filed: rules draw in, highlights sweep and blocks settle.

- **First screen:** photo tiles open upward one after another and pan slowly. Held for one screen of scrolling, the black cover spreads to the full screen as the tiles fly outward and the year numeral moves to the corner, then highlights sweep over three words of the statement.
- **Everywhere:** rules draw from the left, tinted photos open upward from a slight zoom and highlights sweep in as they enter.
- **Monthly report:** as each note is read, its number box fills black and a sage band moves to the matching part of the sheet; the chart bars rise once the cash part is reached.
- **Services:** on large screens the slabs stack, each pushing the last back while its photo resolves from coarse dots.
- **Tax year:** pinned, twelve months slide past the fixed orange line, and each deadline chip fills with colour as it crosses.
- **People:** four portraits gather tilted towards the middle, then spread into the grid.
- **Fees:** the three blocks rise from the baseline in turn, lifting their prices.
- **Footer:** the wordmark settles into place and the year slides right.
- **Navigation:** hides on a scroll down and returns on a scroll up.

Reduced motion switches off the entrance and scroll animations and Lenis; all content shows in full.

## Do's and Don'ts

- Do keep every corner square and every divider a 1px rule.
- Do use accents as big flat fields, one accent per block.
- Do set headings tight (-0.03em or tighter) and keep one typeface.
- Do tint photographs: greyscale, then multiplied into orange, lavender or sage.
- Do use the highlight mark on one key phrase per heading.
- Don't add shadows, glass, rounded cards or stock icons.
- Do keep weights simple: 500 for headings, 400 for text, 600 for labels and 700 only for the big numerals and the wordmark.
- Don't set text in the accent colours; text stays black, white or grey.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.