E2B — Customer Quote Carousel

---
version: alpha
name: E2B — Customer Quote Carousel
colors:
  primary: '#E32A01'
  canvas: '#FFFFFF'
  ink: '#000000'
  surface: '#F4F4F4'
typography:
  heading:
    fontFamily: '"PP Supply Sans", "PP Supply Sans Fallback", sans-serif'
    fontSize: 72px
    fontWeight: 600
    lineHeight: 61.2px
  body:
    fontFamily: '"Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text Pro Fallback",
      sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28.8px
---

## Overview
A pale gray testimonial section uses a compact category label, large condensed heading and white quote cards with attribution. Inspected at 1440px desktop and 390px mobile widths on September 30, 2026.

## Colors
Palette tokens describe the observed visual roles. Condensed uppercase industrial headings, hairline rules, monospace details and vivid vermilion actions. Favor square corners and grid alignment over decorative shadows. Transparent and gradient text layers must be considered with their painted background, not interpreted as solid-color text.

## Typography
The sampled heading uses "PP Supply Sans", "PP Supply Sans Fallback", sans-serif at 72px, weight 600, with 61.2px leading. Supporting sample: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text Pro Fallback", sans-serif, 18px / 28.8px. These are computed styles at capture width, not fixed requirements for every breakpoint. Use licensed font assets or deliberate substitutes.

## Layout
Use strong heading-to-card hierarchy and consistent quote card padding. Preserve horizontal carousel structure where shown; do not invent a mobile stacked grid. Exact responsive breakpoints were not measured.

## Elevation & Depth
Preserve separation through the reference’s surface contrast, border rules and whitespace. Avoid adding heavy shadows to a flat interface. Shadow strength is visual guidance, not a measured token.

## Shapes
Keep the visible distinction between content panels, fields and actions. Match the photographed corner treatment rather than applying one global radius; measured element radii are retained in the evidence.

## Components
Only the visible carousel state is captured; do not reuse customer quotes as endorsements of another product.

## Do's and Don'ts
Do adapt hierarchy, spacing and responsive ordering with your own brand and truthful copy. Do not reuse customer endorsements or performance numbers as your own. Do not infer hover, keyboard, validation, dark-mode or accessibility compliance from static images.