The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Accounting Firm Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A two-page website for [FIRM], an accounting firm in [CITY] focused on [FOCUS], individual returns from $[BASE_FEE]. It must be the calmest money site on the block: services with plain deliverables, a deadline ledger (recurring month-labeled dates, clearly generic), a fee estimator (filer type × complexity × forms → sample range with assumptions), four accountants, a trust strip, and a consultation booking form confirming client-side. Pages: index.html, booking.html. Everything runs in the browser; nothing is submitted anywhere.

- Audience: Individuals with one scary return and small businesses with a shoebox of receipts. They fear jargon and surprise invoices; they want a range, a deadline reminder and a human who says 'bring the shoebox, we've seen worse'.
- Goal: Book the consultation. Within ten seconds a visitor sees the plain-English promise and the next deadline; within two minutes they've tried the estimator and picked a date.
- Tone: Plain, patient, quietly funny about receipts. Concrete deliverables and ranges, zero percent jargon without translation, one joke about the shoebox.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (MIT), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource/libre-franklin (OFL-1.1), @fontsource/ibm-plex-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. Two real HTML pages at the project root: index.html (entry src/main-index.tsx) and booking.html (entry src/main-booking.tsx).
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0, rollupOptions { input { index: resolve(__dirname, 'index.html'), booking: resolve(__dirname, 'booking.html') } } }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS, content ['./index.html', './booking.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts add every color under Design to theme.extend.colors with kebab-case keys (paper, ledger, card, ink, slate, green-ledger, green-deep, green-mist, brass, rule) and fontFamily display ['Libre Franklin', 'Georgia', 'serif'], sans ['IBM Plex Sans', 'system-ui', 'sans-serif']. Set borderRadius DEFAULT to 6px and add maxWidth { container: '1160px' }.
  - In src/fonts.ts import '@fontsource/libre-franklin/400.css', '@fontsource/libre-franklin/600.css' and '@fontsource/ibm-plex-sans/400.css', '@fontsource/ibm-plex-sans/500.css', '@fontsource/ibm-plex-sans/600.css'; import src/fonts.ts and src/index.css from both entry files.
  - File layout: src/content.ts (every string, service, deadline, chip, accountant, trust line and image path, typed), src/lib/brand.ts (firmSlug = [FIRM] lowercased with every run of non-alphanumeric characters replaced by '-', emailDomain = firmSlug without hyphens + '.com', phoneDigits for tel:), src/lib/storage.ts (safe localStorage get/set wrapped in try/catch, keys prefixed with firmSlug + ':'), src/lib/estimate.ts (pure: range(filer, complexity, forms[]) — base $[BASE_FEE] for individual simple, ×2.2 business, complexity +40% moderate / +90% messy, each form +$45; returns { low, high } ±15% rounded to $10).
  - State: src/store/booking.ts is a tiny external store (useSyncExternalStore) holding { topic, day, name, email, note, sent } persisted to localStorage key firmSlug + ':booking'.
  - Components in src/components/: Header.tsx, Reveal.tsx (Motion whileInView wrapper), Eyebrow.tsx, Footer.tsx; index: Hero.tsx, Services.tsx (ServiceColumn.tsx), DeadlineLedger.tsx (DeadlineRow.tsx), Estimator.tsx (ChipGroup.tsx, RangePanel.tsx), Team.tsx (AccountantCard.tsx), TrustStrip.tsx; booking: BookingForm.tsx (TopicSelect.tsx, DayChips.tsx, Confirmed.tsx). src/pages/Home.tsx and Booking.tsx compose them; both pages render Header and Footer.
  - Before the first build, download every image listed under Assets into public/images/ with curl -L -o using the exact file names given. The build itself never fetches anything.
  - public/favicon.svg as described under Assets. Both HTML files: lang en, <meta name='theme-color' content='#F7F4EC'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>. Titles: index.html '<title>[FIRM] — Accounting in [CITY]</title>', booking.html '<title>Book a consultation — [FIRM]</title>'.
  - Write ASSETS.md at the project root as described under Assets.
  - dist/ holds the two HTML files, hashed JS/CSS, the woff2 fonts, favicon.svg and the four images. Keep it under 8 MB.

## Variables
- [FIRM] — Firm name (default: "Rowan & Fig"). Invented firm name. Used in the wordmark, title, footer, email (hello@ + firmSlug without hyphens + .com) and localStorage keys. Never a real firm or franchise.
- [CITY] — City (default: "Raleigh, North Carolina"). Where the firm is. Used in the hero, deadlines' context and the footer. Real cities fine; street invented.
- [BASE_FEE] — Base fee (default: "220"). The individual simple-return starting fee as digits. Every estimator range derives from it in src/lib/estimate.ts. Keep it 150–400.
- [FOCUS] — Focus (default: "tax filing and small-business books"). One lowercase phrase naming the practice's core. Drives the hero line, the services columns' balance and one trust line.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/accounting-firm-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F7F4EC` — Page background on both pages.
- Ledger `#EFEAD9` — Alternate section background (Services, Estimator), chips, hover fill.
- Card `#FFFDF8` — Estimator panel, deadline rows, form panel, confirmation.
- Ink `#26221A` — Headlines, body text, icon color.
- Slate `#6B675C` — Secondary text, captions, eyebrows, deadline notes.
- Green Ledger `#2E5641` — Primary: headlines' accents, primary buttons, selected chips, ledger rules, focus ring.
- Green Deep `#21402F` — Hover, footer background.
- Green Mist `#E4EBE2` — Selected chip fills, deadline month markers, well fills.
- Brass `#A87C2F` — The one accent: the estimate range figures, brass paperclip details, deadline dots, focus-visible extras.
- Rule `#DFD8C4` — 1px hairlines, card borders, input borders, ledger lines.

### Typography
- Display: H1, H2, H3, service titles, the estimate figures, the wordmark: Libre Franklin (OFL), weights 400/600
- Text and UI: body, eyebrows, buttons, chips, form fields, captions; tabular numerals for all figures and dates: IBM Plex Sans (OFL), weights 400/500/600

### Layout & motion
- Spacing: 8px base unit. Container max-width 1160px, centered, side padding 48px desktop, 32px tablet, 20px under 640px. 12-column grid, column gap 24px. Section vertical padding 96px desktop, 72px under 1024px, 56px under 640px. Type scale: H1 clamp(40px, 6vw, 72px) Libre Franklin 600, line-height 1.06; H2 clamp(28px, 3.8vw, 46px) Libre Franklin 600; H3 21px Libre Franklin 600; the estimate figures Libre Franklin 600 40px Brass tabular; lead IBM Plex 400 17.5px / 1.65 Ink at 90%; body 15.5px / 1.7 (max-width 64ch); eyebrow IBM Plex 600 12px uppercase letter-spacing 0.16em Slate; caption 13px Slate; deadline rows IBM Plex 15px with tabular dates. Buttons: height 50px, IBM Plex 600 14px. Primary: Green Ledger fill, Card text. Secondary: 1px Green Ledger border, Green Ledger text. Inputs: height 50px, 1px Rule border, Card fill, focus Green border. Focus ring everywhere: 2px Green Ledger outline with 3px offset.
- Radius: 6px on cards, buttons, inputs, chips and photos — ledger-crisp. 999px only for chips, dots and pills.
- Motion: Easing: --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for reveals and range changes; --ease-io cubic-bezier(0.65, 0, 0.35, 1) for the form swap. Calm — money pages shouldn't dance.
- Motion: Reveal: blocks wrapped in <Reveal> start at opacity 0, translateY(12px) and settle over 650ms --ease-out when 15% visible (Motion whileInView, viewport once). Siblings stagger 70ms.
- Motion: Hero: the desk photo scales 1.03→1.0 over 2200ms; the headline rises; a small brass paperclip detail beside the eyebrow rotates in 6deg once.
- Motion: Deadline ledger: rows reveal 50ms-staggered; the ledger's vertical rule draws downward as the section scrolls (scaleY); the next-upcoming row's dot fills Brass and pulses gently once (off under reduced motion).
- Motion: Estimator: chips fill Green Mist on select (150ms); every range change counts both figures over 450ms --ease-io (tabular); the assumption line crossfades with the forms count.
- Motion: Team cards: hover lifts 2px and the initials monogram gains a Brass ring.
- Motion: Booking: day chips fill Green on select; invalid submit shakes 4px with inline labels; sending swaps to Confirmed (300ms --ease-io) — a drawn Brass 'SCHEDULED' stamp rotating in -5deg→-2deg, 'Bring what you have — even the shoebox.' echoed.
- Motion: Links: .link-draw grows a 1px currentColor underline over 280ms on hover and focus-visible.
- Motion: prefers-reduced-motion: reduce — no scales, pulses, counts or stamps (instant values); color/border hovers stay. Use CSS @media in index.css plus Motion's useReducedMotion in components.
- Imagery: Calm real photography, all four made for this template in one consistent style: warm paper light, desks with ledgers, calculators, pencils and coffee — accountant portraits are AI-generated fictional people at their desks (consistent warm window light, the ledger-calm world); they are placeholders a real firm swaps for its own staff photos; other photos stay people-free with no readable text. Every photo uses object-fit cover with the object-position given under Assets, 6px corners, no shadow; photos on Paper get a 1px Rule outline. Captions in IBM Plex 13px Slate. Drawn in code: the paperclip, deadline dots, the SCHEDULED stamp, monograms and the favicon. Icons: lucide-react only, stroke width 1.75.

## Pages & Sections
### Firm (`index.html`)
1. **Content file and copy rules** — All copy below is written for the default values ([FIRM] = Rowan & Fig, [CITY] = Raleigh, North Carolina, [BASE_FEE] = 220, [FOCUS] = tax filing and small-business books). Put every string, fee and list in src/content.ts and render from it; both pages share one content file. If any variable value differs, rewrite the hero, services, deadlines, chips, team and trust lines so they are specific and believable for the new firm, keeping the same structure and counts (2 service columns × 4 items, 8 deadlines, 4 chip-groups, 4 accountants, 4 trust items). All figures are invented sample math; deadlines are recurring generic dates labeled 'recurring — confirm with your tax authority'. Deadline ledger (month · date label · note): 'January · Q4 estimates due' 'the holidays ate your Q4 — we get it'; 'March · S-corp & partnership returns' 'the calm before'; 'April · Individual returns' 'the main event; extensions filed in minutes'; 'June · Q1 estimates' 'spring cleaning, for money'; 'September · Q2 estimates + extended business returns' 'the forgotten deadline'; 'October · extended individual returns' 'last call, no judgment'; 'December · Q3 estimates' 'before the cookies'; 'Year-round · Monthly bookkeeping close' 'the 10th, every month, boring by design'. Team: 'RA' Ruth Abioye 'Firm principal · small business & payroll' 'Fifteen years; her spreadsheet templates have groupies.'; 'MC' Marcus Chen 'Tax manager · individuals' 'Reads tax law for fun; explains it for the rest of us.'; 'DP' Dee Patel 'Senior accountant · audits & cleanup' 'The shoebox whisperer.'; 'JO' Jonas Okafor 'Bookkeeper · monthly clients' 'Knows your books better than your bank does.' Accountant portraits are AI-generated fictional people matching the default roster (not resembling any real individuals); alt stays 'A fictional accountant'.
   Layout: n/a
   Motion: n/a
2. **Header (all pages)** — Left: the wordmark '[FIRM]' (Libre Franklin 600 20px) over 'Accounting · [CITY]' (10px uppercase Slate) linking ./index.html. Right nav (IBM Plex 600 14px): 'Services' → ./index.html#services, 'Deadlines' → ./index.html#deadlines, 'Fees' → ./index.html#fees, 'Team' → ./index.html#team; a Green Ledger 'Book a consult' → ./booking.html. Under 820px: wordmark + consult button.
   Layout: Sticky top, height 72px, Paper/95% blur, Rule border.
3. **Hero** — Two columns. Left: eyebrow 'ACCOUNTING IN [CITY], PLAINLY'; H1 'Your numbers,' / '*in good order.*'; lead (max-width 520px): '[FIRM] does [FOCUS] for humans: plain answers before invoices, ranges before retainers, and a shoebox policy of zero judgment.'; primary 'Book a free consult' → ./booking.html and secondary 'Try the fee estimator' → #fees; three quick facts with Green checks: 'Free 30-minute consult'; 'Ranges quoted up front'; 'Extensions filed in minutes'. Right: desk-ledger.webp (4:3) with the caption 'Ruth''s desk on April 13th — calm, as always'.
   Layout: Paper background, vertical padding 104px top; left 6 cols, right 5 cols offset 1.
4. **Services** — Section id='services'. Eyebrow 'WHAT WE DO' and H2 'Two columns, no surprises.' ServiceColumns: 'For individuals' — 'Individual returns' 'from $[BASE_FEE] · one meeting, done'; 'Rental & investment income' 'quoted after a look — ranges in writing'; 'Multi-state filings' 'yes, even that combination'; 'Amended returns' 'fixing the past, gently'. 'For small businesses' — 'Monthly bookkeeping' 'the 10th close, boring by design'; 'Payroll' 'runs, filings, W-2s'; 'Business returns' 'from $480 · clean books or the shoebox'; 'Cleanup & catch-up' 'quoted per shoebox, kindly'. A caption: 'Every engagement starts with a written range — the invoice never surprises you.'
   Layout: Ledger background. Two columns 24px gap; rows hairline-divided with the price/meta in tabular IBM Plex 13px Slate, service names Libre Franklin 600 17px.
5. **Deadline ledger** — Section id='deadlines'. Eyebrow 'THE YEAR, MARKED' and H2 'Deadlines we watch so you can nap.' The ledger: eight rows (month in Green 600 12px uppercase, the date label IBM Plex 600 15px, note 13.5px Slate, Brass dot), the next-upcoming row highlighted on Green Mist with the note 'next up — book by the week before'. Caption: 'Recurring dates, shown generically — confirm current-year dates with your tax authority.'
   Layout: Paper background. Ledger as a Card list with the drawing vertical rule left; container max-width 760px; rows 56px hairline-divided.
6. **Fee estimator** — Section id='fees'. Eyebrow 'WHAT IT MIGHT COST' and H2 'A range, before we meet.' The Estimator on Card: ChipGroups — Filer ('Individual' / 'Small business'); Complexity ('Simple' / 'Moderate' / 'The shoebox'); Forms (multi: 'Rental income' / 'Stocks & crypto' / 'Employees' / 'Sales tax' / 'Multi-state'); the RangePanel: '$[BASE_FEE] – $253' (Libre Franklin 600 40px Brass tabular) with the assumptions line 'Sample math: base + complexity + $45/form, ±15%. Your consult ends with a written range, not a guess.' and a primary 'Book the consult' → ./booking.html.
   Layout: Ledger background. Panel max-width 680px, 28px padding; chips wrap; the panel mirrors the chosen chips in one quiet line ('Individual · Moderate · Stocks, Employees').
7. **Team and trust** — Section id='team'. Eyebrow 'THE FOUR OF US' and H2 'People who return calls.' AccountantCards with AI-generated professional portraits (4:3) — fictional accountants in the firm's ledger-calm world: 1) acct-ruth.webp, alt 'Ruth at her desk, a fictional accountant' — 'RA' badge kept small — Ruth Abioye 'Firm principal · small business & payroll' 'Fifteen years; her spreadsheet templates have groupies.'; 2) acct-marcus.webp, alt 'Marcus reviewing a return, a fictional accountant' — Marcus Chen 'Tax manager · individuals' 'Reads tax law for fun; explains it for the rest of us.'; 3) acct-dee.webp, alt 'Dee with a box of receipts, a fictional accountant' — Dee Patel 'Senior accountant · audits & cleanup' 'The shoebox whisperer.'; 4) acct-jonas.webp, alt 'Jonas at the monthly close, a fictional accountant' — Jonas Okafor 'Bookkeeper · monthly clients' 'Knows your books better than your bank does.'. TrustStrip under: four items with Green checks — 'Licensed CPAs & EAs (invented credentials, real standards)'; 'E-file and secure document portal'; 'Audit support included, not upsold'; 'Plain-English engagement letters'.
   Layout: Warm White background. 4 columns 20px gap; cards on Card Rule-bordered: portrait top (aspect 4:3), monogram as a small 24px corner badge, name Libre Franklin 600 18px, role 12px uppercase Slate, one-liner 14px Slate; trust strip a hairline-bounded row.
8. **Footer** — Green Deep background, Paper-toned text. Three columns: 1) wordmark + '[FIRM]' over 'Accounting · [CITY] · since a very organized year'. 2) 'Office': '240 Cedar Street, [CITY]', hello@ + emailDomain, '(919) 555-0164'. 3) 'Hours': 'Mon–Fri 9–5, tax season til it''s done'; 'Evenings by appointment'. Bottom line: '© [FIRM]. Estimates are sample ranges; deadlines are generic recurring dates.'
   Layout: Vertical padding 64px, 3 columns, bottom line 32px below a Paper/15% rule. Under 768px stacked.

