---
version: alpha
name: Cushion — four-person testimonial grid
colors:
  surface: '#ffffff'
  ink: '#222222'
  primary: '#222222'
typography:
  primary:
    fontFamily: Facit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: Facit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
    textColor: '{colors.ink}'
  surface:
    backgroundColor: '{colors.surface}'
---

## Overview

A restrained four-person testimonial section uses small circular portraits, short quotations and underlined author attributions on a white background, without card chrome.

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

## Colors

surface: #ffffff; ink: #222222. Primary text: #222222. 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 Facit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 16px/24px, weight 400, 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

Arrange four quote blocks in a spacious two-by-two grid inside a centered content area. Each begins with a small circular portrait, followed by a short quotation and bold linked name with profession. Preserve source attributions without rewriting them as new endorsements.

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

The section changes from 1440×475 to 390×937. Two desktop columns become one mobile column with 16px side gutters. Quote copy remains 16px/24px; attribution stays 14px/21px with natural wrapping.

## Elevation & Depth

White space and a faint boundary line do the work; no raised cards are visible.

## Shapes

Circular portraits are the only strongly rounded elements; keep quote blocks unboxed.

## Components

Only visible source quotations and author links were captured. External author profiles were not followed. Reuse the layout, not the customer identities or claims.

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