---
version: alpha
name: Cushion — split calendar feature section
colors:
  surface: '#ffffee'
  ink: '#222222'
  primary: '#3498db'
typography:
  primary:
    fontFamily: Effra
    fontSize: 24px
    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 pale yellow feature explanation sits beside a colorful horizontal scheduling preview, with a small calendar illustration and three green-check benefits.

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

## Colors

surface: #ffffee; ink: #222222; primary: #3498db. 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 24px/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

Split the section evenly between a left text panel and a right product-image panel. Keep the heading and explanatory paragraph compact, then use three short benefit lines. The timeline preview deliberately extends beyond its frame instead of shrinking every date to fit.

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

The measured 1440×401 desktop split becomes 390×763. On mobile the image moves above the text, with its timeline intentionally cropped horizontally; the prose and checklist remain fully visible in a 358px column with 16px side gutters. Heading stays 24px.

## Elevation & Depth

Use a flat pale-yellow copy field and pale-gray screenshot field. Product callouts provide depth within the screenshot, not as live page tooltips.

## Shapes

A thin dividing line and simple checkmarks frame the content; the timeline uses colorful horizontal bars and a blue speech-bubble callout.

## Components

The planning interface is a source product illustration, not an interactive dashboard. No tooltip, drag, calendar or scheduling interactions were 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.