# Partner Endorsement Testimonial

Schema: Design Details SECTION.md v3.2
Website: Parloa
Source: https://www.parloa.com/
Source section IDs: gap-778cd21a-4901-5471
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The two-column split gives a bold visual anchor on the left and a calm, readable quote on the right, so the eye lands on the badge and then moves to the words.
- A serif quote paired with small sans author details sets a clear hierarchy, with the quote dominant and the name and role quietly supporting it.
- Naming a real CEO with an avatar, plus a certification badge, makes the endorsement feel credible, and the warm off-white surface keeps the bright blue card the focal point.

What a screenshot can't show:
- No motion was recorded for this section, so any hover or entrance behaviour is unknown.
- No font sizes, line heights or spacing values were measured, so the exact scale and padding can't be confirmed.

Borrow: Pair one saturated, brand-coloured proof graphic with a restrained editorial quote so credibility and tone each get their own side of the layout.
Leave alone: Don't copy the bright blue gradient card, the specific partner certification badge or Parloa's serif and sans pairing; use your own partner asset, palette and a free serif such as a Source Serif style.

## Classification

- Type: testimonial-card
- Layout: Two-column split with a large graphic card on the left and text quote on the right.
- Styles: minimal, gradient
- Confidence: 95%

## Purpose and structure

A two-column layout featuring a large partner badge on a gradient background and a corresponding quote.

Visual signature: A bright blue gradient card paired with a clean, formal testimonial quote.

## Components

- gradient card
- partner badge
- quote text
- author avatar
- author details

## Typography

- Display: Season Serif — 54px 440
- Heading: Season Serif — 42px 440
- Body: Geist — 16px 300
- Mono: Geist Mono — 9px 300

## Functional palette

- Surface: surface #F5F4F0
- Text: text #1F1C1B
- Canvas: canvas #FFFFFF
- Muted-Text: muted text #746861
- Primary-Action: primary action #FF5522

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 57.00/100 (Competent)
Scored coverage: 85%

- Typography: 62 — Serif quote type paired with sans metadata shows clear hierarchy and a confident editorial pairing, consistent with the broader type system, but it's a simple single quote block with no distinguishing typographic treatment beyond scale. Next tier: No unique typographic device (e.g. pull-quote marks, scale shifts, kerning treatment) beyond standard quote styling.
- Composition: 58 — Clean two-column split with generous whitespace and clear left/right balance, but the right column leaves excessive empty space and the layout is a very common testimonial pattern. Next tier: Needs tighter column relationship or secondary compositional element to justify the wide empty right-hand space.
- Motion: not_assessed — No motion moments were supplied for this section. Next tier: Timestamped visible motion evidence is required to assess.
- Content: 55 — Badge graphic and quote are relevant and credible (named CEO, logo certification), integrated competently but in a generic testimonial card format. Next tier: Content presentation doesn't go beyond standard badge+quote convention to feel bespoke.
- Originality: 48 — Gradient badge card plus quote-with-avatar is an extremely common SaaS testimonial pattern; nothing here reads as a distinct idea. Next tier: Needs a distinctive structural or visual idea beyond gradient card + avatar quote to rise above familiar convention.
- Adaptability: 60 — Structure (badge card, quote, avatar, author) is modular and clearly separable from skin; gradient and badge asset are swappable tokens. Next tier: Reliance on a specific partner badge asset limits generic reusability without new artwork.

Strengths:
- Clear two-column hierarchy separating proof (badge) from endorsement (quote)
- Restrained palette keeps focus on the gradient card and quote text
- Credible authority signal via named executive and certification badge

Weaknesses:
- Generic testimonial-card pattern with no distinguishing visual idea
- Large empty whitespace on the right column feels unresolved
- No motion evidence provided to assess interactivity or reveal behavior
- Gradient card is somewhat disconnected visually from the quote's editorial serif typography

Why it does not reach the next tier: The section executes a familiar badge+quote layout competently but introduces no distinctive structural, typographic, or compositional idea that would make it memorable or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the badge graphic and gradient hue per-partner, and reuse the quote/avatar block as a standard testimonial module; the layout skeleton is cleanly separable from its specific visual skin.

What transfers:
- Two-column badge/quote split structure
- Avatar + name + title author block pattern
- Gradient card container as a reusable certification/badge slot

