# Preview of the Prima dashboard — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://causaprima.com/
Website: Causa Prima
Section ID: 4c7a80fb-4358-44b5-b0af-5d5eae2ad7a4
Status: deterministic evidence captured; editorial AI review pending

## Purpose

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

## Layout

1097×517px root; block

## Visual signature

minimal, geometric, corporate, typographic, gradient, wireframe-structure treatment at 1440×517px. The crop spans 1840–2357px of a 7486px page.

## Components

- Announcement Bar
- Navigation Bar
- Hero With Background Imagery
- Floating Product Card
- Primary Button
- Outline Button
- Logo Strip
- Product UI
- Stat Block
- Testimonial Card
- FAQ Accordion
- Badge
- Sticky Scroll Narrative
- Grid Cell Layout

## Evidence note

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

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: features
- Structure: 1097×517px root; block
- Layout: 1097×517px root; block
- Styles: minimal, geometric, corporate, typographic, gradient, wireframe-structure
- Components: Announcement Bar, Navigation Bar, Hero With Background Imagery, Floating Product Card, Primary Button, Outline Button, Logo Strip, Product UI, Stat Block, Testimonial Card, FAQ Accordion, Badge, Sticky Scroll Narrative, Grid Cell Layout
- Purpose: features section from the Home page of Causa Prima.
- Visual signature: color(srgb 0.970118 0.964078 0.949804) with 1097×517px root; block. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×517px; aspect ratio 2.785:1
- Page bounds: 1840–2357px of 7486px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

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