### Consult (`booking.html`)
1. **Booking form** — Masthead: eyebrow 'FREE CONSULT', H1 'Thirty minutes, bring everything.' lead 'Coffee''s on us. Bring the shoebox, the spreadsheet, or the unsigned letter from the tax office — we''ve seen all three this week.' The BookingForm on Card: TopicSelect ('Individual return' / 'Business books' / 'A scary letter' / 'Just talk it through'); DayChips (next 7 weekdays, Saturday morning included, Sunday 'closed'); name + email; note textarea (placeholder 'Anything that helps us prepare — or say nothing and bring the box.'); primary 'Request my consult' with caption 'Saved in this browser — the real page would email the office. Nothing is sent here.' Confirmed: the SCHEDULED stamp, 'Thank you, [NAME].' 'We''ll confirm [DAY] by email — bring what you have, even the shoebox.' topic echo, and 'Change my request' returning pre-filled. Persisted in localStorage.
   Layout: Paper background with a Ledger top band; panel max-width 640px, 28px padding, Rule border; two-column name/email stacks under 560px.
2. **Reassurance and close** — Three quiet lines with Green checks: 'Nothing is due at the consult — ranges first, always'; 'Your documents stay on our secure portal'; 'One follow-up email, then the phone stops ringing'. A closing line centered: 'The shoebox has waited this long. Thirty minutes on [DAY] ends the suspense.'
   Layout: Ledger band continuing; checks in a row, closing line 40px below.

