# The world runs on credit. Our agents keep it moving. — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://paypath.ai/
Website: PayPath
Section ID: 73d7126a-e8e7-485c-ae4e-5058eaf4a5a1
Status: deterministic evidence captured; editorial AI review pending

## Purpose

This is a features section on the Home page. Use the attached crop and measured browser facts to reconstruct its composition. Do not infer unmeasured source values.

## Layout

1440×1438px root; flex

## Visual signature

corporate, typographic, minimal, tech-noir, ui-centric treatment at 1440×1438px. The crop spans 2000–3438px of a 10155px page.

## Components

- Navigation Bar
- Hero With Background Imagery
- Stat Block
- Product UI
- Primary Button
- Feature Card
- Testimonial Card
- Logo Strip
- Badge
- FAQ Accordion
- Footer
- Interactive Timeline Stepper
- Bento Grid Layout
- Scroll Activated UI Mockups

## Evidence note

The geometry, typography, colors, media, and animation parameters below come from saved HTML/CSS/browser evidence when present. Website-level roles are supplied separately. Editorial section judgment remains pending unless the MCP resolves this source ID to a promoted canonical record.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: features
- Structure: 1440×1438px root; flex
- Layout: 1440×1438px root; flex
- Styles: corporate, typographic, minimal, tech-noir, ui-centric
- Components: Navigation Bar, Hero With Background Imagery, Stat Block, Product UI, Primary Button, Feature Card, Testimonial Card, Logo Strip, Badge, FAQ Accordion, Footer, Interactive Timeline Stepper, Bento Grid Layout, Scroll Activated UI Mockups
- Purpose: features section from the Home page of PayPath.
- Visual signature: rgb(17, 28, 21) with 1440×1438px root; flex. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×1438px; aspect ratio 1.001:1
- Page bounds: 2000–3438px of 10155px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

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

```json
{
  "sectionScale": [
    {
      "role": "section heading",
      "family": "Season Mix Regular",
      "stack": "\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif",
      "size": "48px",
      "weight": "420",
      "lineHeight": "55.2px",
      "letterSpacing": "-1.4px",
      "sample": "x",
      "element": "span",
      "occurrences": 11,
      "sourceId": "font-1"
    },
    {
      "role": "section heading",
      "family": "Season Mix Regular",
      "stack": "\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif",
      "size": "64px",
      "weight": "420",
      "lineHeight": "73.6px",
      "letterSpacing": "-1.9px",
      "sample": "PayPath makes it happen",
      "element": "p",
      "occurrences": 2,
      "sourceId": "font-3"
    },
    {
      "role": "section heading",
      "family": "Season Mix Regular",
      "stack": "\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif",
      "size": "48px",
      "weight": "420",
      "lineHeight": "48px",
      "letterSpacing": "-1.4px",
      "sample": "0",
      "element": "span",
      "occurrences": 71,
      "sourceId": "font-16"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "72px",
      "family": "Season Mix Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "420",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Largest 'Season Mix' text at 72px for the main hero headline.",
      "sampleId": "font-4",
      "confidence": 1,
      "lineHeight": "72px",
      "letterSpacing": "-2.2px"
    },
    {
      "role": "heading",
      "size": "64px",
      "family": "Season Mix Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "420",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 'Season Mix' at 64px for major section headings.",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "73.6px",
      "letterSpacing": "-1.9px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: 'Geist' at 16px used for readable descriptive text and FAQ questions.",
      "sampleId": "font-12",
      "confidence": 0.9,
      "lineHeight": "24px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "mono",
      "size": "11px",
      "family": "JetBrains Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: 'JetBrains Mono' at 11px uppercase used for small labels and UI details.",
      "sampleId": "font-10",
      "confidence": 0.9,
      "lineHeight": "15.4px",
      "letterSpacing": "0.3px"
    }
  ]
}
```

