Sketch — Four-Tier Pricing and Comparison Matrix

---
version: alpha
name: Sketch — Four-Tier Pricing and Comparison Matrix
colors:
  ink: '#212123'
  surface-1: '#151515'
  surface-2: '#F9F9F9'
  surface-3: '#FFFFFF'
typography:
  heading:
    fontFamily: Reckless, "serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 56px
  body:
    fontFamily: InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A complete pricing page with four rounded plan cards, a yearly/monthly control, a separate Mac-only license, a detailed comparison matrix, categorized questions and a download close. Inspected at 1440px desktop and 390px mobile on 2026-10-02. The primary image is the full desktop page; mobile evidence is the opening viewport only.

## Colors
The palette lists opaque computed CSS colors observed in this reference. A sampled-canvas token, when present, is a screenshot pixel sample rather than a CSS declaration. Gradients, transparency, texture, illustration colors and logo hues remain visually described; do not flatten them into one accent.

## Typography
The measured heading sample (Pricing) uses Reckless, "serif", 56px with 56px leading and weight 500. The supporting sample uses InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif, 16px / 24px. The corresponding mobile heading sample is 36px / 40px. These are computed samples from the captured reference, not a universal type scale. Use licensed typefaces or appropriate fallbacks.

## Layout
Four plan cards align in a desktop row, with the billing selector floating above the first card. A shared subscription-benefits band sits beneath them. A horizontal Mac-only purchase block precedes the wide comparison table. At 390px the headline drops from 56px to 36px and the first card fills the column with 16px outer gutters; remaining tiers continue below the opening viewport. Do not infer how every comparison-table column behaves at narrower widths. Saved images measure 1440 × 5987px desktop and 390 × 844px mobile at device scale 1. Two widths do not establish exact CSS breakpoints.

## Elevation & Depth
A translucent warm-to-violet field joins the white card group; shadows are shallow. Glossy dark buttons and the golden app icon create the strongest focal points, while the comparison matrix relies on rules and alignment.

## Shapes
Large rounded cards, pill billing control, tiny circular feature indicators, and restrained divider rules. The Mac-only option is a wide rounded rectangle rather than another subscription card.

## Components
Standard, Professional, Enterprise and Private Cloud tiers; a Mac-only license; subscription inclusions; comparison rows; education/partner links; closed question rows; final free-download CTA. The captured state shows yearly euro pricing. Billing toggles, question expansion, checkout and trials were not exercised.

## Do's and Don'ts
Keep billing cadence adjacent to prices and preserve the distinction between subscriptions and a one-time license. Do not present captured euro amounts as a current global quote. The promotional switching banner was dismissed through its real Dismiss control before capture. Provide meaningful labels, keyboard focus and reduced-motion alternatives when adapting; these are implementation recommendations, not audited source behaviors.