Lemon Squeezy — six-card testimonial checkerboard

---
version: alpha
name: Lemon Squeezy — six-card testimonial checkerboard
colors:
  surface: '#FFFFFF'
  alternate: '#F7F7F8'
  primary: '#121217'
  muted: '#6C6C89'
typography:
  primary:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32.4px
  body:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32.4px
  control:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32.4px
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
---

## Overview

Six testimonial cards alternate white and smoke surfaces in a three-column checkerboard, with generous quote leading and compact portrait attribution.

Source: https://www.lemonsqueezy.com/. Captured 2026-10-07T06:07:16.436463+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed roles: surface: #FFFFFF; alternate: #F7F7F8; primary: #121217; muted: #6C6C89. Values are measured source colors and inspected surfaces. Do not apply the accent indiscriminately to secondary copy or disabled controls.

## Typography

The primary sampled text uses Inter at 18px / 32.4px, weight 400, with a measured desktop width of 331.08px. Its corresponding mobile sample is 15px / 27px across 326.00px. Body and control tokens above come from this reference's own computed styles; `normal` leading is omitted from YAML rather than guessed.

## Layout

Arrange six statements in a three-by-two desktop grid. Alternate smoke and white surfaces rather than surrounding each card with a border. Keep the quote first and the circular portrait, name and muted handle near the bottom; align card rows while allowing different quote lengths.

The selected root's measured raster is 1440×901px on desktop and 390×1605px on mobile. The screenshot contains only `section.section-testimonial-cards`.

Responsive evidence: At 390px all six cards form one vertical list in the original order. Quotes change from 18px/32.4px desktop to 15px/27px mobile, and content widths become 326px. Alternating surfaces remain visible and keep adjacent cards distinct. The full mobile component was inspected.

## Elevation & Depth

This is a flat editorial grid: light surface contrast and round portraits supply the structure, with no heavy shadows or enclosing rounded cards. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius not sampled and padding not sampled. Those measurements belong to that sample, not every container. Preserve the visible geometry and spacing hierarchy; any additional spacing scale would be an implementation estimate.

## Components

The six quotations, including any revenue anecdotes, are original site text and are not verified performance claims. There are no tested carousel interactions here; this captured component is a static set of six cards.

## Do's and Don'ts

- Do preserve the documented content order, visual hierarchy and measured responsive changes.
- Do retain source field labels, attribution and clear differences between primary, secondary and disabled controls.
- Do treat visible prices, statistics and quotations as dated source content.
- Don't fabricate customer evidence, expanded states, errors or successful form submissions.
- Don't infer unobserved interactions, dark mode, additional breakpoints or exact motion timings.