CleanShot — Basic and Pro Pricing Comparison

---
version: alpha
name: CleanShot — Basic and Pro Pricing Comparison
colors:
  heading-ink: '#000000'
  body-ink: '#000000'
  surface: '#FFFFFF'
  action: '#0D44E8'
  primary: '#0D44E8'
typography:
  heading:
    fontFamily: '"Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 60px
    fontWeight: 600
    lineHeight: 66px
  body:
    fontFamily: '"Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue",
      Helvetica, Arial, sans-serif'
    fontSize: 18px
    fontWeight: 450
    lineHeight: 30.06px
---

## Overview
A complete pricing page with two adjacent Basic and Pro cards, a visible yearly/monthly control, comparison matrix, discount tiles, closed FAQs and the shared dark closing CTA. Inspected on 2026-10-04. This is a complete page reference, not a relabelled section crop.

## Colors
Tokens above reflect observed CSS text/surface colors; Typewolf canvas is sampled from its screenshot. Photography, gradients and alpha treatments remain visual references rather than invented flat-color tokens. Keep saturated blue restricted to actions and emphasized words.

## Typography
The observed leading text sample uses "Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif at 60px, weight 600, with 66px leading. Supporting text uses "Google Sans Flex", "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif at 18px / 30.06px. These are computed local samples, not a claimed universal type scale. Use licensed fonts or suitable fallbacks; imagery may contain unrelated typefaces.

## Layout
Desktop presents two aligned plan panels under a centered 60px heading. At 390px the heading measures 42px and the pricing cards stack in a narrow column; the first card begins with the one-time purchase label. Keep feature rows aligned across plans. Only the mobile opening viewport was visually inspected, not all comparison-table overflow states. The desktop screenshot is 1440 × 5412px at a 1440px viewport. Mobile evidence uses a 390px viewport; its image is 390 × 844px. Two measured widths do not establish exact breakpoint thresholds.

## Elevation & Depth
White plan cards lift subtly from blue-gray top bands. Fine horizontal comparison rules and pastel discount blocks separate content without dense borders.

## Shapes
Large rounded plan containers, small icon tiles, rounded purchase buttons and a segmented billing switch are the dominant shapes.

## Components
The captured state displays Basic at $35 once and Pro at $10 per user/month billed annually. These are source prices at capture, not guarantees. Comparison rows distinguish app updates, cloud storage and team features. The FAQs remain collapsed; checkout and billing-toggle interactions were not tested.

## Do’s and Don’ts
Keep billing period beside the price and distinguish one-time ownership from recurring service. Do not silently turn the yearly amount into monthly billing. No checkout, account creation or trial was initiated. Provide visible keyboard focus and accessible labels when adapting. Those are implementation recommendations, not a completed accessibility audit.