Designing Accrue: An Accounting Firm Website Template

A deadline calendar that never goes stale#

The deadlines page is the reason a client would bookmark the site. It lists federal and Tennessee tax deadlines for this year and next, filtered by taxpayer type, with a live countdown to the next one that also appears in the dark bar at the top of every page.

A list of dates typed into the HTML would be out of date within a year, and the demo has to stay correct for years. So DEADLINE_RULES in assets/js/data.js stores rules, not dates:

{ id: 'individual', short: 'Individual returns', month: 4, day: 15, rule: 'federal',
  who: ['individual'], title: 'Individual returns for {prev}, or an extension; …', forms: 'Form 1040, Form 4868' }

For each year, main.js builds the date from month and day, then moves it forward to the next business day. Holidays are worked out the same way, from rules rather than a list: Thanksgiving is the fourth Thursday in November, Memorial Day the last Monday in May, and Good Friday comes from a calculation of Easter. Fixed-date holidays that land on a weekend move to the Friday before or the Monday after:

function observed(key) {
  const w = weekday(key);
  return w === 6 ? addDays(key, -1) : w === 0 ? addDays(key, 1) : key;
}

The rule field decides which holidays count. federal deadlines skip federal holidays plus DC Emancipation Day, which the IRS observes. tn deadlines for Tennessee franchise and excise tax use a different set that includes Good Friday. When a deadline moves, the page says why. April 15, 2028 is a Saturday, and April 16 is a Sunday, so Emancipation Day is observed on Monday the 17th. The calendar shows the deadline on Tuesday, April 18 with the note "Moved from Sat, Apr 15: weekend, then DC Emancipation Day on Mon, Apr 17."

Every date and time is worked out in Eastern time (America/New_York) using Intl.DateTimeFormat, so the countdown turns over at midnight in Chattanooga, wherever the visitor is.

This is a demo, not tax advice: if you use the calendar for a real firm, check the rules against the IRS and your state's published dates each year.

A checklist that survives blocked storage#

Below the calendar is a tax-season document checklist for four kinds of client (individuals, the self-employed, businesses and nonprofits). Ticks are saved in the browser under accrue:checklist, so a client can come back to it over a few weeks.

Some browsers block storage, for example in a private window or a sandboxed preview. Instead of the checklist silently doing nothing, main.js falls back to an in-memory store:

const safeStorage = (function () {
  try { const s = window.localStorage; s.getItem('_'); return s; } catch (e) { /* blocked */ }
  const memory = Object.create(null);
  return {
    getItem: (key) => (key in memory ? memory[key] : null),
    setItem: (key, value) => { memory[key] = String(value); },
    removeItem: (key) => { delete memory[key]; }
  };
})();

Ticks then last for that page view, which is the best a browser with storage switched off allows.

The fee estimator#

Clients' first question is usually what it will cost. The pricing page answers with an estimator: entity type, monthly transactions, payroll employees, number of states and months of catch-up bookkeeping. It returns a monthly fee with a line-by-line breakdown.

All the numbers live in ESTIMATOR in data.js, so a firm can put in its own prices without touching the logic. Bookkeeping is priced in tiers by transaction count:

tiers: [
  { id: 'foundation', name: 'Foundation', max: 100, fee: 350 },
  { id: 'standard', name: 'Standard', max: 250, fee: 525 },
  { id: 'expanded', name: 'Expanded', max: 500, fee: 775 },
  { id: 'full-charge', name: 'Full-charge', max: 1000, fee: 1150 }
],

Above the last tier, each extra block of transactions adds a fixed amount. Annual business returns are spread across the months, so the monthly figure is what the client would actually pay. The inputs are written to the URL (?entity=scorp&tx=250&emp=4), so a client can send a quote to a business partner and the partner sees the same numbers.

Booking that knows tax season#

The contact page books a consultation from a rolling ten-day grid of 30-minute slots. Office hours come from BOOKING in data.js: weekday slots with a lunch break, shorter Fridays, and Saturday mornings only during tax season:

6: ['09:00', '10:00', '11:00'] // tax-season Saturdays only

with taxSeason: { from: '02-01', to: '04-15' }. Office closures reuse the same holiday rules as the calendar, so the office is closed on the day after Thanksgiving and Christmas Eve every year without anyone updating a list.

Making it yours#

• Colors: change --color-olive and --color-olive-deep in src/input.css and rebuild the CSS. The SVG illustrations use the same hex values, so search and replace them too.
• Services and prices: everything data-driven is in assets/js/data.js: the seven services, the estimator's prices, the checklists and the booking hours. A new entry in SERVICES gets its own page at service.html?s=<slug> and appears in the booking form.
• Deadlines: add or remove entries in DEADLINE_RULES. A different state needs its own rule and holiday set, defined in the same way as tn.
• Photos: the team portraits and service illustrations are SVG drawn for the template. Replace them with photos at the same aspect ratios; the template's documentation lists the sizes.

Accrue's HTML version is a free download. It's also available for Next.js, Astro and WordPress, with the same design and interactions. If you're building for a finance business rather than a firm, Tally is a bookkeeping software site with an invoice in the hero, and Keystone shows the same estimator idea for a construction firm.