# Integration logo marquee

Schema: Design Details SECTION.md v3.2
Website: DualEntry
Source: https://www.dualentry.com/
Source section IDs: 347cb339-75b6-4844-adf4-5a220a241975
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A single centered 40px heading sits above one full-width row, so the message and the proof read in a glance.
- Uniform 56px bordered tiles with an 8px gap give the row an even rhythm, and the logos' own colours stand out against the white canvas.
- One tile filled with dark teal becomes a focal point without breaking the grid, and generous whitespace keeps the row calm.

What a screenshot can't show:
- The row scrolls horizontally in a continuous loop, but the recording gives no speed, direction or pause-on-hover timing.
- The heading is 40px regular weight on a 48px line height with normal letter spacing, and the section has no padding of its own.

Borrow: Let a plain, evenly spaced row of recognisable marks carry the message, and add one filled tile as a single accent.
Leave alone: Don't copy the Twklausanne typeface (a commercial font; use a clean neutral grotesque instead), the dark teal accent tile, or the exact partner logo set.

## Classification

- Type: logo-marquee
- Layout: Centered heading above a full-width single-row scrolling logo track.
- Styles: minimal
- Confidence: 100%

## Purpose and structure

A section highlighting integration partners with a centered heading and a horizontally scrolling marquee of brand logos, some featuring drop shadows or hover states.

Visual signature: Centered text above a long row of colorful tech and finance logos on a white background.

## Components

- section-heading
- logo-marquee
- text-link

## 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

- 14.0–16.0s — Scrolling down reveals the 'Whatever you're running, we connect to it' section, displaying a horizontal scrolling carousel of integration partner logos. (95% confidence)

## Section quality

Overall: 53.95/100 (Competent)
Scored coverage: 100%

- Typography: 56 — Single centered heading using the site's standard display font at a large size; clean and legible but no distinctive typographic treatment, kerning, or hierarchy beyond one line plus a small link label. Next tier: Needs a more considered type pairing or scale contrast between heading and supporting link to earn higher marks.
- Composition: 57 — Centered heading above a row of evenly sized logo tiles with consistent white-bordered cards, one tile highlighted with a dark teal fill as a focal accent; balanced but a very common pattern with generous whitespace and simple alignment. Next tier: Layout is a standard centered-heading-over-logo-row template; lacks asymmetry, layered depth, or a structural idea that would distinguish it from countless similar integration sections.
- Motion: 52 — Gemini confirms a horizontal scrolling marquee of logos is visible on reveal, a simple continuous horizontal scroll with no other timestamped behavior described. Next tier: Only a generic auto-scroll marquee is evidenced; no varied easing, directional changes, hover interactions, or layered motion described to justify a higher score.
- Content: 55 — Logos are the content and are clearly the point, placed in uniform bordered tiles with one emphasized via color fill; content and layout are well matched for a recognizable integrations message. Next tier: Content integration relies entirely on swapping in brand marks within a generic card grid, rather than any bespoke content-driven layout choice.
- Originality: 42 — This is one of the most common SaaS website patterns (logo marquee with centered heading and a 'highlighted' tile); the single color-accented tile is a minor twist but not enough to feel distinctive. Next tier: Needs a genuinely novel idea beyond the near-universal logo-marquee convention, such as unusual grouping logic, interactive logo behavior, or unexpected layout geometry.
- Adaptability: 60 — Structure (heading, tile grid, marquee, link) is clearly modular and logo images are swappable assets; deterministic measurements show consistent 56px tile sizing and uniform borders, making the skin easy to separate from structure. Next tier: Would need clearer componentized card/border tokens and documented marquee animation parameters for full confidence.

Strengths:
- Clear, uniform logo tile treatment with consistent sizing and spacing that reads cleanly
- Dark teal highlighted tile creates a small but effective visual focal point in an otherwise neutral row
- Simple, legible heading communicates purpose directly

Weaknesses:
- Highly conventional logo-marquee pattern with no structural or conceptual differentiation
- Motion is a basic one-directional scroll with no variation
- Typography is a single plain heading line without hierarchy depth

