Tally

Live preview ->

Tally is a polished SaaS website system for software products that need to feel credible, sharp, and ready to launch. The demo content uses a client-work workflow example, but the structure is intentionally broader: AI tools, CRMs, analytics products, customer portals, productivity apps, internal tools, vertical SaaS, and B2B platforms can all use the same sections. A blueprint-style frame, calm dark and light modes, a warm configurable accent, and detailed app-style mockups make the site feel like real product software from the first scroll.

It ships as a complete Astro 7 site, not just a landing page: homepage, features, pricing, customers, resources, contact, about, blog, changelog, waitlist, legal pages, a section gallery, and every visible string driven from src/config/site.ts.

Property	Value
Tier	Pro ($49 launch / $59 reg.)
Category	SaaS / Startup / Product
Body font	Outfit Variable
Display font	Outfit Variable
Accent	Warm yellow by default, with dark/light color pairs
Theme modes	Built-in light/dark toggle, persisted
Mockups	Live CSS UI, swap-ready for real screenshots

Included pages

/ - homepage: hero, logo cloud, social proof, solutions, feature workflow, benefits, process, adaptive dashboard, integrations, customers, testimonials, pricing, FAQ, newsletter, and CTA
/features/ - product feature page
/pricing/ - pricing, plan comparison, FAQ, and CTA
/customers/ - customer proof and outcomes
/resources/ - resource hub
/about/ - company story, team, timeline, values, and proof sections
/contact/ - provider-switched contact form with contact cards
/blog/ and /blog/[slug]/ - blog index + posts from Astro Content Collections
/changelog/ - changelog entries from Astro Content Collections
/waitlist/ - early-access signup page
/sections/ - live gallery of the theme’s sections
/privacy/, /terms/, /404

What makes Tally different

A SaaS product page with real interface depth - the hero and section mockups use detailed live CSS UI: dashboards, workflow cards, client records, invoices, automations, integration tiles, and app panels. You can keep them as placeholders or replace them with actual screenshots.
Light and dark mode are built in - the header toggle persists in localStorage, the page avoids a flash on load, and light mode has its own stronger accent values so buttons and links keep enough contrast.
Accent colors are productized - site.ts includes the default accent pair and a floating preview accent switcher. Visitors can try colors, and buyers can make one permanent by editing the same config values.
Every major visual can become an image - hero, solutions, feature mockups, process cards, adaptive dashboard, and integrations all expose image fields in src/config/site.ts.
A full SaaS site, not one page - blog, changelog, contact, newsletter, pricing, customers, resources, waitlist, legal pages, and a section gallery are included.
Config first - navigation, mega-menu content, CTA labels, SEO, contact form, newsletter, pricing, testimonials, page headers, footer links, and section copy all live in src/config/site.ts.

Tally-specific setup

Change the brand and core SaaS positioning

Start in src/config/site.ts:

name: "Tally",
tagline: "Invoices, clients, and time in one tidy workspace",
url: "https://tally-theme.pages.dev",
logo: "",
favicon: "/favicon.svg",

Replace the name, tagline, URL, logo, favicon, navigation, hero copy, page headers, pricing, testimonials, FAQ, and footer from that same file. The demo copy is written around a workflow/productivity example; for another SaaS category, replace the section strings in site.ts before touching components.

Set light/dark and accent colors

Tally has one accent for dark mode and one paired accent for light mode:

theme: {
  toggle: true,
  default: "dark",
  storageKey: "tally:theme",
  accent: "#ffd86f",
  accentText: "#111111",
  lightAccent: "#e6bc4a",
  lightAccentText: "#111111",
},

accent and accentText control dark mode.
lightAccent and lightAccentText control light mode.
toggle shows or hides the header theme switcher.
default sets the first-load theme before a visitor makes a choice.
storageKey controls where the selected theme is stored in localStorage.

The floating preview accent switcher uses previewAccentSwitcher.colors in the same file. Update that list if you want buyers or visitors to preview your own brand palette.

Swap the product mockups for real screenshots

Put screenshots in public/, then reference them with root-relative paths:

hero: {
  image: "/screenshots/dashboard.png",
},

Common fields:

hero.image - replaces the main hero dashboard mockup
solutions.items[].image - replaces the solution cards
features.items[].image - replaces the large feature workflow mockup
process.steps[].image - replaces the process card visuals
adaptive.image - replaces the adaptive dashboard mockup
integrations.image - replaces the integration visual

Leave a field as an empty string to keep the built-in CSS mockup.

The contact form is controlled by contactForm in site.ts:

contactForm: {
  provider: "formspree",
  formspreeId: "your-form-id",
}

Supported contact providers:

formspree
formsubmit
netlify
null to disable the form

The newsletter section is controlled by newsletter:

newsletter: {
  provider: null,
  heading: "Billing notes worth keeping",
  actionUrl: "https://your-provider.com/subscribe",
}

Supported newsletter providers:

mailchimp
convertkit
buttondown
null to keep the section non-submitting until you connect a provider

Edit blog and changelog content

Blog posts live in src/content/blog/
Changelog entries live in src/content/changelog/
The blog index, blog detail pages, and changelog page read from Astro Content Collections

Use Markdown frontmatter to update titles, descriptions, dates, tags, and cover images.

What’s next

Configure -> site.ts - identity, menus, theme colors, page headers, section content, pricing, forms, SEO, social, and footer.
Customize -> Brand colors & fonts - Tally’s palette and Outfit / Inter type system live in src/styles/global.css.
Configure -> Contact form - wire Formspree, FormSubmit, or Netlify Forms.
Configure -> Newsletter - connect Mailchimp, ConvertKit, or Buttondown.
Content -> Blog posts - add or edit Markdown posts.
Deploy -> Cloudflare Pages - publish the theme to Cloudflare Pages.