Kagi — Color-Accented Quote Columns

---
version: alpha
name: Kagi — Color-Accented Quote Columns
colors:
  primary: '#18181A'
  paper: '#FFFFFF'
  heading: '#18181A'
  copy: '#18181A'
typography:
  heading:
    fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body:
    fontFamily: Lufga, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: 31.92px
---

## Overview
Four compact testimonial columns use colorful quotation marks, dark names, small roles, and light vertical rules. This isolated component was inspected at 1440px and 390px viewport widths on 2026-09-29. The screenshot contains only `section.testimonials-section`, 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 16px / 24px at weight 400; supporting text uses 24px / 31.92px. 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
Keep four parallel columns at desktop with restrained spacing and no enclosing cards. At 390px the source shows a horizontal carousel: one quote is fully visible, the next peeks in, and small pagination dots sit below. Preserve attribution inside each slide. Swiping and pagination actions were not tested. Measured desktop component bounds: 1112 × 308px. Mobile bounds: 358 × 321.859px. These two samples do not establish exact breakpoints.

## Elevation & Depth
Flat white canvas with fine dividers; small quotation marks provide color without introducing large backgrounds.

## Shapes
Flat white canvas with fine dividers; small quotation marks provide color without introducing large backgrounds.

## Components
Colored quote marks, name, role, and short quote. The source quotes demonstrate layout only: use real, permissioned testimonials for 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.