Why it does not reach the next tier: The section executes a widely used integrations-marquee layout competently but introduces no original structural or interactive idea beyond one color-accented tile; every element (heading, cards, scroll) is a standard convention rather than something distinctive.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the tile grid and marquee scroll mechanism with swapped logo assets and brand-neutral accent color; straightforward to replicate without proprietary technical dependencies.

What transfers:
- Centered heading plus horizontal logo tile grid structure
- Uniform bordered tile sizing for logo display
- Single accent-color tile technique for visual emphasis
- Scrolling marquee behavior pattern

Dependencies:
- Specific partner brand logo assets
- Exact marquee animation timing/easing not specified
- Teal accent color 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%)
- Motion details beyond the single described scroll reveal are not available
- Exact animation speed/easing and hover state specifics are not provided in deterministic data
- Judgments based on static crop plus limited timestamped motion description

## 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: logo-marquee
- Source type: logo-marquee
- Structure: centered single-column
- Layout: Centered heading above a full-width single-row scrolling logo track.
- Styles: minimal
- Components: section-heading, logo-marquee, text-link
- Purpose: A section highlighting integration partners with a centered heading and a horizontally scrolling marquee of brand logos, some featuring drop shadows or hover states.
- Visual signature: Centered text above a long row of colorful tech and finance logos on a white background.
- Place on the page: 7 of 9, after Process (`dualentry-com:C06`), before Call to action (`dualentry-com:C08`)

### Crop and composition

- Crop: 1440×488px; aspect ratio 2.951:1
- Page bounds: 4992–5480px of 6763px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### 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": "40px",
      "weight": "400",
      "lineHeight": "48px",
      "letterSpacing": "normal",
      "sample": "Whatever you're running, we connect to it.",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-5"
    }
  ],
  "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": "#609199",
      "cssValue": "rgb(96, 145, 153)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-6"
    },
    {
      "value": "#2D3132",
      "cssValue": "rgb(45, 49, 50)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 10,
      "sourceId": "color-10"
    }
  ],
  "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×488px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8px.
