# Mixed-Media Testimonial Carousel Schema: Design Details SECTION.md v3.2 Website: Different Source: https://www.different.ai/ Source section IDs: adca71b4-e896-40c9-90f7-06f5e1c799e4 Status: AI analysed; vocabulary promotion is automated ## Classification - Type: testimonials - Layout: Horizontal track of diverse cards that bleed off the edges of the screen. - Styles: colourful, illustrative, playful - Confidence: 95% ## Purpose and structure A horizontal scrolling carousel featuring colorful testimonial cards, some with illustrations and play buttons indicating video content, and others with text quotes. Visual signature: A vibrant mix of illustrated video thumbnails and brightly colored text cards in a scrollable row. ## Components - section headline - carousel track - video testimonial cards - text quote cards - play buttons - navigation arrows ## Typography - Display: Feature Display — 90px 300 - Heading: Feature Display — 30px 400 - Body: PP Neue Montreal Text — 20px 400 - Mono: PP Fraktion Mono — 15px 500 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #000000 - Primary-Action: primary action #121212 - Border: border #DEDEDE - Surface: surface #FFE28B - Muted-Text: muted text #4A4A4A ## Motion evidence - 12.0–15.0s — The page scrolls down to a section with the heading 'See how lean teams are building big worlds', featuring a horizontal scrolling carousel of testimonial cards. (95% confidence) ## Section quality Overall: 65.76/100 (Good) Scored coverage: 85% - Typography: 68 — Serif display headline with italic mixed-style emphasis ('big worlds.') paired with heavy sans labels and card text creates clear, deliberate contrast. Hierarchy between headline, persona tag, quote, and attribution is crisp and consistent across cards. Next tier: Type pairing is handled well but relies on a single display/sans contrast trick without further typographic invention (e.g. varied scale, kerning play) to push past strong. - Composition: 66 — Card-based horizontal track with alternating illustrated/video and flat-color quote cards gives varied rhythm; consistent 330px card width, 24px gaps, and rounded 16px corners keep the scanning pattern orderly despite color variety. Edge-bleed cards signal scrollability well. Next tier: Grid is a fairly conventional repeating card carousel; no unique spatial idea beyond color-coding and illustration variety to separate it from generic logo-quote carousels. - Motion: inconclusive — Only a generic scroll-into-view motion moment is provided; no specific timestamped carousel interaction (drag, arrow click, autoplay) details are given. Next tier: Need timestamped evidence of actual carousel transition behavior, hover states, or video playback interaction to assess motion quality. - Content: 65 — Each card pairs a distinct brand logo, custom illustration, bold quote, persona label, and named attribution, giving the testimonials a bespoke editorial feel rather than generic avatar+quote blocks. Next tier: Content integration is tasteful but formulaic across cards (logo, label, quote/video, name, title) without a standout device that elevates it beyond solid craft. - Originality: 67 — The 'persona' labeling (Explorer, Crafter, Detective) combined with custom color-coded illustrated worlds per testimonial is a distinctive conceptual hook rarely seen in testimonial sections. Next tier: The persona-label device is clever but thin; it doesn't extend into card behavior, ordering, or interaction, limiting it to decorative differentiation rather than a fully realized system. - Adaptability: 62 — Structure (logo, persona tag, media or quote block, name, title) is clearly modular and repeatable per card, with explicit measurements for card size, radius, and padding supplied. Next tier: Illustration assets and color-per-card system are bespoke and non-trivial to replace without equivalent custom artwork, limiting skin separation. Strengths: - Distinct serif/italic display headline anchors the section with editorial tone - Persona-tag system (Explorer, Crafter, Detective) gives testimonials a memorable conceptual layer - Custom color-per-card and illustration-per-brand treatment avoids generic uniform testimonial look - Consistent card geometry (330px width, 16px radius, 24px gaps) keeps a colorful mix visually orderly Weaknesses: - Underlying mechanism is still a standard horizontal card carousel - No timestamped evidence of actual scroll/drag/video interaction behavior - Persona-label concept doesn't extend beyond a tag into deeper interaction or layout logic - Illustration assets are highly bespoke, limiting independent reuse of the pattern Why it does not reach the next tier: The section shows a clear, coherent design idea (colorful persona-coded testimonial cards) executed with good typographic and compositional discipline, but it remains a dressed-up version of a familiar carousel pattern without a structurally novel interaction or layout mechanic, and motion/interaction evidence is unverified. ## Adaptation guidance - Effort: Medium - Guidance: Keep the card skeleton (logo row, tag chip, quote or media block, name/title footer) and swap in generic icons or solid-color photography instead of bespoke illustrations; the persona-tag idea can be reused with any categorical labeling scheme without needing custom art. What transfers: - Card grid structure with fixed width, gap, and radius - Logo + tag + quote/media + name + title content hierarchy - Color-coded card backgrounds as a categorization device - Serif-display headline with italic emphasis pairing Dependencies: - Custom illustration artwork per testimonial - Persona taxonomy requiring curated labels per client story - Video assets for play-button cards ## 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 carousel transitions, drag behavior, or video playback - Exact animation easing/duration and hover states are unknown - Illustration style and color choices cannot be fully judged for originality without comparison to source stylistic conventions ## 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: full-bleed - Layout: Horizontal track of diverse cards that bleed off the edges of the screen. - Styles: colourful, illustrative, playful - Components: section headline, carousel track, video testimonial cards, text quote cards, play buttons, navigation arrows - Purpose: A horizontal scrolling carousel featuring colorful testimonial cards, some with illustrations and play buttons indicating video content, and others with text quotes. - Visual signature: A vibrant mix of illustrated video thumbnails and brightly colored text cards in a scrollable row. ### Crop and composition - Crop: 1440×1197px; aspect ratio 1.203:1 - Page bounds: 4007–5204px of 6910px - Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays. ### 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": [ { "role": "body/supporting copy", "family": "PP Fraktion Mono", "stack": "\"PP Fraktion Mono\", ui-monospace, monospace", "size": "15px", "weight": "500", "lineHeight": "18.8px", "letterSpacing": "normal", "sample": "Explorer", "element": "div", "occurrences": 24, "sourceId": "font-5" }, { "role": "body/supporting copy", "family": "PP Neue Montreal Text", "stack": "\"PP Neue Montreal Text\", sans-serif", "size": "14px", "weight": "400", "lineHeight": "17.5px", "letterSpacing": "-0.6px", "sample": "CEO at Motif", "element": "div", "occurrences": 24, "sourceId": "font-6" }, { "role": "section heading", "family": "Feature Display", "stack": "\"Feature Display\", sans-serif", "size": "96px", "weight": "300", "lineHeight": "105.6px", "letterSpacing": "-1.9px", "sample": "See", "element": "span", "occurrences": 16, "sourceId": "font-7" }, { "role": "section heading", "family": "PP Neue Montreal", "stack": "\"PP Neue Montreal\", sans-serif", "size": "44px", "weight": "500", "lineHeight": "45.8px", "letterSpacing": "-1.1px", "sample": "Our campaigns get smarter every single day.", "element": "p", "occurrences": 9, "sourceId": "font-8" }, { "role": "card/subheading", "family": "PP Neue Montreal", "stack": "\"PP Neue Montreal\", sans-serif", "size": "26px", "weight": "500", "lineHeight": "29.9px", "letterSpacing": "-0.5px", "sample": "“Different makes our campaigns smarter every day. We can build and optimize across paid, AEO and lan", "element": "p", "occurrences": 6, "sourceId": "font-9" }, { "role": "card/subheading", "family": "PP Neue Montreal", "stack": "\"PP Neue Montreal\", sans-serif", "size": "20px", "weight": "500", "lineHeight": "25px", "letterSpacing": "-0.2px", "sample": "“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target", "element": "p", "occurrences": 3, "sourceId": "font-11" }, { "role": "section heading", "family": "Feature Display", "stack": "\"Feature Display\", sans-serif", "size": "96px", "weight": "300", "lineHeight": "105.6px", "letterSpacing": "-1.9px", "sample": "big", "element": "span", "occurrences": 2, "sourceId": "font-29" }, { "role": "card/subheading", "family": "Feature Display", "stack": "\"Feature Display\", sans-serif", "size": "20px", "weight": "400", "lineHeight": "20px", "letterSpacing": "normal", "sample": "←", "element": "div", "occurrences": 2, "sourceId": "font-30" } ], "siteRoles": [ { "role": "display", "size": "90px", "family": "Feature Display", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-18: computed CSS at 1440×1000; AI role: Feature Display at 90px used for the main hero heading ('Every marketer is').", "sampleId": "font-18", "confidence": 1, "lineHeight": "99px", "letterSpacing": "-0.9px" }, { "role": "heading", "size": "30px", "family": "Feature Display", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Feature Display at 30px used for secondary section headings like 'Build your world, one journey at a time.'", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "33px", "letterSpacing": "-0.3px" }, { "role": "body", "size": "20px", "family": "PP Neue Montreal Text", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: PP Neue Montreal Text at 20px used for primary body paragraphs, such as under the hero heading.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "25px", "letterSpacing": "-0.8px" }, { "role": "mono", "size": "15px", "family": "PP Fraktion Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-5: computed CSS at 1440×1000; AI role: PP Fraktion Mono at 15px used for small, uppercase labels like 'Explorer' and 'Crafter'.", "sampleId": "font-5", "confidence": 0.9, "lineHeight": "18.8px", "letterSpacing": "normal" } ] } ``` ### 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": [ { "value": "#FFE28B", "cssValue": "rgb(255, 226, 139)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 6, "sourceId": "color-5" }, { "value": "#D5EF72", "cssValue": "rgb(213, 239, 114)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 6, "sourceId": "color-6" }, { "value": "#BFE0F4", "cssValue": "rgb(191, 224, 244)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 6, "sourceId": "color-7" }, { "value": "#191919", "cssValue": "rgb(25, 25, 25)", "alpha": 1, "appliedAs": [ "control-background" ], "occurrences": 6, "sourceId": "color-8" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.08)", "alpha": 0.0784313725490196, "appliedAs": [ "::after-background" ], "occurrences": 6, "sourceId": "color-9" }, { "value": "#D7D7D0", "cssValue": "rgb(215, 215, 208)", "alpha": 1, "appliedAs": [ "border" ], "occurrences": 8, "sourceId": "color-32" }, { "value": "#34342F", "cssValue": "rgb(52, 52, 47)", "alpha": 1, "appliedAs": [ "control-background" ], "occurrences": 1, "sourceId": "color-37" }, { "value": "#DEDED8", "cssValue": "rgb(222, 222, 216)", "alpha": 1, "appliedAs": [ "control-background" ], "occurrences": 1, "sourceId": "color-39" } ], "functionalPalette": [ { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary background color for the majority of the page sections below the hero.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black (#000000) is used extensively for headings, body text, and some button texts across the white canvas.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#121212", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons.", "sampleId": "color-13", "confidence": 0.95 }, { "hex": "#DEDEDE", "name": "border", "role": "border", "source": "computed", "evidence": "color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards.", "sampleId": "color-22", "confidence": 0.9 }, { "hex": "#FFE28B", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards.", "sampleId": "color-5", "confidence": 0.85 }, { "hex": "#4A4A4A", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata.", "sampleId": "color-12", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Primary buttons: full pill (approx 999px). Cards: medium rounding (approx 12-16px).", "density": "Low to medium density. The editorial approach relies on ample negative space to emphasize typography and illustrations.", "evidence": "Visual inspection of button radii (pill shape), card boundaries (visible borders on white canvas), and typographic layout (wide margins, centered blocks).", "borderStyle": "Subtle, solid borders (e.g., #DEDEDE) used to delineate white cards against the white background. Outlined buttons use a thin solid border.", "buttonStyle": "Solid fill with contrasting text (black on white, or white on black) in a fully rounded pill shape. Minimal padding.", "cornerStyle": "A mix of corner styles: primary buttons are fully pill-shaped, while feature and article cards have moderately rounded corners, and abstract UI elements within cards use varying smaller radii.", "contentWidth": "Content is generally centered and constrained to a standard max-width, maintaining readability across sections.", "spacingRhythm": "Sections are separated by large swaths of white space, creating a calm, deliberate reading pace. Internal card padding is generous." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×1168px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 24px. - Representative content widths: 1194, 330, 297, 280, 244px. - Layout containers: 6; cards/surfaces: 5; media elements: 9; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 4007, "bottom": 5204, "pageHeight": 6910 } }, "container": { "size": "1440×1168px", "position": "x 0px, y 4002px", "display": "block", "positionMode": "static", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 24 ], "representativeContentWidthsPx": [ 1194, 330, 297, 280, 244 ] }, "columns": [ { "element": "div · ExplorerAmar HanspalCEO at MotifCrafter“Our campaigns get smarter every single day.Amy HengHead of M", "size": "1440×648px", "position": "x 0px, y 4362px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal 24px" }, { "element": "div · Architect“We stopped managing tools and started marketing.Alexis DoughertyHead of Marketing at Lensi", "size": "330×600px", "position": "x -276px, y 4386px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" }, { "element": "div · ExplorerAmar HanspalCEO at Motif", "size": "330×600px", "position": "x 78px, y 4386px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" }, { "element": "div · Crafter“Our campaigns get smarter every single day.Amy HengHead of Marketing at StraikerCrafter“Diff", "size": "330×600px", "position": "x 432px, y 4386px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" }, { "element": "div · DetectiveAbhishek IyerSenior Director of Marketing, Descope", "size": "330×600px", "position": "x 786px, y 4386px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" }, { "element": "div · Detective“We were paying to reach the wrong companies. Not anymore.Leah ClapperMarketing Lead at Rox", "size": "330×600px", "position": "x 1140px, y 4386px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "div · Architect“We stopped managing tools and started marketing.Alexis DoughertyHead of Marketing at Lensi", "size": "330×600px", "position": "x -276px, y 4386px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "16px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · ExplorerAmar HanspalCEO at Motif", "size": "330×600px", "position": "x 78px, y 4386px", "padding": [ "25px", "25px", "25px", "25px" ], "radius": "16px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgb(25, 25, 25)" }, { "element": "div · Crafter“Our campaigns get smarter every single day.Amy HengHead of Marketing at StraikerCrafter“Diff", "size": "330×600px", "position": "x 432px, y 4386px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "16px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · DetectiveAbhishek IyerSenior Director of Marketing, Descope", "size": "330×600px", "position": "x 786px, y 4386px", "padding": [ "25px", "25px", "25px", "25px" ], "radius": "16px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgb(25, 25, 25)" }, { "element": "div · Detective“We were paying to reach the wrong companies. Not anymore.Leah ClapperMarketing Lead at Rox", "size": "330×600px", "position": "x 1140px, y 4386px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "16px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" } ], "surfaces": { "radii": [ "16px", "20px", "4px", "30px" ], "borders": [ "1px solid rgb(0, 0, 0)", "1px solid rgb(255, 255, 255)", "1px solid rgb(215, 215, 208)" ], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · home-story_img is-mountain", "size": "330×600px", "position": "x 78px, y 4386px", "aspectRatio": 0.6, "objectFit": "cover", "objectPosition": "92% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7bbf179f75a534c4c7aa6_different-ai-hot-air-balloons-red-mountains-story.webp" }, { "element": "img · home-story_img is-forest", "size": "330×600px", "position": "x 786px, y 4386px", "aspectRatio": 0.6, "objectFit": "cover", "objectPosition": "96% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7bbf2f5d614e9a752423e_different-ai-treehouses-rope-bridges-forest-story.webp" }, { "element": "img · home-story_logo", "size": "144×24px", "position": "x -115px, y 4413px", "aspectRatio": 6, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de150dab9a224fd2073_logo-lensing.webp" }, { "element": "img · home-story_logo is-motif", "size": "119×24px", "position": "x 103px, y 4413px", "aspectRatio": 5, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de27de105999d241c93_logo-motif-white.webp" }, { "element": "img · home-story_logo", "size": "104×24px", "position": "x 457px, y 4413px", "aspectRatio": 4.3, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d772_logo-straiker.webp" }, { "element": "img · home-story_logo", "size": "104×24px", "position": "x 633px, y 4413px", "aspectRatio": 4.3, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d772_logo-straiker.webp" }, { "element": "img · home-story_logo is-descope", "size": "102×24px", "position": "x 811px, y 4413px", "aspectRatio": 4.3, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de1ecb8d7bd80a4ecd4_logo-descope-white.webp" }, { "element": "img · home-story_logo", "size": "87×26px", "position": "x 1165px, y 4412px", "aspectRatio": 3.3, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed88_logo-rox.webp" }, { "element": "img · home-story_logo", "size": "87×26px", "position": "x 1358px, y 4412px", "aspectRatio": 3.3, "objectFit": "contain", "objectPosition": "0% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed88_logo-rox.webp" } ] ``` #### 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": { "id": "ld-312", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 4002, "width": 1440, "height": 1168 }, "role": null, "label": "See how lean teams are building big worlds.ExplorerAmar HanspalCEO at MotifCrafter“Our campaigns get", "border": "0px none rgb(0, 0, 0)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "visible", "position": "static", "background": "rgba(0, 0, 0, 0)" }, "cards": [ { "id": "ld-386", "tag": "div", "rect": { "x": -276, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "Architect“We stopped managing tools and started marketing.Alexis DoughertyHead of Marketing at Lensi", "border": "0px none rgb(0, 0, 0)", "radius": "16px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" }, { "id": "ld-407", "tag": "div", "rect": { "x": 78, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "ExplorerAmar HanspalCEO at Motif", "border": "0px none rgb(0, 0, 0)", "radius": "16px", "shadow": "none", "padding": [ "25px", "25px", "25px", "25px" ], "background": "rgb(25, 25, 25)" }, { "id": "ld-416", "tag": "div", "rect": { "x": 432, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "Crafter“Our campaigns get smarter every single day.Amy HengHead of Marketing at StraikerCrafter“Diff", "border": "0px none rgb(0, 0, 0)", "radius": "16px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" }, { "id": "ld-437", "tag": "div", "rect": { "x": 786, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "DetectiveAbhishek IyerSenior Director of Marketing, Descope", "border": "0px none rgb(0, 0, 0)", "radius": "16px", "shadow": "none", "padding": [ "25px", "25px", "25px", "25px" ], "background": "rgb(25, 25, 25)" }, { "id": "ld-446", "tag": "div", "rect": { "x": 1140, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "Detective“We were paying to reach the wrong companies. Not anymore.Leah ClapperMarketing Lead at Rox", "border": "0px none rgb(0, 0, 0)", "radius": "16px", "shadow": "none", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" } ], "media": [ { "id": "ld-408", "tag": "img", "rect": { "x": 78, "y": 4386, "width": 330, "height": 600 }, "role": null, "label": "home-story_img is-mountain", "media": { "alt": "Illustration of hot-air balloons drifting over red mountains", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7bbf179f75a534c4c7aa6_different-ai-hot-air-balloons-red-mountains-story.webp", "naturalWidth": 1440, "naturalHeight": 2057 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.6, "objectPosition": "92% 50%" }, { "id": "ld-438", "tag": "img", "rect": { "x": 786, "y": 4386, "width": 330, "height": 600 }, "role": null, "label": "home-story_img is-forest", "media": { "alt": "Illustration of treehouses linked by rope bridges in a green forest canopy", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad7bbf2f5d614e9a752423e_different-ai-treehouses-rope-bridges-forest-story.webp", "naturalWidth": 1440, "naturalHeight": 2051 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.6, "objectPosition": "96% 50%" }, { "id": "ld-400", "tag": "img", "rect": { "x": -115, "y": 4413, "width": 144, "height": 24 }, "role": null, "label": "home-story_logo", "media": { "alt": "Lensing", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de150dab9a224fd2073_logo-lensing.webp", "naturalWidth": 1440, "naturalHeight": 168 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 6, "objectPosition": "0% 50%" }, { "id": "ld-411", "tag": "img", "rect": { "x": 103, "y": 4413, "width": 119, "height": 24 }, "role": null, "label": "home-story_logo is-motif", "media": { "alt": "Motif", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de27de105999d241c93_logo-motif-white.webp", "naturalWidth": 1440, "naturalHeight": 291 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 5, "objectPosition": "0% 50%" }, { "id": "ld-420", "tag": "img", "rect": { "x": 457, "y": 4413, "width": 104, "height": 24 }, "role": null, "label": "home-story_logo", "media": { "alt": "Straiker", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d772_logo-straiker.webp", "naturalWidth": 1440, "naturalHeight": 333 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 4.3, "objectPosition": "0% 50%" }, { "id": "ld-430", "tag": "img", "rect": { "x": 633, "y": 4413, "width": 104, "height": 24 }, "role": null, "label": "home-story_logo", "media": { "alt": "Straiker", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de20e0bcad84da0d772_logo-straiker.webp", "naturalWidth": 1440, "naturalHeight": 333 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 4.3, "objectPosition": "0% 50%" }, { "id": "ld-441", "tag": "img", "rect": { "x": 811, "y": 4413, "width": 102, "height": 24 }, "role": null, "label": "home-story_logo is-descope", "media": { "alt": "Descope", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de1ecb8d7bd80a4ecd4_logo-descope-white.webp", "naturalWidth": 1440, "naturalHeight": 339 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 4.3, "objectPosition": "0% 50%" }, { "id": "ld-450", "tag": "img", "rect": { "x": 1165, "y": 4412, "width": 87, "height": 26 }, "role": null, "label": "home-story_logo", "media": { "alt": "Rox", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed88_logo-rox.webp", "naturalWidth": 742, "naturalHeight": 221 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 3.3, "objectPosition": "0% 50%" }, { "id": "ld-460", "tag": "img", "rect": { "x": 1358, "y": 4412, "width": 87, "height": 26 }, "role": null, "label": "home-story_logo", "media": { "alt": "Rox", "src": "https://cdn.prod.website-files.com/6aa399e5899bf4175edf7a7c/6ad33de2ecb8d7bd80a4ed88_logo-rox.webp", "naturalWidth": 742, "naturalHeight": 221 }, "radius": "0px", "overflow": "clip", "objectFit": "contain", "aspectRatio": 3.3, "objectPosition": "0% 50%" } ], "bounds": { "top": 4007, "bottom": 5204, "pageHeight": 6910 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-325", "gap": "normal 24px", "tag": "div", "rect": { "x": 0, "y": 4362, "width": 1440, "height": 648 }, "role": null, "label": "ExplorerAmar HanspalCEO at MotifCrafter“Our campaigns get smarter every single day.Amy HengHead of M", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-386", "gap": "normal", "tag": "div", "rect": { "x": -276, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "Architect“We stopped managing tools and started marketing.Alexis DoughertyHead of Marketing at Lensi", "columns": null, "display": "flex", "direction": "column" }, { "id": "ld-407", "gap": "normal", "tag": "div", "rect": { "x": 78, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "ExplorerAmar HanspalCEO at Motif", "columns": null, "display": "flex", "direction": "column" }, { "id": "ld-416", "gap": "normal", "tag": "div", "rect": { "x": 432, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "Crafter“Our campaigns get smarter every single day.Amy HengHead of Marketing at StraikerCrafter“Diff", "columns": null, "display": "flex", "direction": "column" }, { "id": "ld-437", "gap": "normal", "tag": "div", "rect": { "x": 786, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "DetectiveAbhishek IyerSenior Director of Marketing, Descope", "columns": null, "display": "flex", "direction": "column" }, { "id": "ld-446", "gap": "normal", "tag": "div", "rect": { "x": 1140, "y": 4386, "width": 330, "height": 600 }, "role": "button", "label": "Detective“We were paying to reach the wrong companies. Not anymore.Leah ClapperMarketing Lead at Rox", "columns": null, "display": "flex", "direction": "column" } ], "spacing": { "gapsPx": [ 24 ], "representativeContentWidthsPx": [ 1194, 330, 297, 280, 244 ] }, "coverage": { "cards": 5, "media": 9, "animations": 0, "elementsInSection": 62 }, "surfaces": { "radii": [ "16px", "20px", "4px", "30px" ], "borders": [ "1px solid rgb(0, 0, 0)", "1px solid rgb(255, 255, 255)", "1px solid rgb(215, 215, 208)" ], "shadows": [] }, "animations": [], "capturedAt": "2026-10-22T06:21:51.117Z", "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 page scrolls down to a section with the heading 'See how lean teams are building big worlds', featuring a horizontal scrolling carousel of testimonial cards. (12s–15s; 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: 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: medium - What transfers: Card grid structure with fixed width, gap, and radius; Logo + tag + quote/media + name + title content hierarchy; Color-coded card backgrounds as a categorization device; Serif-display headline with italic emphasis pairing - Dependencies: Custom illustration artwork per testimonial; Persona taxonomy requiring curated labels per client story; Video assets for play-button cards - Guidance: Keep the card skeleton (logo row, tag chip, quote or media block, name/title footer) and swap in generic icons or solid-color photography instead of bespoke illustrations; the persona-tag idea can be reused with any categorical labeling scheme without needing custom art. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original testimonials section inspired by the design evidence titled “Mixed-Media Testimonial Carousel”. Purpose: A horizontal scrolling carousel featuring colorful testimonial cards, some with illustrations and play buttons indicating video content, and others with text quotes. Structure: full-bleed. Source layout label: Horizontal track of diverse cards that bleed off the edges of the screen.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: A vibrant mix of illustrated video thumbnails and brightly colored text cards in a scrollable row. Components: section headline, carousel track, video testimonial cards, text quote cards, play buttons, navigation arrows. Style direction: colourful, illustrative, playful. Observed crop: 1440×1197px (1.203:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"90px","family":"Feature Display","source":"computed","traits":"Regular","weight":"300","evidence":"font-18: computed CSS at 1440×1000; AI role: Feature Display at 90px used for the main hero heading ('Every marketer is').","sampleId":"font-18","confidence":1,"lineHeight":"99px","letterSpacing":"-0.9px"} {"role":"heading","size":"30px","family":"Feature Display","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Feature Display at 30px used for secondary section headings like 'Build your world, one journey at a time.'","sampleId":"font-1","confidence":0.9,"lineHeight":"33px","letterSpacing":"-0.3px"} {"role":"body","size":"20px","family":"PP Neue Montreal Text","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: PP Neue Montreal Text at 20px used for primary body paragraphs, such as under the hero heading.","sampleId":"font-4","confidence":0.95,"lineHeight":"25px","letterSpacing":"-0.8px"} {"role":"mono","size":"15px","family":"PP Fraktion Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-5: computed CSS at 1440×1000; AI role: PP Fraktion Mono at 15px used for small, uppercase labels like 'Explorer' and 'Crafter'.","sampleId":"font-5","confidence":0.9,"lineHeight":"18.8px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary background color for the majority of the page sections below the hero.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black (#000000) is used extensively for headings, body text, and some button texts across the white canvas.","sampleId":"color-2","confidence":1} {"hex":"#121212","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(18, 18, 18); AI role: Near-black (#121212) used as the background color for primary 'Book a demo' buttons.","sampleId":"color-13","confidence":0.95} {"hex":"#DEDEDE","name":"border","role":"border","source":"computed","evidence":"color-22: computed rgb(222, 222, 222); AI role: Light gray (#DEDEDE) used for borders around feature cards.","sampleId":"color-22","confidence":0.9} {"hex":"#FFE28B","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 226, 139); AI role: Soft yellow (#FFE28B) used as a distinct background color for specific testimonial cards.","sampleId":"color-5","confidence":0.85} {"hex":"#4A4A4A","name":"muted text","role":"muted-text","source":"computed","evidence":"color-12: computed rgb(74, 74, 74); AI role: Dark gray (#4A4A4A) used for secondary or less prominent text, like article metadata.","sampleId":"color-12","confidence":0.85} Typography measured inside this section: {"id":"font-5","size":"15px","count":24,"family":"PP Fraktion Mono","traits":"uppercase","weight":"500","contexts":[{"tag":"div","top":4411,"text":"Explorer","property":"font"},{"tag":"p","top":4411,"text":"Crafter","property":"font"},{"tag":"p","top":4411,"text":"Crafter","property":"font"}],"fontStack":"\"PP Fraktion Mono\", ui-monospace, monospace","lineHeight":"18.8px","letterSpacing":"normal"} {"id":"font-6","size":"14px","count":24,"family":"PP Neue Montreal Text","traits":"Regular","weight":"400","contexts":[{"tag":"div","top":4943,"text":"CEO at Motif","property":"font"},{"tag":"p","top":4943,"text":"Head of Marketing at Straiker","property":"font"},{"tag":"p","top":4943,"text":"Head of Marketing at Straiker","property":"font"}],"fontStack":"\"PP Neue Montreal Text\", sans-serif","lineHeight":"17.5px","letterSpacing":"-0.6px"} {"id":"font-7","size":"96px","count":16,"family":"Feature Display","traits":"Regular","weight":"300","contexts":[{"tag":"span","top":4088,"text":"See","property":"font"},{"tag":"span","top":4088,"text":"how","property":"font"},{"tag":"span","top":4088,"text":"lean","property":"font"}],"fontStack":"\"Feature Display\", sans-serif","lineHeight":"105.6px","letterSpacing":"-1.9px"} {"id":"font-8","size":"44px","count":9,"family":"PP Neue Montreal","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":4618,"text":"Our campaigns get smarter every single day.","property":"font"},{"tag":"p","top":4595,"text":"We were paying to reach the wrong companies. Not anymore.","property":"font"},{"tag":"p","top":4618,"text":"We stopped managing tools and started marketing.","property":"font"}],"fontStack":"\"PP Neue Montreal\", sans-serif","lineHeight":"45.8px","letterSpacing":"-1.1px"} {"id":"font-9","size":"26px","count":6,"family":"PP Neue Montreal","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":4535,"text":"“Different makes our campaigns smarter every day. We can build and optimize across paid, AEO and lan","property":"font"},{"tag":"p","top":4535,"text":"“With Different, I build and launch campaigns across every demand gen channel without leaving the pl","property":"font"},{"tag":"p","top":4535,"text":"“Different makes our campaigns smarter every day. We can build and optimize across paid, AEO and lan","property":"font"}],"fontStack":"\"PP Neue Montreal\", sans-serif","lineHeight":"29.9px","letterSpacing":"-0.5px"} {"id":"font-11","size":"20px","count":3,"family":"PP Neue Montreal","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":4532,"text":"“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target","property":"font"},{"tag":"p","top":4532,"text":"“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target","property":"font"},{"tag":"p","top":4532,"text":"“Different analyzed our campaigns and uncovered LinkedIn spend going to companies outside our target","property":"font"}],"fontStack":"\"PP Neue Montreal\", sans-serif","lineHeight":"25px","letterSpacing":"-0.2px"} {"id":"font-29","size":"96px","count":2,"family":"Feature Display","traits":"italic","weight":"300","contexts":[{"tag":"span","top":4194,"text":"big","property":"font"},{"tag":"span","top":4194,"text":"worlds","property":"font"}],"fontStack":"\"Feature Display\", sans-serif","lineHeight":"105.6px","letterSpacing":"-1.9px"} {"id":"font-30","size":"20px","count":2,"family":"Feature Display","traits":"Regular","weight":"400","contexts":[{"tag":"div","top":5032,"text":"←","property":"font"},{"tag":"div","top":5032,"text":"→","property":"font"}],"fontStack":"\"Feature Display\", sans-serif","lineHeight":"20px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-5","hex":"#FFE28B","alpha":1,"count":6,"contexts":[{"tag":"div","top":4386,"text":"Crafter“Our campaigns get smarter every single day.Amy HengHead of Marketing at Straiker","property":"background"}],"cssValue":"rgb(255, 226, 139)"} {"id":"color-6","hex":"#D5EF72","alpha":1,"count":6,"contexts":[{"tag":"div","top":4386,"text":"Detective“We were paying to reach the wrong companies. Not anymore.Leah ClapperMarketing Lead at Rox","property":"background"}],"cssValue":"rgb(213, 239, 114)"} {"id":"color-7","hex":"#BFE0F4","alpha":1,"count":6,"contexts":[{"tag":"div","top":4386,"text":"Architect“We stopped managing tools and started marketing.Alexis DoughertyHead of Marketing at Lensi","property":"background"}],"cssValue":"rgb(191, 224, 244)"} {"id":"color-8","hex":"#191919","alpha":1,"count":6,"contexts":[{"tag":"div","top":4386,"text":"ExplorerAmar HanspalCEO at Motif","property":"control-background"}],"cssValue":"rgb(25, 25, 25)"} {"id":"color-9","hex":"#FFFFFF","alpha":0.0784313725490196,"count":6,"contexts":[{"tag":"div","top":4386,"text":"ExplorerAmar HanspalCEO at Motif","property":"::after-background"}],"cssValue":"rgba(255, 255, 255, 0.08)"} {"id":"color-32","hex":"#D7D7D0","alpha":1,"count":8,"contexts":[{"tag":"div","top":5032,"text":"←","property":"border"}],"cssValue":"rgb(215, 215, 208)"} {"id":"color-37","hex":"#34342F","alpha":1,"count":1,"contexts":[{"tag":"div","top":5051,"text":"","property":"control-background"}],"cssValue":"rgb(52, 52, 47)"} {"id":"color-39","hex":"#DEDED8","alpha":1,"count":1,"contexts":[{"tag":"div","top":5051,"text":"","property":"control-background"}],"cssValue":"rgb(222, 222, 216)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":4002,"width":1440,"height":1168},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[24],"representativeContentWidthsPx":[1194,330,297,280,244]}; surfaces {"radii":["16px","20px","4px","30px"],"borders":["1px solid rgb(0, 0, 0)","1px solid rgb(255, 255, 255)","1px solid rgb(215, 215, 208)"],"shadows":[]}; media [{"tag":"img","rect":{"x":78,"y":4386,"width":330,"height":600},"aspectRatio":0.6,"objectFit":"cover","objectPosition":"92% 50%","radius":"0px"},{"tag":"img","rect":{"x":786,"y":4386,"width":330,"height":600},"aspectRatio":0.6,"objectFit":"cover","objectPosition":"96% 50%","radius":"0px"},{"tag":"img","rect":{"x":-115,"y":4413,"width":144,"height":24},"aspectRatio":6,"objectFit":"contain","objectPosition":"0% 50%","radius":"0px"},{"tag":"img","rect":{"x":103,"y":4413,"width":119,"height":24},"aspectRatio":5,"objectFit":"contain","objectPosition":"0% 50%","radius":"0px"}] Motion evidence: scroll: The page scrolls down to a section with the heading 'See how lean teams are building big worlds', featuring a horizontal scrolling carousel of testimonial cards. (95% confidence) Transfer these principles: Card grid structure with fixed width, gap, and radius; Logo + tag + quote/media + name + title content hierarchy; Color-coded card backgrounds as a categorization device; Serif-display headline with italic emphasis pairing. Dependencies: Custom illustration artwork per testimonial; Persona taxonomy requiring curated labels per client story; Video assets for play-button cards. Adaptation guidance: Keep the card skeleton (logo row, tag chip, quote or media block, name/title footer) and swap in generic icons or solid-color photography instead of bespoke illustrations; the persona-tag idea can be reused with any categorical labeling scheme without needing custom art. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.