Per-card annual billing toggle

Expected impact

Increases conversion to annual billing by letting users evaluate discount impact contextually within each plan, potentially lifting average contract value and reducing decision friction on the pricing page.

Why it works

Localizing the toggle within each card reduces cognitive load by letting users see the exact discount and monthly-equivalent price for the specific tier they're evaluating, rather than mentally recalculating a global percentage discount across all plans simultaneously.

linear.app

How to recreate it

1. Add a toggle switch component inside each pricing card, positioned below the price and above the feature list
2. Bind each toggle to update only that card's displayed price (per user/month) between monthly and annual rates
3. Default all toggles to the annual/yearly state to nudge users toward higher-value billing by default
4. Ensure toggle state changes update price instantly without page reload or scroll disruption
5. Keep the Enterprise/custom-price card free of the toggle since it uses annual-only billing language instead
6. Style the toggle consistently across cards using brand accent color for the active state

The prototype prompt

This is the spec Growthtyping compiles for you. The {{brand.*}} tokens are replaced with colors, fonts, radii, and voice from your brand - so the render comes out on-brand, not generic.

PATTERN SPEC: Design a pricing grid with 3-4 plan cards using {{brand.card_radius}} corners and {{brand.border}} dividers. Each card (except the top-tier custom/enterprise card) contains its own independent billing-frequency toggle switch placed directly below the price figure and above the feature checklist. The toggle uses {{brand.primary}} for its active state and controls only that card's price recalculation between monthly and annual figures, not a global page-level toggle. Default toggles to the annual position to bias selection toward yearly commitment. Price text uses {{brand.heading_font}} for the numeral and {{brand.secondary_text}} for the '/user/month' qualifier. Feature list items use small checkmark icons in {{brand.success}} color against {{brand.text}} labels, with each card's first line reading 'All [previous tier] features +' to reinforce cumulative value. The topmost custom-pricing card omits the toggle and instead shows static 'Annual billing only' copy in {{brand.secondary_text}}. Overall background uses {{brand.tint_bg}}, tone should reflect {{brand.tone_examples}} for a product serving {{brand.icp}}.