Cushion — playful freelance-planning landing page

---
version: alpha
name: Cushion — playful freelance-planning landing page
colors:
  surface: '#eeffff'
  ink: '#222222'
  primary: '#11aa77'
typography:
  primary:
    fontFamily: Effra
    fontSize: 56px
    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 friendly pastel marketing page for freelance planning pairs bold Effra headings with illustrated skies, colorful financial and calendar previews, alternating feature rows, a testimonial grid and a mountain-scene CTA.

Source: https://cushionapp.com/. Captured 2026-10-10T06:04:13.593823+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 56px/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

Begin with airy centered copy and adjacent green/outlined actions over a framed product preview. Follow with a blue trial strip and playful rollercoaster illustration. Alternate lime and lemon feature panels with cropped planning screenshots. End with four testimonials, a landscape CTA and dark-green footer.

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

At 390px the navigation becomes a wordmark and Menu control, the heading reduces from 56px to 40px, and supporting copy wraps within 358px. Hero actions remain side by side; the framed product image scales down. Separately captured lower components verify one-column testimonial and CTA reflow.

## Elevation & Depth

Illustrations and product preview frames create depth; the page itself is mostly flat with thin separators and quiet edges.

## Shapes

Use compact 4px-radius actions, rounded browser chrome and circular portraits. Keep the illustrated hills and clouds organic.

## Components

The source shows trial and customer claims; they are not independently verified outcomes. Signup and signin were inspected without submission but deferred because their mobile layouts visibly clipped the forms.

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