HelpKit — Three-Tier Plans and AI Add-On Pricing

---
version: alpha
name: HelpKit — Three-Tier Plans and AI Add-On Pricing
colors:
  primary: '#7E3AF2'
  purple: '#7E3AF2'
  canvas: '#FFFFFF'
  ink: '#161E2E'
  muted: '#6B7280'
  pale: '#F8FAFC'
  sample-heading: '#252F3F'
  sample-supporting: '#475569'
typography:
  heading:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 48px
    fontWeight: 900
    lineHeight: 60px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
---

## Overview
A complete pricing page with three plans, a purple annual-billing control, an emphasized Business tier, mint feature checks, a separate AI add-on, FAQs and source testimonials. Inspected on 2026-10-05. This is a complete desktop page capture, not an isolated component crop.

## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. Blue, violet and pink form the source accent gradient. Keep neutral text readable against the relevant light or dark band; pale controls and white panels must remain distinguishable.

## Typography
The listed font families are computed CSS stacks, not a guarantee that every named fallback is installed. The selected heading sample is Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 48px, weight 900, line-height 60px. A supporting paragraph sample uses 18px with 28px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
A centered headline and billing selector precede three side-by-side plan cards. At 390px the headline reduces from 48px/60px to 36px/45px and the plans stack under the selector. The middle plan is outlined and badged on desktop. The lower page contains a wide AI add-on panel, saving guidance, FAQs, testimonials and a closing action before the footer. Primary image dimensions are 1440 × 8222px at a 1440px viewport. The mobile evidence is 390 × 844px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Fine card borders and a purple highlight distinguish the recommended plan. The rest is mostly flat white with pale-gray feature rows and mint check circles.

## Shapes
Rounded selector pill, small status badge, narrow rounded feature rows and outlined comparison cards. Gradient buttons repeat at the bottom of each plan.

## Components
Starter, Business and Professional cards were captured with Yearly selected; displayed monthly-equivalent figures are source observations. A separate AI add-on is not a fourth base plan. Billing switching, trials, purchases and form validation were not exercised; testimonial outcomes are not independently verified.

## Do’s and Don’ts
Keep billing context close to prices and show the add-on as a separate offer. Do not advertise annual-equivalent prices as unrestricted monthly billing or remove the source's plan-limit distinctions. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.