# Large Quote Testimonial Schema: Design Details SECTION.md v3.2 Website: Chandebootcamp Source: https://www.chandebootcamp.com/ Source section IDs: 1e0c6267-58f6-4844-8cae-fa2b849b9d03 Status: AI analysed; vocabulary promotion is automated ## Classification - Type: testimonials - Layout: Side-by-side layout with a framed portrait on the left and a large typographic quote on the right. - Styles: editorial, bold, photographic - Confidence: 95% ## Purpose and structure A bold testimonial section featuring a large quote and an accompanying portrait photo. Visual signature: A large all-caps quote 'CHANDE'S FREE SPIRIT SHOWS...' next to a portrait of a smiling couple in a floral field. ## Components - framed portrait photo - large block quote - cursive signature ## Typography - Display: Phudu — 80px 700 - Heading: Phudu — 80px 700 - Body: Phudu — 14.4px 600 - Mono: Geist Mono — 12px 500 ## Functional palette - Primary-Action: primary action #68F12B - Canvas: canvas #F4F3EB - Text: text #000000 - Surface: surface #0F1513 - Muted-Text: muted text #838B89 ## Motion evidence - 36.0–45.0s — The user scrolls to the bottom of the page, viewing a testimonial and some footer elements. (90% confidence) ## Section quality Overall: 62.59/100 (Good) Scored coverage: 85% - Typography: 65 — Large uppercase sans display quote with tight negative tracking gives strong editorial weight, paired with a cursive signature for contrast. Hierarchy between quote, signature, and attribution meta line is clear, but the quote text itself is dense and uniformly weighted with no internal emphasis. Next tier: No typographic variation within the quote itself (no scaling, color, or weight shifts to guide reading) and the attribution block is small and visually disconnected. - Composition: 66 — Clean two-column split between full-bleed portrait photo on a floral-field background strip and a black panel holding the quote. Generous negative space lets the quote breathe, and the green bar at the bottom edge adds a brand accent. The arrangement is legible and confident but a fairly standard side-by-side testimonial template. Next tier: Layout is a conventional photo-left/quote-right split without a distinctive structural idea beyond bold scale, keeping it from feeling singular. - Motion: inconclusive — Gemini's note only describes scrolling to this area; no specific timestamped in-section motion (e.g., quote transition, arrow click behavior) is supplied despite visible prev/next nav controls. Next tier: Need timestamped evidence of actual quote-carousel transition behavior to assess motion quality. - Content: 62 — Photo and quote are thematically paired (named couple, co-founder title) and feel authentic rather than stock, with a personal cursive signature reinforcing credibility. Next tier: Content integration relies on a single large block of text with no supporting visual cues (highlighting, pull-quote marks) tying the words more tightly to the image. - Originality: 58 — The oversized all-caps quote and photo-strip pairing is a recognizable testimonial pattern seen across many portfolio and agency sites; the cursive signature is a nice touch but not a novel device. Next tier: Nothing here—scale, cursive signature, carousel arrows—feels like an idea unique to this brand rather than borrowed convention. - Adaptability: 60 — Structure (image panel + quote panel + signature + nav arrows) is deterministically separable: photo, headline text, cursive mark, and attribution are distinct DOM elements with clear positions, making skin/content swap straightforward. Next tier: Carousel behavior and exact photo treatment depend on unlisted animation parameters, limiting confidence in full behavioral portability. Strengths: - Oversized uppercase quote creates immediate reading focus and emotional weight - Clear visual separation between photographic and typographic halves aids scanning - Cursive signature adds a personal, handcrafted counterpoint to the bold type Weaknesses: - Conventional photo-left/quote-right testimonial structure with no distinguishing structural idea - Quote text has no internal typographic variation to guide emphasis - Carousel/motion behavior not evidenced with specifics, limiting assessment - Attribution block feels small and secondary relative to the dominant quote Why it does not reach the next tier: The section executes a familiar large-quote testimonial pattern cleanly but does not introduce a distinctive structural or typographic idea, and motion/interaction details that could elevate it (carousel transitions) are unverified, keeping it at competent/good rather than strong or memorable. ## Adaptation guidance - Effort: Low - Guidance: Reuse the photo-panel plus black quote-panel structure with any portrait and quote text; swap the cursive signature font and attribution styling to match a new brand, and recreate the carousel arrows only if multiple testimonials are needed. What transfers: - Two-panel photo/quote layout - Oversized uppercase display quote treatment - Cursive signature detail paired with small-caps attribution line Dependencies: - Specific portrait photography with matching color/mood to the black panel - Carousel navigation arrows and underlying slide logic - Brand green accent bar at section edge ## 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 for the visible carousel arrows, so transition quality is unassessed - Cannot verify exact font rendering or color values beyond supplied tokens - Single static crop limits judgment of how the section behaves across multiple quote slides ## 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: Side-by-side layout with a framed portrait on the left and a large typographic quote on the right. - Layout: Side-by-side layout with a framed portrait on the left and a large typographic quote on the right. - Styles: editorial, bold, photographic - Components: framed portrait photo, large block quote, cursive signature - Purpose: A bold testimonial section featuring a large quote and an accompanying portrait photo. - Visual signature: A large all-caps quote 'CHANDE'S FREE SPIRIT SHOWS...' next to a portrait of a smiling couple in a floral field. ### Crop and composition - Crop: 1440×933px; aspect ratio 1.543:1 - Page bounds: 12389–13322px of 14721px - 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": "Phudu", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-2: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700. Used for major structural headings and high-impact visual text.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "57.6px", "letterSpacing": "-3.2px" }, { "role": "heading", "size": "80px", "family": "Phudu", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-7: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700 (similar to font-2 but slightly different usage context). Used for scroll-triggered changing text.", "sampleId": "font-7", "confidence": 0.9, "lineHeight": "64px", "letterSpacing": "-3.2px" }, { "role": "body", "size": "14.4px", "family": "Phudu", "source": "computed", "traits": "uppercase", "weight": "600", "evidence": "font-6: computed CSS at 1440×1000; AI role: Phudu, 14.4px, weight 600. Used for lists of names and smaller supplementary text.", "sampleId": "font-6", "confidence": 0.85, "lineHeight": "12.9px", "letterSpacing": "-0.3px" }, { "role": "mono", "size": "12px", "family": "Geist Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: Geist Mono, 12px, weight 500. Used for meta-information, links, and small captions.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "11.5px", "letterSpacing": "-0.2px" } ] } ``` ### 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": "#68F12B", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-12: computed rgb(104, 241, 43); AI role: #68F12B (vibrant green). Key brand and accent color, used in pixel blocks, buttons, and text highlights.", "sampleId": "color-12", "confidence": 0.95 }, { "hex": "#F4F3EB", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: #000000. Primary text color on light backgrounds.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#0F1513", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-8: computed rgb(15, 21, 19); AI role: #0F1513 (dark charcoal/near black). Used for contrasting background sections, particularly in the timeline and footer.", "sampleId": "color-8", "confidence": 0.85 }, { "hex": "#838B89", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds.", "sampleId": "color-24", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Primarily 0px for layout elements, 999px for pill buttons.", "density": "Varies significantly. Starts dense with pixel grids, opens up to sparse typography, and becomes very dense in the collage/timeline sections.", "evidence": "Visual inspection of layout structure, CSS values for borders/radius on interactive elements, and overall composition.", "borderStyle": "Mostly borderless, relying on stark color contrasts or pixel patterns to define edges. Some usage of bracketed text for links.", "buttonStyle": "Pill-shaped, solid fill (vibrant green or dark green), uppercase monospace or sans-serif text, flat appearance.", "cornerStyle": "Mix of sharp, brutalist corners (for images and grid blocks) and fully rounded pill shapes for buttons/badges.", "contentWidth": "Fluid, edge-to-edge layouts relying heavily on scroll position rather than a fixed container width.", "spacingRhythm": "Highly variable and dramatic. Uses full-viewport height sections combined with tight clusters in collage areas." } ``` ### 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": 1440, "captureBounds": { "top": 12389, "bottom": 13322, "pageHeight": 14721 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### 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 { "root": null, "cards": [], "media": [], "bounds": { "top": 12389, "bottom": 13322, "pageHeight": 14721 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 0 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-21T18:08:16.518Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **scroll** — The user scrolls to the bottom of the page, viewing a testimonial and some footer elements. (36s–45s; 90% 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: 1440px 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-panel photo/quote layout; Oversized uppercase display quote treatment; Cursive signature detail paired with small-caps attribution line - Dependencies: Specific portrait photography with matching color/mood to the black panel; Carousel navigation arrows and underlying slide logic; Brand green accent bar at section edge - Guidance: Reuse the photo-panel plus black quote-panel structure with any portrait and quote text; swap the cursive signature font and attribution styling to match a new brand, and recreate the carousel arrows only if multiple testimonials are needed. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples. ### Agent implementation prompt Create an original testimonials section inspired by the design evidence titled “Large Quote Testimonial”. Purpose: A bold testimonial section featuring a large quote and an accompanying portrait photo. Structure: Side-by-side layout with a framed portrait on the left and a large typographic quote on the right.. Source layout label: Side-by-side layout with a framed portrait on the left and a large typographic quote on the right.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A large all-caps quote 'CHANDE'S FREE SPIRIT SHOWS...' next to a portrait of a smiling couple in a floral field. Components: framed portrait photo, large block quote, cursive signature. Style direction: editorial, bold, photographic. Observed crop: 1440×933px (1.543:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"80px","family":"Phudu","source":"computed","traits":"uppercase","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700. Used for major structural headings and high-impact visual text.","sampleId":"font-2","confidence":0.95,"lineHeight":"57.6px","letterSpacing":"-3.2px"} {"role":"heading","size":"80px","family":"Phudu","source":"computed","traits":"uppercase","weight":"700","evidence":"font-7: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700 (similar to font-2 but slightly different usage context). Used for scroll-triggered changing text.","sampleId":"font-7","confidence":0.9,"lineHeight":"64px","letterSpacing":"-3.2px"} {"role":"body","size":"14.4px","family":"Phudu","source":"computed","traits":"uppercase","weight":"600","evidence":"font-6: computed CSS at 1440×1000; AI role: Phudu, 14.4px, weight 600. Used for lists of names and smaller supplementary text.","sampleId":"font-6","confidence":0.85,"lineHeight":"12.9px","letterSpacing":"-0.3px"} {"role":"mono","size":"12px","family":"Geist Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Geist Mono, 12px, weight 500. Used for meta-information, links, and small captions.","sampleId":"font-3","confidence":0.9,"lineHeight":"11.5px","letterSpacing":"-0.2px"} Color evidence: {"hex":"#68F12B","name":"primary action","role":"primary-action","source":"computed","evidence":"color-12: computed rgb(104, 241, 43); AI role: #68F12B (vibrant green). Key brand and accent color, used in pixel blocks, buttons, and text highlights.","sampleId":"color-12","confidence":0.95} {"hex":"#F4F3EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site.","sampleId":"color-3","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: #000000. Primary text color on light backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#0F1513","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(15, 21, 19); AI role: #0F1513 (dark charcoal/near black). Used for contrasting background sections, particularly in the timeline and footer.","sampleId":"color-8","confidence":0.85} {"hex":"#838B89","name":"muted text","role":"muted-text","source":"computed","evidence":"color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds.","sampleId":"color-24","confidence":0.85} No section-bounded typography samples were measured. No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]} Motion evidence: scroll: The user scrolls to the bottom of the page, viewing a testimonial and some footer elements. (90% confidence) Transfer these principles: Two-panel photo/quote layout; Oversized uppercase display quote treatment; Cursive signature detail paired with small-caps attribution line. Dependencies: Specific portrait photography with matching color/mood to the black panel; Carousel navigation arrows and underlying slide logic; Brand green accent bar at section edge. Adaptation guidance: Reuse the photo-panel plus black quote-panel structure with any portrait and quote text; swap the cursive signature font and attribution styling to match a new brand, and recreate the carousel arrows only if multiple testimonials are needed. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.