- Representative content widths: 1238px.
- Layout containers: 1; cards/surfaces: 0; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 4992,
      "bottom": 5480,
      "pageHeight": 6763
    }
  },
  "container": {
    "size": "1440×488px",
    "position": "x 0px, y 4992px",
    "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 rgba(61, 67, 68, 0.8)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      1238
    ]
  },
  "columns": [
    {
      "element": "a · Explore 13,000+ integrations /* Initial styles for arrows inside the button wrapper */ [button-hover",
      "size": "1238×24px",
      "position": "x 101px, y 5376px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "8px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "2px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "128×128px",
    "position": "x 656px, y 5188px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · width-auto height-auto",
    "size": "56×56px",
    "position": "x -5px, y 5224px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175bc4384ba2f355123_powerbi-p-500.avif"
  },
  {
    "element": "img · img",
    "size": "56×56px",
    "position": "x 849px, y 5224px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175da144cd85b895faf_looker.avif"
  },
  {
    "element": "img · img",
    "size": "56×56px",
    "position": "x 971px, y 5224px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175bc4384ba2f355123_powerbi.avif"
  },
  {
    "element": "img · width-auto height-auto",
    "size": "56×56px",
    "position": "x 901px, y 5224px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175c0e5e0d77939453f_snowflake.avif"
  },
  {
    "element": "img · img",
    "size": "56×40px",
    "position": "x 483px, y 5232px",
    "aspectRatio": 1.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a6ce3193792b389f97_Vector-2.svg"
  },
  {
    "element": "img · width-auto height-auto",
    "size": "50×42px",
    "position": "x 538px, y 5231px",
    "aspectRatio": 1.2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a6e23c423ef37d1bc5_Vector-6.svg"
  },
  {
    "element": "img · img",
    "size": "53×35px",
    "position": "x 607px, y 5235px",
    "aspectRatio": 1.5,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a6b5b2d5b0be84c3ae_Vector-3.svg"
  },
  {
    "element": "img · img",
    "size": "45×38px",
    "position": "x 733px, y 5233px",
    "aspectRatio": 1.2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a686c4ea722dc62561_Mask%20group.svg"
  },
  {
    "element": "img · width-auto height-auto",
    "size": "50×32px",
    "position": "x 660px, y 5236px",
    "aspectRatio": 1.6,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a620af1fa2e888d196_Citi%201.svg"
  },
  {
    "element": "img · width-auto height-auto",
    "size": "56×28px",
    "position": "x 117px, y 5238px",
    "aspectRatio": 2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c281741cbafb6fa088716b_metabase.avif"
  },
  {
    "element": "img · img",
    "size": "56×28px",
    "position": "x 1093px, y 5238px",
    "aspectRatio": 2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c281741cbafb6fa088716b_metabase.avif"
  }
]
```

#### 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-3139",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 4992,
      "width": 1440,
      "height": 488
    },
    "role": null,
    "label": "Whatever you're running, we connect to it. .vertical-marquee_left .vertical-marquee_part { animation",
    "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": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-3222",
      "tag": "svg",
      "rect": {
        "x": 656,
        "y": 5188,
        "width": 128,
        "height": 128
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3163",
      "tag": "img",
      "rect": {
        "x": -5,
        "y": 5224,
        "width": 56,
        "height": 56
      },
      "role": null,
      "label": "width-auto height-auto",
      "media": {
        "alt": "Power BI logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175bc4384ba2f355123_powerbi-p-500.avif",
        "naturalWidth": 60,
        "naturalHeight": 60
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3178",
      "tag": "img",
      "rect": {
        "x": 849,
        "y": 5224,
        "width": 56,
        "height": 56
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Looker logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175da144cd85b895faf_looker.avif",
        "naturalWidth": 800,
        "naturalHeight": 800
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3180",
      "tag": "img",
      "rect": {
        "x": 971,
        "y": 5224,
        "width": 56,
        "height": 56
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Power BI logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175bc4384ba2f355123_powerbi.avif",
        "naturalWidth": 1440,
        "naturalHeight": 1440
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3196",
      "tag": "img",
      "rect": {
        "x": 901,
        "y": 5224,
        "width": 56,
        "height": 56
      },
      "role": null,
      "label": "width-auto height-auto",
      "media": {
        "alt": "Snowflake logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c28175c0e5e0d77939453f_snowflake.avif",
        "naturalWidth": 640,
        "naturalHeight": 640
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3172",
      "tag": "img",
      "rect": {
        "x": 483,
        "y": 5232,
        "width": 56,
        "height": 40
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Salesforce logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a6ce3193792b389f97_Vector-2.svg",
        "naturalWidth": 62,
        "naturalHeight": 44
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3190",
      "tag": "img",
      "rect": {
        "x": 538,
        "y": 5231,
        "width": 50,
        "height": 42
      },
      "role": null,
      "label": "width-auto height-auto",
      "media": {
        "alt": "Black curved logo mark",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a6e23c423ef37d1bc5_Vector-6.svg",
        "naturalWidth": 50,
        "naturalHeight": 42
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3174",
      "tag": "img",
      "rect": {
        "x": 607,
        "y": 5235,
        "width": 53,
        "height": 35
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Autodesk logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a6b5b2d5b0be84c3ae_Vector-3.svg",
        "naturalWidth": 53,
        "naturalHeight": 35
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3176",
      "tag": "img",
      "rect": {
        "x": 733,
        "y": 5233,
        "width": 45,
        "height": 38
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Blue letter A logo mark",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a686c4ea722dc62561_Mask%20group.svg",
        "naturalWidth": 45,
        "naturalHeight": 38
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3192",
      "tag": "img",
      "rect": {
        "x": 660,
        "y": 5236,
        "width": 50,
        "height": 32
      },
      "role": null,
      "label": "width-auto height-auto",
      "media": {
        "alt": "Citi logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c659a620af1fa2e888d196_Citi%201.svg",
        "naturalWidth": 50,
        "naturalHeight": 32
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.6,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3165",
      "tag": "img",
      "rect": {
        "x": 117,
        "y": 5238,
        "width": 56,
        "height": 28
      },
      "role": null,
      "label": "width-auto height-auto",
      "media": {
        "alt": "Metabase logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c281741cbafb6fa088716b_metabase.avif",
        "naturalWidth": 512,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-3182",
      "tag": "img",
      "rect": {
        "x": 1093,
        "y": 5238,
        "width": 56,
        "height": 28
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Metabase logo",
        "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/69c281741cbafb6fa088716b_metabase.avif",
        "naturalWidth": 512,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 4992,
    "bottom": 5480,
    "pageHeight": 6763
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-3235",
      "gap": "8px",
      "tag": "a",
      "rect": {
        "x": 101,
        "y": 5376,
        "width": 1238,
        "height": 24
      },
      "role": null,
      "label": "Explore 13,000+ integrations /* Initial styles for arrows inside the button wrapper */ [button-hover",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      8
    ],
    "representativeContentWidthsPx": [
      1238
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 12,
    "animations": 0,
    "elementsInSection": 27
  },
  "surfaces": {
    "radii": [
      "2px"
    ],
    "borders": [],
    "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

1. **scroll** — Scrolling down reveals the 'Whatever you're running, we connect to it' section, displaying a horizontal scrolling carousel of integration partner logos. (14s–16s; 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: low
- What transfers: Centered heading plus horizontal logo tile grid structure; Uniform bordered tile sizing for logo display; Single accent-color tile technique for visual emphasis; Scrolling marquee behavior pattern
- Dependencies: Specific partner brand logo assets; Exact marquee animation timing/easing not specified; Teal accent color token
- Guidance: Reuse the tile grid and marquee scroll mechanism with swapped logo assets and brand-neutral accent color; straightforward to replicate without proprietary technical dependencies.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original logo-marquee section inspired by the design evidence titled “Integration logo marquee”.

Purpose: A section highlighting integration partners with a centered heading and a horizontally scrolling marquee of brand logos, some featuring drop shadows or hover states.

Structure: centered single-column. Source layout label: Centered heading above a full-width single-row scrolling logo track.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Centered text above a long row of colorful tech and finance logos on a white background.

Components: section-heading, logo-marquee, text-link.

Style direction: minimal.

Observed crop: 1440×488px (2.951: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-5","size":"40px","count":1,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"h2","top":5072,"text":"Whatever you're running, we connect to it.","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"48px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-6","hex":"#609199","alpha":1,"count":1,"contexts":[{"tag":"section","top":5480,"text":"The last ERP decision you'll ever make.Please enter a valid business email address.Schedule demo Tha","property":"background"}],"cssValue":"rgb(96, 145, 153)"} {"id":"color-10","hex":"#2D3132","alpha":1,"count":10,"contexts":[{"tag":"div","top":840,"text":"See customer stories","property":"text"},{"tag":"path","top":845,"text":"","property":"svg-fill"},{"tag":"h2","top":5072,"text":"Whatever you're running, we connect to it.","property":"text"}],"cssValue":"rgb(45, 49, 50)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":4992,"width":1440,"height":488},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8],"representativeContentWidthsPx":[1238]}; surfaces {"radii":["2px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":656,"y":5188,"width":128,"height":128},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":-5,"y":5224,"width":56,"height":56},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":849,"y":5224,"width":56,"height":56},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":971,"y":5224,"width":56,"height":56},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: Scrolling down reveals the 'Whatever you're running, we connect to it' section, displaying a horizontal scrolling carousel of integration partner logos. (95% confidence)

Transfer these principles: Centered heading plus horizontal logo tile grid structure; Uniform bordered tile sizing for logo display; Single accent-color tile technique for visual emphasis; Scrolling marquee behavior pattern.

Dependencies: Specific partner brand logo assets; Exact marquee animation timing/easing not specified; Teal accent color token.

Adaptation guidance: Reuse the tile grid and marquee scroll mechanism with swapped logo assets and brand-neutral accent color; straightforward to replicate without proprietary technical dependencies.

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