# PayPath — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://paypath.ai/
Captured: 2026-10-14
CSS measured: 2026-10-14T16:18:06.522Z at 1440×1000 — https://paypath.ai/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

PayPath's website utilizes a sophisticated, dark-themed corporate design language heavily focused on conveying technological capability, particularly in AI and financial systems. The visual style pairs a deep forest green and near-black palette with high-contrast, crisp white and neon green accents to create a modern, serious, yet forward-looking aesthetic. Typography relies on a blend of an elegant serif ('Season Mix') for prominent headings and clean sans-serif and monospace fonts ('Geist', 'Geist Mono', 'JetBrains Mono') for UI mockups and detailed data, reinforcing the dual nature of high-level financial strategy and precise technical execution. The layout frequently incorporates layered

## Classification

- Industry: ai
- Site type: Landing, Portfolio
- Business model: Software, Portfolio, Agency
- Styles: corporate, typographic, minimal, tech-noir, ui-centric
- Platform: Framer
- Technology: Not identified

## Typography

- Display: Season Mix Regular — weight 420; size 72px; line-height 72px; tracking -2.2px; Regular (100% role confidence, computed values)
- Heading: Season Mix Regular — weight 420; size 64px; line-height 73.6px; tracking -1.9px; Regular (95% role confidence, computed values)
- Body: Geist — weight 400; size 16px; line-height 24px; tracking -0.5px; Regular (90% role confidence, computed values)
- Mono: JetBrains Mono — weight 500; size 11px; line-height 15.4px; tracking 0.3px; uppercase (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #0E1711: color-1: computed rgb(14, 23, 17); AI role: Deep dark green/black (#0E1711) used as the primary background for the page. (95% role confidence, computed values)
- Text — text #FCFAEE: color-6: computed rgb(252, 250, 238); AI role: Off-white (#FCFAEE) used for primary headings and prominent text. (95% role confidence, computed values)
- Primary Action — primary action #A2F08C: color-13: computed rgb(162, 240, 140); AI role: Bright neon green (#A2F08C) used for primary buttons, highlights, and active states. (95% role confidence, computed values)
- Surface — surface #F5F4F4: color-2: computed rgb(245, 244, 244); AI role: Light gray (#F5F4F4) used as an alternating background for the FAQ/Security section. (90% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "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-2",
    "family": "Season Mix Regular",
    "fontStack": "\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif",
    "weight": "420",
    "size": "40px",
    "lineHeight": "46px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "\"Financial institutions adopting agentic solutions need to understand the risks, determine the effec",
        "top": 8015,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "PayPath is building with those standards in mind",
        "top": 8153,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ".\"",
        "top": 8199,
        "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-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-5",
    "family": "Season Mix Regular",
    "fontStack": "\"Season Mix Regular\", \"Season Mix Regular Placeholder\", sans-serif",
    "weight": "420",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Super intelligence for the largest financial system in the world.",
        "top": 12743,
        "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-8",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "-0.1px",
    "traits": "uppercase",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "SOC 2 Type II Ready",
        "top": 10911,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "PCI-DSS ready",
        "top": 10911,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "ISO 27001 ready",
        "top": 10911,
        "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-12",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "What does PayPath automate?",
        "top": 11454,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "How does PayPath integrate with our existing systems?",
        "top": 11518,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Can we keep humans involved in critical decisions?",
        "top": 11582,
        "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-14",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "charged · Instant",
        "top": 6101,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "·",
        "top": 6102,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "2026",
        "top": 13121,
        "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"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter",
    "fontStack": "Inter",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Reading message",
        "top": 5507,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Checking payment options",
        "top": 5547,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Drafting reply...",
        "top": 5587,
        "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"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Geist",
    "fontStack": "Geist",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Loan amount",
        "top": 5945,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$8,240",
        "top": 5945,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Term",
        "top": 5968,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "/dept-types/destination-url",
        "top": 7863,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "/dept-types/destination-url",
        "top": 7863,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "/dept-types/destination-url",
        "top": 7863,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Geist",
    "fontStack": "Geist",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Origination",
        "top": 408,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Servicing",
        "top": 408,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Collections",
        "top": 408,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Geist",
    "fontStack": "Geist",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Can I split this into two payments?",
        "top": 5411,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hi Alex, your payment of $86 is due Friday. You can pay this now.",
        "top": 5450,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Geist",
    "fontStack": "Geist",
    "weight": "400",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Dean Cole",
        "top": 5449,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SMS Agent",
        "top": 5428,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Geist",
    "fontStack": "Geist",
    "weight": "400",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Pay now",
        "top": 5509,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Verify with borrower",
        "top": 6064,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "$",
        "top": 6101,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1250",
        "top": 6101,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Geist",
    "fontStack": "Geist",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Paid",
        "top": 5564,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "0000 0000 0000 0000",
        "top": 6007,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Geist",
    "fontStack": "Geist, \"Geist Placeholder\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Set up a report on time-to-contact by",
        "top": 10236,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "6.8px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "JOHN DOE",
        "top": 6031,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "7.3px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "11/26",
        "top": 6031,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "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-2",
    "hex": "#F5F4F4",
    "alpha": 1,
    "cssValue": "rgb(245, 244, 244)",
    "count": 5,
    "contexts": [
      {
        "tag": "section",
        "text": "Putting agents to work in the real economyCompress complex workflows from days to minutes. Deploy sp",
        "top": 8549,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#111C15",
    "alpha": 1,
    "cssValue": "rgb(17, 28, 21)",
    "count": 3,
    "contexts": [
      {
        "tag": "section",
        "text": "[ Solutions ]The world runs on credit. Our agents keep it moving.Build custom agentsBuild custom age",
        "top": 5000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#062F26",
    "alpha": 1,
    "cssValue": "rgb(6, 47, 38)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "",
        "top": -75,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 0.23921568627450981,
    "cssValue": "rgba(255, 255, 255, 0.24)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 9041,
        "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-7",
    "hex": "#E9E8E8",
    "alpha": 1,
    "cssValue": "rgb(233, 232, 232)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "SOC 2 Type II Ready",
        "top": 10632,
        "property": "background"
      }
    ]
  },
  {
    "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-11",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.1)",
    "count": 66,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6571,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#575757",
    "alpha": 1,
    "cssValue": "rgb(87, 87, 87)",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "What does PayPath automate?",
        "top": 11454,
        "property": "text"
      }
    ]
  },
  {
    "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-14",
    "hex": "#000000",
    "alpha": 0.8,
    "cssValue": "rgba(0, 0, 0, 0.8)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Paid",
        "top": 5552,
        "property": "background"
      }
    ]
  },
  {
    "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-16",
    "hex": "#031F19",
    "alpha": 1,
    "cssValue": "rgb(3, 31, 25)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "PayPath is building with those standards in mind",
        "top": 8153,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(255, 255, 255, 0.08)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Reading message",
        "top": 5499,
        "property": "background"
      }
    ]
  },
  {
    "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"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#D9DBD9",
    "alpha": 1,
    "cssValue": "rgb(217, 219, 217)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Loan amount$8,240Term24 monthsBorrowerM. ReyesID verifiedYesVerify with borrower",
        "top": 5932,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#14290A",
    "alpha": 1,
    "cssValue": "rgb(20, 41, 10)",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "Get started",
        "top": 18,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#454D44",
    "alpha": 1,
    "cssValue": "rgb(69, 77, 68)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Loan amount$8,240Term24 monthsBorrowerM. ReyesID verifiedYes",
        "top": 5920,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#2E362E",
    "alpha": 1,
    "cssValue": "rgb(46, 54, 46)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Loan amount$8,240Term24 monthsBorrowerM. ReyesID verifiedYes",
        "top": 5916,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#000000",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(0, 0, 0, 0.08)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Trigger",
        "top": 397,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Loan Doc Extractor•operational",
        "top": 623,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "•",
        "top": 629,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 13119,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(255, 255, 255, 0.15)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Dana ·Regional Bank",
        "top": 375,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(255, 255, 255, 0.05)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7270,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Set up a report on time-to-contact by",
        "top": 10236,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 10240,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#D0D0D0",
    "alpha": 1,
    "cssValue": "rgb(208, 208, 208)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1000,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(0, 0, 0, 0.05)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10229,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#D9D9D9",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 217)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 13126,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous spacing with large vertical gaps between major sections to allow background effects to breathe; tighter, structured padding within UI components.