```json
{
  "sectionScale": [
    {
      "role": "body/supporting copy",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "8.9px",
      "weight": "500",
      "lineHeight": "12.4px",
      "letterSpacing": "0.1px",
      "sample": "Message from Acme’s agent",
      "element": "p",
      "occurrences": 8,
      "sourceId": "font-5"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "10.5px",
      "weight": "400",
      "lineHeight": "15.2px",
      "letterSpacing": "0.1px",
      "sample": "Invoices → 1.284 handled overnight",
      "element": "li",
      "occurrences": 7,
      "sourceId": "font-8"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "4.4px",
      "weight": "400",
      "lineHeight": "6.6px",
      "letterSpacing": "normal",
      "sample": "Bill to",
      "element": "span",
      "occurrences": 15,
      "sourceId": "font-12"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "5.7px",
      "weight": "500",
      "lineHeight": "5.7px",
      "letterSpacing": "0.8px",
      "sample": "Today",
      "element": "span",
      "occurrences": 10,
      "sourceId": "font-15"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "4.8px",
      "weight": "500",
      "lineHeight": "4.8px",
      "letterSpacing": "0.7px",
      "sample": "Prior · 13.000 €",
      "element": "span",
      "occurrences": 7,
      "sourceId": "font-16"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "7.3px",
      "weight": "400",
      "lineHeight": "10.2px",
      "letterSpacing": "0.1px",
      "sample": "+8.400 € vs prior 30 days · avg 2,3%",
      "element": "span",
      "occurrences": 4,
      "sourceId": "font-27"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "10.5px",
      "weight": "500",
      "lineHeight": "15.2px",
      "letterSpacing": "0.1px",
      "sample": "Invoices",
      "element": "b",
      "occurrences": 3,
      "sourceId": "font-31"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "7.3px",
      "weight": "500",
      "lineHeight": "10.2px",
      "letterSpacing": "0.1px",
      "sample": "Matching",
      "element": "span",
      "occurrences": 3,
      "sourceId": "font-34"
    },
    {
      "role": "UI/supporting text",
      "family": "Culture",
      "stack": "Culture, \"Culture Fallback\", \"Culture Fallback Roboto\", ui-sans-serif, system-ui, sans-serif",
      "size": "3.3px",
      "weight": "400",
      "lineHeight": "3.3px",
      "letterSpacing": "0.5px",
      "sample": "Invoice",
      "element": "span",
      "occurrences": 3,
      "sourceId": "font-36"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "80px",
      "family": "Culture",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Culture Regular at 80px with -1.6px letter spacing; used for the primary page title and massive section headers.",
      "sampleId": "font-1",
      "confidence": 1,
      "lineHeight": "80px",
      "letterSpacing": "-1.6px"
    },
    {
      "role": "heading",
      "size": "52px",
      "family": "Culture",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Culture Regular at 52px; used for secondary section headings like 'One platform for your entire...'.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "53px",
      "letterSpacing": "-0.8px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "Culture",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Culture Regular at 20px; used for standard paragraph text describing features.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "25px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "16px",
      "family": "Culture",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-13: computed CSS at 1440×1000; AI role: 16px uppercase with 0.3px tracking; used for functional elements like the announcement bar, acting structurally like a mono/utility style.",
      "sampleId": "font-13",
      "confidence": 0.7,
      "lineHeight": "16px",
      "letterSpacing": "0.3px"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#ABCEFE",
      "cssValue": "rgb(171, 206, 254)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "svg-fill"
      ],
      "occurrences": 11,
      "sourceId": "color-5"
    },
    {
      "value": "#F7F6F2",
      "cssValue": "color(srgb 0.970118 0.964078 0.949804)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-7"
    },
    {
      "value": "#8A3274",
      "cssValue": "rgb(138, 50, 116)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 3,
      "sourceId": "color-13"
    },
    {
      "value": "#314488",
      "cssValue": "rgb(49, 68, 136)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-stroke",
        "::after-background"
      ],
      "occurrences": 7,
      "sourceId": "color-16"
    },
    {
      "value": "#272727",
      "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.05)",
      "alpha": 0.050980392156862744,
      "appliedAs": [
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-18"
    },
    {
      "value": "#242321",
      "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.52)",
      "alpha": 0.5215686274509804,
      "appliedAs": [
        "text",
        "svg-stroke"
      ],
      "occurrences": 28,
      "sourceId": "color-19"
    },
    {
      "value": "#F7F7F6",
      "cssValue": "color(srgb 0.967059 0.966961 0.962843)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-27"
    },
    {
      "value": "#AE8D3E",
      "cssValue": "rgb(174, 141, 62)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "background"
      ],
      "occurrences": 10,
      "sourceId": "color-33"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.7)",
      "alpha": 0.7019607843137254,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-34"
    },
    {
      "value": "#222222",
      "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.15)",
      "alpha": 0.14901960784313725,
      "appliedAs": [
        "border"
      ],
      "occurrences": 16,
      "sourceId": "color-36"
    },
    {
      "value": "#803D2C",
      "cssValue": "rgb(128, 61, 44)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 1,
      "sourceId": "color-39"
    },
    {
      "value": "#F0C5AF",
      "cssValue": "color(srgb 0.941176 0.772549 0.682353 / 0.55)",
      "alpha": 0.5490196078431373,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-40"
    },
    {
      "value": "#27271D",
      "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.1)",
      "alpha": 0.10196078431372549,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-42"
    },
    {
      "value": "#24241F",
      "cssValue": "color(srgb 0.141176 0.137255 0.12549 / 0.7)",
      "alpha": 0.7019607843137254,
      "appliedAs": [
        "text"
      ],
      "occurrences": 3,
      "sourceId": "color-43"
    },
    {
      "value": "#7189C5",
      "cssValue": "rgb(113, 137, 197)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 8,
      "sourceId": "color-44"
    },
    {
      "value": "#DDEBFC",
      "cssValue": "color(srgb 0.867529 0.919686 0.988784)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-45"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FCFCFB",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(252, 252, 251); AI role: #FCFCFB (off-white) serves as the default background color for the majority of the document.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#242320",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed rgb(36, 35, 32); AI role: #242320 (dark charcoal) used heavily for primary headings and body copy.",
      "sampleId": "color-4",
      "confidence": 1
    },
    {
      "hex": "#D96F35",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-11: computed rgb(217, 111, 53); AI role: #D96F35 (terracotta orange) applied consistently to the 'Book a demo' CTA buttons.",
      "sampleId": "color-11",
      "confidence": 0.95
    },
    {
      "hex": "#ABCEFE",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(171, 206, 254); AI role: #ABCEFE (light blue) provides a contrasting background block for the testimonial and stats section.",
      "sampleId": "color-5",
      "confidence": 0.9
    },
    {
      "hex": "#A4A4A4",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-1: computed rgb(164, 164, 164); AI role: #A4A4A4 (gray) used extensively to draw the structural grid lines across the layout.",
      "sampleId": "color-1",
      "confidence": 0.85
    },
    {
      "hex": "#5A6779",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-10: computed oklab(0.510391 -0.00829063 -0.0311023); AI role: #5A6779 (slate gray) used for secondary or less prominent text elements.",
      "sampleId": "color-10",
      "confidence": 0.75
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px for layout containers; 999px (pill) for buttons; moderate (~12px) for UI cards.",
  "density": "Low macro density with vast amounts of canvas space, contrasted by high micro-density inside the detailed Product UI mockups.",
  "evidence": "The juxtaposition of the sharp structural grid (borders everywhere) against the soft gradients and rounded UI mockups defines the entire aesthetic.",
  "borderStyle": "Ubiquitous 1px solid hairline borders (often gray) extending to the edges of the screen, creating a wireframe aesthetic.",
  "buttonStyle": "Solid terracotta orange or transparent outline, consistently pill-shaped with uppercase or title-case text.",
  "cornerStyle": "A deliberate mix of extremes: the macro layout features razor-sharp 0px corners defined by grid lines, while buttons are fully rounded (pill-shaped) and Product UI mockups have soft radii (approx 8-16px).",
  "contentWidth": "Edge-to-edge structural lines with a constrained maximum width for readable text content, often aligned to a central or multi-column invisible grid.",
  "spacingRhythm": "Highly structured by a visible grid. Sections have massive vertical padding, while inner elements are precisely aligned to the dividing lines."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1097×517px; block; padding {"top":"0px","right":"0px","bottom":"0px","left":"0px"}; gap normal; background color(srgb 0.970118 0.964078 0.949804); radius 0px.
- Observed gaps: 3, 3.2, 4, 4.8, 5.7, 6.5px.
- Representative content widths: 1097, 482, 481, 357, 308, 288, 273, 271px.
- Layout containers: 7; cards/surfaces: 1; media elements: 9; browser animations: 5.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 1840,
      "bottom": 2402,
      "pageHeight": 8910
    }
  },
  "container": {
    "size": "1097×517px",
    "position": "x 172px, y 1840px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "color(srgb 0.970118 0.964078 0.949804)",
    "radius": "0px",
    "border": "0px solid rgb(36, 35, 32)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      3,
      3.2,
      4,
      4.8,
      5.7,
      6.5
    ],
    "representativeContentWidthsPx": [
      1097,
      482,
      481,
      357,
      308,
      288,
      273,
      271
    ]
  },
  "columns": [
    {
      "element": "button · toggle",
      "size": "19×19px",
      "position": "x 1220px, y 1859px",
      "display": "grid",
      "template": "19.3594px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "li · Apex Office Co.4.200 €INV-8822 · Due todayMatchingPaid",
      "size": "308×34px",
      "position": "x 932px, y 2220px",
      "display": "grid",
      "template": "273.141px 34.375px",
      "direction": "row",
      "gap": "3.22857px normal"
    },
    {
      "element": "li · Brightline Retail42.800 €Asking their agent for a dateIn talks",
      "size": "308×40px",
      "position": "x 932px, y 2254px",
      "display": "grid",
      "template": "267.203px 40.3125px",
      "direction": "row",
      "gap": "3.22857px normal"
    },
    {
      "element": "li · TechFlow Systems87.500 €INV-8823 · Due 6 NovAbove your limit",
      "size": "308×34px",
      "position": "x 932px, y 2327px",
      "display": "grid",
      "template": "243.266px 64.25px",
      "direction": "row",
      "gap": "3.22857px normal"
    },
    {
      "element": "li · → 1.284 handled overnight",
      "size": "249×15px",
      "position": "x 308px, y 1961px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "5.65px"
    },
    {
      "element": "li · → matched · paid",
      "size": "249×15px",
      "position": "x 308px, y 1976px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "5.65px"
    },
    {
      "element": "li · → above your limit · sent to your CFO",
      "size": "249×15px",
      "position": "x 308px, y 1992px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "5.65px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "section · TodayCashNetworkKnowledgeIZInvoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow",
      "size": "1097×517px",
      "position": "x 172px, y 1840px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px solid rgb(36, 35, 32)",
      "shadow": "none",
      "background": "color(srgb 0.970118 0.964078 0.949804)"
    }
  ],
  "surfaces": {
    "radii": [
      "50%",
      "12.9143px",
      "79.9071px",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "color(srgb 0.141176 0.137255 0.12549 / 0.15) 0px 0px 0px 0.5px inset"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "308×65px",
    "position": "x 932px, y 2002px",
    "aspectRatio": 4.7,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "15×12px",
    "position": "x 210px, y 1863px",
    "aspectRatio": 1.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "10×10px",
    "position": "x 1225px, y 1864px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "9×9px",
    "position": "x 308px, y 1964px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "9×9px",
    "position": "x 308px, y 1980px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "9×9px",
    "position": "x 308px, y 1995px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "9×9px",
    "position": "x 313px, y 2329px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "9×9px",
    "position": "x 772px, y 2329px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "6×6px",
    "position": "x 747px, y 2330px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[
  {
    "target": "Apex Office Co.4.200 €INV-8822 · Due todayMatchingPaid",
    "delayMs": 0,
    "durationMs": null,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "offset": 0,
        "easing": "linear",
        "composite": "auto",
        "translate": "0px 8.07142px",
        "opacity": "0",
        "computedOffset": 0
      },
      {
        "offset": 1,
        "easing": "linear",
        "composite": "replace",
        "translate": "none",
        "opacity": "1",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "Matching",
    "delayMs": 0,
    "durationMs": null,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "offset": 0,
        "easing": "linear",
        "composite": "replace",
        "translate": "none",
        "opacity": "1",
        "computedOffset": 0
      },
      {
        "offset": 1,
        "easing": "linear",
        "composite": "auto",
        "translate": "0px -70%",
        "opacity": "0",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "Paid",
    "delayMs": 0,
    "durationMs": null,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "offset": 0,
        "easing": "linear",
        "composite": "auto",
        "translate": "0px 70%",
        "opacity": "0",
        "computedOffset": 0
      },
      {
        "offset": 1,
        "easing": "linear",
        "composite": "replace",
        "translate": "none",
        "opacity": "1",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "Brightline Retail42.800 €Asking their agent for a dateIn talks",
    "delayMs": 0,
    "durationMs": null,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "offset": 0,
        "easing": "linear",
        "composite": "auto",
        "translate": "0px 8.07142px",
        "opacity": "0",
        "computedOffset": 0
      },
      {
        "offset": 1,
        "easing": "linear",
        "composite": "replace",
        "translate": "none",
        "opacity": "1",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "TechFlow Systems87.500 €INV-8823 · Due 6 NovAbove your limit",
    "delayMs": 0,
    "durationMs": null,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "offset": 0,
        "easing": "linear",
        "composite": "auto",
        "translate": "0px 8.07142px",
        "opacity": "0",
        "computedOffset": 0
      },
      {
        "offset": 1,
        "easing": "linear",
        "composite": "replace",
        "translate": "none",
        "opacity": "1",
        "computedOffset": 1
      }
    ]
  }
]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-13T18:38:36.387Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 1840,
    "bottom": 2402,
    "pageHeight": 8910
  },
  "root": {
    "id": "ld-557",
    "tag": "section",
    "role": null,
    "label": "TodayCashNetworkKnowledgeIZInvoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow ",
    "rect": {
      "x": 172,
      "y": 1840,
      "width": 1097,
      "height": 517
    },
    "display": "block",
    "position": "static",
    "padding": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": null,
    "background": "color(srgb 0.970118 0.964078 0.949804)",
    "radius": "0px",
    "border": "0px solid rgb(36, 35, 32)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "gapsPx": [
      3,
      3.2,
      4,
      4.8,
      5.7,
      6.5
    ],
    "representativeContentWidthsPx": [
      1097,
      482,
      481,
      357,
      308,
      288,
      273,
      271
    ]
  },
  "columns": [
    {
      "id": "ld-579",
      "tag": "button",
      "role": null,
      "label": "toggle",
      "rect": {
        "x": 1220,
        "y": 1859,
        "width": 19,
        "height": 19
      },
      "display": "grid",
      "columns": "19.3594px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "id": "ld-819",
      "tag": "li",
      "role": null,
      "label": "Apex Office Co.4.200 €INV-8822 · Due todayMatchingPaid",
      "rect": {
        "x": 932,
        "y": 2220,
        "width": 308,
        "height": 34
      },
      "display": "grid",
      "columns": "273.141px 34.375px",
      "direction": "row",
      "gap": "3.22857px normal"
    },
    {
      "id": "ld-828",
      "tag": "li",
      "role": null,
      "label": "Brightline Retail42.800 €Asking their agent for a dateIn talks",
      "rect": {
        "x": 932,
        "y": 2254,
        "width": 308,
        "height": 40
      },
      "display": "grid",
      "columns": "267.203px 40.3125px",
      "direction": "row",
      "gap": "3.22857px normal"
    },
    {
      "id": "ld-840",
      "tag": "li",
      "role": null,
      "label": "TechFlow Systems87.500 €INV-8823 · Due 6 NovAbove your limit",
      "rect": {
        "x": 932,
        "y": 2327,
        "width": 308,
        "height": 34
      },
      "display": "grid",
      "columns": "243.266px 64.25px",
      "direction": "row",
      "gap": "3.22857px normal"
    },
    {
      "id": "ld-590",
      "tag": "li",
      "role": null,
      "label": "→ 1.284 handled overnight",
      "rect": {
        "x": 308,
        "y": 1961,
        "width": 249,
        "height": 15
      },
      "display": "flex",
      "columns": null,
      "direction": "row",
      "gap": "5.65px"
    },
    {
      "id": "ld-594",
      "tag": "li",
      "role": null,
      "label": "→ matched · paid",
      "rect": {
        "x": 308,
        "y": 1976,
        "width": 249,
        "height": 15
      },
      "display": "flex",
      "columns": null,
      "direction": "row",
      "gap": "5.65px"
    },
    {
      "id": "ld-599",
      "tag": "li",
      "role": null,
      "label": "→ above your limit · sent to your CFO",
      "rect": {
        "x": 308,
        "y": 1992,
        "width": 249,
        "height": 15
      },
      "display": "flex",
      "columns": null,
      "direction": "row",
      "gap": "5.65px"
    }
  ],
  "cards": [
    {
      "id": "ld-557",
      "tag": "section",
      "role": null,
      "label": "TodayCashNetworkKnowledgeIZInvoices → 1.284 handled overnightApex → INV-8822 matched · paidTechFlow ",
      "rect": {
        "x": 172,
        "y": 1840,
        "width": 1097,
        "height": 517
      },
      "radius": "0px",
      "border": "0px solid rgb(36, 35, 32)",
      "shadow": "none",
      "background": "color(srgb 0.970118 0.964078 0.949804)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    }
  ],
  "surfaces": {
    "radii": [
      "50%",
      "12.9143px",
      "79.9071px",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "color(srgb 0.141176 0.137255 0.12549 / 0.15) 0px 0px 0px 0.5px inset"
    ]
  },
  "media": [
    {
      "id": "ld-741",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 932,
        "y": 2002,
        "width": 308,
        "height": 65
      },
      "aspectRatio": 4.7,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "visible",
      "media": null
    },
    {
      "id": "ld-561",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 210,
        "y": 1863,
        "width": 15,
        "height": 12
      },
      "aspectRatio": 1.3,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-580",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 1225,
        "y": 1864,
        "width": 10,
        "height": 10
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-591",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 308,
        "y": 1964,
        "width": 9,
        "height": 9
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-595",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 308,
        "y": 1980,
        "width": 9,
        "height": 9
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-600",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 308,
        "y": 1995,
        "width": 9,
        "height": 9
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-716",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 313,
        "y": 2329,
        "width": 9,
        "height": 9
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-724",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 772,
        "y": 2329,
        "width": 9,
        "height": 9
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    },
    {
      "id": "ld-721",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 747,
        "y": 2330,
        "width": 6,
        "height": 6
      },
      "aspectRatio": 1,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    }
  ],
  "animations": [
    {
      "id": "animation-136",
      "target": {
        "id": "ld-819",
        "tag": "li",
        "role": null,
        "label": "Apex Office Co.4.200 €INV-8822 · Due todayMatchingPaid",
        "rect": {
          "x": 932,
          "y": 2220,
          "width": 308,
          "height": 34
        }
      },
      "playState": "running",
      "playbackRate": 1,
      "delayMs": 0,
      "durationMs": null,
      "easing": "linear",
      "iterations": 1,
      "direction": "normal",
      "fill": "both",
      "keyframes": [
        {
          "offset": 0,
          "easing": "linear",
          "composite": "auto",
          "translate": "0px 8.07142px",
          "opacity": "0",
          "computedOffset": 0
        },
        {
          "offset": 1,
          "easing": "linear",
          "composite": "replace",
          "translate": "none",
          "opacity": "1",
          "computedOffset": 1
        }
      ]
    },
    {
      "id": "animation-137",
      "target": {
        "id": "ld-825",
        "tag": "span",
        "role": null,
        "label": "Matching",
        "rect": {
          "x": 1207,
          "y": 2240,
          "width": 32,
          "height": 10
        }
      },
      "playState": "running",
      "playbackRate": 1,
      "delayMs": 0,
      "durationMs": null,
      "easing": "linear",
      "iterations": 1,
      "direction": "normal",
      "fill": "both",
      "keyframes": [
        {
          "offset": 0,
          "easing": "linear",
          "composite": "replace",
          "translate": "none",
          "opacity": "1",
          "computedOffset": 0
        },
        {
          "offset": 1,
          "easing": "linear",
          "composite": "auto",
          "translate": "0px -70%",
          "opacity": "0",
          "computedOffset": 1
        }
      ]
    },
    {
      "id": "animation-138",
      "target": {
        "id": "ld-826",
        "tag": "span",
        "role": null,
        "label": "Paid",
        "rect": {
          "x": 1217,
          "y": 2247,
          "width": 23,
          "height": 10
        }
      },
      "playState": "running",
      "playbackRate": 1,
      "delayMs": 0,
      "durationMs": null,
      "easing": "linear",
      "iterations": 1,
      "direction": "normal",
      "fill": "both",
      "keyframes": [
        {
          "offset": 0,
          "easing": "linear",
          "composite": "auto",
          "translate": "0px 70%",
          "opacity": "0",
          "computedOffset": 0
        },
        {
          "offset": 1,
          "easing": "linear",
          "composite": "replace",
          "translate": "none",
          "opacity": "1",
          "computedOffset": 1
        }
      ]
    },
    {
      "id": "animation-139",
      "target": {
        "id": "ld-828",
        "tag": "li",
        "role": null,
        "label": "Brightline Retail42.800 €Asking their agent for a dateIn talks",
        "rect": {
          "x": 932,
          "y": 2254,
          "width": 308,
          "height": 40
        }
      },
      "playState": "running",
      "playbackRate": 1,
      "delayMs": 0,
      "durationMs": null,
      "easing": "linear",
      "iterations": 1,
      "direction": "normal",
      "fill": "both",
      "keyframes": [
        {
          "offset": 0,
          "easing": "linear",
          "composite": "auto",
          "translate": "0px 8.07142px",
          "opacity": "0",
          "computedOffset": 0
        },
        {
          "offset": 1,
          "easing": "linear",
          "composite": "replace",
          "translate": "none",
          "opacity": "1",
          "computedOffset": 1
        }
      ]
    },
    {
      "id": "animation-142",
      "target": {
        "id": "ld-840",
        "tag": "li",
        "role": null,
        "label": "TechFlow Systems87.500 €INV-8823 · Due 6 NovAbove your limit",
        "rect": {
          "x": 932,
          "y": 2327,
          "width": 308,
          "height": 34
        }
      },
      "playState": "running",
      "playbackRate": 1,
      "delayMs": 0,
      "durationMs": null,
      "easing": "linear",
      "iterations": 1,
      "direction": "normal",
      "fill": "both",
      "keyframes": [
        {
          "offset": 0,
          "easing": "linear",
          "composite": "auto",
          "translate": "0px 8.07142px",
          "opacity": "0",
          "computedOffset": 0
        },
        {
          "offset": 1,
          "easing": "linear",
          "composite": "replace",
          "translate": "none",
          "opacity": "1",
          "computedOffset": 1
        }
      ]
    }
  ],
  "coverage": {
    "elementsInSection": 97,
    "cards": 1,
    "media": 9,
    "animations": 5
  },
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ]
}
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: Not assessed
- What transfers: Documented hierarchy and composition
- Dependencies: None recorded
- Guidance: Adapt the pattern to the new product and content.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Preview of the Prima dashboard”.

Purpose: features section from the Home page of Causa Prima.

Structure: 1097×517px root; block. Source layout label: 1097×517px root; block. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: color(srgb 0.970118 0.964078 0.949804) with 1097×517px root; block. Inspect the crop for image and content hierarchy.

Components: Announcement Bar, Navigation Bar, Hero With Background Imagery, Floating Product Card, Primary Button, Outline Button, Logo Strip, Product UI, Stat Block, Testimonial Card, FAQ Accordion, Badge, Sticky Scroll Narrative, Grid Cell Layout.

Style direction: minimal, geometric, corporate, typographic, gradient, wireframe-structure.

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

Typography evidence: {"role":"display","size":"80px","family":"Culture","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: Culture Regular at 80px with -1.6px letter spacing; used for the primary page title and massive section headers.","sampleId":"font-1","confidence":1,"lineHeight":"80px","letterSpacing":"-1.6px"} {"role":"heading","size":"52px","family":"Culture","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: Culture Regular at 52px; used for secondary section headings like 'One platform for your entire...'.","sampleId":"font-2","confidence":0.95,"lineHeight":"53px","letterSpacing":"-0.8px"} {"role":"body","size":"20px","family":"Culture","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Culture Regular at 20px; used for standard paragraph text describing features.","sampleId":"font-4","confidence":0.95,"lineHeight":"25px","letterSpacing":"normal"} {"role":"mono","size":"16px","family":"Culture","source":"computed","traits":"uppercase","weight":"400","evidence":"font-13: computed CSS at 1440×1000; AI role: 16px uppercase with 0.3px tracking; used for functional elements like the announcement bar, acting structurally like a mono/utility style.","sampleId":"font-13","confidence":0.7,"lineHeight":"16px","letterSpacing":"0.3px"}

Color evidence: {"hex":"#FCFCFB","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(252, 252, 251); AI role: #FCFCFB (off-white) serves as the default background color for the majority of the document.","sampleId":"color-2","confidence":1} {"hex":"#242320","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(36, 35, 32); AI role: #242320 (dark charcoal) used heavily for primary headings and body copy.","sampleId":"color-4","confidence":1} {"hex":"#D96F35","name":"primary action","role":"primary-action","source":"computed","evidence":"color-11: computed rgb(217, 111, 53); AI role: #D96F35 (terracotta orange) applied consistently to the 'Book a demo' CTA buttons.","sampleId":"color-11","confidence":0.95} {"hex":"#ABCEFE","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(171, 206, 254); AI role: #ABCEFE (light blue) provides a contrasting background block for the testimonial and stats section.","sampleId":"color-5","confidence":0.9} {"hex":"#A4A4A4","name":"border","role":"border","source":"computed","evidence":"color-1: computed rgb(164, 164, 164); AI role: #A4A4A4 (gray) used extensively to draw the structural grid lines across the layout.","sampleId":"color-1","confidence":0.85} {"hex":"#5A6779","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed oklab(0.510391 -0.00829063 -0.0311023); AI role: #5A6779 (slate gray) used for secondary or less prominent text elements.","sampleId":"color-10","confidence":0.75}

Typography measured inside this section: {"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-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-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-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-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-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-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"}]}

Colors measured inside this section: {"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-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-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-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-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-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-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"}]}

Exact section measurements from the saved element map: root {"rect":{"x":172,"y":1840,"width":1097,"height":517},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[3,3.2,4,4.8,5.7,6.5],"representativeContentWidthsPx":[1097,482,481,357,308,288,273,271]}; surfaces {"radii":["50%","12.9143px","79.9071px","999px"],"borders":[],"shadows":["color(srgb 0.141176 0.137255 0.12549 / 0.15) 0px 0px 0px 0.5px inset"]}; media [{"tag":"svg","rect":{"x":932,"y":2002,"width":308,"height":65},"aspectRatio":4.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":210,"y":1863,"width":15,"height":12},"aspectRatio":1.3,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1225,"y":1864,"width":10,"height":10},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":308,"y":1964,"width":9,"height":9},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-819","tag":"li","role":null,"label":"Apex Office Co.4.200 €INV-8822 · Due todayMatchingPaid","rect":{"x":932,"y":2220,"width":308,"height":34}},"delayMs":0,"durationMs":null,"easing":"linear","keyframes":[{"offset":0,"easing":"linear","composite":"auto","translate":"0px 8.07142px","opacity":"0","computedOffset":0},{"offset":1,"easing":"linear","composite":"replace","translate":"none","opacity":"1","computedOffset":1}]},{"target":{"id":"ld-825","tag":"span","role":null,"label":"Matching","rect":{"x":1207,"y":2240,"width":32,"height":10}},"delayMs":0,"durationMs":null,"easing":"linear","keyframes":[{"offset":0,"easing":"linear","composite":"replace","translate":"none","opacity":"1","computedOffset":0},{"offset":1,"easing":"linear","composite":"auto","translate":"0px -70%","opacity":"0","computedOffset":1}]},{"target":{"id":"ld-826","tag":"span","role":null,"label":"Paid","rect":{"x":1217,"y":2247,"width":23,"height":10}},"delayMs":0,"durationMs":null,"easing":"linear","keyframes":[{"offset":0,"easing":"linear","composite":"auto","translate":"0px 70%","opacity":"0","computedOffset":0},{"offset":1,"easing":"linear","composite":"replace","translate":"none","opacity":"1","computedOffset":1}]},{"target":{"id":"ld-828","tag":"li","role":null,"label":"Brightline Retail42.800 €Asking their agent for a dateIn talks","rect":{"x":932,"y":2254,"width":308,"height":40}},"delayMs":0,"durationMs":null,"easing":"linear","keyframes":[{"offset":0,"easing":"linear","composite":"auto","translate":"0px 8.07142px","opacity":"0","computedOffset":0},{"offset":1,"easing":"linear","composite":"replace","translate":"none","opacity":"1","computedOffset":1}]},{"target":{"id":"ld-840","tag":"li","role":null,"label":"TechFlow Systems87.500 €INV-8823 · Due 6 NovAbove your limit","rect":{"x":932,"y":2327,"width":308,"height":34}},"delayMs":0,"durationMs":null,"easing":"linear","keyframes":[{"offset":0,"easing":"linear","composite":"auto","translate":"0px 8.07142px","opacity":"0","computedOffset":0},{"offset":1,"easing":"linear","composite":"replace","translate":"none","opacity":"1","computedOffset":1}]}]

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

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

No explicit dependencies were recorded.

Adapt the pattern to the new product and content.

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