# Tabbed video testimonial

Schema: Design Details SECTION.md v3.2
Website: DualEntry
Source: https://www.dualentry.com/
Source section IDs: 31f95df4-87cd-4f03-b64d-327525fa8055
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A clear vertical stack of heading, company tabs, large video card, then a metrics row makes the proof easy to scan in order.
- The dark canvas lets the photographic thumbnail dominate, while the 48px heading and 32px stat numerals give a simple, readable size contrast.
- Concrete figures like '20 days to 1', '$0 cost' and '1 person' make the testimonial feel credible rather than generic.

What a screenshot can't show:
- The recording showed no motion, so tab-switch and video-play transitions are unknown.
- Measured type is 48px/52.8px for the heading and 32px/38.4px for stats, both weight 400 with normal letter spacing, and the only measured gap is 10px.

Borrow: Pair a large human video with a tab row to switch stories and a short row of hard numbers, so emotional proof and measurable proof sit in one frame.
Leave alone: Don't copy the Twklausanne typeface, the exact dark surface tone or the specific customer stats; use a neutral grotesque sans and your own results.

## Classification

- Type: testimonials
- Layout: Vertical stack of heading, horizontal tabs, large video player, and a row of metrics at the bottom.
- Styles: minimal, corporate, photographic
- Confidence: 100%

## Purpose and structure

A dark-themed section featuring a video testimonial player, navigated via tabbed company names above the video. Metric highlights sit below the video.

Visual signature: Dark section with a large video thumbnail of a person speaking, surrounded by company tabs and statistic callouts.

## Components

- section-heading
- tab-navigation
- video-player
- testimonial-quote
- metric-stat

## Typography

- Display: Twklausanne — 56px 400
- Heading: Twklausanne — 48px 400
- Body: Twklausanne — 16px 300

## Functional palette

- Text: text #1D1F20
- Canvas: canvas #FFFFFF
- Border: border #E4EBEC
- Surface: surface #1C1D1E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 57.00/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Clean two-weight hierarchy (large white heading, mid-size video caption, small metric labels) using a single consistent sans family, but no distinctive type treatment beyond scale changes; headline wraps plainly and metric numerals are standard size contrast. Next tier: Needs a more deliberate typographic device (e.g., custom numeral treatment, unexpected scale jump, or mixed weight pairing) to move past competent execution.
- Composition: 62 — Clear vertical stack with logical grouping: heading, tab bar, full-bleed video card with overlay caption/CTAs, then a metrics row separated by a divider. Alignment is consistent and the dark canvas unifies the elements, but the layout is a very standard testimonial-carousel template with safe spacing and no unusual grid or asymmetry. Next tier: Would need a more considered spatial relationship between tabs, video, and metrics (e.g., overlapping elements, unexpected scale contrast, asymmetric grid) rather than a stacked default pattern.
- Motion: not_assessed — No timestamped motion evidence was supplied (motion_moments empty, animations array empty), so motion cannot be scored. Next tier: Provide timestamped visible motion changes (tab transition, video autoplay behavior, hover states) to assess.
- Content: 60 — Video thumbnail, headline outcome stat ('20 days to 1'), and quantified metrics ($0 cost, 1 person) are well integrated into the visual frame with real photographic content, giving credible specificity, but the pairing of video + text overlay + metrics is a common testimonial pattern rather than deeply bespoke integration. Next tier: Tighter visual binding between the numeric claims and the video content (e.g., metrics overlaid on the video itself, or a unique layout mapping claim to proof) would push integration further.
- Originality: 48 — This is a familiar enterprise SaaS 'video testimonial with logo tabs and stat row' pattern seen across many B2B sites; nothing here resists substitution with a generic template. Next tier: Would need a distinctive visual or structural idea unique to this brand (unusual tab treatment, non-standard card shape, custom iconography) to earn originality credit.
- Adaptability: 55 — Structure (heading, tab nav, media card, metric row) is modular and the DOM shows discrete, reusable components (swiper tabs, img/video card, stat elements) with defined radii and borders, making the skin and structure separable. Next tier: Lacks token-level detail (e.g., explicit color/spacing variables tied to this section) beyond site-wide palette, limiting confidence in full separability.