- Corner style: Combination of sharp edges on large images and distinct, varied rounding on UI components (some slightly rounded, some heavily pill-shaped).
- Radius: Buttons and badges are fully rounded (pill shapes); floating UI panels feature medium border radii (e.g., 12px-16px).
- Borders: 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.
- Buttons: Pill-shaped, solid fill (neon green or white) with contrasting text, or ghost buttons with subtle borders.
- Content width: Wide, fluid layouts for backgrounds with centered, constrained text blocks and asymmetrical grids extending near the edges.
- 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.

## Sections

Gallery section count: 7. Each entry corresponds to one gallery capture.

1. **Hero — PayPath Hero** (Home)
   Opening hero composition from Home, organized around “PayPath Hero”.
   Capture: 1440×2000px; page bounds 0–2000px of 10155px; source section ID: `4330e9c1-d772-4083-812f-61933aa3ec32`; image: https://media.designdetails.io/library/e8788ca005f98411d57e4dc199154ab42bfc2089d48a60d1f9b7733cfbdfe9c9/section_crop-4330e9c1-2026-10-14T16-18-24-383Z.webp
   SECTION.md v3.2: `4330e9c1-d772-4083-812f-61933aa3ec32` (deterministic evidence; editorial review pending)
2. **Features — The world runs on credit. Our agents keep it moving.** (Home)
   Reusable feature composition from Home, organized around “The world runs on credit. Our agents keep it moving.”.
   Capture: 1440×1438px; page bounds 2000–3438px of 10155px; source section ID: `73d7126a-e8e7-485c-ae4e-5058eaf4a5a1`; image: https://media.designdetails.io/library/f9feb79594eedd9eba7dedf5fd2096940c79defffd69ee1b0973a501263c2634/section_crop-73d7126a-2026-10-14T16-18-25-989Z.webp
   SECTION.md v3.2: `73d7126a-e8e7-485c-ae4e-5058eaf4a5a1` (deterministic evidence; editorial review pending)
