Product Overview
A pricing page has one job: help a visitor pick a plan and click a button. CLARITY is a self-contained HTML/CSS/JS pricing and comparison page built entirely around that job, with three plan cards, a full feature comparison table, and an FAQ that answers the objections that stop people from buying.
Everything lives in a single index.html file. Swap in your plan names, prices, and features, connect your billing links, and deploy to any static host, with no framework, backend, or subscription required to run it.
Key Features
- Three configurable plan cards — with a highlighted recommended tier, editable names, prices, bullet features, and CTA buttons.
- Monthly/annual billing toggle — smooth and keyboard-accessible, with a screen-reader announcement on switch, no external library required.
- Full-width feature comparison table — five feature categories with check and cross icons carrying accessible aria-labels, and horizontal scroll on mobile.
- Native accordion FAQ — eight pricing-specific questions built with semantic HTML, requiring no JavaScript to expand or collapse.
- FAM-WK-001 token system — uses the same :root CSS variable names as the LUMEN landing page template, so both pages can share one brand color set.
- Zero runtime dependencies — no npm, framework, remote font, or external library anywhere in the file.
- Five tested responsive widths — 360, 390, 768, 1280, and 1440 pixels.
- Accessibility-minded build — semantic table markup, keyboard navigation, visible focus indicators, ARIA state updates, and reduced-motion support.
- Quick Start Guide — step-by-step Markdown instructions covering plan configuration, table editing, CTA setup, and deployment.
What’s Included
10 files, delivered as one ZIP (HTML, MD, PDF, TXT).
- Product/SaaS_Pricing_Comparison_Pack/ — index.html (the complete pricing page, inline CSS and JavaScript) and demo-content.md (every placeholder to replace)
- Bonus/ — Pricing_Strategy_Worksheet.md, Plan_Comparison_Content_Checklist.md
- Documentation/ — Quick_Start_Guide.md, Quick_Start_Guide.pdf, README.md
- License/ — License.txt
- Root files — Product_Specification.md, QA_Report.txt
Who This Is For
- SaaS founders — who need a dedicated pricing page separate from their main marketing site.
- Indie hackers — launching a new plan structure and wanting a page live the same day.
- Product marketers — running pricing experiments and needing a page they can edit without a developer.
- Freelancers and agencies — building pricing pages for client SaaS products under the commercial license.
- Teams already using LUMEN — who want a matching pricing page using the same design tokens.
Why Choose CLARITY
- Built specifically for pricing decisions — not a generic template repurposed, but a page structured around plan comparison and objection handling.
- Comparison table done right — five feature categories with accessible markup, something most static templates skip.
- Pairs with LUMEN — shared :root variable names mean one set of brand colors updates both pages automatically.
- Strategy tools included — the Pricing Strategy Worksheet helps you decide what to charge before you touch the HTML.
How To Use
- Unzip the download and open Documentation/Quick_Start_Guide.pdf for the setup walkthrough.
- Fill in the Pricing_Strategy_Worksheet.md to finalize your plan names, prices, and feature list.
- Open Product/SaaS_Pricing_Comparison_Pack/index.html in a code editor and replace the demo plans, table rows, and FAQ using demo-content.md as your checklist.
- Connect each CTA button to your Stripe, Paddle, Lemon Squeezy, or other billing link.
- Use the Plan_Comparison_Content_Checklist.md for a final review, then deploy index.html to any static host.
Frequently Asked Questions
What format are the files? One ZIP containing a single self-contained HTML file with inline CSS and JavaScript, plus Markdown and PDF guides, a specification file, a QA report, and a license file.
Can I edit the files? Yes. index.html is fully editable, including plan names, prices, comparison rows, and FAQ content.
What software do I need? A code editor and a web browser. No build tools or paid software are required.
Is this for personal or commercial use? Both. The license covers personal projects, your own business, and client work. Reselling, redistributing, or sharing the source files as a standalone template or competing product is not permitted.
What is the refund policy? As a digital download, CLARITY is non-refundable once downloaded. If a file is missing or corrupted, contact support and it will be replaced.
Does CLARITY include a payment processor? No. CTA buttons link to URLs you provide; connect your own Stripe, Paddle, Lemon Squeezy, or other billing service.
Is the ROI calculator functional out of the box? Yes, it runs on the included JavaScript with no backend needed, but you should update the default assumptions to match your own pricing before publishing.
Will CLARITY match my LUMEN landing page automatically? Both use the same FAM-WK-001 :root variable names, so applying your brand color values once updates both pages consistently.
Bonus Materials
Two planning documents come with the page: the Pricing Strategy Worksheet, which helps you settle on plan names, price points, and feature tiers before editing any code, and the Plan Comparison Content Checklist, a final review pass to make sure your comparison table and FAQ are accurate before the page goes live.
Reviews
There are no reviews yet.