## Assets
- image: Template photos made for this design (free to redistribute with the template). Download each with curl -L -o into public/images/: https://media.vibefather.ai/assets/968213ab-8b8f-462d-a95b-9669f6107855/desk-ledger.webp → public/images/desk-ledger.webp (Hero; object-position 50% 55%; alt 'A calm desk with a ledger notebook, calculator and pencil'); https://media.vibefather.ai/assets/968213ab-8b8f-462d-a95b-9669f6107855/shoebox.webp → public/images/shoebox.webp (Services side; alt 'A cardboard box of receipts on a chair, waiting kindly'); https://media.vibefather.ai/assets/968213ab-8b8f-462d-a95b-9669f6107855/acct-ruth.webp → public/images/acct-ruth.webp (Team card Ruth; alt 'Ruth at her desk, a fictional accountant'); https://media.vibefather.ai/assets/968213ab-8b8f-462d-a95b-9669f6107855/acct-marcus.webp → public/images/acct-marcus.webp (Team card Marcus; alt 'Marcus reviewing a return, a fictional accountant'); https://media.vibefather.ai/assets/968213ab-8b8f-462d-a95b-9669f6107855/acct-dee.webp → public/images/acct-dee.webp (Team card Dee; alt 'Dee with a box of receipts, a fictional accountant'); https://media.vibefather.ai/assets/968213ab-8b8f-462d-a95b-9669f6107855/acct-jonas.webp → public/images/acct-jonas.webp (Team card Jonas; alt 'Jonas at the monthly close, a fictional accountant'). Six files in total.
- image: Write ASSETS.md at the project root with a table: path, source URL, author, license — one row for each photo (source 'media.vibefather.ai, made for this template', author 'VibeFather', license 'Distributed with the template'), plus rows for @fontsource/libre-franklin and @fontsource/ibm-plex-sans (OFL-1.1) and lucide-react (ISC). Never replace photos with stock sites or images with people, faces, hands or readable text/forms.
- icon: lucide-react only: Calculator, CalendarDays, Check, FileText, Users, ClipboardCheck, Phone, Mail, ArrowRight, Coffee. Stroke width 1.75, 16–24px, color inherits. The paperclip, deadline dots, SCHEDULED stamp, monograms and favicon are drawn SVG — never a real professional body's mark. public/favicon.svg: viewBox 0 0 32 32, a 32x32 rect rx 6 filled #2E5641, a Paper (#F7F4EC) ledger-line glyph (three horizontal rules) with a Brass (#A87C2F) check at the bottom line. No other logo: the firm name is always set as type.
- font: Install @fontsource/libre-franklin and @fontsource/ibm-plex-sans and import them in src/fonts.ts as listed in Setup. Vite bundles the woff2 files into dist/.
- image: Drawn in code: the paperclip, deadline dots and ledger rule, the SCHEDULED stamp, monogram circles, chips and the favicon. No other bitmaps beyond the four photos; no illustrations; no map tiles.