3. **Features — One System. Every Vertical.** (Home)
   Reusable feature composition from Home, organized around “One System. Every Vertical.”.
   Capture: 1440×883px; page bounds 4006–4889px of 10155px; source section ID: `793e8292-6d5c-484e-b0b2-b7416c0bc6e7`; image: https://media.designdetails.io/library/765bb9cdde53cf728db64154b895c487ddc067fbd2d275dda96428d89e2f72ca/section_crop-793e8292-2026-10-14T16-18-28-458Z.webp
   SECTION.md v3.2: `793e8292-6d5c-484e-b0b2-b7416c0bc6e7` (deterministic evidence; editorial review pending)
4. **Features — Putting agents to work in the real economy** (Home)
   Reusable feature composition from Home, organized around “Putting agents to work in the real economy”.
   Capture: 1440×1149px; page bounds 5549–6698px of 10155px; source section ID: `4837f353-c7dc-4b7b-bd93-cfaaa529a6eb`; image: https://media.designdetails.io/library/1f29c21ec0815e1a63c951db5af64c113f73fae67f1088dcc7445ff9b766b20d/section_crop-4837f353-2026-10-14T16-18-31-977Z.webp
   SECTION.md v3.2: `4837f353-c7dc-4b7b-bd93-cfaaa529a6eb` (deterministic evidence; editorial review pending)