Dependencies:
- Specific partner badge artwork (SAP Endorsed App graphic)
- Gradient color treatment tied to brand palette
- Serif/sans typographic pairing from the site's type system

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No timestamped motion evidence supplied, so animation behavior could not be assessed
- Exact gradient colors and card dimensions not confirmed via deterministic data

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: testimonial-card
- Source type: testimonial-card
- Structure: two-column
- Layout: Two-column split with a large graphic card on the left and text quote on the right.
- Styles: minimal, gradient
- Components: gradient card, partner badge, quote text, author avatar, author details
- Purpose: A two-column layout featuring a large partner badge on a gradient background and a corresponding quote.
- Visual signature: A bright blue gradient card paired with a clean, formal testimonial quote.
- Place on the page: 8 of 12, after Testimonials (`parloa-com:stats_and_testimonial_carousel`), before Call to action (`parloa-com:security_cta`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "54px",
      "family": "Season Serif",
      "source": "computed",
      "traits": "Regular",
      "weight": "440",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Season Serif at 54px used for the largest, most impactful page headings (h1, h2).",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "56.7px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "heading",
      "size": "42px",
      "family": "Season Serif",
      "source": "computed",
      "traits": "Regular",
      "weight": "440",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Season Serif at 42px used for secondary section titles.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "44.1px",
      "letterSpacing": "-0.4px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Geist (sans-serif) at 16px used for standard paragraph text describing features.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "24px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "9px",
      "family": "Geist Mono",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: Geist Mono at 9px used for small UI labels ('Customer', 'Agent') inside the floating chat bubbles.",
      "sampleId": "font-8",
      "confidence": 0.9,
      "lineHeight": "10.8px",
      "letterSpacing": "0.4px"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [],
  "functionalPalette": [
    {
      "hex": "#F5F4F0",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-3: computed rgb(245, 244, 240); AI role: #F5F4F0 used extensively as a background for cards, platform diagrams, and the newsletter section.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#1F1C1B",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(31, 28, 27); AI role: #1F1C1B (near black) used for primary headings and body copy.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: #FFFFFF used as the primary background color for several sections.",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#746861",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-7: computed rgb(116, 104, 97); AI role: #746861 used for footer links, copyright text, and secondary labels.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#FF5522",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-10: computed rgb(255, 85, 34); AI role: #FF5522 (orange) used for primary CTA buttons ('Explore the platform').",
      "sampleId": "color-10",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border-radius (visually approx 8-12px) on feature cards and testimonial cards; fully rounded (pill) shapes for top nav buttons.",
  "density": "Low density, breathable layout with substantial whitespace framing typography and images.",
  "evidence": "Observed rounded testimonial cards, pill-shaped 'Book a demo' button, large gaps between 'Why enterprises...' heading and its corresponding cards.",
  "borderStyle": "Mostly borderless design, relying on subtle background color shifts (#F5F4F0 on white) to define surfaces. Thin, light borders (#D3D0C8) used sparingly for delineation.",
  "buttonStyle": "Solid background colors (orange or off-white) with rounded or pill shapes, lacking heavy drop shadows.",
  "cornerStyle": "Consistent use of soft rounded corners across most interactive and container elements.",
  "contentWidth": "Restricted central column for main content, with elements like the partner marquee bleeding to the viewport edges.",
  "spacingRhythm": "Generous vertical spacing between major sections, utilizing large margins to separate conceptual blocks."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
null
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: low
- What transfers: Two-column badge/quote split structure; Avatar + name + title author block pattern; Gradient card container as a reusable certification/badge slot
- Dependencies: Specific partner badge artwork (SAP Endorsed App graphic); Gradient color treatment tied to brand palette; Serif/sans typographic pairing from the site's type system
- Guidance: Swap the badge graphic and gradient hue per-partner, and reuse the quote/avatar block as a standard testimonial module; the layout skeleton is cleanly separable from its specific visual skin.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original testimonial-card section inspired by the design evidence titled “Partner Endorsement Testimonial”.

Purpose: A two-column layout featuring a large partner badge on a gradient background and a corresponding quote.

Structure: two-column. Source layout label: Two-column split with a large graphic card on the left and text quote on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: A bright blue gradient card paired with a clean, formal testimonial quote.

Components: gradient card, partner badge, quote text, author avatar, author details.

Style direction: minimal, gradient.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"54px","family":"Season Serif","source":"computed","traits":"Regular","weight":"440","evidence":"font-1: computed CSS at 1440×1000; AI role: Season Serif at 54px used for the largest, most impactful page headings (h1, h2).","sampleId":"font-1","confidence":0.95,"lineHeight":"56.7px","letterSpacing":"-0.5px"} {"role":"heading","size":"42px","family":"Season Serif","source":"computed","traits":"Regular","weight":"440","evidence":"font-3: computed CSS at 1440×1000; AI role: Season Serif at 42px used for secondary section titles.","sampleId":"font-3","confidence":0.9,"lineHeight":"44.1px","letterSpacing":"-0.4px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"300","evidence":"font-6: computed CSS at 1440×1000; AI role: Geist (sans-serif) at 16px used for standard paragraph text describing features.","sampleId":"font-6","confidence":0.95,"lineHeight":"24px","letterSpacing":"normal"} {"role":"mono","size":"9px","family":"Geist Mono","source":"computed","traits":"Regular","weight":"300","evidence":"font-8: computed CSS at 1440×1000; AI role: Geist Mono at 9px used for small UI labels ('Customer', 'Agent') inside the floating chat bubbles.","sampleId":"font-8","confidence":0.9,"lineHeight":"10.8px","letterSpacing":"0.4px"}

Color evidence: {"hex":"#F5F4F0","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(245, 244, 240); AI role: #F5F4F0 used extensively as a background for cards, platform diagrams, and the newsletter section.","sampleId":"color-3","confidence":0.95} {"hex":"#1F1C1B","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(31, 28, 27); AI role: #1F1C1B (near black) used for primary headings and body copy.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: #FFFFFF used as the primary background color for several sections.","sampleId":"color-1","confidence":0.9} {"hex":"#746861","name":"muted text","role":"muted-text","source":"computed","evidence":"color-7: computed rgb(116, 104, 97); AI role: #746861 used for footer links, copyright text, and secondary labels.","sampleId":"color-7","confidence":0.9} {"hex":"#FF5522","name":"primary action","role":"primary-action","source":"computed","evidence":"color-10: computed rgb(255, 85, 34); AI role: #FF5522 (orange) used for primary CTA buttons ('Explore the platform').","sampleId":"color-10","confidence":0.9}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Two-column badge/quote split structure; Avatar + name + title author block pattern; Gradient card container as a reusable certification/badge slot.

Dependencies: Specific partner badge artwork (SAP Endorsed App graphic); Gradient color treatment tied to brand palette; Serif/sans typographic pairing from the site's type system.

Adaptation guidance: Swap the badge graphic and gradient hue per-partner, and reuse the quote/avatar block as a standard testimonial module; the layout skeleton is cleanly separable from its specific visual skin.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.