## Don'ts
- No backend, no form submission, no fetch to any API: the estimator is pure client math in src/lib/estimate.ts with assumptions displayed; the booking saves in the browser only and says so.
- Every internal link points to a file name (./index.html, ./index.html#services, ./index.html#deadlines, ./index.html#fees, ./index.html#team, ./booking.html) — never to a bare directory.
- Self-host everything: fonts through Fontsource, icons as npm packages or inline SVG, images downloaded into public/images/. No CDN <script> or <link> tags, no Google Fonts, no analytics.
- Production build: minified, no source maps, no src/ copied into dist/, single command npm run build, output in dist/ under 8 MB.
- No real firms, credentials or professional bodies (generic 'licensed' language, invented team); deadlines are labeled recurring/generic with a confirm-with-authority note; no photos with people, faces, hands or readable forms.
- No dates or years anywhere; the deadline ledger shows recurring month-labeled dates, never this year's actual calendar; the site never shows today's date.
- Never mention VibeFather or any other brand inside the site except the optional credit footer link; all copy is invented US English.
- Respect prefers-reduced-motion: no pulses, counts or stamps (instant values); color/border hovers stay.
- The site must work at 1440x900 desktop and 390x844 mobile with zero console errors; chips, selects and form work with keyboard only and visible focus rings.
- Keep copy plain: no lorem, no 'synergistic financial solutions'; every fee, deadline and line lives in src/content.ts.

---
— Prompt by VibeFather · https://vibefather.ai/t/accounting-firm-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.