# Pricing Page Design > Use this skill when designing and building pricing pages — tier card layouts, plan comparison tables, billing toggle switches, feature checklists, recommended plan highlighting, enterprise CTAs, and conversion-optimized responsive designs with Tailwind CSS. - Skill: `ziadnagar/pricing-page-design` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add ziadnagar/pricing-page-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/ziadnagar/pricing-page-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: Complete terms in LICENSE.txt - Author: ZiadNagar (https://skillmd.com/u/ziadnagar) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/ziadnagar/pricing-page-design --- # Pricing Page Design ## When to Use - Building a SaaS pricing page with multiple plan tiers. - Designing a billing period toggle (monthly/annual). - Creating plan comparison tables with feature checklists. - Highlighting a recommended or most-popular plan. - Adding enterprise/custom plan CTAs alongside self-serve plans. ## Page Structure A well-designed pricing page typically includes: 1. **Header** — clear headline, optional subheadline explaining the pricing philosophy. 2. **Billing Toggle** — monthly vs. annual switch with savings badge. 3. **Pricing Cards** — 2–4 tier cards side by side (3 is most common). 4. **Comparison Table** — full feature breakdown across tiers. 5. **FAQ Section** — billing, refund, and plan-change questions. 6. **Trust Signals** — money-back guarantee, security badges, testimonials. 7. **Enterprise CTA** — custom plan callout for larger organizations. ## Billing Period Toggle ```html
Monthly Annual Save 20%
``` ### Toggle JavaScript ```js const toggle = document.querySelector("[data-billing-toggle]"); const monthlyPrices = document.querySelectorAll("[data-monthly]"); const annualPrices = document.querySelectorAll("[data-annual]"); toggle.addEventListener("click", () => { const isAnnual = toggle.getAttribute("aria-checked") === "true"; toggle.setAttribute("aria-checked", String(!isAnnual)); monthlyPrices.forEach((el) => el.classList.toggle("hidden", !isAnnual)); annualPrices.forEach((el) => el.classList.toggle("hidden", isAnnual)); }); ``` ## Pricing Card Grid ### Three-Column Layout ```html

Simple, transparent pricing

No hidden fees. Upgrade, downgrade, or cancel anytime.

Starter

For individuals and side projects.

$9 /month

Get started
  • 3 projects
  • 1 GB storage
  • Community support
Most popular

Pro

For growing teams that need more power.

$29 /month

Start free trial
  • Unlimited projects
  • 50 GB storage
  • Priority support
  • Advanced analytics

Enterprise

For organizations with advanced needs.

Custom

Contact sales
  • Everything in Pro
  • Unlimited storage
  • Dedicated account manager
  • SSO & SAML
  • 99.99% SLA
``` ## Comparison Table ```html

Compare plans

Feature Starter Pro Enterprise
Projects 3 Unlimited Unlimited
Storage 1 GB 50 GB Unlimited
Team members 1 10 Unlimited
Analytics Not included Included Included
SSO / SAML Not included Not included Included
``` ## Feature List with Tooltips ```html ``` ## CTA Button Variants ```html Start free trial Get started Contact sales ``` ## Trust Signals ```html
30-day money-back guarantee

Cancel anytime. No questions asked.

``` ## Responsive Mobile Stacking Pricing cards automatically stack on mobile with the `lg:grid-cols-3` class. Additional mobile considerations: - Use `overflow-x-auto` on comparison tables to enable horizontal scrolling. - Collapse feature lists to show only 3–4 items with a "See all features" toggle. - Ensure the recommended plan card appears first on mobile (use `order-first lg:order-none` on the popular plan). - Make billing toggle sticky on scroll (`sticky top-16 z-10 bg-white/80 backdrop-blur`). ```html
``` ## Best Practices - **Anchor pricing**: put the highest-value plan in the center to anchor perception. - **Show savings**: display annual discount as a percentage badge near the toggle. - **Limit tiers**: 3 plans is optimal; 4+ causes decision paralysis. - **Clear differentiation**: each tier should have a distinct target audience. - **Social proof near CTA**: place a short testimonial or user count near the sign-up button. - **Transparent pricing**: always show the actual price — avoid "starting at" when possible. - **Accessible toggle**: use `role="switch"` and `aria-checked` for the billing toggle. ## Anti-Patterns - **Too many tiers** — more than 4 cards overwhelm users. - **Identical feature lists** — tiers should feel meaningfully different. - **No visual hierarchy** — the recommended plan must stand out immediately. - **Price per seat only** — show the total cost, not just per-seat, to avoid sticker shock. - **Hidden limitations** — document rate limits, storage caps, and usage overages clearly. - **No annual discount** — annual billing stabilizes revenue and should always be offered. - **CTA says "Buy now"** — use trial-oriented copy ("Start free trial", "Get started") to lower friction.