Tuple — asymmetric testimonial card grid

---
version: alpha
name: Tuple — asymmetric testimonial card grid
colors:
  primary: '#DB5434'
  ink: '#27272A'
  muted: '#71717A'
  surface: '#FFFFFF'
  soft: '#FAFAFA'
typography:
  heading:
    fontFamily: Inter Variable
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
  body:
    fontFamily: Inter Variable
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
omitted:
- section: spacing
  reason: No standalone spacing scale inferred from this captured reference.
- section: rounded
  reason: No control corner token measured for this isolated reference.
components:
  heading:
    typography: '{typography.heading}'
    textColor: '{colors.ink}'
---

## Overview

An isolated testimonial section with one tall portrait-led card beside four compact quote cards, warm orange monospace labeling and a restrained neutral palette.

Source: https://tuple.app/. Captured 2026-10-06T06:14:18.129214+00:00. This guide describes the observed reference, not an official brand specification.

## Colors

Observed palette: primary: #DB5434; ink: #27272A; muted: #71717A; surface: #FFFFFF; soft: #FAFAFA. Values come from source computed styles and inspected native-raster surface samples. Disabled controls are recorded as painted colors where opacity changes their base accent. Preserve the color roles shown in this individual reference.

## Typography

Measured in a 1440px desktop viewport and a 390px mobile viewport at device scale 1. The chosen desktop primary text sample is 48px / 48px, weight 600, using "Inter Variable"; its measured width is 768.00px. The corresponding mobile sample is 30px / 36px, width 311.00px. Computed styles may describe a parent while a child paints a colored word. Exact selected element bounds: desktop 1425.00 × 1062.66px; mobile 375.00 × 2247.00px. Crops use freshly measured document coordinates after a warm-up screenshot.

Maintain the observed heading/body hierarchy. Do not replace the source typeface with a system font without checking wrapping and control widths.

## Layout

Center the section introduction, then build a three-column desktop grid: one tall lead card spans two rows, while four smaller cards occupy the remaining cells. Give quotations room to breathe and place each author identity beneath its text rather than squeezing all testimonials into uniform tiles.

Responsive evidence: The complete mobile crop shows all five cards in a single column, starting with the portrait-led quote. The section grows from about 1063px tall on desktop to 2247px on mobile. The main heading changes from 48px/48px to 30px/36px and the small mono eyebrow from 16px to 14px.

## Elevation & Depth

Thin pale borders and restrained white cards separate quotations from the near-white section backing. The large portrait has softly rounded corners; avoid introducing dramatic shadows or converting the orange label into a CTA.

No hover, transition timing or shadow blur values were measured. Any additional elevation values would be implementation estimates, not captured tokens.

## Shapes

Follow the original component boundary and preserve the visible illustration and panel geometry; no universal radius scale is inferred.

## Components

The source includes five named testimonials and portraits. Preserve their attribution if reproducing this exact reference; they must not be represented as endorsements of another product. Selectively bolded phrases provide scanning emphasis. The component is static; there is no inspected carousel or expansion behavior.

This is a static recorded state. Interactions not explicitly described as inspected remain untested.

## Do's and Don'ts

- Do preserve the hierarchy, whitespace, source-state distinctions and responsive changes documented above.
- Do keep field labels, content order and visible control affordances intact.
- Do treat captured prices, marketing claims and quotations as dated source content.
- Don't fabricate testimonials, metrics, expanded states, error messages or successful transactions.
- Don't infer dark mode, extra breakpoints or animation timings from these two viewport samples.