5. **Features — Unmatched operational efficiency at every stage** (Home)
   Reusable feature composition from Home, organized around “Unmatched operational efficiency at every stage”.
   Capture: 1440×334px; page bounds 6698–7032px of 10155px; source section ID: `365449cc-e636-4cc1-81f0-f2cf7b774e1f`; image: https://media.designdetails.io/library/d9df7b61366919fe78834373d935df7206bf54c9c65114f9dd48e6124294d70b/section_crop-365449cc-2026-10-14T16-18-33-375Z.webp
   SECTION.md v3.2: `365449cc-e636-4cc1-81f0-f2cf7b774e1f` (deterministic evidence; editorial review pending)
6. **Features — PayPath Features** (Home)
   Reusable feature composition from Home, organized around “PayPath Features”.
   Capture: 1440×528px; page bounds 7033–7561px of 10155px; source section ID: `f0bacdab-60f7-48d0-8c2b-cb2f22c6b71a`; image: https://media.designdetails.io/library/1002df23685c1b42cabfaf0cf547f4ac4faa7a77a480add8b3a2db2c8fd2752f/section_crop-f0bacdab-2026-10-14T16-18-34-523Z.webp
   SECTION.md v3.2: `f0bacdab-60f7-48d0-8c2b-cb2f22c6b71a` (deterministic evidence; editorial review pending)
7. **Footer — PayPath Footer** (Home)
   Closing footer and call-to-action from Home, organized around “PayPath Footer”.
   Capture: 1440×1000px; page bounds 9155–10155px of 10155px; source section ID: `b8c11d85-bd9d-4321-bae5-a51c3b790b50`; image: https://media.designdetails.io/library/44b89167e799238b6fcbc8555ae1d1b480013d6dc36cc08222c86b32401b0666/section_crop-b8c11d85-2026-10-14T16-18-40-401Z.webp
   SECTION.md v3.2: `b8c11d85-bd9d-4321-bae5-a51c3b790b50` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/7a49aa8b70729f2b6e74c4062e3ef3c4c6f9eb02c4655a7bab466db70775ebf4/desktop_full-f3416e93-2026-10-14T16-18-06-564Z.webp
- Mobile screenshot: https://media.designdetails.io/library/8b877c5a9072fe6ba4312d94c66754eb1f2467fe5ff1214c6f65c053069d99fe/mobile_full-f3416e93-2026-10-14T16-19-28-099Z.webp
- Open Graph image: https://media.designdetails.io/library/1d415cfe880f936a7be51b08e5f3d8592126aadf7960b02a83f24f7112cc0098/og_image-f3416e93-2026-10-14T16-18-18-892Z.webp
- Full-page video: https://media.designdetails.io/library/f0a5d138529aee3abb01f31412844774f5950653ba8bbccd5b5f6f31b6fdc58f/motion-1791995823509.mp4
- Video poster: https://media.designdetails.io/library/6b5726ec8ba2deb7086d65c7145a9781aebcf7771b7b2933bdf82d2e2b8a8eed/motion-poster-1791995823509.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

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

## Quality rubric

Overall: 58.38/100 (Competent)
Evidence coverage: 80%
Judge tier: Competent
Verdict: PayPath executes a polished, purposeful dark-fintech aesthetic with a legible typographic hierarchy and a disciplined single-accent color system, and its product UI mockups are thoughtfully tailored to the specific agent capabilities being sold. But the page's underlying structure and most of its components are drawn from a now-common AI/SaaS marketing template, an unresolved carousel cropping bug and mismatched industry imagery reveal incomplete execution, and the claimed scroll-driven motion sophistication is not independently confirmed by the supplied evidence. The result is a competently built, good-looking site rather than one with a genuinely original or landmark system.

