Cushion — illustrated three-plan pricing page

---
version: alpha
name: Cushion — illustrated three-plan pricing page
colors:
  surface: '#3498db'
  ink: '#222222'
  primary: '#11aa77'
typography:
  primary:
    fontFamily: Effra
    fontSize: 56px
    fontWeight: 700
  body:
    fontFamily: Facit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.ink}'
  body-copy:
    typography: '{typography.body}'
    textColor: '{colors.ink}'
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.primary}'
---

## Overview

A blue illustrated banner introduces three simple pricing columns, an annual/monthly switch, pastel plan footers, an illustrated FAQ and a mountain-scene conversion section.

Source: https://cushionapp.com/pricing. Captured 2026-10-10T06:04:22.063505+00:00. This is an observational reference, not an official brand specification.

## Colors

surface: #3498db; ink: #222222; primary: #11aa77. Tokens describe the observed core surfaces and text, not every color within illustrations or embedded product screenshots. Computed parent styles can differ from painted child text; white action labels were checked visually.

## Typography

Primary visible text uses Effra, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 56px/normal, weight 700, tracking normal. The body sample uses Facit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 16px/24px, weight 400. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Place a centered heading over a mountain banner, then a full-width billing strip. Align Supporter, Pro and Subsidized columns with large prices, short feature lists and action footers. A diagonal Most Popular ribbon distinguishes Pro. Continue with a side-by-side illustration and FAQ, testimonials and final CTA.

The full-page reference was captured at 1440px width with a measured document height of 2682px. Mobile evidence covers the opening 390×844px viewport; it is not a complete mobile-page audit.

At 390px the banner headline reduces from 56px to 40px and the plan columns stack. The annual/monthly switch stays centered in one row; the Supporter card occupies the full available width before Pro. The screenshot records the initial annual state.

## Elevation & Depth

Flat blue landscape silhouettes and tinted card footers establish grouping. Use restrained outlines rather than deep shadows.

## Shapes

Use a pill-shaped switch, square-edged plan columns, a diagonal recommendation ribbon and compact rounded actions.

## Components

The first FAQ answer is visible in the default captured state. Billing toggle, other accordion answers and trial creation were not tested. Published plan values are only the observed source state.

## Do's and Don'ts

- Do preserve the grouping, hierarchy, spacing and responsive arrangement described above.
- Do use the screenshot and measured element evidence together; decorative dimensions not explicitly measured are estimates.
- Don't invent hover, error, loading or completion states from the static capture.
- Don't reuse source customer quotations, logos or numeric claims as endorsements for another product.