CLARITY — SaaS Pricing & Comparison Pack
A complete static pricing and feature-comparison page your SaaS visitors can actually read — and act on.
CLARITY is a self-contained HTML/CSS/JS pricing page. Download one file, swap in your plan names and prices, connect your sign-up links, and deploy to any static host. No framework, no CMS, no subscription, no backend required.
What You Get
- One complete self-contained pricing page with navigation, pricing cards, comparison table, FAQ, and a CTA strip
- Monthly / Annual billing toggle — smooth, keyboard-accessible, with an accessible announcement for screen readers; no external library
- Three configurable plan cards with a highlighted recommended tier, customizable plan names, prices, bullet features, and CTA buttons
- Full-width feature comparison table — five feature categories, check and cross icons with accessible aria-labels, horizontally scrollable on mobile
- Native accordion FAQ — eight pricing-specific questions using HTML
/
; no JavaScript required - FAM-WK-001 token system — uses the same
:rootCSS variable names as WK-001 (LUMEN) so both pages share one set of brand colors - Zero runtime dependencies — no npm, no framework, no remote font or library
- Five tested responsive widths: 360, 390, 768, 1280, and 1440 px
- Accessibility-minded implementation — semantic table markup, keyboard navigation, visible focus indicators, ARIA state updates, and reduced-motion support
- Quick Start Guide — step-by-step Markdown guide covering plan config, table editing, CTA setup, and deployment
- Pricing Strategy Worksheet and Plan Comparison Content Checklist
- Personal and commercial-use license for your own and client projects
Page Sections
- Sticky navigation with anchor links and a CTA button
- Page header with headline and monthly/annual billing toggle
- Three pricing cards with a recommended-plan highlight
- Full-width feature comparison table (five categories)
- Native FAQ accordion — eight items
- Final CTA strip with primary and secondary action buttons
- Minimal footer with copyright and legal links
Technical Specifications
| Format | Self-contained HTML/CSS/JavaScript |
|---|---|
| Build step | None |
| Runtime dependencies | None |
| Responsive widths tested | 360, 390, 768, 1280, 1440 px |
| Hosting | Any static host or standard web server |
| Product family | FAM-WK-001 — AI/SaaS Launch System |
| Family tier | Single |
| Token compatibility | Shares :root variable names with WK-001 (LUMEN) |
| Version | 1.0.0 |
Works Well With
CLARITY pairs directly with WK-001 — LUMEN AI SaaS Landing Page. Both products use the same :root CSS custom property names. Apply your brand token values once, and both pages share the same visual identity automatically.
Important Before You Buy
- This is a static front-end template, not a hosted SaaS product, WordPress theme, or website builder component.
- No backend, database, hosting, domain, or payment processor is included. CTA buttons link to URLs you provide — connect your own Stripe, Paddle, Lemon Squeezy, or other billing service.
- The demo content (plan names, prices, feature lists) is fictional and must be replaced with accurate information about your own product before publishing.
- No analytics is pre-installed — add your own tracking snippet if needed.
License Summary
Use and customize this template for personal projects, your business, or client work. You may not resell, redistribute, or share the source files as a standalone template or competing product. See the included license for full terms.
© 2026 Exdfs Technical Group — exdfs.com
Reviews
There are no reviews yet.