Strengths:
- Clear three-part hierarchy (heading → tab navigation → video+caption → metrics) that reads logically top to bottom
- Real customer video and photographic content lend specificity and credibility beyond generic iconography
- Quantified outcome metrics (20→1 days, $0 cost) are directly tied to the featured customer story

Weaknesses:
- Highly conventional B2B testimonial-carousel layout with no distinguishing structural idea
- Typography is purely functional scale-based hierarchy without a notable treatment
- No motion evidence supplied, so dynamic behavior (tab switching, video autoplay) cannot be verified or credited
- Metric row sits visually disconnected below the video rather than integrated into the narrative

Why it does not reach the next tier: The section executes a competent, clean dark testimonial module with real content and legible hierarchy, but every structural and typographic choice follows a widely used B2B template; nothing here would be hard to substitute with a different company's near-identical module, which caps it below the 'strong/memorable' threshold.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the stacked heading/tabs/media/metrics skeleton with a dark canvas; swap in new logos, video sources, and metric copy per tab without structural changes.

What transfers:
- Vertical stack pattern: heading, tab navigation, media card with overlay caption, metric row
- Tab-based switching between multiple customer logos/videos
- Overlay caption + dual CTA (watch video / read case study) pattern on media card
- Metric row with large numeral + small label beneath

Dependencies:
- Client video assets for each tab
- Company logos for tab navigation
- Specific outcome metrics copy per customer

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No timestamped motion data provided, so interactive/transition behavior is unverified
- Deterministic facts only cover one tab's content; other tab states and transitions are unknown
- Site-wide typography/palette tokens were used as proxies since section-specific tokens were limited

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: testimonials
- Source type: testimonials
- Structure: horizontal sequence
- Layout: Vertical stack of heading, horizontal tabs, large video player, and a row of metrics at the bottom.
- Styles: minimal, corporate, photographic
- Components: section-heading, tab-navigation, video-player, testimonial-quote, metric-stat
- Purpose: A dark-themed section featuring a video testimonial player, navigated via tabbed company names above the video. Metric highlights sit below the video.
- Visual signature: Dark section with a large video thumbnail of a person speaking, surrounded by company tabs and statistic callouts.
- Place on the page: 5 of 9, after Call to action (`dualentry-com:C04`), before Process (`dualentry-com:C06`)

### Crop and composition

- Crop: 1440×1209px; aspect ratio 1.191:1
- Page bounds: 2491–3700px of 6763px
- Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "section heading",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "32px",
      "weight": "400",
      "lineHeight": "38.4px",
      "letterSpacing": "normal",
      "sample": "2 Person",
      "element": "h4",
      "occurrences": 13,
      "sourceId": "font-1"
    },
    {
      "role": "section heading",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "48px",
      "weight": "400",
      "lineHeight": "52.8px",
      "letterSpacing": "normal",
      "sample": "The accounting suite that runs while you lead.",
      "element": "h2",
      "occurrences": 10,
      "sourceId": "font-2"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "56px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "61.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "52.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.",
      "sampleId": "font-7",
      "confidence": 0.85,
      "lineHeight": "24px",
      "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": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 18,
      "sourceId": "color-11"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.15)",
      "alpha": 0.14901960784313725,
      "appliedAs": [
        "border",
        "background"
      ],
      "occurrences": 49,
      "sourceId": "color-16"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#1D1F20",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#E4EBEC",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#1C1D1E",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.",
      "sampleId": "color-18",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border radius appears common on cards and buttons.",
  "density": "Moderate density; ample whitespace around main elements, but dense information packing within feature cards and footer links.",
  "evidence": "Observed via the bento-box feature grid, consistent button styling, and organized footer layout.",
  "borderStyle": "Subtle, thin solid borders (e.g., 1px) used to define cards and form elements.",
  "buttonStyle": "Solid white primary buttons on dark backgrounds, dark solid buttons on light backgrounds, with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, inputs, and feature cards.",
  "contentWidth": "Content is generally constrained to a central max-width, though background gradients and banners span full width.",
  "spacingRhythm": "Generous spacing between major sections, with tighter padding inside feature cards and UI components."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×1210px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(29, 31, 32); radius 0px.
