# PayPath Hero — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://paypath.ai/
Website: PayPath
Section ID: 4330e9c1-d772-4083-812f-61933aa3ec32
Status: deterministic evidence captured; editorial AI review pending

## Purpose

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

## Layout

1656×1150px root; flex

## Visual signature

corporate, typographic, minimal, tech-noir, ui-centric treatment at 1440×2000px. The crop spans 0–2000px 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: hero
- Source type: hero
- Structure: 1656×1150px root; flex
- Layout: 1656×1150px 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: hero section from the Home page of PayPath.
- Visual signature: rgb(6, 47, 38) with 1656×1150px root; flex. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×2000px; aspect ratio 0.72:1
- Page bounds: 0–2000px 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": "72px",
      "weight": "420",
      "lineHeight": "72px",
      "letterSpacing": "-2.2px",
      "sample": "The autonomous workforce powering modern finance.",
      "element": "h1",
      "occurrences": 1,
      "sourceId": "font-4"
    },
    {
      "role": "body/supporting copy",
      "family": "Geist",
      "stack": "Geist, \"Geist Placeholder\", sans-serif",
      "size": "14px",
      "weight": "400",
      "lineHeight": "19.6px",
      "letterSpacing": "-0.1px",
      "sample": "Solutions",
      "element": "p",
      "occurrences": 118,
      "sourceId": "font-6"
    },
    {
      "role": "body/supporting copy",
      "family": "Geist",
      "stack": "Geist, \"Geist Placeholder\", sans-serif",
      "size": "12px",
      "weight": "400",
      "lineHeight": "16.8px",
      "letterSpacing": "-0.1px",
      "sample": "•",
      "element": "p",
      "occurrences": 32,
      "sourceId": "font-7"
    },
    {
      "role": "body/supporting copy",
      "family": "Geist",
      "stack": "Geist, \"Geist Placeholder\", sans-serif",
      "size": "15px",
      "weight": "400",
      "lineHeight": "19.5px",
      "letterSpacing": "-0.3px",
      "sample": "Sofia Reyes just enrolled",
      "element": "p",
      "occurrences": 12,
      "sourceId": "font-9"
    },
    {
      "role": "body/supporting copy",
      "family": "JetBrains Mono",
      "stack": "\"JetBrains Mono\", \"JetBrains Mono Placeholder\", monospace",
      "size": "11px",
      "weight": "500",
      "lineHeight": "15.4px",
      "letterSpacing": "0.3px",
      "sample": "Business",
      "element": "p",
      "occurrences": 12,
      "sourceId": "font-10"
    },
    {
      "role": "body/supporting copy",
      "family": "Geist",
      "stack": "Geist, \"Geist Placeholder\", sans-serif",
      "size": "12px",
      "weight": "400",
      "lineHeight": "13.2px",
      "letterSpacing": "normal",
      "sample": "Trigger",
      "element": "p",
      "occurrences": 10,
      "sourceId": "font-11"
    },
    {
      "role": "body/supporting copy",
      "family": "Geist",
      "stack": "Geist, \"Geist Placeholder\", sans-serif",
      "size": "16px",
      "weight": "400",
      "lineHeight": "24px",
      "letterSpacing": "normal",
      "sample": "Deploy compliant AI agents to drive origination, automate servicing, and maximize recovery across th",
      "element": "p",
      "occurrences": 2,
      "sourceId": "font-13"
    },
    {
      "role": "UI/supporting text",
      "family": "Geist",
      "stack": "Geist",
      "size": "15px",
      "weight": "400",
      "lineHeight": "19.5px",
      "letterSpacing": "-0.3px",
      "sample": "Welcome package & schedule sent",
      "element": "span",
      "occurrences": 12,
      "sourceId": "font-18"
    },
    {
      "role": "UI/supporting text",
      "family": "Geist",
      "stack": "Geist",
      "size": "13px",
      "weight": "400",
      "lineHeight": "18.2px",
      "letterSpacing": "-0.3px",
      "sample": "Origination",
      "element": "span",
      "occurrences": 4,
      "sourceId": "font-21"
    }
  ],
  "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": "#0E1711",
      "cssValue": "rgb(14, 23, 17)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 6,
      "sourceId": "color-1"
    },
    {
      "value": "#FCFAEE",
      "cssValue": "rgb(252, 250, 238)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 85,
      "sourceId": "color-6"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 175,
      "sourceId": "color-8"
    },
    {
      "value": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 84,
      "sourceId": "color-9"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "background"
      ],
      "occurrences": 15,
      "sourceId": "color-10"
    },
    {
      "value": "#A2F08C",
      "cssValue": "rgb(162, 240, 140)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 22,
      "sourceId": "color-13"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.1)",
      "alpha": 0.10196078431372549,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 43,
      "sourceId": "color-15"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "text"
      ],
      "occurrences": 12,
      "sourceId": "color-18"
    },
    {
      "value": "#14290A",
      "cssValue": "rgb(20, 41, 10)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 13,
      "sourceId": "color-20"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.08)",
      "alpha": 0.0784313725490196,
      "appliedAs": [
        "background"
      ],
      "occurrences": 10,
      "sourceId": "color-23"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.12)",
      "alpha": 0.12156862745098039,
      "appliedAs": [
        "background"
      ],
      "occurrences": 3,
      "sourceId": "color-24"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "text"
      ],
      "occurrences": 10,
      "sourceId": "color-25"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.15)",
      "alpha": 0.14901960784313725,
      "appliedAs": [
        "background"
      ],
      "occurrences": 3,
      "sourceId": "color-26"
    },
    {
      "value": "#D0D0D0",
      "cssValue": "rgb(208, 208, 208)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 1,
      "sourceId": "color-29"
    }
  ],
  "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: 1656×1150px; flex; padding {"top":"0px","right":"40px","bottom":"0px","left":"40px"}; gap 10px; background rgb(6, 47, 38); radius 0px.
