Case Study // AI Accounting Platform

Smart books.
Zero guesswork.

Reckon automates bookkeeping with AI that accountants actually trust. We built the marketing site to match: dark, authoritative, zero fluff. Role-based content architecture. Full-marks Lighthouse.

ClientReckon
IndustryAI / Fintech
Delivery5 days
Year2026
Reckon AI accounting platform on mobile
Lighthouse100
Load Time<0.8s
Sections8
Plugins0
Delivery5 days
StackNext.js
Reckon across three mobile screens showing homepage, platform section, and company story
(01) Design System

Dark olive meets mint-green precision.

Fintech defaults to navy and white. Reckon needed to feel different. Deep olive (#1a1f16) grounds every section with quiet authority. Off-white (#fafaf5) keeps body text readable without the harshness of pure white.

The mint-green highlight (#c8f7a0) is surgical. It appears only on phrases that carry the value proposition: “Future of the Industry”, “Team”. One accent colour, used sparingly, teaches the eye where to look.

Typography is a serif/sans pair. Bold serifs for headlines create editorial weight. Clean sans-serif body text keeps dense product information scannable. The contrast between the two creates visual rhythm without decoration.

(02) Content Architecture

Three audiences, one page, no compromise.

Role-based accordion with contextual data

Audit teams, CFOs, and internal audit each think differently about accounting software. Rather than building three separate pages, we used an accordion pattern where each role expands to reveal tailored copy and a live audit log preview.

The data table beside the accordion shows real audit trail entries: user, field, old value, new value. It grounds the marketing claims in something tangible. Accountants want to see the interface, not read about it.

Reckon platform accordion on mobile
Trust Architecture

Four-card value grid

“Auditable AI, Not Black Box Automation.” “Vertical AI, Built for Accounting.” Each card makes one claim and supports it in a single sentence. Mint-tinted backgrounds separate them from the white page without adding visual noise.

Social Proof

Horizontal testimonial carousel

Full-width cards with large pull quotes, name, and title. Arrow navigation. No star ratings, no logos, no trust badge clutter. The testimonials read like genuine statements because they are presented as text, not marketing decoration.

Reckon leaders section on mobileReckon features section on mobile
(03) Technical Craft

No WordPress. No templates. No plugins.

Reckon is built on Next.js 16 with React 19. Every component is custom. The navigation, the accordion system, the testimonial carousel, the data tables. Zero third-party UI libraries. Zero page builders. We own every line of code.

Images are served as WebP through Next.js Image with automatic srcset generation. Fonts are subset and self-hosted. CSS is Tailwind v4 with design tokens defined once. The entire site ships under 200KB on first load.

Build Metrics
Performance100/100
Accessibility100/100
Best Practices100/100
SEO100/100

Google Lighthouse audit, mobile, simulated throttling. Scores reflect production deployment.

FAQ

Common questions about SaaS marketing websites

Built WithNext.js 16React 19Tailwind CSS v4Framer MotionVercel
Your Turn

Building a SaaS product?

Your marketing site should be as sharp as your product. We build fast, accessible, high-converting sites that score 100/100 and ship in under a week.