folk — editorial testimonial rows with portrait attribution

---
version: alpha
name: folk — editorial testimonial rows with portrait attribution
colors:
  surface: '#ffffff'
  ink: rgba(3, 2, 0, 0.89)
  portrait-surface: '#fcfcfc'
typography:
  display:
    fontFamily: Uxumgrotesque
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
  interface:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 34px
components:
  surface:
    backgroundColor: '{colors.surface}'
  portrait-surface:
    backgroundColor: '{colors.portrait-surface}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
---

## Overview

Five spacious testimonial rows using large editorial quotes, thin separators and compact portrait/name/role attribution rather than carousel cards.

Source: https://www.folk.app/. Captured 2026-10-11T06:17:51.289887+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #ffffff; ink: rgba(3, 2, 0, 0.89); portrait-surface: #fcfcfc. Tokens describe observed interface surfaces and text, not every pixel in artwork. Translucent values retain source alpha; perceived colors vary with their backing surface.

## Typography

Primary sample: “Loved by closers” uses Uxumgrotesque, sans-serif, 64px/64px, weight 500, tracking -1.472px. The corresponding mobile heading is 32px/32px.

The interface token samples “"folk helped us simplify our whole sales flow. Sometimes you get overwhelmed by all the tasks you need to do. Having fol” at 28px/34px, weight 400, using Inter, Arial, sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Anchor the section with a large left-aligned Loved by closers heading. Each desktop row allocates most width to a quote and a narrower right column to a square portrait with name and role. Horizontal rules connect the full section rather than outlining every quote.

The native desktop screenshot is 1440 × 1140px, prepared at a 1440px viewport. It contains only `.section_testimonials`. The measured element bounds are 1440.00 × 1139.00px at desktop and 390.00 × 1689.00px at 390px. Root padding is 0px on desktop and 0px on mobile.

At 390px attribution moves below each quotation, with the portrait left of name and role. Headings reduce from 64px to 32px and quote text from 28px to 22px. All five rows remain in document order; no carousel is implied.

## Elevation & Depth

Flat white with fine ink separators. The only visual texture comes from source portraits; no deep shadows or colored badges compete with the words.

## Shapes

Square portraits and open rows, not rounded testimonial cards. Maintain clean baseline alignment in the compact attribution block.

## Components

These are quotations displayed on the source site, not independently verified interviews. No quote carousel or hidden state was tested; the captured pattern is a static list.

## Do's and Don'ts

Do preserve exact source attribution when quoting. Do not rewrite a testimonial, fabricate an endorsement or turn a source quote into a measured product outcome. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.