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.
One payment for Tally and everything else - all 31 themes, every future release, and the visual builder included.
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;Built to be edited by AI
Tally ships an AGENTS.md and
a CLAUDE.md at the project root.
Claude Code, Cursor, Copilot, and Codex read them the moment you open the folder.
So your agent starts knowing which file to edit, which design decisions are deliberate, and which parts of the theme break quietly if touched. You get the right change on the first pass instead of a confident guess.
- A task map. Every common request routed to the exact file, so no time is spent exploring.
- Design invariants. The decisions that make the theme worth buying, marked do-not-touch.
- The traps. The specific things that break this theme silently, written down.
- A done checklist. What to build, what to scroll, what to verify before claiming success.
# AGENTS.md - Tally
## Task map
| The client wants to change | Edit |
|---|---|
| Brand name, logo, favicon | site.ts -> identity |
| Colors | site.ts -> theme |
| Any homepage copy | site.ts -> home.<block> |
| Add a page or an article | new .md in src/content/ |
Rule: copy belongs in site.ts, never inside a component.
## Design invariants
Do not "improve" these. They are why the theme is worth its price.
- The accent stays loud. Do not mute or pastel it.
- Display headings stay oversized. The scale is the design.
## Traps
The things that break this theme silently, written down,
so your agent does not have to discover them by breaking them.
## Before you say you are done
npm run build # must succeed and emit every route
Scroll each page to the bottom. Report what you did not verify.Excerpt. The full file ships with the theme.
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.
More themes from the collection.
Slab
SaaS / Startup
Vertex
SaaS / Startup
Falcon
Agency / Portfolio / Blog
August
Personal / Portfolio / SaaS
Or get every theme - these included - with the All-Access Pass.