- Typography (15%): 66 — A deliberate dual-track system pairs an elegant serif display face (Season Mix) for narrative headings with Geist/Geist Mono/JetBrains Mono for UI and data labels, giving a clear editorial-vs-technical hierarchy. Sizes scale sensibly (72/64/48/40/32) with tightening negative tracking at larger sizes, a legitimate type-scale decision rather than default browser styles. However hierarchy inside UI mockups is dense and tiny (11-13px) with many near-duplicate sizes (12/13/14/15/16 all in use for secondary text), suggesting uncurated proliferation rather than a tight scale.
- Color (10%): 62 — A controlled two-tone system: deep forest-green/near-black canvas (#0E1711, #111C15) against warm off-white text (#FCFAEE) and a single neon-green accent (#A2F08C) used consistently for primary buttons and highlighted terms. The FAQ/security section shifts to a light gray canvas (#F5F4F4) for contrast between narrative and trust sections. This is coherent but the palette is a very common 'dark fintech + neon green accent' trope seen across many AI/SaaS sites, limiting distinctiveness beyond competent execution.
- Layout (20%): 64 — The page follows a long but structured narrative: hero → stat block → solutions grid with sidebar nav → integrations logo wall → industries carousel → testimonial → UI showcase → efficiency bars → security/compliance → FAQ accordion → CTA → footer. Asymmetric grids (bento-style agent cards, 3-up UI panels) and a sticky-feeling left-rail sub-nav in the solutions section show real compositional thought rather than a single stacked column. Density is well modulated (low in hero, high in UI mockup sections). Weaknesses: alignment is occasionally inconsistent (hero timeline overlapping text awkwardly), and the industries carousel crops the fourth card at the viewport edge, suggesting insufficient edge-case handling.
- Motion (20%): Inconclusive — Gemini's video observation describes multiple scroll-tied effects (rotating/scaling circular image array, count-up numbers, text highlight-on-scroll, scaling UI panel entrances, accordion fade-ins, and a reversible scroll-up replay of the circular animation), suggesting a deliberately choreographed scroll narrative rather than generic fade-ins. However the provided frame captures show largely static or near-identical states between timestamps (e.g. 1.8s vs 2.4s nearly identical; 45s vs 45.6s nearly identical), which does not independently verify the described complexity, smoothness, or quality of easing/timing. CSS facts provide no transition/animation timing data to corroborate.
- Originality (25%): 48 — The interactive horizontal timeline/stepper with a moving pill-shaped status card is a nice touch, and the reversible circular rotation animation on scroll-up shows some directional craft. But the overall idiom—dark fintech hero, neon-green accent, stat block, floating UI mockup cards, logo wall, testimonial, FAQ accordion, dark-to-light CTA footer—is an extremely common AI/SaaS template currently proliferating across fintech and AI startup marketing sites. None of the individual ideas are hard to substitute; swapping the serif display font or the neon green for another palette would leave the same structural skeleton intact.
- Content (10%): 58 — Visual choices track content fairly well: product UI mockups (chat threads, compliance audits, payment cards) are specific to the described agent capabilities (Voice/Email/SMS/Compliance/Document/Payment agents) rather than generic stock abstractions, and the security badges (SOC2/PCI/ISO) visually reinforce the 'Built for institutions that can't take risks' copy. However, several industry-vertical images (hand with cash, silhouette in window, glowing diagonal light bar) read as moody stock/abstract photography disconnected from the specific vertical labels (Consumer, Business, Credit Card, Real Estate), weakening the direct content-to-visual mapping in that section.

Coverage: 80% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A near-black canvas with a glowing green data-path animation frozen mid-flow sets a serious, high-stakes mood, while large serif headlines keep the message readable against the dark backdrop. Pale product cards and a bordered light-bank dashboard interrupt the dark sections at regular intervals, giving visitors clear proof points and breathing room as they scroll.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.