---
version: alpha
name: Cushion — mountain-landscape call to action
colors:
  surface: '#eeffff'
  ink: '#222222'
  primary: '#11aa77'
typography:
  primary:
    fontFamily: Effra
    fontSize: 32px
    fontWeight: 700
  body:
    fontFamily: Facit
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
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 pale cyan closing invitation pairs a green trial action with a six-item trust checklist, above layered green mountain and forest artwork.

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

## Colors

surface: #eeffff; 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 32px/normal, weight 700, tracking normal. The body sample uses Facit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 18px/27px, weight 400. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Use a left column for the headline, short supporting paragraph and compact green action, and a right column for a vertically spaced checklist with green ticks. Let mountains, clouds and trees form a generous lower scenic band rather than placing artwork behind the copy.

The isolated element is measured at 1440.00×554.00px within a 1440px desktop viewport. Mobile evidence captures the same complete element at 390px viewport width. The selector is `.FooterCta`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The component grows from 1440×554 to 390×791. The two columns stack with the action preceding the checklist. Heading remains 32px; side gutters become 16px. The artwork crops to the mobile width while preserving a substantial landscape band.

## Elevation & Depth

Several flat hill layers create depth without card shadows. Keep the pale background continuous behind both text columns.

## Shapes

A 4px-radius rectangular action contrasts with angular hills and soft clouds; the checklist uses small green ticks.

## Components

The trial destination was inspected but no trial was started. Source trust statements remain attributed marketing copy; link hover, focus and trial states were not tested.

## 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.