- Observed gaps: 8, 10px.
- Representative content widths: 1253, 820, 600, 520, 298px.
- Layout containers: 5; cards/surfaces: 0; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 5000,
      "pageHeight": 13155
    }
  },
  "container": {
    "size": "1656×1150px",
    "position": "x -108px, y -75px",
    "display": "flex",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "right": "40px",
      "bottom": "0px",
      "left": "40px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "10px",
    "columns": "not captured",
    "background": "rgb(6, 47, 38)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "clip"
  },
  "spacing": {
    "observedGapsPx": [
      8,
      10
    ],
    "representativeContentWidthsPx": [
      1253,
      820,
      600,
      520,
      298
    ]
  },
  "columns": [
    {
      "element": "nav · SolutionsSolutionsIntegrationsIntegrationsIndustriesIndustriesPlatformPlatformSecuritySecurityLog in",
      "size": "1440×56px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "10px"
    },
    {
      "element": "section · framer-6xuUT framer-y7tox framer-v-6tksai",
      "size": "1656×1150px",
      "position": "x -108px, y -75px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "10px"
    },
    {
      "element": "section · OriginationServicingCollectionsRecoveryAutomationsAgentsWorkflows7,834 accounts in your LMSImported",
      "size": "1440×1000px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "10px"
    },
    {
      "element": "section · BusinessCredit CardReal EstateMedicalconsumerautostudent loantaxDana ·Regional BankMarcus ·Collectio",
      "size": "1440×1000px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "10px"
    },
    {
      "element": "section · PayPath makes it happen​0123456789.0123456789xIncrease in portfolio performance​01234567890123456789",
      "size": "1440×1000px",
      "position": "x 0px, y 2000px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "10px"
    }
  ]
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "2981×1084px",
    "position": "x -770px, y 533px",
    "aspectRatio": 2.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/GoYX8B8Xtth6qLFn9v2LzviwQE.webp?width=3129&height=1138"
  },
  {
    "element": "img · img",
    "size": "1822×1265px",
    "position": "x -191px, y -132px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/tEejaSbEY2eSMYm3v4aHAdM5I.png?scale-down-to=2048&width=2560&height=1423"
  },
  {
    "element": "img · img",
    "size": "1440×1000px",
    "position": "x 0px, y 0px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/Ec6BRBatLvYRLBKm9h4Pk6S93A.png?scale-down-to=2048&width=2880&height=1600"
  },
  {
    "element": "img · img",
    "size": "40×40px",
    "position": "x 552px, y 380px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/FJ5TeHkQ2MBo0ny88ecZnmeYciQ.png?width=160&height=160"
  },
  {
    "element": "svg · svg",
    "size": "47×34px",
    "position": "x 0px, y 1000px",
    "aspectRatio": 1.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · img",
    "size": "38×38px",
    "position": "x 562px, y 397px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/XQmEb42dzcWYD40irIQBjkGmOaQ.png?width=160&height=160"
  },
  {
    "element": "img · img",
    "size": "35×35px",
    "position": "x 572px, y 414px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/LuM2jcldU7A0JTNZm8PgviQyeac.png?width=160&height=160"
  },
  {
    "element": "img · img",
    "size": "33×33px",
    "position": "x 582px, y 432px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/dTkNMMva4KDoMAS8CO0lHxOrx5M.png?width=160&height=160"
  },
  {
    "element": "img · img",
    "size": "27×28px",
    "position": "x 521px, y 722px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/orkWYSsaLN1Q31tH05vzgs7buw.png?scale-down-to=512&width=560&height=560"
  },
  {
    "element": "img · img",
    "size": "28×27px",
    "position": "x 470px, y 301px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/3FqHB0yZIt6oaFuWMHIRS8j4HgQ.png?scale-down-to=512&width=560&height=560"
  },
  {
    "element": "img · img",
    "size": "27×28px",
    "position": "x 891px, y 250px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/JJmpaU7vns24YceiiBc7jYHshz0.png?scale-down-to=512&width=560&height=560"
  },
  {
    "element": "img · img",
    "size": "28×27px",
    "position": "x 942px, y 671px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/XuSYcAxYRVe4nGROY2c8E4eEsE.png?scale-down-to=512&width=560&height=560"
  }
]
```

#### 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": 0,
    "bottom": 5000,
    "pageHeight": 13155
  },
  "root": {
    "id": "ld-91",
    "tag": "section",
    "role": null,
    "label": "framer-6xuUT framer-y7tox framer-v-6tksai",
    "rect": {
      "x": -108,
      "y": -75,
      "width": 1656,
      "height": 1150
    },
    "display": "flex",
    "position": "relative",
    "padding": {
      "top": "0px",
      "right": "40px",
      "bottom": "0px",
      "left": "40px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "10px",
    "columns": null,
    "background": "rgb(6, 47, 38)",
    "radius": "0px",
    "border": "0px none rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "clip"
  },
  "spacing": {
    "gapsPx": [
      8,
      10
    ],
    "representativeContentWidthsPx": [
      1253,
      820,
      600,
      520,
      298
    ]
  },
  "columns": [
    {
      "id": "ld-8",
      "tag": "nav",
      "role": null,
      "label": "SolutionsSolutionsIntegrationsIntegrationsIndustriesIndustriesPlatformPlatformSecuritySecurityLog in",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 56
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "10px"
    },
    {
      "id": "ld-91",
      "tag": "section",
      "role": null,
      "label": "framer-6xuUT framer-y7tox framer-v-6tksai",
      "rect": {
        "x": -108,
        "y": -75,
        "width": 1656,
        "height": 1150
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "10px"
    },
    {
      "id": "ld-101",
      "tag": "section",
      "role": null,
      "label": "OriginationServicingCollectionsRecoveryAutomationsAgentsWorkflows7,834 accounts in your LMSImported ",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "10px"
    },
    {
      "id": "ld-255",
      "tag": "section",
      "role": null,
      "label": "BusinessCredit CardReal EstateMedicalconsumerautostudent loantaxDana ·Regional BankMarcus ·Collectio",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "10px"
    },
    {
      "id": "ld-464",
      "tag": "section",
      "role": null,
      "label": "PayPath makes it happen​0123456789.0123456789xIncrease in portfolio performance​01234567890123456789",
      "rect": {
        "x": 0,
        "y": 2000,
        "width": 1440,
        "height": 1000
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "10px"
    }
  ],
  "cards": [],
  "surfaces": {
    "radii": [
      "8px",
      "90px"
    ],
    "borders": [],
    "shadows": []
  },
  "media": [
    {
      "id": "ld-97",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": -770,
        "y": 533,
        "width": 2981,
        "height": 1084
      },
      "aspectRatio": 2.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/GoYX8B8Xtth6qLFn9v2LzviwQE.webp?width=3129&height=1138",
        "naturalWidth": 2591,
        "naturalHeight": 942,
        "alt": ""
      }
    },
    {
      "id": "ld-94",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": -191,
        "y": -132,
        "width": 1822,
        "height": 1265
      },
      "aspectRatio": 1.4,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/tEejaSbEY2eSMYm3v4aHAdM5I.png?scale-down-to=2048&width=2560&height=1423",
        "naturalWidth": 1440,
        "naturalHeight": 800,
        "alt": ""
      }
    },
    {
      "id": "ld-104",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1000
      },
      "aspectRatio": 1.4,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/Ec6BRBatLvYRLBKm9h4Pk6S93A.png?scale-down-to=2048&width=2880&height=1600",
        "naturalWidth": 1440,
        "naturalHeight": 800,
        "alt": ""
      }
    },
    {
      "id": "ld-178",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 552,
        "y": 380,
        "width": 40,
        "height": 40
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/FJ5TeHkQ2MBo0ny88ecZnmeYciQ.png?width=160&height=160",
        "naturalWidth": 160,
        "naturalHeight": 160,
        "alt": ""
      }
    },
    {
      "id": "ld-2134",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 0,
        "y": 1000,
        "width": 47,
        "height": 34
      },
      "aspectRatio": 1.4,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-195",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 562,
        "y": 397,
        "width": 38,
        "height": 38
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/XQmEb42dzcWYD40irIQBjkGmOaQ.png?width=160&height=160",
        "naturalWidth": 160,
        "naturalHeight": 160,
        "alt": ""
      }
    },
    {
      "id": "ld-212",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 572,
        "y": 414,
        "width": 35,
        "height": 35
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/LuM2jcldU7A0JTNZm8PgviQyeac.png?width=160&height=160",
        "naturalWidth": 160,
        "naturalHeight": 160,
        "alt": ""
      }
    },
    {
      "id": "ld-161",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 582,
        "y": 432,
        "width": 33,
        "height": 33
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/dTkNMMva4KDoMAS8CO0lHxOrx5M.png?width=160&height=160",
        "naturalWidth": 160,
        "naturalHeight": 160,
        "alt": ""
      }
    },
    {
      "id": "ld-273",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 521,
        "y": 722,
        "width": 27,
        "height": 28
      },
      "aspectRatio": 1,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/orkWYSsaLN1Q31tH05vzgs7buw.png?scale-down-to=512&width=560&height=560",
        "naturalWidth": 140,
        "naturalHeight": 140,
        "alt": "Credit card lending AI agents"
      }
    },
    {
      "id": "ld-289",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 470,
        "y": 301,
        "width": 28,
        "height": 27
      },
      "aspectRatio": 1,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/3FqHB0yZIt6oaFuWMHIRS8j4HgQ.png?scale-down-to=512&width=560&height=560",
        "naturalWidth": 140,
        "naturalHeight": 140,
        "alt": "Medical financing AI agents"
      }
    },
    {
      "id": "ld-305",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 891,
        "y": 250,
        "width": 27,
        "height": 28
      },
      "aspectRatio": 1,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/JJmpaU7vns24YceiiBc7jYHshz0.png?scale-down-to=512&width=560&height=560",
        "naturalWidth": 140,
        "naturalHeight": 140,
        "alt": "Auto lending AI agents"
      }
    },
    {
      "id": "ld-321",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 942,
        "y": 671,
        "width": 28,
        "height": 27
      },
      "aspectRatio": 1,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "8px",
      "overflow": "clip",
      "media": {
        "src": "https://framerusercontent.com/images/XuSYcAxYRVe4nGROY2c8E4eEsE.png?scale-down-to=512&width=560&height=560",
        "naturalWidth": 140,
        "naturalHeight": 140,
        "alt": "Tax financing AI agents"
      }
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 213,
    "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 hero section inspired by the design evidence titled “PayPath Hero”.

Purpose: hero section from the Home page of PayPath.

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

Visual signature to preserve at the pattern level: rgb(6, 47, 38) with 1656×1150px 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×2000px (0.72: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-4","family":"Season Mix Regular","fontStack":"\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif","weight":"420","size":"72px","lineHeight":"72px","letterSpacing":"-2.2px","traits":"Regular","count":1,"contexts":[{"tag":"h1","text":"The autonomous workforce powering modern finance.","top":720,"property":"font"}]} {"id":"font-6","family":"Geist","fontStack":"Geist, \"Geist Placeholder\", sans-serif","weight":"400","size":"14px","lineHeight":"19.6px","letterSpacing":"-0.1px","traits":"Regular","count":118,"contexts":[{"tag":"p","text":"Solutions","top":18,"property":"font"},{"tag":"p","text":"Solutions","top":44,"property":"font"},{"tag":"p","text":"Integrations","top":18,"property":"font"}]} {"id":"font-7","family":"Geist","fontStack":"Geist, \"Geist Placeholder\", sans-serif","weight":"400","size":"12px","lineHeight":"16.8px","letterSpacing":"-0.1px","traits":"Regular","count":32,"contexts":[{"tag":"p","text":"•","top":629,"property":"font"},{"tag":"p","text":"operational","top":629,"property":"font"},{"tag":"p","text":"•","top":661,"property":"font"}]} {"id":"font-9","family":"Geist","fontStack":"Geist, \"Geist Placeholder\", sans-serif","weight":"400","size":"15px","lineHeight":"19.5px","letterSpacing":"-0.3px","traits":"Regular","count":12,"contexts":[{"tag":"p","text":"Sofia Reyes just enrolled","top":397,"property":"font"},{"tag":"p","text":"Hardship application detected","top":414,"property":"font"},{"tag":"p","text":"Automated document request sent","top":431,"property":"font"}]} {"id":"font-10","family":"JetBrains Mono","fontStack":"\"JetBrains Mono\", \"JetBrains Mono Placeholder\", monospace","weight":"500","size":"11px","lineHeight":"15.4px","letterSpacing":"0.3px","traits":"uppercase","count":12,"contexts":[{"tag":"p","text":"Business","top":774,"property":"font"},{"tag":"p","text":"Credit Card","top":790,"property":"font"},{"tag":"p","text":"Real Estate","top":632,"property":"font"}]} {"id":"font-11","family":"Geist","fontStack":"Geist, \"Geist Placeholder\", sans-serif","weight":"400","size":"12px","lineHeight":"13.2px","letterSpacing":"normal","traits":"Regular","count":10,"contexts":[{"tag":"p","text":"Trigger","top":401,"property":"font"},{"tag":"p","text":"Reviewing","top":418,"property":"font"},{"tag":"p","text":"Docs Requested","top":435,"property":"font"}]} {"id":"font-13","family":"Geist","fontStack":"Geist, \"Geist Placeholder\", sans-serif","weight":"400","size":"16px","lineHeight":"24px","letterSpacing":"normal","traits":"Regular","count":2,"contexts":[{"tag":"p","text":"Deploy compliant AI agents to drive origination, automate servicing, and maximize recovery across th","top":830,"property":"font"},{"tag":"p","text":"Compress complex workflows from days to minutes. Deploy specialized agents that handle underwriting,","top":8696,"property":"font"}]} {"id":"font-18","family":"Geist","fontStack":"Geist","weight":"400","size":"15px","lineHeight":"19.5px","letterSpacing":"-0.3px","traits":"Regular","count":12,"contexts":[{"tag":"span","text":"Welcome package & schedule sent","top":417,"property":"font"},{"tag":"span","text":"Dynamic payment plan options generated","top":433,"property":"font"},{"tag":"span","text":"Requesting W2 & bank statements","top":449,"property":"font"}]}

Colors measured inside this section: {"id":"color-1","hex":"#0E1711","alpha":1,"cssValue":"rgb(14, 23, 17)","count":6,"contexts":[{"tag":"body","text":":root body { background: var(--token-f0a0f32b-9582-4a60-a7e0-641001f6b4bf, rgb(14, 23, 17)); } :root","top":0,"property":"background"},{"tag":"div","text":"SolutionsSolutionsIntegrationsIntegrationsIndustriesIndustriesPlatformPlatformSecuritySecurityLog in","top":0,"property":"background"},{"tag":"section","text":"[ Industries ]One System. Every Vertical.Cut costs, maximize revenue, and accelerate operations - wi","top":7006,"property":"background"}]} {"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"}]} {"id":"color-8","hex":"#FFFFFF","alpha":1,"cssValue":"rgb(255, 255, 255)","count":175,"contexts":[{"tag":"div","text":"","top":55,"property":"background"},{"tag":"p","text":"Solutions","top":18,"property":"text"},{"tag":"span","text":"Origination","top":408,"property":"text"}]} {"id":"color-9","hex":"#000000","alpha":1,"cssValue":"rgb(0, 0, 0)","count":84,"contexts":[{"tag":"p","text":"Workflows","top":326,"property":"text"},{"tag":"span","text":"Can I split this into two payments?","top":5411,"property":"text"},{"tag":"div","text":"Pay now","top":5502,"property":"background"}]} {"id":"color-10","hex":"#FFFFFF","alpha":0.8,"cssValue":"rgba(255, 255, 255, 0.8)","count":15,"contexts":[{"tag":"div","text":"Sofia Reyes just enrolledWelcome package & schedule sentTrigger","top":385,"property":"background"}]} {"id":"color-13","hex":"#A2F08C","alpha":1,"cssValue":"rgb(162, 240, 140)","count":22,"contexts":[{"tag":"div","text":"","top":400,"property":"background"},{"tag":"p","text":"[ Solutions ]","top":5128,"property":"text"},{"tag":"span","text":"Paid","top":5564,"property":"text"}]} {"id":"color-15","hex":"#FFFFFF","alpha":0.10196078431372549,"cssValue":"rgba(255, 255, 255, 0.1)","count":43,"contexts":[{"tag":"div","text":"OriginationServicingCollectionsRecovery","top":400,"property":"background"},{"tag":"span","text":"·","top":6102,"property":"text"}]} {"id":"color-18","hex":"#000000","alpha":0.5019607843137255,"cssValue":"rgba(0, 0, 0, 0.5)","count":12,"contexts":[{"tag":"span","text":"Welcome package & schedule sent","top":417,"property":"text"}]}

Exact section measurements from the saved element map: root {"rect":{"x":-108,"y":-75,"width":1656,"height":1150},"padding":{"top":"0px","right":"40px","bottom":"0px","left":"40px"},"gap":"10px","columns":null,"overflow":"clip"}; spacing {"gapsPx":[8,10],"representativeContentWidthsPx":[1253,820,600,520,298]}; surfaces {"radii":["8px","90px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":-770,"y":533,"width":2981,"height":1084},"aspectRatio":2.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":-191,"y":-132,"width":1822,"height":1265},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":0,"y":0,"width":1440,"height":1000},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":552,"y":380,"width":40,"height":40},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"8px"}]

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.