---
version: alpha
name: Ghost — Audience-Based Plans and Comparison Matrix
colors:
  paper: '#FFFFFF'
  muted: '#6B7280'
  selected: '#111827'
  primary: '#000000'
typography:
  heading:
    fontFamily: InterDisplay, sans-serif
    fontSize: 48px
    fontWeight: 700
    lineHeight: 55.2px
  body:
    fontFamily: InterVariable, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
---

## Overview
A complete pricing page pairing an audience-size slider and billing switch with four restrained plan cards, a dense grouped feature matrix, and a contrasting closing CTA. Inspected on 2026-09-30 at 1440px and 390px widths. This is a full-page or complete initial-screen reference, not an isolated component crop.

## Colors
The token values above are measured opaque CSS text, surface or action colors. Transparent roots inherit their surrounding surfaces and are not treated as measured white. Artwork and logo colors remain source-specific rather than universal tokens.

## Typography
The selected heading/label sample uses InterDisplay, sans-serif, 48px / 55.2px, weight 700; the corresponding mobile sample is 30px. Supporting text sample is 20px / 30px. Preserve the hierarchy rather than assuming every paragraph uses the same size. Computed font stacks do not grant font licenses; choose licensed equivalents when adapting.

## Layout
At 1440px four plans align in a single row beneath the member slider and billing controls. The comparison matrix uses persistent plan columns and grouped feature categories. At 390px the plan cards stack and the visible comparison becomes a narrow feature/plan presentation rather than squeezing all desktop columns into one tiny table. The main headline changes from 48px/55.2px to 30px/37.5px. Measured outer document/component bounds: 1440 × 6048px desktop; 390 × 7478px mobile. These two widths do not establish the exact breakpoint rules.

## Elevation & Depth
Subtle card shadows distinguish the plans from the light canvas. Comparison rows rely on alignment and pale alternate surfaces, not heavy rules.

## Shapes
Compact rounded billing buttons, a thin rounded slider track, rectangular cards, small checks and crosses. Repeated dark card actions share a consistent baseline on desktop.

## Components
Audience slider, monthly/yearly billing controls, Starter/Publisher/Business/Custom cards, grouped feature comparison, closing action and footer. Capture retains the default yearly state and source-displayed prices; changing the slider or billing state was not tested. Prices are dated source evidence, not promised current offers.

## Do's and Don'ts
Do preserve the observed reading order, contrast, spacing and responsive emphasis. Do supply keyboard focus, meaningful labels and reduced-motion alternatives in an implementation. Do not copy source testimonials, brand assets or performance claims as your own. Do not infer successful submission, hidden validation, hover or authentication behavior from resting screenshots.