- Observed gaps: 10px.
- Representative content widths: 1238, 1206, 733, 700, 402px.
- Layout containers: 5; cards/surfaces: 3; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 2491,
      "bottom": 3700,
      "pageHeight": 6763
    }
  },
  "container": {
    "size": "1440×1210px",
    "position": "x 0px, y 2490px",
    "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": "rgb(29, 31, 32)",
    "radius": "0px",
    "border": "0px none rgba(61, 67, 68, 0.8)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      10
    ],
    "representativeContentWidthsPx": [
      1238,
      1206,
      733,
      700,
      402
    ]
  },
  "columns": [
    {
      "element": "div · swiper-wrapper is-stories-logos w-dyn-items",
      "size": "1206×100px",
      "position": "x 117px, y 2741px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "div · swiper-slide is-stories-logos w-dyn-item swiper-slide-active swiper-slide-visible swiper-slide-fully",
      "size": "402×100px",
      "position": "x 117px, y 2741px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "div · swiper-slide is-stories-logos w-dyn-item swiper-slide-next swiper-slide-visible swiper-slide-fully-v",
      "size": "402×100px",
      "position": "x 519px, y 2741px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "div · swiper-slide is-stories-logos w-dyn-item swiper-slide-visible swiper-slide-fully-visible swiper-slid",
      "size": "402×100px",
      "position": "x 921px, y 2741px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "div · swiper-slide is-stories-logos w-dyn-item",
      "size": "402×100px",
      "position": "x 1323px, y 2741px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "img · stories_image",
      "size": "1238×604px",
      "position": "x -1201px, y 2841px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "0px none rgba(61, 67, 68, 0.8)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · stories_image",
      "size": "1238×604px",
      "position": "x 101px, y 2841px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "0px none rgba(61, 67, 68, 0.8)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · stories_image",
      "size": "1238×604px",
      "position": "x 1403px, y 2841px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8px",
      "border": "0px none rgba(61, 67, 68, 0.8)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "8px",
      "4px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.15)"
    ],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · stories_image",
    "size": "1238×604px",
    "position": "x -1201px, y 2841px",
    "aspectRatio": 2,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "hidden",
    "source": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a885a95ec04581292659fe3_Rafael%20Tihanyi%20VP%20Finance%20%26%20Operations%2C%20Graphite.webp"
  },
  {
    "element": "video · Your browser does not support the video tag.",
    "size": "1238×604px",
    "position": "x -1201px, y 2841px",
    "aspectRatio": 2,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://res.cloudinary.com/dly6ckatf/video/upload/v1761818209/Graphite_Thumbnail_1_ub6yvq.mp4"
  },
  {
    "element": "img · stories_image",
    "size": "1238×604px",
    "position": "x 101px, y 2841px",
    "aspectRatio": 2,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "hidden",
    "source": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a8854aee9273fb53a8a74c4_Mark%20Paul_CFO%2C%20Streamside%20Parks-p-1600.webp"
  },
  {
    "element": "img · stories_image",
    "size": "1238×604px",
    "position": "x 1403px, y 2841px",
    "aspectRatio": 2,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "hidden",
    "source": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6ad254d00c63fd6a314cb8d9_tinyjpeg.jpg"
  },
  {
    "element": "video · Your browser does not support the video tag.",
    "size": "1238×150px",
    "position": "x 101px, y 2841px",
    "aspectRatio": 8.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "video · Your browser does not support the video tag.",
    "size": "1238×150px",
    "position": "x 1403px, y 2841px",
    "aspectRatio": 8.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "img · stories_logo",
    "size": "143×32px",
    "position": "x 649px, y 2775px",
    "aspectRatio": 4.5,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/69d4e7221b5c3249bfecab5a_graphite-logo.svg"
  },
  {
    "element": "img · stories_logo",
    "size": "97×40px",
    "position": "x 270px, y 2771px",
    "aspectRatio": 2.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a68e3305c272e529ee0879d_69c11e1c18e6690d18706663_slash-logo.svg"
  },
  {
    "element": "img · stories_logo",
    "size": "154×21px",
    "position": "x 1045px, y 2780px",
    "aspectRatio": 7.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a7c7fa87152abac387220f4_6a27e3496ea90a64d2c1c1f3_StreamsideLogo%201%201.svg"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 101px, y 2783px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 1323px, y 2783px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 182px, y 3360px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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-2711",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 2490,
      "width": 1440,
      "height": 1210
    },
    "role": null,
    "label": "Discover the ambitious teamssaving time & money on DualEntry View all customer stories .stories_top-",
    "border": "0px none rgba(61, 67, 68, 0.8)",
    "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": "rgb(29, 31, 32)"
  },
  "cards": [
    {
      "id": "ld-2797",
      "tag": "img",
      "rect": {
        "x": -1201,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "stories_image",
      "border": "0px none rgba(61, 67, 68, 0.8)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2829",
      "tag": "img",
      "rect": {
        "x": 101,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "stories_image",
      "border": "0px none rgba(61, 67, 68, 0.8)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2861",
      "tag": "img",
      "rect": {
        "x": 1403,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "stories_image",
      "border": "0px none rgba(61, 67, 68, 0.8)",
      "radius": "8px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-2797",
      "tag": "img",
      "rect": {
        "x": -1201,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "stories_image",
      "media": {
        "alt": "Rafael Tihanyi VP Finance & Operations, Graphite",
        "src": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a885a95ec04581292659fe3_Rafael%20Tihanyi%20VP%20Finance%20%26%20Operations%2C%20Graphite.webp",
        "naturalWidth": 1310,
        "naturalHeight": 872
      },
      "radius": "8px",
      "overflow": "hidden",
      "objectFit": "cover",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2799",
      "tag": "video",
      "rect": {
        "x": -1201,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "Your browser does not support the video tag.",
      "media": {
        "src": "https://res.cloudinary.com/dly6ckatf/video/upload/v1761818209/Graphite_Thumbnail_1_ub6yvq.mp4",
        "poster": "",
        "duration": 5.672333
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2829",
      "tag": "img",
      "rect": {
        "x": 101,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "stories_image",
      "media": {
        "alt": "Mark Paul CFO, Streamside Parks",
        "src": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a8854aee9273fb53a8a74c4_Mark%20Paul_CFO%2C%20Streamside%20Parks-p-1600.webp",
        "naturalWidth": 1310,
        "naturalHeight": 733
      },
      "radius": "8px",
      "overflow": "hidden",
      "objectFit": "cover",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2861",
      "tag": "img",
      "rect": {
        "x": 1403,
        "y": 2841,
        "width": 1238,
        "height": 604
      },
      "role": null,
      "label": "stories_image",
      "media": {
        "alt": "",
        "src": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6ad254d00c63fd6a314cb8d9_tinyjpeg.jpg",
        "naturalWidth": 0,
        "naturalHeight": 0
      },
      "radius": "8px",
      "overflow": "hidden",
      "objectFit": "cover",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2831",
      "tag": "video",
      "rect": {
        "x": 101,
        "y": 2841,
        "width": 1238,
        "height": 150
      },
      "role": null,
      "label": "Your browser does not support the video tag.",
      "media": {
        "src": "",
        "poster": "",
        "duration": null
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 8.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2863",
      "tag": "video",
      "rect": {
        "x": 1403,
        "y": 2841,
        "width": 1238,
        "height": 150
      },
      "role": null,
      "label": "Your browser does not support the video tag.",
      "media": {
        "src": "",
        "poster": "",
        "duration": null
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 8.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2740",
      "tag": "img",
      "rect": {
        "x": 649,
        "y": 2775,
        "width": 143,
        "height": 32
      },
      "role": null,
      "label": "stories_logo",
      "media": {
        "alt": "Graphite logo",
        "src": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/69d4e7221b5c3249bfecab5a_graphite-logo.svg",
        "naturalWidth": 143,
        "naturalHeight": 32
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 4.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2737",
      "tag": "img",
      "rect": {
        "x": 270,
        "y": 2771,
        "width": 97,
        "height": 40
      },
      "role": null,
      "label": "stories_logo",
      "media": {
        "alt": "Slash logo",
        "src": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a68e3305c272e529ee0879d_69c11e1c18e6690d18706663_slash-logo.svg",
        "naturalWidth": 116,
        "naturalHeight": 48
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2743",
      "tag": "img",
      "rect": {
        "x": 1045,
        "y": 2780,
        "width": 154,
        "height": 21
      },
      "role": null,
      "label": "stories_logo",
      "media": {
        "alt": "",
        "src": "https://cdn.prod.website-files.com/6706731cc8bb101d53bf2c2e/6a7c7fa87152abac387220f4_6a27e3496ea90a64d2c1c1f3_StreamsideLogo%201%201.svg",
        "naturalWidth": 154,
        "naturalHeight": 21
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 7.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2731",
      "tag": "svg",
      "rect": {
        "x": 101,
        "y": 2783,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2756",
      "tag": "svg",
      "rect": {
        "x": 1323,
        "y": 2783,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2840",
      "tag": "svg",
      "rect": {
        "x": 182,
        "y": 3360,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 2491,
    "bottom": 3700,
    "pageHeight": 6763
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2734",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 117,
        "y": 2741,
        "width": 1206,
        "height": 100
      },
      "role": "list",
      "label": "swiper-wrapper is-stories-logos w-dyn-items",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2735",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 117,
        "y": 2741,
        "width": 402,
        "height": 100
      },
      "role": "listitem",
      "label": "swiper-slide is-stories-logos w-dyn-item swiper-slide-active swiper-slide-visible swiper-slide-fully",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2738",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 519,
        "y": 2741,
        "width": 402,
        "height": 100
      },
      "role": "listitem",
      "label": "swiper-slide is-stories-logos w-dyn-item swiper-slide-next swiper-slide-visible swiper-slide-fully-v",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2741",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 921,
        "y": 2741,
        "width": 402,
        "height": 100
      },
      "role": "listitem",
      "label": "swiper-slide is-stories-logos w-dyn-item swiper-slide-visible swiper-slide-fully-visible swiper-slid",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2744",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 1323,
        "y": 2741,
        "width": 402,
        "height": 100
      },
      "role": "listitem",
      "label": "swiper-slide is-stories-logos w-dyn-item",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      10
    ],
    "representativeContentWidthsPx": [
      1238,
      1206,
      733,
      700,
      402
    ]
  },
  "coverage": {
    "cards": 3,
    "media": 12,
    "animations": 0,
    "elementsInSection": 33
  },
  "surfaces": {
    "radii": [
      "8px",
      "4px"
    ],
    "borders": [
      "1px solid rgba(255, 255, 255, 0.15)"
    ],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-29T16:48:55.968Z",
  "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: Vertical stack pattern: heading, tab navigation, media card with overlay caption, metric row; Tab-based switching between multiple customer logos/videos; Overlay caption + dual CTA (watch video / read case study) pattern on media card; Metric row with large numeral + small label beneath
- Dependencies: Client video assets for each tab; Company logos for tab navigation; Specific outcome metrics copy per customer
- Guidance: Reuse the stacked heading/tabs/media/metrics skeleton with a dark canvas; swap in new logos, video sources, and metric copy per tab without structural changes.

### 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 testimonials section inspired by the design evidence titled “Tabbed video testimonial”.

Purpose: A dark-themed section featuring a video testimonial player, navigated via tabbed company names above the video. Metric highlights sit below the video.

Structure: horizontal sequence. Source layout label: Vertical stack of heading, horizontal tabs, large video player, and a row of metrics at the bottom.. Preserve the sense of continuation with a visible next item, progress cue, or directional control.

Visual signature to preserve at the pattern level: Dark section with a large video thumbnail of a person speaking, surrounded by company tabs and statistic callouts.

Components: section-heading, tab-navigation, video-player, testimonial-quote, metric-stat.

Style direction: minimal, corporate, photographic.

Observed crop: 1440×1209px (1.191:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"56px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.6px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'","sampleId":"font-2","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.","sampleId":"font-7","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#1D1F20","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.","sampleId":"color-3","confidence":0.9} {"hex":"#E4EBEC","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.","sampleId":"color-9","confidence":0.9} {"hex":"#1C1D1E","name":"surface","role":"surface","source":"computed","evidence":"color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.","sampleId":"color-18","confidence":0.85}

Typography measured inside this section: {"id":"font-1","size":"32px","count":13,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"h4","top":3501,"text":"2 Person","property":"font"},{"tag":"h4","top":3501,"text":"$0","property":"font"},{"tag":"h4","top":3501,"text":"$600M","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"38.4px","letterSpacing":"normal"} {"id":"font-2","size":"48px","count":10,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"h2","top":969,"text":"The accounting suite that runs while you lead.","property":"font"},{"tag":"h2","top":2570,"text":"Discover the ambitious teamssaving time & money on DualEntry","property":"font"},{"tag":"h3","top":3193,"text":"How Slash runs a $600M ARR fintech on a finance team of two","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"52.8px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-11","hex":"#FFFFFF","alpha":0.5019607843137255,"count":18,"contexts":[{"tag":"div","top":667,"text":"","property":"background"},{"tag":"p","top":3539,"text":"finance team","property":"text"},{"tag":"span","top":6697,"text":"2026","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.5)"} {"id":"color-16","hex":"#FFFFFF","alpha":0.14901960784313725,"count":49,"contexts":[{"tag":"div","top":2490,"text":"Discover the ambitious teamssaving time & money on DualEntry View all customer stories .stories_top-","property":"border"},{"tag":"div","top":2740,"text":"","property":"background"},{"tag":"a","top":3339,"text":"Read case study .stories_btn2 .display-inlineflex{ transition: transform 200ms ease-in; } .stories_b","property":"border"}],"cssValue":"rgba(255, 255, 255, 0.15)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2490,"width":1440,"height":1210},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[10],"representativeContentWidthsPx":[1238,1206,733,700,402]}; surfaces {"radii":["8px","4px"],"borders":["1px solid rgba(255, 255, 255, 0.15)"],"shadows":[]}; media [{"tag":"img","rect":{"x":-1201,"y":2841,"width":1238,"height":604},"aspectRatio":2,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"},{"tag":"video","rect":{"x":-1201,"y":2841,"width":1238,"height":604},"aspectRatio":2,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":101,"y":2841,"width":1238,"height":604},"aspectRatio":2,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"},{"tag":"img","rect":{"x":1403,"y":2841,"width":1238,"height":604},"aspectRatio":2,"objectFit":"cover","objectPosition":"50% 50%","radius":"8px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Vertical stack pattern: heading, tab navigation, media card with overlay caption, metric row; Tab-based switching between multiple customer logos/videos; Overlay caption + dual CTA (watch video / read case study) pattern on media card; Metric row with large numeral + small label beneath.

Dependencies: Client video assets for each tab; Company logos for tab navigation; Specific outcome metrics copy per customer.

Adaptation guidance: Reuse the stacked heading/tabs/media/metrics skeleton with a dark canvas; swap in new logos, video sources, and metric copy per tab without structural changes.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.