### 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": "#FCFAEE",
      "cssValue": "rgb(252, 250, 238)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 85,
      "sourceId": "color-6"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#0E1711",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FCFAEE",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text.",
      "sampleId": "color-6",
      "confidence": 0.95
    },
    {
      "hex": "#A2F08C",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states.",
      "sampleId": "color-13",
      "confidence": 0.95
    },
    {
      "hex": "#F5F4F4",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section.",
      "sampleId": "color-2",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and badges are fully rounded (pill shapes); floating UI panels feature medium border radii (e.g., 12px-16px).",
  "density": "Overall low density to emphasize the premium, cinematic feel, but high density within the specific 'product UI' mockups.",
  "evidence": "Observed from the full-page layout, distinct UI card shapes, button styling in the nav and hero, and structural alignment.",
  "borderStyle": "Subtle borders primarily used on the light background section (FAQ dividers) and very subtle, semi-transparent borders on floating dark UI cards to define edges.",
  "buttonStyle": "Pill-shaped, solid fill (neon green or white) with contrasting text, or ghost buttons with subtle borders.",
  "cornerStyle": "Combination of sharp edges on large images and distinct, varied rounding on UI components (some slightly rounded, some heavily pill-shaped).",
  "contentWidth": "Wide, fluid layouts for backgrounds with centered, constrained text blocks and asymmetrical grids extending near the edges.",
  "spacingRhythm": "Generous spacing with large vertical gaps between major sections to allow background effects to breathe; tighter, structured padding within 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×1438px; flex; padding {"top":"0px","right":"24px","bottom":"0px","left":"24px"}; gap 10px; background rgb(17, 28, 21); radius 0px.
- Observed gaps: 8, 10px.
- Representative content widths: 845, 343, 338, 331, 321, 246px.
- Layout containers: 6; cards/surfaces: 0; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 5000,
      "bottom": 6438,
      "pageHeight": 13155
    }
  },
  "container": {
    "size": "1440×1438px",
    "position": "x 0px, y 5000px",
    "display": "flex",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "right": "24px",
      "bottom": "0px",
      "left": "24px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "10px",
    "columns": "not captured",
    "background": "rgb(17, 28, 21)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "clip"
  },
  "spacing": {
    "observedGapsPx": [
      8,
      10
    ],
    "representativeContentWidthsPx": [
      845,
      343,
      338,
      331,
      321,
      246
    ]
  },
  "columns": [
    {
      "element": "section · [ Solutions ]The world runs on credit. Our agents keep it moving.Build custom agentsBuild custom age",
      "size": "1440×1438px",
      "position": "x 0px, y 5000px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "10px"
    },
    {
      "element": "a · AgentsAgents that handle the calls, texts, and follow-ups, so your team doesn't have to.",
      "size": "343×95px",
      "position": "x 24px, y 5286px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "8px"
    },
    {
      "element": "a · WorkflowsEnd-to-end lifecycle stages, from origination through legal, running on their own.",
      "size": "343×52px",
      "position": "x 24px, y 5381px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "8px"
    },
    {
      "element": "a · AutomationsRules and triggers that fire in real time, before anything reaches a person.",
      "size": "343×52px",
      "position": "x 24px, y 5433px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "8px"
    },
    {
      "element": "a · AnalyticsLive visibility into yield, agent performance, and portfolio health.",
      "size": "343×52px",
      "position": "x 24px, y 5484px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "8px"
    },
    {
      "element": "a · PlatformThe infrastructure layer — integrations, security, and access controls.",
      "size": "343×52px",
      "position": "x 24px, y 5536px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "8px"
    }
  ]
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "338×405px",
    "position": "x 387px, y 5302px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/mgUQEU78SfBkBiv8oiZnxIvd4.png?width=441&height=540"
  },
  {
    "element": "img · img",
    "size": "338×405px",
    "position": "x 733px, y 5302px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/Z8qipOrsVTETorrdEOshFaZZdU.png?width=441&height=540"
  },
  {
    "element": "img · img",
    "size": "338×405px",
    "position": "x 1078px, y 5302px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/zqzA4UFomm5xpmgbKW9Q2w2p7oE.png?width=441&height=540"
  },
  {
    "element": "img · img",
    "size": "338×405px",
    "position": "x 387px, y 5826px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/rv9yCiUGAq9nAVrxZU8uLBGB7Yc.png?width=441&height=540"
  },
  {
    "element": "img · img",
    "size": "338×405px",
    "position": "x 733px, y 5826px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/SzKgsIeHHjKZyBG273wefK7140.png?width=441&height=540"
  },
  {
    "element": "img · img",
    "size": "338×405px",
    "position": "x 1078px, y 5826px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/k8toTroYpGEU94JDqkTEXXUmzq8.png?width=441&height=540"
  },
  {
    "element": "img · img",
    "size": "40×40px",
    "position": "x 433px, y 5467px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/sZ6lCGgcDApWqZhKHyo0qQGcJ0.png?width=148&height=148"
  },
  {
    "element": "img · img",
    "size": "40×40px",
    "position": "x 639px, y 5467px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/g9mLVLDugp8RgukRvc1VoeRa70.png?width=148&height=148"
  },
  {
    "element": "img · img",
    "size": "40×40px",
    "position": "x 431px, y 6009px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/5UbgPYGAMD8Z2n8O3ZKL4lB4c.png?width=152&height=152"
  },
  {
    "element": "img · img",
    "size": "40×40px",
    "position": "x 463px, y 6041px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/5UbgPYGAMD8Z2n8O3ZKL4lB4c.png?width=152&height=152"
  },
  {
    "element": "img · img",
    "size": "40×40px",
    "position": "x 463px, y 5977px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/5UbgPYGAMD8Z2n8O3ZKL4lB4c.png?width=152&height=152"
  },
  {
    "element": "svg · svg",
    "size": "47×34px",
    "position": "x 1122px, y 5943px",
    "aspectRatio": 1.4,
    "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
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-14T16:18:11.852Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 5000,
    "bottom": 6438,
    "pageHeight": 13155
  },
  "root": {
    "id": "ld-600",
    "tag": "section",
    "role": null,
    "label": "[ Solutions ]The world runs on credit. Our agents keep it moving.Build custom agentsBuild custom age",
    "rect": {
      "x": 0,
      "y": 5000,
      "width": 1440,
      "height": 1438
    },
    "display": "flex",
    "position": "relative",
    "padding": {
      "top": "0px",
      "right": "24px",
      "bottom": "0px",
      "left": "24px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "10px",
    "columns": null,
    "background": "rgb(17, 28, 21)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "clip"
  },
  "spacing": {
    "gapsPx": [
      8,
      10
    ],
    "representativeContentWidthsPx": [
      845,
      343,
      338,
      331,
      321,
      246
    ]
  },
  "columns": [
    {
      "id": "ld-600",
      "tag": "section",
      "role": null,
      "label": "[ Solutions ]The world runs on credit. Our agents keep it moving.Build custom agentsBuild custom age",
      "rect": {
        "x": 0,
        "y": 5000,
        "width": 1440,
        "height": 1438
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "10px"
    },
    {
      "id": "ld-627",
      "tag": "a",
      "role": null,
      "label": "AgentsAgents that handle the calls, texts, and follow-ups, so your team doesn't have to.",
      "rect": {
        "x": 24,
        "y": 5286,
        "width": 343,
        "height": 95
      },
      "display": "flex",
      "columns": null,
      "direction": "row",
      "gap": "8px"
    },
    {
      "id": "ld-637",
      "tag": "a",
      "role": null,
      "label": "WorkflowsEnd-to-end lifecycle stages, from origination through legal, running on their own.",
      "rect": {
        "x": 24,
        "y": 5381,
        "width": 343,
        "height": 52
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "8px"
    },
    {
      "id": "ld-647",
      "tag": "a",
      "role": null,
      "label": "AutomationsRules and triggers that fire in real time, before anything reaches a person.",
      "rect": {
        "x": 24,
        "y": 5433,
        "width": 343,
        "height": 52
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "8px"
    },
    {
      "id": "ld-657",
      "tag": "a",
      "role": null,
      "label": "AnalyticsLive visibility into yield, agent performance, and portfolio health.",
      "rect": {
        "x": 24,
        "y": 5484,
        "width": 343,
        "height": 52
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "8px"
    },
    {
      "id": "ld-667",
      "tag": "a",
      "role": null,
      "label": "PlatformThe infrastructure layer — integrations, security, and access controls.",
      "rect": {
        "x": 24,
        "y": 5536,
        "width": 343,
        "height": 52
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "8px"
    }
  ],
  "cards": [],
  "surfaces": {
    "radii": [
      "8px",
      "90px"
    ],
    "borders": [],
    "shadows": []
  },
  "media": [
    {
      "id": "ld-683",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 387,
        "y": 5302,
        "width": 338,
        "height": 405
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/mgUQEU78SfBkBiv8oiZnxIvd4.png?width=441&height=540",
        "naturalWidth": 337,
        "naturalHeight": 413,
        "alt": ""
      }
    },
    {
      "id": "ld-725",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 733,
        "y": 5302,
        "width": 338,
        "height": 405
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/Z8qipOrsVTETorrdEOshFaZZdU.png?width=441&height=540",
        "naturalWidth": 337,
        "naturalHeight": 413,
        "alt": ""
      }
    },
    {
      "id": "ld-779",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 1078,
        "y": 5302,
        "width": 338,
        "height": 405
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/zqzA4UFomm5xpmgbKW9Q2w2p7oE.png?width=441&height=540",
        "naturalWidth": 337,
        "naturalHeight": 413,
        "alt": ""
      }
    },
    {
      "id": "ld-814",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 387,
        "y": 5826,
        "width": 338,
        "height": 405
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/rv9yCiUGAq9nAVrxZU8uLBGB7Yc.png?width=441&height=540",
        "naturalWidth": 337,
        "naturalHeight": 413,
        "alt": ""
      }
    },
    {
      "id": "ld-881",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 733,
        "y": 5826,
        "width": 338,
        "height": 405
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/SzKgsIeHHjKZyBG273wefK7140.png?width=441&height=540",
        "naturalWidth": 337,
        "naturalHeight": 413,
        "alt": ""
      }
    },
    {
      "id": "ld-999",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 1078,
        "y": 5826,
        "width": 338,
        "height": 405
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/k8toTroYpGEU94JDqkTEXXUmzq8.png?width=441&height=540",
        "naturalWidth": 337,
        "naturalHeight": 413,
        "alt": ""
      }
    },
    {
      "id": "ld-706",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 433,
        "y": 5467,
        "width": 40,
        "height": 40
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/sZ6lCGgcDApWqZhKHyo0qQGcJ0.png?width=148&height=148",
        "naturalWidth": 148,
        "naturalHeight": 148,
        "alt": ""
      }
    },
    {
      "id": "ld-715",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 639,
        "y": 5467,
        "width": 40,
        "height": 40
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/g9mLVLDugp8RgukRvc1VoeRa70.png?width=148&height=148",
        "naturalWidth": 148,
        "naturalHeight": 148,
        "alt": ""
      }
    },
    {
      "id": "ld-828",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 431,
        "y": 6009,
        "width": 40,
        "height": 40
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/5UbgPYGAMD8Z2n8O3ZKL4lB4c.png?width=152&height=152",
        "naturalWidth": 152,
        "naturalHeight": 152,
        "alt": ""
      }
    },
    {
      "id": "ld-845",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 463,
        "y": 6041,
        "width": 40,
        "height": 40
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/5UbgPYGAMD8Z2n8O3ZKL4lB4c.png?width=152&height=152",
        "naturalWidth": 152,
        "naturalHeight": 152,
        "alt": ""
      }
    },
    {
      "id": "ld-862",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 463,
        "y": 5977,
        "width": 40,
        "height": 40
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/5UbgPYGAMD8Z2n8O3ZKL4lB4c.png?width=152&height=152",
        "naturalWidth": 152,
        "naturalHeight": 152,
        "alt": ""
      }
    },
    {
      "id": "ld-1022",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 1122,
        "y": 5943,
        "width": 47,
        "height": 34
      },
      "aspectRatio": 1.4,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 146,
    "cards": 0,
    "media": 12,
    "animations": 0
  },
  "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."
  ]
}
```

### 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: Not assessed
- What transfers: Documented hierarchy and composition
- Dependencies: None recorded
- Guidance: Adapt the pattern to the new product and content.

### 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 features section inspired by the design evidence titled “The world runs on credit. Our agents keep it moving.”.

Purpose: features section from the Home page of PayPath.

Structure: 1440×1438px root; flex. Source layout label: 1440×1438px root; flex. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: rgb(17, 28, 21) with 1440×1438px root; flex. Inspect the crop for image and content hierarchy.

Components: Navigation Bar, Hero With Background Imagery, Stat Block, Product UI, Primary Button, Feature Card, Testimonial Card, Logo Strip, Badge, FAQ Accordion, Footer, Interactive Timeline Stepper, Bento Grid Layout, Scroll Activated UI Mockups.

Style direction: corporate, typographic, minimal, tech-noir, ui-centric.

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

Typography evidence: {"role":"display","size":"72px","family":"Season Mix Regular","source":"computed","traits":"Regular","weight":"420","evidence":"font-4: computed CSS at 1440×1000; AI role: Largest 'Season Mix' text at 72px for the main hero headline.","sampleId":"font-4","confidence":1,"lineHeight":"72px","letterSpacing":"-2.2px"} {"role":"heading","size":"64px","family":"Season Mix Regular","source":"computed","traits":"Regular","weight":"420","evidence":"font-3: computed CSS at 1440×1000; AI role: 'Season Mix' at 64px for major section headings.","sampleId":"font-3","confidence":0.95,"lineHeight":"73.6px","letterSpacing":"-1.9px"} {"role":"body","size":"16px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: 'Geist' at 16px used for readable descriptive text and FAQ questions.","sampleId":"font-12","confidence":0.9,"lineHeight":"24px","letterSpacing":"-0.5px"} {"role":"mono","size":"11px","family":"JetBrains Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-10: computed CSS at 1440×1000; AI role: 'JetBrains Mono' at 11px uppercase used for small labels and UI details.","sampleId":"font-10","confidence":0.9,"lineHeight":"15.4px","letterSpacing":"0.3px"}

Color evidence: {"hex":"#0E1711","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page.","sampleId":"color-1","confidence":0.95} {"hex":"#FCFAEE","name":"text","role":"text","source":"computed","evidence":"color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text.","sampleId":"color-6","confidence":0.95} {"hex":"#A2F08C","name":"primary action","role":"primary-action","source":"computed","evidence":"color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states.","sampleId":"color-13","confidence":0.95} {"hex":"#F5F4F4","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section.","sampleId":"color-2","confidence":0.9}

Typography measured inside this section: {"id":"font-1","family":"Season Mix Regular","fontStack":"\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif","weight":"420","size":"48px","lineHeight":"55.2px","letterSpacing":"-1.4px","traits":"Regular","count":11,"contexts":[{"tag":"span","text":"x","top":2933,"property":"font"},{"tag":"span","text":"%","top":2933,"property":"font"},{"tag":"span","text":"days","top":2933,"property":"font"}]} {"id":"font-3","family":"Season Mix Regular","fontStack":"\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif","weight":"420","size":"64px","lineHeight":"73.6px","letterSpacing":"-1.9px","traits":"Regular","count":2,"contexts":[{"tag":"p","text":"PayPath makes it happen","top":2463,"property":"font"},{"tag":"h2","text":"Maximum execution. Zero new headcount.","top":12294,"property":"font"}]} {"id":"font-16","family":"Season Mix Regular","fontStack":"\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif","weight":"420","size":"48px","lineHeight":"48px","letterSpacing":"-1.4px","traits":"Regular","count":71,"contexts":[{"tag":"span","text":"0","top":2795,"property":"font"},{"tag":"span","text":"1","top":2843,"property":"font"},{"tag":"span","text":"2","top":2891,"property":"font"}]}

Colors measured inside this section: {"id":"color-6","hex":"#FCFAEE","alpha":1,"cssValue":"rgb(252, 250, 238)","count":85,"contexts":[{"tag":"h1","text":"The autonomous workforce powering modern finance.","top":720,"property":"text"},{"tag":"p","text":"Deploy compliant AI agents to drive origination, automate servicing, and maximize recovery across th","top":830,"property":"text"},{"tag":"span","text":"0","top":2795,"property":"text"}]}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5000,"width":1440,"height":1438},"padding":{"top":"0px","right":"24px","bottom":"0px","left":"24px"},"gap":"10px","columns":null,"overflow":"clip"}; spacing {"gapsPx":[8,10],"representativeContentWidthsPx":[845,343,338,331,321,246]}; surfaces {"radii":["8px","90px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":387,"y":5302,"width":338,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":733,"y":5302,"width":338,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1078,"y":5302,"width":338,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":387,"y":5826,"width":338,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

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

Transfer the documented hierarchy and composition rather than source copy or assets.

No explicit dependencies were recorded.

Adapt the pattern to the new product and content.

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