Tally
Blueprint-framed SaaS theme for modern software products. Light/dark mode, persistent accent colors, swappable app screenshots, blog, changelog, contact, newsletter, and a full config-driven marketing site.
See Tally in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Tally is a complete SaaS website system for software products that need to feel polished, credible, and ready to launch. The demo uses a client-work workflow example, but the structure is broad enough for AI tools, CRMs, analytics products, customer portals, productivity apps, internal tools, vertical SaaS, and B2B platforms. A blueprint-style frame, calm dark and light modes, a warm configurable accent, and detailed live CSS app mockups make the site feel like real product software from the first scroll. It ships a real marketing site, not just a hero: homepage, features, pricing, customers, resources, about, contact, blog, changelog, waitlist, legal pages, and a section gallery. Every visible string flows from src/config/site.ts, and every major product visual can be replaced with a real screenshot by setting an image path in that same file.
Best Fit For
- SaaS and B2B software products
- AI tools, CRMs, analytics products, and productivity apps
- Customer portals, dashboards, and vertical SaaS
- Founders who need a credible product site with real depth
- Teams that want polished mockups now and real screenshots later
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
20 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
A Product Tour With Real Interface Depth
Tally's hero and homepage sections use detailed live CSS UI - dashboards, workflow cards, customer records, automations, integrations, and app panels - so the page reads as real software even before you have final screenshots.
Theme Switching and Accent Switching Included
A persisted light/dark toggle is built into the header, with darker light-mode accent pairs for contrast. The floating preview accent switcher lets buyers try colors live, while the permanent palette stays cleanly editable from src/config/site.ts.
Built to Become Your Actual Product Site
The mockups are useful placeholders, but they are not a trap. Set image paths in site.ts to replace the hero, solutions, feature workflow, process cards, adaptive dashboard, and integrations with real product screenshots.
Forms, newsletter, and analytics - pre-wired
Tally is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Tally-specific page - all live now.