# Video Testimonial Portraits Schema: Design Details SECTION.md v3.2 Website: Amby Source: https://www.amby.com/ Source section IDs: 18fd7972-fa7e-413d-ad74-c9e57a7889a5 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three tall portrait cards in an even grid put real faces first, so the proof is believable before anyone reads a word. - A large centered serif headline sits above the cards and sets a clear top-down reading order, with generous 160px top and bottom padding. - Name and title sit in white on the photo at the bottom of each card, and a shared corner radius ties the three together without extra chrome. What a screenshot can't show: - The recording showed no motion, so hover, play and scroll behaviour are unknown. - The headline is 48px on a 52.8px line height with -1.9px tracking, and the section uses 40px side padding with a 64px gap between blocks. Borrow: Let the portraits carry the proof: equal tall media slots, a short caption overlaid on each, and one confident headline above. Leave alone: Don't copy Amby's Lastik serif and Switzer pairing, or its cream, lilac and lime palette; a free high-contrast serif with a clean sans would do the same job. ## Classification - Type: testimonial-card - Layout: Three-column grid of tall, vertical media cards. - Styles: photographic, minimal - Confidence: 100% ## Purpose and structure Three vertical video portrait cards featuring clients, set below a centered headline. Visual signature: Tall portrait-oriented video thumbnails with names overlaid at the bottom. ## Components - Headline - Video Cards - Name and Title Overlays ## Typography - Display: Lastik Regular — 72px 400 - Heading: Lastik Regular — 48px 400 - Body: Switzer — 18px 400 ## Functional palette - Canvas: canvas #F7F2EB - Text: text #131E0D - Surface: surface #FFFFFF - Accent: accent #C7C7FF - Primary-Action: primary action #F0FF80 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 57.00/100 (Competent) Scored coverage: 85% - Typography: 58 — Serif display headline (Lastik, 48px) contrasts with clean sans overlay labels, giving a clear two-tier hierarchy, but the overlay name/title text is a standard small-caption treatment with no distinctive styling beyond white-on-photo contrast. Next tier: Overlay typography needs more considered treatment (scale, weight pairing, or unique micro-detail) to move past a generic caption-on-photo pattern. - Composition: 62 — Clean three-column grid of tall portrait cards with consistent gaps, generous surrounding whitespace, and a centered headline establishing clear top-down hierarchy; corner radius and consistent framing unify the set. Next tier: The layout is a straightforward equal-column grid with no variation in scale, offset, or layering that would make it feel distinct rather than a familiar testimonial template. - Motion: not_assessed — No motion_moments or animation data were supplied for this crop, so no timestamped visible motion can be verified. Next tier: Provide timestamped evidence of video playback behavior (autoplay, hover-to-play, transitions) to assess motion quality. - Content: 55 — Real client video portraits with name/title overlays integrate directly into the card, giving credibility, but content is presented with minimal differentiation (no quotes, no play affordance visible, no context beyond name/title). Next tier: Needs richer integration such as visible testimonial text, play controls, or company logos to deepen content purpose beyond a portrait gallery. - Originality: 48 — Vertical video portrait testimonial cards with bottom-left name overlays are a widely used pattern in SaaS/agency marketing sites; nothing here departs from that convention. Next tier: Would need a distinguishing structural or interaction idea (e.g., unconventional cropping, overlay choreography, unexpected grid logic) to stand apart from the common template. - Adaptability: 60 — Structure is simple and modular: three equal media slots with absolute-positioned text overlay, large consistent radius, and flexible column gap, making it straightforward to reskin with different media and copy. Next tier: Lack of deeper interaction or state data (hover/play behavior) limits certainty on how cleanly behavior separates from skin. Strengths: - Consistent tall portrait card grid with generous whitespace and aligned corner radii - Legible overlay name/title pairing readable against varied photographic backgrounds - Serif display headline establishes a calm editorial tone above the grid Weaknesses: - Pattern (video portrait + bottom-left name overlay) is a common testimonial template with no distinguishing twist - No visible play affordance, quote text, or company branding to deepen content - Motion behavior is unverifiable from supplied evidence - Overlay typography is a generic caption style with no unique detail Why it does not reach the next tier: The section executes a familiar three-column video testimonial pattern cleanly but introduces no distinguishing structural, typographic, or interaction idea; it reads as competent/good rather than memorable. ## Adaptation guidance - Effort: Low - Guidance: Swap in new portrait videos/images, headline text, and name/title pairs while keeping the grid proportions, radius, and overlay placement; typography and palette can be restyled independently of the structural grid. What transfers: - Three-column equal-width tall media grid with consistent gap and radius - Bottom-left overlay pattern for name/title on photographic media - Centered serif headline above a media grid Dependencies: - Specific client video assets and bios - Exact font (Lastik) and color palette for brand tone - Large uniform border radius (40px) matching sectioned token ## 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 was provided, so autoplay/hover behavior could not be assessed - Exact font rendering, overlay gradient, and radius values are approximate from screenshot only ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: testimonial-card - Source type: testimonial-card - Structure: grid - Layout: Three-column grid of tall, vertical media cards. - Styles: photographic, minimal - Components: Headline, Video Cards, Name and Title Overlays - Purpose: Three vertical video portrait cards featuring clients, set below a centered headline. - Visual signature: Tall portrait-oriented video thumbnails with names overlaid at the bottom. - Place on the page: 7 of 10, after Stats (`amby-com:C06`), before Editorial (`amby-com:C08`) ### Crop and composition - Crop: 1440×1157px; aspect ratio 1.245:1 - Page bounds: 4908–6065px of 9687px - Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system. ### 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": "section heading", "family": "Lastik Regular", "stack": "\"Lastik Regular\", sans-serif", "size": "48px", "weight": "400", "lineHeight": "52.8px", "letterSpacing": "-1.9px", "sample": "Not your average talent partner (promise).", "element": "h3", "occurrences": 2, "sourceId": "font-3" }, { "role": "body/supporting copy", "family": "Switzer", "stack": "Switzer, \"Switzer Placeholder\", sans-serif", "size": "16px", "weight": "600", "lineHeight": "16px", "letterSpacing": "-0.3px", "sample": "Learn more", "element": "p", "occurrences": 5, "sourceId": "font-9" } ], "siteRoles": [ { "role": "display", "size": "72px", "family": "Lastik Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Lastik Regular at 72px, used for the main hero headline 'Finding your people'.", "sampleId": "font-2", "confidence": 1, "lineHeight": "79.2px", "letterSpacing": "-2.9px" }, { "role": "heading", "size": "48px", "family": "Lastik Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: Lastik Regular at 48px, used for major section headings like 'What our clients have to say'.", "sampleId": "font-3", "confidence": 1, "lineHeight": "52.8px", "letterSpacing": "-1.9px" }, { "role": "body", "size": "18px", "family": "Switzer", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Switzer at 18px, used for general paragraph text and navigation links.", "sampleId": "font-6", "confidence": 0.95, "lineHeight": "24.3px", "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": [ { "value": "#000000", "cssValue": "rgba(0, 0, 0, 0.15)", "alpha": 0.14901960784313725, "appliedAs": [ "background" ], "occurrences": 3, "sourceId": "color-5" } ], "functionalPalette": [ { "hex": "#F7F2EB", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(247, 242, 235); AI role: The warm off-white (#F7F2EB) used as the primary background color for the entire page.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#131E0D", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(19, 30, 13); AI role: The dark green/black (#131E0D) used for almost all typography and illustration outlines.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-7: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the navigation bar background and some card backgrounds.", "sampleId": "color-7", "confidence": 0.9 }, { "hex": "#C7C7FF", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-4: computed rgb(199, 199, 255); AI role: Pastel purple (#C7C7FF) used as a background color for stat and resource cards.", "sampleId": "color-4", "confidence": 0.85 }, { "hex": "#F0FF80", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-13: computed rgb(240, 255, 128); AI role: Bright yellow (#F0FF80) used for the primary 'Book a call' button in the navigation.", "sampleId": "color-13", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large border radii on cards and images (appearing to be around 16-24px), and fully rounded pill shapes for buttons and the navigation bar.", "density": "Low density. The layout is spacious, allowing typography and illustrations room to breathe.", "evidence": "Observed from the generous whitespace around the hero text, the rounded corners on the 'Numbers don't lie' cards, and the pill-shaped 'Book a call' buttons.", "borderStyle": "Mostly borderless design, relying on background color contrast to define surfaces. Illustrations use solid black strokes.", "buttonStyle": "Pill-shaped with solid background colors (black or yellow) and no borders.", "cornerStyle": "Consistently rounded corners across all container elements.", "contentWidth": "Content is constrained to a central column with wide margins on desktop, maintaining readability.", "spacingRhythm": "Generous vertical spacing between major sections, creating a relaxed pacing. Grids use consistent, moderate gaps between cards." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×1157px; flex; padding {"top":"160px","left":"40px","right":"40px","bottom":"160px"}; gap 64px; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 8, 64px. - Representative content widths: 1360, 1037, 665, 389px. - Layout containers: 1; cards/surfaces: 0; media elements: 6; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 4908, "bottom": 6065, "pageHeight": 9687 } }, "container": { "size": "1440×1157px", "position": "x 0px, y 4908px", "display": "flex", "positionMode": "relative", "padding": { "top": "160px", "left": "40px", "right": "40px", "bottom": "160px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "64px", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px none rgb(0, 0, 0)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 8, 64 ], "representativeContentWidthsPx": [ 1360, 1037, 665, 389 ] }, "columns": [ { "element": "section · What our clients have to say.PalakHead of People, Bakken & BæckLearn moreGlennDevelopment Manager, F", "size": "1440×1157px", "position": "x 0px, y 4908px", "display": "flex", "template": "not captured", "direction": "column", "gap": "64px" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "40px" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "video · video", "size": "1037×720px", "position": "x -260px, y 5185px", "aspectRatio": 1.4, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://framerusercontent.com/assets/rfCSg8dcxHiaJQvfl69UokBsZA.mp4" }, { "element": "video · video", "size": "1037×720px", "position": "x 201px, y 5185px", "aspectRatio": 1.4, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://framerusercontent.com/assets/VKSIv5vlBzbpCuxzsVjEEFaz8Q.mp4" }, { "element": "video · video", "size": "1037×720px", "position": "x 663px, y 5185px", "aspectRatio": 1.4, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://framerusercontent.com/assets/MfePPzLf52UA3OrQvvxFegN5SMo.mp4" }, { "element": "img · img", "size": "665×720px", "position": "x -98px, y 5185px", "aspectRatio": 0.9, "objectFit": "cover", "objectPosition": "39.4% 40.4%", "radius": "0px", "overflow": "clip", "source": "https://framerusercontent.com/images/IpDAXZHZCyziUm9c9AINSO6xg.webp?scale-down-to=1024&width=1920&height=1080" }, { "element": "img · img", "size": "665×720px", "position": "x 363px, y 5185px", "aspectRatio": 0.9, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://framerusercontent.com/images/xrPUjMEwU1xpusdYEiu2SstZr40.jpg?scale-down-to=1024&width=2500&height=1667" }, { "element": "img · img", "size": "665×720px", "position": "x 825px, y 5185px", "aspectRatio": 0.9, "objectFit": "cover", "objectPosition": "54.8% 39.2%", "radius": "0px", "overflow": "clip", "source": "https://framerusercontent.com/images/HLPoQlE65hszLPn71lum6KfwQsA.png?scale-down-to=1024&width=1920&height=1080" } ] ``` #### 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-574", "gap": "64px", "tag": "section", "rect": { "x": 0, "y": 4908, "width": 1440, "height": 1157 }, "role": null, "label": "What our clients have to say.PalakHead of People, Bakken & BæckLearn moreGlennDevelopment Manager, F", "border": "0px none rgb(0, 0, 0)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "flex", "padding": { "top": "160px", "left": "40px", "right": "40px", "bottom": "160px" }, "overflow": "visible", "position": "relative", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-591", "tag": "video", "rect": { "x": -260, "y": 5185, "width": 1037, "height": 720 }, "role": null, "label": "video", "media": { "src": "https://framerusercontent.com/assets/rfCSg8dcxHiaJQvfl69UokBsZA.mp4", "poster": "", "duration": 155.413 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.4, "objectPosition": "50% 50%" }, { "id": "ld-616", "tag": "video", "rect": { "x": 201, "y": 5185, "width": 1037, "height": 720 }, "role": null, "label": "video", "media": { "src": "https://framerusercontent.com/assets/VKSIv5vlBzbpCuxzsVjEEFaz8Q.mp4", "poster": "", "duration": 285.333 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.4, "objectPosition": "50% 50%" }, { "id": "ld-641", "tag": "video", "rect": { "x": 663, "y": 5185, "width": 1037, "height": 720 }, "role": null, "label": "video", "media": { "src": "https://framerusercontent.com/assets/MfePPzLf52UA3OrQvvxFegN5SMo.mp4", "poster": "", "duration": 143.616 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.4, "objectPosition": "50% 50%" }, { "id": "ld-588", "tag": "img", "rect": { "x": -98, "y": 5185, "width": 665, "height": 720 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://framerusercontent.com/images/IpDAXZHZCyziUm9c9AINSO6xg.webp?scale-down-to=1024&width=1920&height=1080", "naturalWidth": 665, "naturalHeight": 374 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.9, "objectPosition": "39.4% 40.4%" }, { "id": "ld-613", "tag": "img", "rect": { "x": 363, "y": 5185, "width": 665, "height": 720 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://framerusercontent.com/images/xrPUjMEwU1xpusdYEiu2SstZr40.jpg?scale-down-to=1024&width=2500&height=1667", "naturalWidth": 665, "naturalHeight": 443 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.9, "objectPosition": "50% 50%" }, { "id": "ld-638", "tag": "img", "rect": { "x": 825, "y": 5185, "width": 665, "height": 720 }, "role": null, "label": "img", "media": { "alt": "", "src": "https://framerusercontent.com/images/HLPoQlE65hszLPn71lum6KfwQsA.png?scale-down-to=1024&width=1920&height=1080", "naturalWidth": 665, "naturalHeight": 374 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.9, "objectPosition": "54.8% 39.2%" } ], "bounds": { "top": 4908, "bottom": 6065, "pageHeight": 9687 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-574", "gap": "64px", "tag": "section", "rect": { "x": 0, "y": 4908, "width": 1440, "height": 1157 }, "role": null, "label": "What our clients have to say.PalakHead of People, Bakken & BæckLearn moreGlennDevelopment Manager, F", "columns": null, "display": "flex", "direction": "column" } ], "spacing": { "gapsPx": [ 8, 64 ], "representativeContentWidthsPx": [ 1360, 1037, 665, 389 ] }, "coverage": { "cards": 0, "media": 6, "animations": 0, "elementsInSection": 26 }, "surfaces": { "radii": [ "40px" ], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-11-02T06:36:47.441Z", "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 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: 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: Three-column equal-width tall media grid with consistent gap and radius; Bottom-left overlay pattern for name/title on photographic media; Centered serif headline above a media grid - Dependencies: Specific client video assets and bios; Exact font (Lastik) and color palette for brand tone; Large uniform border radius (40px) matching sectioned token - Guidance: Swap in new portrait videos/images, headline text, and name/title pairs while keeping the grid proportions, radius, and overlay placement; typography and palette can be restyled independently of the structural grid. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion. ### Agent implementation prompt Create an original testimonial-card section inspired by the design evidence titled “Video Testimonial Portraits”. Purpose: Three vertical video portrait cards featuring clients, set below a centered headline. Structure: grid. Source layout label: Three-column grid of tall, vertical media cards.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system. Visual signature to preserve at the pattern level: Tall portrait-oriented video thumbnails with names overlaid at the bottom. Components: Headline, Video Cards, Name and Title Overlays. Style direction: photographic, minimal. Observed crop: 1440×1157px (1.245:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"72px","family":"Lastik Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Lastik Regular at 72px, used for the main hero headline 'Finding your people'.","sampleId":"font-2","confidence":1,"lineHeight":"79.2px","letterSpacing":"-2.9px"} {"role":"heading","size":"48px","family":"Lastik Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: Lastik Regular at 48px, used for major section headings like 'What our clients have to say'.","sampleId":"font-3","confidence":1,"lineHeight":"52.8px","letterSpacing":"-1.9px"} {"role":"body","size":"18px","family":"Switzer","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Switzer at 18px, used for general paragraph text and navigation links.","sampleId":"font-6","confidence":0.95,"lineHeight":"24.3px","letterSpacing":"-0.4px"} Color evidence: {"hex":"#F7F2EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(247, 242, 235); AI role: The warm off-white (#F7F2EB) used as the primary background color for the entire page.","sampleId":"color-1","confidence":1} {"hex":"#131E0D","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(19, 30, 13); AI role: The dark green/black (#131E0D) used for almost all typography and illustration outlines.","sampleId":"color-2","confidence":1} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-7: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the navigation bar background and some card backgrounds.","sampleId":"color-7","confidence":0.9} {"hex":"#C7C7FF","name":"accent","role":"accent","source":"computed","evidence":"color-4: computed rgb(199, 199, 255); AI role: Pastel purple (#C7C7FF) used as a background color for stat and resource cards.","sampleId":"color-4","confidence":0.85} {"hex":"#F0FF80","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(240, 255, 128); AI role: Bright yellow (#F0FF80) used for the primary 'Book a call' button in the navigation.","sampleId":"color-13","confidence":0.8} Typography measured inside this section: {"id":"font-3","size":"48px","count":2,"family":"Lastik Regular","traits":"Regular","weight":"400","contexts":[{"tag":"h3","top":3164,"text":"Not your average talent partner (promise).","property":"font"},{"tag":"h3","top":5068,"text":"What our clients have to say.","property":"font"}],"fontStack":"\"Lastik Regular\", sans-serif","lineHeight":"52.8px","letterSpacing":"-1.9px"} {"id":"font-9","size":"16px","count":5,"family":"Switzer","traits":"Regular","weight":"600","contexts":[{"tag":"p","top":2688,"text":"Learn more","property":"font"},{"tag":"p","top":2688,"text":"Learn more","property":"font"},{"tag":"p","top":5925,"text":"Learn more","property":"font"}],"fontStack":"Switzer, \"Switzer Placeholder\", sans-serif","lineHeight":"16px","letterSpacing":"-0.3px"} Colors measured inside this section: {"id":"color-5","hex":"#000000","alpha":0.14901960784313725,"count":3,"contexts":[{"tag":"div","top":5185,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.15)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":4908,"width":1440,"height":1157},"padding":{"top":"160px","left":"40px","right":"40px","bottom":"160px"},"gap":"64px","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8,64],"representativeContentWidthsPx":[1360,1037,665,389]}; surfaces {"radii":["40px"],"borders":[],"shadows":[]}; media [{"tag":"video","rect":{"x":-260,"y":5185,"width":1037,"height":720},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"video","rect":{"x":201,"y":5185,"width":1037,"height":720},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"video","rect":{"x":663,"y":5185,"width":1037,"height":720},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":-98,"y":5185,"width":665,"height":720},"aspectRatio":0.9,"objectFit":"cover","objectPosition":"39.4% 40.4%","radius":"0px"}] Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Three-column equal-width tall media grid with consistent gap and radius; Bottom-left overlay pattern for name/title on photographic media; Centered serif headline above a media grid. Dependencies: Specific client video assets and bios; Exact font (Lastik) and color palette for brand tone; Large uniform border radius (40px) matching sectioned token. Adaptation guidance: Swap in new portrait videos/images, headline text, and name/title pairs while keeping the grid proportions, radius, and overlay placement; typography and palette can be restyled independently of the structural grid. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.