# Stats and Testimonial Carousel Schema: Design Details SECTION.md v3.2 Website: Parloa Source: https://www.parloa.com/ Source section IDs: gap-778cd21a-3488-4591 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three clearly separated zones (stats bar, left-aligned serif heading, tall photo cards) give the section an easy top-to-bottom rhythm with plenty of whitespace. - Quotes sit on color-graded photos with a gradient scrim, so the text stays readable and carries full attribution (name, title, company). - Small stat numerals contrast with the large serif heading, and the stats give quantitative backing to the quotes below. What a screenshot can't show: - The recording showed no specific motion, so carousel timing, easing and card transitions are unknown. - No font sizes, letter spacing or spacing values were measured. Borrow: Put a compact row of hard numbers above emotional photo-quote cards, so proof and story support each other under one calm heading. Leave alone: Don't copy Parloa's Season Serif heading, warm off-white and orange palette, or its specific photography; a free high-contrast serif and your own imagery would work. ## Classification - Type: testimonials - Layout: Top stats bar, central heading, and a horizontal row of tall image-based cards. - Styles: minimal, photographic - Confidence: 90% ## Purpose and structure A combination section featuring a top stats bar followed by a heading and a horizontal carousel of photographic testimonial cards. Visual signature: A data bar over a row of tall, immersive photographic cards containing text quotes. ## Components - stats bar - metrics - section heading - testimonial cards - background images - carousel navigation buttons ## 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: 64.29/100 (Good) Scored coverage: 85% - Typography: 65 — Season Serif at large size for the 'Trusted by leading brands' heading creates a clear display/body contrast against small sans labels and mono-ish metric captions; letter-spacing and line-height are controlled, giving a polished but fairly conventional two-family hierarchy. Next tier: Typographic treatment is competent contrast rather than an inventive or signature pairing; nothing in the type system itself is distinctive enough to push past polished. - Composition: 68 — Three clearly separated zones (stats bar, left-aligned heading with generous negative space, horizontal row of tall photographic cards) create a legible rhythm with strong whitespace discipline and good use of scale contrast between the small stats numerals and the large serif heading. Next tier: The stats-bar-plus-testimonial-carousel layout is a familiar SaaS composition; without an unexpected structural move (asymmetry, overlap, unconventional grid) it reads as well-executed but not memorable. - Motion: not_assessed — No timestamped motion evidence was supplied beyond an implied carousel; cannot verify easing, stagger, or transition behavior. Next tier: Timestamped visible motion data is required before this axis can be scored. - Content: 66 — Quotes are legibly overlaid on moody, color-graded photography with a gradient scrim for contrast, paired with full attribution (name, title, company); the stats bar above supplies credible quantitative backing, so content and visuals reinforce each other. Next tier: The quote-over-photo card is a standard testimonial pattern; to reach strong/memorable the content presentation would need a distinguishing device beyond scrim+caption. - Originality: 58 — The combination of a dense stats bar, large serif trust statement, and photographic quote carousel is tastefully art-directed but assembles recognizable, widely used component types rather than inventing a new structural idea. Next tier: Needs a structural or interaction idea that isn't substitutable with any other SaaS testimonial carousel to move beyond familiar/competent territory. - Adaptability: 63 — Stats bar, heading, and card carousel are structurally distinct modules with consistent token usage (radius, surface color, spacing) that could be reskinned independently. Next tier: Dependence on bespoke photographic treatment for the cards' mood ties visual identity tightly to specific imagery, limiting clean separation of skin from structure. Strengths: - Clear three-tier visual hierarchy from dense stats bar to spacious heading to immersive photo cards - Consistent scrim and caption treatment keeps quotes legible across varied photographic backgrounds - Generous whitespace around the heading gives it outsized presence despite modest type size Weaknesses: - Overall layout pattern (stats bar + trust heading + testimonial carousel) is a common SaaS template - No verifiable motion evidence to assess carousel transition quality - Heading area is visually disconnected from the stats bar above, creating a large empty midsection that may feel like two separate sections stitched together Why it does not reach the next tier: The section is cleanly executed with good restraint and consistent tokens, but it relies on a recognizable combination of familiar components (stats bar, trust statement, photo-quote carousel) without a distinguishing structural or interaction idea, and motion cannot be verified, keeping it at a polished rather than strong/memorable level. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the stats-bar-to-heading-to-carousel structure and card scrim/caption pattern; supply different photography and brand type, but the carousel component and metric chip layout can be ported largely as-is with token substitution for color/radius. What transfers: - Stats bar with grouped metric clusters - Large serif trust statement as section anchor - Horizontal carousel of tall photographic quote cards with bottom-aligned attribution Dependencies: - Quality and mood consistency of the photographic imagery used in cards - Carousel navigation and loop behavior implementation - Season Serif availability for heading legibility at scale ## 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 data available, so carousel transition quality is unverified - Cannot confirm exact card dimensions, radii, or gradient parameters beyond general token descriptions - Image content and card count beyond visible crop (carousel loop behavior) unknown ## 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: testimonials - Source type: testimonials - Structure: horizontal sequence - Layout: Top stats bar, central heading, and a horizontal row of tall image-based cards. - Styles: minimal, photographic - Components: stats bar, metrics, section heading, testimonial cards, background images, carousel navigation buttons - Purpose: A combination section featuring a top stats bar followed by a heading and a horizontal carousel of photographic testimonial cards. - Visual signature: A data bar over a row of tall, immersive photographic cards containing text quotes. - Place on the page: 7 of 12, after Stats (`46392f05-be29-4316-8293-7b942ff5325b`), before Testimonials (`parloa-com:partner_endorsement`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control. ### 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: medium - What transfers: Stats bar with grouped metric clusters; Large serif trust statement as section anchor; Horizontal carousel of tall photographic quote cards with bottom-aligned attribution - Dependencies: Quality and mood consistency of the photographic imagery used in cards; Carousel navigation and loop behavior implementation; Season Serif availability for heading legibility at scale - Guidance: Reuse the stats-bar-to-heading-to-carousel structure and card scrim/caption pattern; supply different photography and brand type, but the carousel component and metric chip layout can be ported largely as-is with token substitution for color/radius. ### 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 testimonials section inspired by the design evidence titled “Stats and Testimonial Carousel”. Purpose: A combination section featuring a top stats bar followed by a heading and a horizontal carousel of photographic testimonial cards. Structure: horizontal sequence. Source layout label: Top stats bar, central heading, and a horizontal row of tall image-based cards.. Preserve the sense of continuation with a visible next item, progress cue, or directional control. Visual signature to preserve at the pattern level: A data bar over a row of tall, immersive photographic cards containing text quotes. Components: stats bar, metrics, section heading, testimonial cards, background images, carousel navigation buttons. Style direction: minimal, photographic. 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: Stats bar with grouped metric clusters; Large serif trust statement as section anchor; Horizontal carousel of tall photographic quote cards with bottom-aligned attribution. Dependencies: Quality and mood consistency of the photographic imagery used in cards; Carousel navigation and loop behavior implementation; Season Serif availability for heading legibility at scale. Adaptation guidance: Reuse the stats-bar-to-heading-to-carousel structure and card scrim/caption pattern; supply different photography and brand type, but the carousel component and metric chip layout can be ported largely as-is with token substitution for color/radius. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.