# Testimonials and interactive CTA block Schema: Design Details SECTION.md v3.2 Website: CO'CŌŌN Source: https://www.cocoonblanket.com/ Source section IDs: gap-36269197-4464-5983 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The testimonial row alternates photo cards with text-only quote cards, so the eye keeps moving and the real customer faces and names make the quotes feel credible. - Uppercase display headings over small body copy give a clear hierarchy, and the near-black text on a pale grey canvas keeps the quotes easy to read. - The CTA is a bordered content panel with heading, short copy and a quiz button, surrounded by overlapping candid photos, so the action stays obvious while the collage adds life. What a screenshot can't show: - The recording shows the collage images changing as the quiz block scrolls into view, but no timing, easing or stagger is visible. - No font sizes, letter spacing or spacing values were measured, so exact scale and gaps are unknown. Borrow: Pair social proof with a single clear action by putting real customer photos around a bordered CTA panel, so the proof leads straight into the invitation. Leave alone: Do not copy the Marcellus-style uppercase display face, the furry textured backdrop or the brand's own customer photos; a free classical serif such as Cormorant would suit a similar tone. ## Classification - Type: cta - Layout: Vertical sequence: A row of mixed image/text cards, followed by a large hero-style CTA block. - Styles: editorial, minimal, photographic, typographic - Confidence: 90% ## Purpose and structure A complex section block containing a row of customer testimonials above a large call-to-action banner for an interactive quiz. Visual signature: Text-heavy customer quotes transitioning into a visually layered CTA banner with floating images. ## Components - Section heading - Testimonial card - Customer quote - Photo thumbnail - CTA banner - Image collage - Quiz button ## Typography - Display: Marcellus — 80px 400 - Heading: Marcellus — 64px 400 - Body: Maison Neue — 14px 400 ## Functional palette - Text: text #141414 - Canvas: canvas #F0F0F0 - Border: border #CACACA ## Motion evidence - 14.0–16.0s — The page scrolls to a section displaying customer quotes alongside images. (95% confidence) - 16.0–18.0s — The user scrolls to a section promoting an interactive quiz, accompanied by a small collage of changing images. (95% confidence) ## Section quality Overall: 59.65/100 (Competent) Scored coverage: 85% - Typography: 62 — Clean uppercase Marcellus display headings paired with small Maison Neue body copy create reasonable hierarchy, consistent with the site's type system. Testimonial quotes use plain serif/sans body text with little typographic personality beyond scale contrast. Next tier: Needs more deliberate typographic treatment within the quote blocks (pull-quote marks, size variation, or rhythm) to move past a default editorial pairing. - Composition: 64 — Alternating image/text testimonial grid is tidy and legible, and the lower CTA uses a layered collage of overlapping photos against a soft furry background with a bordered content panel, giving some visual interest. However the two halves (testimonial row and CTA banner) feel loosely stitched together rather than one composed idea, and the collage placement is somewhat arbitrary. Next tier: Requires a unifying compositional logic connecting testimonials to the CTA, and more intentional placement/scale variation in the photo collage rather than an ad hoc stack. - Motion: inconclusive — Gemini only reports generic scroll transitions and a vague 'changing images' collage without specific timestamped visual behavior (e.g., crossfade timing, easing, stagger). Next tier: Need concrete timestamped motion detail (duration, easing, triggers) to score this axis. - Content: 58 — Real customer photos and quotes with attribution lend authenticity, and the CTA ties directly to a product quiz, but the pairing of testimonial imagery with quote text is a standard pattern and the CTA copy is generic marketing language. Next tier: Needs tighter integration between testimonial content and the quiz CTA (e.g., quiz results reflecting those same products/customers) to feel like one considered content strategy. - Originality: 52 — Testimonial grid and quiz CTA are both common ecommerce patterns; the collage of candid customer photos is a nice touch but not a distinctive structural idea. Next tier: Would need a more unusual structural conceit (e.g., quiz integrated visually into testimonials, unconventional grid) rather than two familiar modules placed in sequence. - Adaptability: 60 — The testimonial card pattern (image+quote+name) and CTA panel (heading+copy+button+collage) are each modular and clearly separable from the specific photography and copy, making reskinning straightforward. Next tier: Collage image count/positions and background texture are tightly coupled to this brand's specific photography, limiting direct portability without new asset curation. Strengths: - Clear alternating testimonial layout with real photos and attributed quotes - CTA panel uses a layered photo collage over a textured background for visual richness - Consistent uppercase display type ties both section halves to overall brand system Weaknesses: - Testimonial section and CTA banner feel like two separate modules stacked rather than a unified idea - Collage photo placement looks loosely arranged without clear grid logic - Quote typography is plain with little visual distinction between voice and attribution - Motion cannot be verified from the evidence provided - CTA copy and button are generic, offering no distinctive interaction cue Why it does not reach the next tier: To reach strong/memorable the section would need a single compositional idea uniting testimonials and CTA, more deliberate typographic and collage structuring, and distinct interactive or motion cues rather than relying on stock patterns of grid testimonials plus a photo-collage banner. ## Adaptation guidance - Effort: Medium - Guidance: Keep the card and CTA panel structures but replace photography, quote copy, and collage images; recreate the bordered panel and overlapping image stack proportionally rather than copying exact pixel positions since those depend on specific photo aspect ratios. What transfers: - Testimonial card module (image, quote, name, product variant) - CTA panel structure (heading, supporting copy, button, visual collage) - Overall vertical sequencing of proof-then-action Dependencies: - Customer-submitted photography for both testimonials and collage - Specific soft-textured background image behind CTA panel - Brand-specific quiz product tied to CTA button ## 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%) - Motion axis not scored due to lack of specific timestamped behavior - No access to original video to confirm transition easing or collage image-swap mechanics - Assessment relies on a single static crop; actual scroll interactions may reveal additional polish not visible here ## 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: cta - Source type: cta - Structure: Vertical sequence: A row of mixed image/text cards, followed by a large hero-style CTA block. - Layout: Vertical sequence: A row of mixed image/text cards, followed by a large hero-style CTA block. - Styles: editorial, minimal, photographic, typographic - Components: Section heading, Testimonial card, Customer quote, Photo thumbnail, CTA banner, Image collage, Quiz button - Purpose: A complex section block containing a row of customer testimonials above a large call-to-action banner for an interactive quiz. - Visual signature: Text-heavy customer quotes transitioning into a visually layered CTA banner with floating images. - Place on the page: 8 of 12, after Gallery (`cocoonblanket-com:product-collection-grid`), before Call to action (`4dc8a4e6-aa5b-4d4f-9e40-a8ecbcf32db7`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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": "80px", "family": "Marcellus", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-7: computed CSS at 1440×1000; AI role: Marcellus at 80px, uppercase, used for the main hero headline 'A SOFTER SILHOUETTE'.", "sampleId": "font-7", "confidence": 1, "lineHeight": "76px", "letterSpacing": "-2.4px" }, { "role": "heading", "size": "64px", "family": "Marcellus", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Marcellus at 64px used for section titles like 'Founder's Favorites' and 'New Arrivals'.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "60.2px", "letterSpacing": "-1.9px" }, { "role": "body", "size": "14px", "family": "Maison Neue", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: Maison Neue at 14px used extensively for navigation links, product details, and general body copy.", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "17px", "letterSpacing": "0.3px" } ] } ``` ### 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": "#141414", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(20, 20, 20); AI role: Near-black #141414 used for primary typography across the light sections.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#F0F0F0", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(240, 240, 240); AI role: Light gray/off-white #F0F0F0 used as the primary background for product grids and content sections.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#CACACA", "name": "border", "role": "border", "source": "computed", "evidence": "color-6: computed rgb(202, 202, 202); AI role: #CACACA used for the outline of secondary buttons like 'Shop all'.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px throughout, emphasizing a clean, architectural layout.", "density": "Low density, allowing ample breathing room around text and highlighting the high-quality imagery.", "evidence": "Visual inspection of the screenshots shows unrounded corners everywhere, wide screen-spanning images, and distinct spacing between typography blocks.", "borderStyle": "Thin (likely 1px), solid borders used for outline buttons and section dividers.", "buttonStyle": "Minimalist outline buttons with transparent backgrounds on light themes, and solid contrasting blocks for primary actions like the newsletter 'Sign up'.", "cornerStyle": "Sharp, 0px border-radius used universally on images, buttons, and form inputs.", "contentWidth": "Full-bleed for hero media; structured, wide max-width containers for product grids with inset margins.", "spacingRhythm": "Generous vertical spacing between distinct sections; tight, uniform grid spacing for product thumbnails." } ``` ### 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 1. **scroll** — The page scrolls to a section displaying customer quotes alongside images. (14s–16s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — The user scrolls to a section promoting an interactive quiz, accompanied by a small collage of changing images. (16s–18s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 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: Testimonial card module (image, quote, name, product variant); CTA panel structure (heading, supporting copy, button, visual collage); Overall vertical sequencing of proof-then-action - Dependencies: Customer-submitted photography for both testimonials and collage; Specific soft-textured background image behind CTA panel; Brand-specific quiz product tied to CTA button - Guidance: Keep the card and CTA panel structures but replace photography, quote copy, and collage images; recreate the bordered panel and overlapping image stack proportionally rather than copying exact pixel positions since those depend on specific photo aspect ratios. ### 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 - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original cta section inspired by the design evidence titled “Testimonials and interactive CTA block”. Purpose: A complex section block containing a row of customer testimonials above a large call-to-action banner for an interactive quiz. Structure: Vertical sequence: A row of mixed image/text cards, followed by a large hero-style CTA block.. Source layout label: Vertical sequence: A row of mixed image/text cards, followed by a large hero-style CTA block.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Text-heavy customer quotes transitioning into a visually layered CTA banner with floating images. Components: Section heading, Testimonial card, Customer quote, Photo thumbnail, CTA banner, Image collage, Quiz button. Style direction: editorial, minimal, photographic, typographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"80px","family":"Marcellus","source":"computed","traits":"uppercase","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Marcellus at 80px, uppercase, used for the main hero headline 'A SOFTER SILHOUETTE'.","sampleId":"font-7","confidence":1,"lineHeight":"76px","letterSpacing":"-2.4px"} {"role":"heading","size":"64px","family":"Marcellus","source":"computed","traits":"uppercase","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Marcellus at 64px used for section titles like 'Founder's Favorites' and 'New Arrivals'.","sampleId":"font-1","confidence":0.95,"lineHeight":"60.2px","letterSpacing":"-1.9px"} {"role":"body","size":"14px","family":"Maison Neue","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Maison Neue at 14px used extensively for navigation links, product details, and general body copy.","sampleId":"font-4","confidence":0.9,"lineHeight":"17px","letterSpacing":"0.3px"} Color evidence: {"hex":"#141414","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(20, 20, 20); AI role: Near-black #141414 used for primary typography across the light sections.","sampleId":"color-2","confidence":0.95} {"hex":"#F0F0F0","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(240, 240, 240); AI role: Light gray/off-white #F0F0F0 used as the primary background for product grids and content sections.","sampleId":"color-1","confidence":0.9} {"hex":"#CACACA","name":"border","role":"border","source":"computed","evidence":"color-6: computed rgb(202, 202, 202); AI role: #CACACA used for the outline of secondary buttons like 'Shop all'.","sampleId":"color-6","confidence":0.8} 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. Motion evidence: scroll: The page scrolls to a section displaying customer quotes alongside images. (95% confidence) scroll: The user scrolls to a section promoting an interactive quiz, accompanied by a small collage of changing images. (95% confidence) Transfer these principles: Testimonial card module (image, quote, name, product variant); CTA panel structure (heading, supporting copy, button, visual collage); Overall vertical sequencing of proof-then-action. Dependencies: Customer-submitted photography for both testimonials and collage; Specific soft-textured background image behind CTA panel; Brand-specific quiz product tied to CTA button. Adaptation guidance: Keep the card and CTA panel structures but replace photography, quote copy, and collage images; recreate the bordered panel and overlapping image stack proportionally rather than copying exact pixel positions since those depend on specific photo aspect ratios. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.