Kirby — Editorial Testimonial Columns

---
version: alpha
name: Kirby — Editorial Testimonial Columns
colors:
  primary: '#000000'
  paper: '#FFFFFF'
  heading: '#000000'
  copy: '#000000'
typography:
  heading:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 31.5px
  body:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.75px
---

## Overview
A quiet testimonial section pairs an understated heading with four rule-led quotes, small portraits, and compact attribution. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `#voices`, not the full landing page.

## Colors
Measured text and opaque surface colors are recorded above. Transparent component roots inherit the page background; white/pale appearance is a visual observation, not a measured transparent-to-white conversion. Small artwork accents are not promoted to unmeasured palette tokens.

## Typography
The sampled heading or label uses 28px / 31.5px at weight 400; supporting text uses 18px / 24.75px. Font-family values are computed CSS stacks, not a guarantee that a licensed font is available in another project. Use a licensed equivalent when necessary.

## Layout
Use four desktop quote columns across a 1248px section. On narrow screens stack the content within 342px. Keep portrait and attribution grouped below each quote, and let quote lengths vary naturally. Measured desktop component bounds: 1248 × 272.25px. Mobile bounds: 342 × 769.5px. These two samples do not establish exact breakpoints.

## Elevation & Depth
Flat pale background and narrow black rules. Portraits are small visual anchors; avoid turning every quotation into an elevated rounded card.

## Shapes
Flat pale background and narrow black rules. Portraits are small visual anchors; avoid turning every quotation into an elevated rounded card.

## Components
Section title, blockquotes, thin left rules, portraits, names and roles. These are source-site testimonials, not endorsements available to reuse in another product.

## Do's and Don'ts
Do preserve the component-specific hierarchy, spacing, and responsive structure. Do provide accessible labels, contrast, and keyboard focus in your implementation. Do not reuse source testimonials, trademarks, or performance claims as your own. Do not infer hover, validation, animation, or navigation behavior from these resting-state captures.