# Causa Prima — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://causaprima.com/
Captured: 2026-10-13
CSS measured: 2026-10-13T18:38:18.929Z at 1440×1000 — https://causaprima.com/
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

The website employs a highly structured, grid-based aesthetic characterized by visible 1px borders that organize content into distinct modular sections. The design pairs a clean, light canvas with stark black typography and vibrant geometric accents in orange, blue, and green. The hero section contrasts this rigid structure with a full-bleed photographic background and layered, floating UI mockups.

## Classification

- Industry: ai
- Site type: Landing
- Business model: AI, Software
- Styles: corporate, geometric, minimal, structural-wireframe
- Platform: Custom code
- Technology: Astro, Tailwind CSS

## Typography

- Display: Culture — weight 500; size 80px; line-height 80px; tracking -1.6px; Regular (100% role confidence, computed values)
- Heading: Culture — weight 500; size 52px; line-height 53px; tracking -0.8px; Regular (100% role confidence, computed values)
- Body: Culture — weight 400; size 20px; line-height 25px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Culture — weight 400; size 16px; line-height 16px; tracking 0.3px; uppercase (70% role confidence, computed values)

## Functional palette

- Canvas — canvas #FCFCFB: color-2: computed rgb(252, 252, 251); AI role: #FCFCFB used as the primary background color for most structural sections. (100% role confidence, computed values)
- Text — text #242320: color-4: computed rgb(36, 35, 32); AI role: #242320 used for high-contrast primary text. (100% role confidence, computed values)
- Primary Action — primary action #D96F35: color-11: computed rgb(217, 111, 53); AI role: #D96F35 orange used for 'Book a demo' buttons. (100% role confidence, computed values)
- Border — border #A4A4A4: color-1: computed rgb(164, 164, 164); AI role: #A4A4A4 used for the visible grid lines separating content. (90% role confidence, computed values)
- Accent — accent #ABCEFE: color-5: computed rgb(171, 206, 254); AI role: #ABCEFE light blue used for large highlight backgrounds like the testimonial section. (80% 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": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "80px",
    "lineHeight": "80px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 67,
    "contexts": [
      {
        "tag": "span",
        "text": "S",
        "top": 190,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "t",
        "top": 190,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "o",
        "top": 190,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "52px",
    "lineHeight": "53px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "One platform for your entire financial operations.",
        "top": 1561,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Running on systems you already trust",
        "top": 5830,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "86%",
        "top": 6913,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "Backed by the world’s best",
        "top": 1184,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SAP Certified",
        "top": 5897,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "See all 150+",
        "top": 6204,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "p",
        "text": "See cash before it moves. Know what suppliers will invoice and when customers will pay.",
        "top": 2567,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Capture the discount when there’s room, hold it when the business needs it more.",
        "top": 2587,
        "property": "font"
      },
      {
        "tag": "figcaption",
        "text": "– Head of Shared Services at a steel producer in Europe",
        "top": 6818,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "8.9px",
    "lineHeight": "12.4px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Message from Acme’s agent",
        "top": 2026,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Acme’s agent",
        "top": 2026,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Apex Office Co.",
        "top": 2224,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Real-time visibility 24/7.",
        "top": 2542,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Your working capital, your call.",
        "top": 2562,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Is Causa Prima secure?",
        "top": 7820,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "fortune.com",
        "top": 7398,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "forbes.es",
        "top": 7398,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "manager-magazin.de",
        "top": 7398,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "15.2px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "li",
        "text": "Invoices → 1.284 handled overnight",
        "top": 1961,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Apex → INV-8822 matched · paid",
        "top": 1976,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "TechFlow → above your limit · sent to your CFO",
        "top": 1992,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Secure by design. Causa Prima is the easiest part of your security review.",
        "top": 7863,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Your current tools only see your side of the transaction. But disputes, delays and missed discounts ",
        "top": 8151,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "If they’re already on the network, it’s your customer’s or supplier’s agent, running their rules, re",
        "top": 8212,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "26px",
    "lineHeight": "29.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "The Agent-to-Agent Platform for Enterprise Finance.",
        "top": 370,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 44,
    "contexts": [
      {
        "tag": "span",
        "text": "Matched to",
        "top": 628,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "PO #A2A-01",
        "top": 630,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "P",
        "top": 687,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "4.4px",
    "lineHeight": "6.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Bill to",
        "top": 2242,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Your Company",
        "top": 2250,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Leopoldstraße 12",
        "top": 2258,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "We raised $20 million funding",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We raised $20 million funding",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We raised $20 million funding",
        "top": 18,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.2px",
    "lineHeight": "10px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Matched",
        "top": 2522,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cleared",
        "top": 2522,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Approved",
        "top": 2522,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "5.7px",
    "lineHeight": "5.7px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Today",
        "top": 1867,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cash",
        "top": 1867,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Network",
        "top": 1867,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "4.8px",
    "lineHeight": "4.8px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Prior · 13.000 €",
        "top": 2023,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "21 Sep",
        "top": 2073,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Today",
        "top": 2073,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "113.8px",
    "lineHeight": "113.8px",
    "letterSpacing": "-3.4px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Works inside SAP, NetSuite, Sage, DATEV, your inbox, Stripe, Odoo, Xero, QuickBooks, Lexware, MYOB, ",
        "top": 5996,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Works inside",
        "top": 5987,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "S",
        "top": 5987,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "11.9px",
    "lineHeight": "16.7px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Day 7, for 2% off?",
        "top": 2465,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Agreed. 2% off, paid on day 7.",
        "top": 2726,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Paying 42.800 € on Friday.",
        "top": 2489,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "10.9px",
    "lineHeight": "11.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Freight: Madrid to Munich",
        "top": 753,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "31.040 €",
        "top": 753,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Warehousing",
        "top": 777,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.6px",
    "lineHeight": "10.6px",
    "letterSpacing": "1.1px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Your agent",
        "top": 2451,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Acme Corp.’s agent",
        "top": 2712,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Brightline’s agent",
        "top": 2473,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "15.1px",
    "lineHeight": "18.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "182.400 €",
        "top": 2701,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "91.460 €",
        "top": 2701,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "±21.000 €",
        "top": 2701,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12.4px",
    "lineHeight": "17.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Pay by",
        "top": 2626,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "12 Nov · Net 30",
        "top": 2626,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Total",
        "top": 2655,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "10.9px",
    "lineHeight": "19px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "dd",
        "text": "Your Company",
        "top": 651,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "#A2A-01✓",
        "top": 689,
        "property": "font"
      },
      {
        "tag": "i",
        "text": "✓",
        "top": 691,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16.7px",
    "lineHeight": "18.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Doing for you",
        "top": 2481,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Acme Corp.",
        "top": 2510,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cash forecast · 30d",
        "top": 2507,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "SAP",
        "top": 8023,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "ISO 27001",
        "top": 8023,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SOC 2 Type 2",
        "top": 8023,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "8.5px",
    "lineHeight": "12.8px",
    "letterSpacing": "1.2px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Your agent· reading invoice",
        "top": 601,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Acme Corp.’s agent· thinking",
        "top": 658,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Your agent· drafting",
        "top": 715,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "7.3px",
    "lineHeight": "10.2px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "+8.400 € vs prior 30 days · avg 2,3%",
        "top": 1977,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "INV-8822 · Due today",
        "top": 2240,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Asking their agent for a date",
        "top": 2274,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "7.2px",
    "lineHeight": "19px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "dt",
        "text": "Bill to",
        "top": 636,
        "property": "font"
      },
      {
        "tag": "dt",
        "text": "PO",
        "top": 673,
        "property": "font"
      },
      {
        "tag": "dt",
        "text": "Issued",
        "top": 673,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "1.7px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 430,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Watch video",
        "top": 445,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 8831,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "11.8px",
    "lineHeight": "11.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "0 €",
        "top": 858,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Terms agreed",
        "top": 893,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Save 970 €",
        "top": 893,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "10.5px",
    "lineHeight": "15.2px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "b",
        "text": "Invoices",
        "top": 1961,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Apex",
        "top": 1976,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "TechFlow",
        "top": 1992,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "8px",
    "lineHeight": "11.1px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Your target 3%",
        "top": 2564,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Acme offers 0%",
        "top": 2613,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Deal at 2%",
        "top": 2564,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "8px",
    "lineHeight": "8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Acme",
        "top": 2611,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "TechFlow",
        "top": 2629,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "TechFlow",
        "top": 2580,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.3px",
    "lineHeight": "10.2px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Matching",
        "top": 2240,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "In talks",
        "top": 2274,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Above your limit",
        "top": 2347,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "7.2px",
    "lineHeight": "8px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Item",
        "top": 731,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Amount",
        "top": 731,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Total due Net 30",
        "top": 844,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "3.3px",
    "lineHeight": "3.3px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Invoice",
        "top": 2226,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Description",
        "top": 2286,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Amount",
        "top": 2286,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16.3px",
    "lineHeight": "16.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Acme Corp.",
        "top": 579,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Invoice-001",
        "top": 594,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We raised $20 million funding (opens in a new tab)",
        "top": -1,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Contact",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 20,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Culture",
    "fontStack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "11.3px",
    "lineHeight": "12.4px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "ISO",
        "top": 7950,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SOC 2",
        "top": 7950,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#A4A4A4",
    "alpha": 1,
    "cssValue": "rgb(164, 164, 164)",
    "count": 92,
    "contexts": [
      {
        "tag": "aside",
        "text": "We raised $20 million funding (opens in a new tab)We raised $20 million fundingWe raised $20 million",
        "top": 0,
        "property": "::after-background"
      },
      {
        "tag": "main",
        "text": "Stop managing your invoices, start controlling your cash.The Agent-to-Agent Platform for Enterprise ",
        "top": 52,
        "property": "::before-background"
      },
      {
        "tag": "main",
        "text": "Stop managing your invoices, start controlling your cash.The Agent-to-Agent Platform for Enterprise ",
        "top": 52,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FCFCFB",
    "alpha": 1,
    "cssValue": "rgb(252, 252, 251)",
    "count": 11,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to contentWe raised $20 million funding (opens in a new tab)We raised $20 million fundingWe rai",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "Stop managing your invoices, start controlling your cash.The Agent-to-Agent Platform for Enterprise ",
        "top": 52,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Backed by the world’s best",
        "top": 1000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Stop managing your invoices, start controlling your cash.The Agent-to-Agent Platform for Enterprise ",
        "top": 52,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Stop managing your invoices, start controlling your cash.The Agent-to-Agent Platform for Enterprise ",
        "top": 52,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#242320",
    "alpha": 1,
    "cssValue": "rgb(36, 35, 32)",
    "count": 389,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "We raised $20 million funding (opens in a new tab)",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "",
        "top": 22,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#ABCEFE",
    "alpha": 1,
    "cssValue": "rgb(171, 206, 254)",
    "count": 11,
    "contexts": [
      {
        "tag": "aside",
        "text": "We raised $20 million funding (opens in a new tab)We raised $20 million fundingWe raised $20 million",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 32,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Today",
        "top": 1859,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#E7E0D3",
    "alpha": 1,
    "cssValue": "rgb(231, 224, 211)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "TodayCashNetworkKnowledgeIZInvoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow ",
        "top": 1745,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F7F6F2",
    "alpha": 1,
    "cssValue": "color(srgb 0.970118 0.964078 0.949804)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "TodayCashNetworkKnowledgeIZInvoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow ",
        "top": 1840,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#186B4C",
    "alpha": 1,
    "cssValue": "rgb(24, 107, 76)",
    "count": 24,
    "contexts": [
      {
        "tag": "span",
        "text": "#A2A-01✓",
        "top": 689,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "✓",
        "top": 691,
        "property": "text"
      },
      {
        "tag": "b",
        "text": "Paid",
        "top": 827,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 9,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 561,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 1569,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#5A6779",
    "alpha": 1,
    "cssValue": "oklab(0.510391 -0.00829063 -0.0311023)",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "“The",
        "top": 6531,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#D96F35",
    "alpha": 1,
    "cssValue": "rgb(217, 111, 53)",
    "count": 13,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 42,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 20,
        "property": "control-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 580,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.8392156862745098,
    "cssValue": "rgba(255, 255, 255, 0.84)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2486,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#8A3274",
    "alpha": 1,
    "cssValue": "rgb(138, 50, 116)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Above your limit",
        "top": 2347,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2350,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 8548,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.5607843137254902,
    "cssValue": "rgba(255, 255, 255, 0.56)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 561,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 942,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#44413D",
    "alpha": 1,
    "cssValue": "rgb(68, 65, 61)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "See cash before it moves. Know what suppliers will invoice and when customers will pay.",
        "top": 2567,
        "property": "text"
      },
      {
        "tag": "figcaption",
        "text": "– Head of Shared Services at a steel producer in Europe",
        "top": 6818,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "–",
        "top": 6819,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#314488",
    "alpha": 1,
    "cssValue": "rgb(49, 68, 136)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "IZ",
        "top": 1867,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2032,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2290,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#908F8E",
    "alpha": 1,
    "cssValue": "color(srgb 0.564706 0.562745 0.554902)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Invoice-001",
        "top": 594,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "We automate",
        "top": 2501,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#272727",
    "alpha": 0.050980392156862744,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.05)",
    "count": 2,
    "contexts": [
      {
        "tag": "ul",
        "text": "Invoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow → above your limit · sent t",
        "top": 1953,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Acme’s agent agreed 2% off if we pay today. That saves you 970 €.",
        "top": 2050,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#242321",
    "alpha": 0.5215686274509804,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.52)",
    "count": 28,
    "contexts": [
      {
        "tag": "p",
        "text": "Message from Acme’s agent",
        "top": 2026,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Bill to",
        "top": 2242,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2329,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.3607843137254902,
    "cssValue": "rgba(255, 255, 255, 0.36)",
    "count": 8,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 558,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "CheckingMatched to PO #A2A-01…",
        "top": 620,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#73716D",
    "alpha": 1,
    "cssValue": "oklab(0.548784 0.00135424 0.00583341)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 7356,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "fortune.com",
        "top": 7398,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7403,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 7,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 861,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2578,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "!",
        "top": 2562,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFFFFF",
    "alpha": 0.5490196078431373,
    "cssValue": "rgba(255, 255, 255, 0.55)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2574,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#24221F",
    "alpha": 0.6392156862745098,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.64)",
    "count": 28,
    "contexts": [
      {
        "tag": "dt",
        "text": "Bill to",
        "top": 636,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Item",
        "top": 731,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#ABCEFD",
    "alpha": 0.5490196078431373,
    "cssValue": "color(srgb 0.670588 0.807843 0.996078 / 0.55)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2565,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.6196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.62)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "ContactCausa PrimaBook a demo",
        "top": 20,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#F7F7F6",
    "alpha": 1,
    "cssValue": "color(srgb 0.967059 0.966961 0.962843)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Acme Corp.InvoiceBill toYour CompanyLeopoldstraße 1280802 MunichDetailsINV-001PO #A2A-01Issued 13 Oc",
        "top": 2141,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#90908E",
    "alpha": 1,
    "cssValue": "oklab(0.651502 -0.000235289 0.00298917)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "We forecast",
        "top": 2614,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#242420",
    "alpha": 0.2784313725490196,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.28)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "ContactCausa Prima",
        "top": 20,
        "property": "::before-background"
      },
      {
        "tag": "span",
        "text": "ContactCausa Prima",
        "top": 20,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#C6D0E8",
    "alpha": 1,
    "cssValue": "rgb(198, 208, 232)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Certified",
        "top": 7915,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#A3C4B7",
    "alpha": 1,
    "cssValue": "rgb(163, 196, 183)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "ISO27001",
        "top": 7915,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#CC7BA2",
    "alpha": 1,
    "cssValue": "rgb(204, 123, 162)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "SOC 2Type II",
        "top": 7915,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#AE8D3E",
    "alpha": 1,
    "cssValue": "rgb(174, 141, 62)",
    "count": 10,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 43,
        "property": "svg-fill"
      },
      {
        "tag": "b",
        "text": "",
        "top": 661,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2029,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#FFFFFF",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(255, 255, 255, 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "TodayCashNetworkKnowledgeIZ",
        "top": 1856,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#212121",
    "alpha": 0.12156862745098039,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.12)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "TodayCashNetworkKnowledgeIZInvoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow ",
        "top": 1839,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#222222",
    "alpha": 0.14901960784313725,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.15)",
    "count": 16,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 1863,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Acme Corp.InvoiceBill toYour CompanyLeopoldstraße 1280802 MunichDetailsINV-001PO #A2A-01Issued 13 Oc",
        "top": 2140,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2322,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#2A1C1C",
    "alpha": 0.07058823529411765,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.07)",
    "count": 1,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 2588,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#232323",
    "alpha": 0.1411764705882353,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.14)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "ItemAmount",
        "top": 723,
        "property": "border"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2595,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#803D2C",
    "alpha": 1,
    "cssValue": "rgb(128, 61, 44)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Needs you",
        "top": 2097,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#F0C5AF",
    "alpha": 0.5490196078431373,
    "cssValue": "color(srgb 0.941176 0.772549 0.682353 / 0.55)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Needs you",
        "top": 2097,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#232320",
    "alpha": 0.4,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.4)",
    "count": 10,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 2586,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#27271D",
    "alpha": 0.10196078431372549,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2322,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#24241F",
    "alpha": 0.7019607843137254,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.7)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Cash",
        "top": 1867,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#7189C5",
    "alpha": 1,
    "cssValue": "rgb(113, 137, 197)",
    "count": 8,
    "contexts": [
      {
        "tag": "b",
        "text": "",
        "top": 604,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2330,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#DDEBFC",
    "alpha": 1,
    "cssValue": "color(srgb 0.867529 0.919686 0.988784)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "IZ",
        "top": 1859,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#242421",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 2652,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#242420",
    "alpha": 0.6196078431372549,
    "cssValue": "oklab(0.256108 -0.000146732 0.00571303 / 0.62)",
    "count": 3,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 2582,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#314488",
    "alpha": 0.7490196078431373,
    "cssValue": "color(srgb 0.192157 0.266667 0.533333 / 0.75)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Prior · 13.000 €",
        "top": 2023,
        "property": "text"
      }
    ]
  }
]
```

### 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: Content is strictly aligned to a visible grid, enforcing consistent padding within bordered cells and establishing a rigid vertical and horizontal rhythm.
- Corner style: Interactive elements like buttons feature pill-shaped (fully rounded) corners, while the structural grid layout uses sharp 90-degree intersections.
- Radius: Buttons use maximum border-radius for a pill effect; UI mockups use subtle rounding on corners.
- Borders: 1px solid lines (color-1) form an explicit, continuous grid system across the entire document structure.
- Buttons: Primary buttons are solid-filled and pill-shaped; secondary buttons are outlined with transparent backgrounds.
- Content width: Content is constrained within a central maximum width, bordered by the overarching structural grid lines that extend to the viewport edges.
- Density: The layout features moderate density, relying on generous padding inside the grid cells to allow typography to breathe.
- Evidence: Visual inspection of the continuous grid lines dividing the page, distinct button shapes, and typography hierarchy, corroborated by measured CSS values.

## Sections

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

1. **Features — BACKED BY THE WORLD’S BEST** (Home)
   Reusable feature composition from Home, organized around “BACKED BY THE WORLD’S BEST”.
   Capture: 1440×381px; page bounds 1000–1381px of 7486px; source section ID: `5087c3dd-f8e7-4a76-8201-7f3cb82d653d`; image: https://media.designdetails.io/library/af74a52163b6f09bd7ea1a8e54242ed152972a79b917cdfdfc05ce6be99a4960/section_crop-5087c3dd-2026-10-13T18-39-24-038Z.webp
   SECTION.md v3.2: `5087c3dd-f8e7-4a76-8201-7f3cb82d653d` (deterministic evidence; editorial review pending)
2. **Features — Preview of the Prima dashboard** (Home)
   Reusable feature composition from Home, organized around “Preview of the Prima dashboard”.
   Capture: 1440×517px; page bounds 1840–2357px of 7486px; source section ID: `4c7a80fb-4358-44b5-b0af-5d5eae2ad7a4`; image: https://media.designdetails.io/library/f3b142fd899e407d35c996ce89f880e21b780b8614571f8b7972a2d98c6d702b/section_crop-4c7a80fb-2026-10-13T18-39-27-701Z.webp
   SECTION.md v3.2: `4c7a80fb-4358-44b5-b0af-5d5eae2ad7a4` (deterministic evidence; editorial review pending)
3. **Features — Causa Prima Features** (Home)
   Reusable feature composition from Home, organized around “Causa Prima Features”.
   Capture: 1440×864px; page bounds 4843–5707px of 7486px; source section ID: `ad8a5ae6-5fea-4b49-8af9-137106d808a2`; image: https://media.designdetails.io/library/3b150e4a25dc4e2569cd6b4ded4527dbd2e1c4a524cb2dff4536280e88564b0f/section_crop-ad8a5ae6-2026-10-13T18-39-44-158Z.webp
   SECTION.md v3.2: `ad8a5ae6-5fea-4b49-8af9-137106d808a2` (deterministic evidence; editorial review pending)
4. **Features — PRESS** (Home)
   Reusable feature composition from Home, organized around “PRESS”.
   Capture: 1440×511px; page bounds 5707–6218px of 7486px; source section ID: `b011a1b7-c903-4c1d-94e5-4df328443f3d`; image: https://media.designdetails.io/library/4ada6480bbe75f582113076a4339ccc18a0e3b2b8a056618d9dfcf2e6b3082c7/section_crop-b011a1b7-2026-10-13T18-39-51-160Z.webp
   SECTION.md v3.2: `b011a1b7-c903-4c1d-94e5-4df328443f3d` (deterministic evidence; editorial review pending)
5. **Footer — Causa Prima Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Causa Prima Footer”.
   Capture: 1440×1000px; page bounds 6486–7486px of 7486px; source section ID: `72c434a8-04c6-455a-aec8-472cf3bf6928`; image: https://media.designdetails.io/library/825629431e8bf2f909b0bc3a9410fb91f486ccba8e7ba0c13457b2cdd458be36/section_crop-72c434a8-2026-10-13T18-40-06-945Z.webp
   SECTION.md v3.2: `72c434a8-04c6-455a-aec8-472cf3bf6928` (deterministic evidence; editorial review pending)
6. **Hero — Invoice Control Hero** (Home)
   AI suggestion (98% confidence): Complete, substantial opening hero with a bold finance-focused headline, supporting copy, dual CTAs, and a distinctive full-width landscape product visualization.
   Capture: 1440×951px; page bounds 54–1005px of 7486px; source section ID: `b5359224-8d01-44fc-9f3b-2a3c75bc8dec`; image: https://media.designdetails.io/library/4d1bd91ba0ac245c601b682437784a00658242a00340cc42c83eb3bab308f351/b5359224-8d01-44fc-9f3b-2a3c75bc8dec.webp
   SECTION.md v3.2: `b5359224-8d01-44fc-9f3b-2a3c75bc8dec` (deterministic evidence; editorial review pending)
7. **Dashboard — Financial Operations Product Dashboard** (Home)
   AI suggestion (95% confidence): Self-contained product showcase with its own heading, decorative accent, large interface preview, and demo CTA; the next section begins cleanly below.
   Capture: 1440×1020px; page bounds 1545–2565px of 7486px; source section ID: `f9cdffaa-c7b1-450e-b04f-65a820e5bb39`; image: https://media.designdetails.io/library/62c77699abece221b647c64dfa8f0784b737610565812b0e200f62a2d7f7ec34/f9cdffaa-c7b1-450e-b04f-65a820e5bb39.webp
   SECTION.md v3.2: `f9cdffaa-c7b1-450e-b04f-65a820e5bb39` (deterministic evidence; editorial review pending)
8. **Feature Card — Cash Forecast Automation** (Home)
   AI suggestion (93% confidence): Complete three-column product feature with a highlighted benefit phrase, central cash-forecast dashboard visual, and supporting real-time visibility copy.
   Capture: 1440×480px; page bounds 3560–4040px of 7486px; source section ID: `435714cd-0ad9-4981-bb7f-18803812d5e3`; image: https://media.designdetails.io/library/6375953734995a3af43a2e05480737bc75e92716d1a26a3b8e99182cbe3f6407/435714cd-0ad9-4981-bb7f-18803812d5e3.webp
   SECTION.md v3.2: `435714cd-0ad9-4981-bb7f-18803812d5e3` (deterministic evidence; editorial review pending)
9. **Logo Cloud — Works Inside SAP Integrations** (Home)
   AI suggestion (96% confidence): Self-contained integration ecosystem section with SAP certification, a strong compatibility headline, and a complete row of supported platform logos.
   Capture: 1440×450px; page bounds 4400–4850px of 7486px; source section ID: `6611e8a2-ce4f-4fad-aa05-5cab20a0defc`; image: https://media.designdetails.io/library/00ef3aba859aa8403013dd717133b261030b92f9fbb0cbd39e5647987ba0d990/6611e8a2-ce4f-4fad-aa05-5cab20a0defc.webp
   SECTION.md v3.2: `6611e8a2-ce4f-4fad-aa05-5cab20a0defc` (deterministic evidence; editorial review pending)
10. **FAQ — Security and Product FAQ** (Home)
   AI suggestion (98% confidence): Complete two-column FAQ section with an introductory block, expanded security answer, certification badges, and collapsed accordion questions.
   Capture: 1440×539px; page bounds 6380–6919px of 7486px; source section ID: `c4990cc2-8aa4-4620-8d49-2705a685dd46`; image: https://media.designdetails.io/library/13ff196b3ed7c853b74db905e801c4af35fffe1c0c26823d92f89fabfb2935f3/c4990cc2-8aa4-4620-8d49-2705a685dd46.webp
   SECTION.md v3.2: `c4990cc2-8aa4-4620-8d49-2705a685dd46` (deterministic evidence; editorial review pending)
11. **CTA — Ready to End the Chase CTA** (Home)
   AI suggestion (97% confidence): Complete, visually distinctive end-of-page conversion panel with a bold headline, geometric artwork, and a clear “Book a demo” action.
   Capture: 1440×411px; page bounds 7075–7486px of 7486px; source section ID: `d96bc098-3889-4da6-9b5a-95d436355a93`; image: https://media.designdetails.io/library/b0a2677ea4f79cd7fc4a9384f0f5644365e4d1bd2e3bc084c0d05c6df5af72bf/d96bc098-3889-4da6-9b5a-95d436355a93.webp
   SECTION.md v3.2: `d96bc098-3889-4da6-9b5a-95d436355a93` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/0a65370fd810b2f263ca16d87593d4edfe1a4cfec998b696ced0fc42b05ce70e/desktop_full-03ebd71f-2026-10-13T18-38-18-965Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1116ef932447aa1291aa96d89f73ba12ca45ffe389cdbb99f98263c9c5d9ca3b/mobile_full-03ebd71f-2026-10-13T18-41-42-416Z.webp
- Open Graph image: https://media.designdetails.io/library/fd7850001a5fdcd717f6a24b413b025d505e5655fb09e17e0ca19d522461cc8d/og_image-03ebd71f-2026-10-13T18-39-00-644Z.webp
- Full-page video: https://media.designdetails.io/library/2795b3d685fe45189c17f7b33534e2dfa6d6d807ccb8b33e5f8a3a935dc87111/motion-1791919001726.mp4
- Video poster: https://media.designdetails.io/library/066713a6fa0dd5cc24929c662e115d787d201e66092266981507cb4b418af73f/motion-poster-1791919001726.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

- Announcement Bar
- Hero With Background Imagery
- Primary Button
- Outline Button
- Product UI
- Logo Strip
- Testimonial Card
- Stat Block
- Editorial Card
- FAQ Accordion
- CTA
- Visible Layout Grid
- Floating Glassmorphic Cards

## Quality rubric

Overall: 58.94/100 (Competent)
Evidence coverage: 80%
Judge tier: Competent
Verdict: Causa Prima is a well-executed B2B fintech marketing site with a genuinely consistent structural device—the visible grid with dot intersections—carried across every section, paired with unusually detailed, data-substantiated UI mockups that make abstract claims about invoice/cash automation concrete. Typography and color systems are coherent and purposeful rather than merely decorative. However, beyond the grid overlay the page follows a very recognizable funded-startup template (photographic hero with floating glass cards, logo marquee, flat-color stat block, FAQ accordion, diagonal-shape CTA), keeping originality in the mid-range, and motion could not be assessed at all from the supplied evidence, leaving a fifth of the rubric unscored. The result is a competently built, content-integrated system that falls short of the cross-section coherence and distinctive execution required for a 'good' or higher tier.

- Typography (15%): 62 — A single custom family (Culture) is used across an extremely wide range of sizes (from ~3px micro-labels in UI mockups up to 113.8px for the integrations marquee), with a legible hierarchy: 80px/-1.6px tracking display, 52px/-0.8px headings, 20px/25px body, and consistent uppercase 13-16px tracked labels for buttons and eyebrows. The system is competently built and used to differentiate dozens of UI-mockup micro-text roles, but it is a conventional geometric sans hierarchy rather than an expressive or risk-taking type system; weight variation is limited to 400/500.
- Color (10%): 58 — The palette is restrained and legible: a near-white canvas (#FCFCFB), near-black text (#242320), a warm orange primary action (#D96F35), and a muted grid-line gray (#A4A4A4). Secondary colors (blue #ABCEFE, green #186B4C, gold #AE8D3E, purple #8A3274) are used functionally as status/semantic indicators inside the UI mockups (matched/cleared/approved, discount captured, escalated) rather than decoratively, which is a sensible systemization. However the combination reads as a standard warm-neutral B2B SaaS palette with accent chips, and the large flat blue testimonial block (#ABCEFE) and orange CTA block are fairly default 'startup brand kit' choices rather than a distinctive chromatic identity.
- Layout (20%): 65 — The defining structural device—a continuous 1px grid with dot markers at intersections—runs the full length of the page and frames hero, logo strips, feature blocks, stat/testimonial section, integrations, press, FAQ, and CTA, giving the page an unusually consistent spine for a marketing site. Section rhythm is legible (bordered cells, consistent content-width constraint, alternating full-bleed color blocks against the grid). The hero's floating glass-morphic invoice/chat cards break the rigid grid intentionally to signal product realism. This is a genuinely multi-section systemized layout, not a single hero trick.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference; static DOM/CSS facts and crops cannot establish animation, transition, or scroll-behavior quality.
- Originality (25%): 51 — The visible-grid-with-dot-intersections overlay is a specific, consistently applied device that is somewhat harder to substitute than typical SaaS flourishes, and the invoice/agent-chat UI mockups with granular simulated data (PO numbers, invoice line items, live-looking status chips) show real craft. However the overall page vocabulary—full-bleed photographic hero with floating glass cards, pill CTA buttons, logo marquee, flat-color testimonial block with stat tiles, integrations wall, press-logo row, FAQ accordion, diagonal-shape CTA footer—closely follows the now-common funded-fintech-startup template. The grid-line treatment itself has become a recognizable trend in this genre rather than a singular invention, so novelty is present but not landmark-level.
- Content (10%): 63 — Copy and visuals are tightly coupled throughout: the hero's floating cards show the exact invoice/PO data referenced in the headline, the 'We automate / negotiate / forecast / steer' column is paired one-to-one with matching product screenshots (cash forecast chart, live doing-for-you ledger), and the testimonial's quote is immediately substantiated by adjacent stat tiles (86%, €1.6M, 11→2). Press mentions and compliance badges (SOC 2, ISO 27001, GDPR) are placed directly beside the security FAQ answer they support, reinforcing claims with evidence rather than generic icons.

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
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A calm sunset photo and bold black headline open the page, with small chat bubbles and an invoice card floating over the landscape to hint at two AI agents talking without feeling technical. Below, generous white space, rounded product screenshots in soft gold and blue panels, and a big blue proof statistic break the long page into easy, trustworthy chunks.

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