# Pleo — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.pleo.io/en
Captured: 2026-10-19
CSS measured: 2026-10-19T16:01:21.746Z at 1440×1000 — https://www.pleo.io/en
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 design is a modern, slightly playful take on B2B fintech software, characterized by generous whitespace, a light gray canvas, and a vibrant pink accent color. Typography is a strong focal point, using a proprietary geometric sans-serif (Pleo Scandi Gellix) at very large display sizes with tight letter spacing. The layout relies heavily on rounded feature cards and full-bleed imagery or background sections to separate content block by block, avoiding hard borders in favor of soft background color contrast.

## Classification

- Industry: other
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, bold, corporate, playful, scandinavian-clean, soft-tech
- Platform: Custom code
- Technology: React, Astro

## Typography

- Display: Pleo Scandi Gellix Headline — weight 400; size 78px; line-height 72px; tracking -1.3px; Regular (95% role confidence, computed values)
- Heading: Pleo Scandi Gellix Headline — weight 400; size 26px; line-height 31.2px; tracking normal; Regular (90% role confidence, computed values)
- Body: Pleo Scandi Gellix Text — weight 400; size 16px; line-height 21.3px; tracking normal; Regular (85% role confidence, computed values)

## Functional palette

- Text — text #131414: color-1: computed rgb(19, 20, 20); AI role: #131414 used for primary headings and body text. (95% role confidence, computed values)
- Primary Action — primary action #FEB6FE: color-3: computed rgb(254, 182, 254); AI role: #FEB6FE (pink) used for primary call-to-action buttons and highlighted section backgrounds. (95% role confidence, computed values)
- Canvas — canvas #FAFCFC: color-4: computed rgb(250, 252, 252); AI role: #FAFCFC used as the primary background color for the page body. (90% role confidence, computed values)
- Surface — surface #EEF4F4: color-2: computed rgb(238, 244, 244); AI role: #EEF4F4 used as the background color for feature cards and secondary sections. (85% role confidence, computed values)
- Muted Text — muted text #575B5B: color-6: computed rgb(87, 91, 91); AI role: #575B5B used for secondary, less prominent text descriptions. (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": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "h3",
        "text": "Employee and vendor cards with flexible limits to control spend",
        "top": 1260,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "The full picture of all your entities and spend in one place",
        "top": 1260,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "AI expense reviews that catch every out-of-policy spend",
        "top": 2252,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "26px",
    "lineHeight": "31.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "Spend management that matches your scale",
        "top": 1080,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "In sync with your workflow of choice",
        "top": 4004,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Take control of your spend today",
        "top": 5365,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "58px",
    "lineHeight": "60px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "First in Europe for business spend",
        "top": 349,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 44,
    "contexts": [
      {
        "tag": "div",
        "text": "Issue cards, pay bills, and automatically sync your books in the background",
        "top": 6200,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Real-time visibility and control of all your spend across teams and entities",
        "top": 6200,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Control global expenses with audit ready data and ERP integration",
        "top": 6200,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Martin Dalskov",
        "top": 4924,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Director of Finance",
        "top": 4953,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Faith Metobo",
        "top": 4780,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "More success stories",
        "top": 4998,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "More success stories",
        "top": 4854,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "More success stories",
        "top": 4926,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "26px",
    "lineHeight": "31.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Issue cards, pay bills, and automatically sync your books in the background",
        "top": 477,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Trusted by 40,000+ companies across Europe",
        "top": 928,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "From the first card tap to final reconciliation, Pleo gives you total control over company spend",
        "top": 1150,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "78px",
    "lineHeight": "72px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 60,
    "contexts": [
      {
        "tag": "li",
        "text": "Xero",
        "top": 3937,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "QuickBooks",
        "top": 4009,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "NetSuite",
        "top": 4081,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Small",
        "top": 77,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Medium",
        "top": 77,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Enterprise",
        "top": 77,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Slide 1 of 3",
        "top": 4623,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Instagram",
        "top": 6720,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "LinkedIn",
        "top": 6720,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "1-49 employees",
        "top": 93,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "50-1000 employees",
        "top": 93,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1000+ employees",
        "top": 93,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Pleo Scandi Gellix Headline",
    "fontStack": "\"Pleo Scandi Gellix Headline\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "74px",
    "lineHeight": "81.4px",
    "letterSpacing": "-1.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Automated by AI.",
        "top": 1979,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Governed by you.",
        "top": 1979,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "United Kingdom",
        "top": 6647,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Pleo Scandi Gellix Text",
    "fontStack": "\"Pleo Scandi Gellix Text\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "button",
        "text": "Solutions",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Resources",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Customers",
        "top": 12,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#131414",
    "alpha": 1,
    "cssValue": "rgb(19, 20, 20)",
    "count": 188,
    "contexts": [
      {
        "tag": "button",
        "text": "Get started",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Medium",
        "top": 77,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 571,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#EEF4F4",
    "alpha": 1,
    "cssValue": "rgb(238, 244, 244)",
    "count": 15,
    "contexts": [
      {
        "tag": "div",
        "text": "Small1-49 employeesMedium50-1000 employeesEnterprise1000+ employees",
        "top": 64,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "See all integrations",
        "top": 4098,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4118,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FEB6FE",
    "alpha": 1,
    "cssValue": "rgb(254, 182, 254)",
    "count": 76,
    "contexts": [
      {
        "tag": "button",
        "text": "Get started",
        "top": 8,
        "property": "control-background"
      },
      {
        "tag": "li",
        "text": "",
        "top": 69,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 571,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FAFCFC",
    "alpha": 1,
    "cssValue": "rgb(250, 252, 252)",
    "count": 13,
    "contexts": [
      {
        "tag": "body",
        "text": "astro-island,astro-slot,astro-static-slot{display:contents}(()=>{var e=async t=>{await(await t())()}",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Solutions",
        "top": 12,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Customers",
        "top": 12,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.011764705882352941,
    "cssValue": "oklab(0.190121 -0.00151508 -0.000462726 / 0.00999999)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "First in Europe for business spendIssue cards, pay bills, and automatically sync your books in the b",
        "top": 293,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#575B5B",
    "alpha": 1,
    "cssValue": "rgb(87, 91, 91)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Small",
        "top": 77,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "From the first card tap to final reconciliation, Pleo gives you total control over company spend",
        "top": 1150,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#6B7070",
    "alpha": 1,
    "cssValue": "rgb(107, 112, 112)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Director of Finance",
        "top": 4953,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5176,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#E1E6E6",
    "alpha": 1,
    "cssValue": "rgb(225, 230, 230)",
    "count": 14,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 8,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1316,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 5165,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "More success stories",
        "top": 4998,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5002,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical rhythm with large padding between distinct sections and internal padding within cards.
- Corner style: Soft, rounded corners applied consistently to buttons, tags, and larger feature cards.
- Radius: Buttons appear as fully rounded pills; cards likely use a radius of 12px to 16px.
- Borders: Mostly borderless design, relying on subtle background color shifts (#FAFCFC to #EEF4F4) to delineate areas.
- Buttons: Pill-shaped, typically solid fill for primary actions (pink) or subtle backgrounds for secondary actions.
- Content width: Content is constrained to a central max-width column, though background colors and imagery bleed to the viewport edges.
- Density: Low density, breathable layout emphasizing focus on typography and key visuals.
- Evidence: Visual inspection of the screenshots and dominant CSS color/font patterns provided in the facts.

## Sections

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

1. **Hero — Business Spend Management Hero** (Home)
   AI suggestion (98% confidence): Complete opening hero with integrated navigation, audience-size selector, strong headline, supporting copy, demo CTA, full-bleed travel imagery, and a customer logo trust row.
   Capture: 1440×1008px; page bounds 0–1008px of 7885px; source section ID: `b4e86055-4993-464a-b01a-b0a500ac64f4`; image: https://media.designdetails.io/library/c87070c089242612deba0ca3e9459c3b23d628d40772833972a43c04013631c1/b4e86055-4993-464a-b01a-b0a500ac64f4.webp
   SECTION.md v3.2: `b4e86055-4993-464a-b01a-b0a500ac64f4` (deterministic evidence; editorial review pending)
2. **Other — Accounting platform integrations** (Home)
   AI-proposed category: integrations
AI suggestion (91% confidence): Complete, visually distinctive integrations block with a clear workflow heading, CTA, and oversized list of supported accounting platforms.
   Capture: 1440×501px; page bounds 3992–4493px of 7885px; source section ID: `1010f0ae-37ef-464c-bb69-80e5e9c7e1b5`; image: https://media.designdetails.io/library/b12b325df02a8aa3cee9dea16af6e6b118efb87754d7261b83f19f6133d129fc/1010f0ae-37ef-464c-bb69-80e5e9c7e1b5.webp
   SECTION.md v3.2: `1010f0ae-37ef-464c-bb69-80e5e9c7e1b5` (deterministic evidence; editorial review pending)
3. **Testimonials — Customer reimbursement success story** (Home)
   AI suggestion (95% confidence): Self-contained testimonial carousel section combining a detailed customer quote, attribution, success-story link, controls, and customer imagery.
   Capture: 1440×810px; page bounds 4496–5306px of 7885px; source section ID: `556f948e-330f-4b62-8bff-d73684b5fab4`; image: https://media.designdetails.io/library/d842f7bafcc9358199ec200833c1e234aff4063b05ae6abcbced025605c9d9ba/556f948e-330f-4b62-8bff-d73684b5fab4.webp
   SECTION.md v3.2: `556f948e-330f-4b62-8bff-d73684b5fab4` (deterministic evidence; editorial review pending)
4. **Feature Grid — Solutions Built for Your Business** (Home)
   AI suggestion (97% confidence): Complete three-card grid for Small, Medium, and Enterprise customers, with a clear heading, distinct imagery, descriptions, and action links.
   Capture: 1440×886px; page bounds 5469–6355px of 7885px; source section ID: `9f02b286-3e9a-4541-b7f8-0c0e5d067a86`; image: https://media.designdetails.io/library/0f195d34d739739e8f551eb0252e036ffc6e342682c1bdeadf9bfb1947cf0e65/9f02b286-3e9a-4541-b7f8-0c0e5d067a86.webp
   SECTION.md v3.2: `9f02b286-3e9a-4541-b7f8-0c0e5d067a86` (deterministic evidence; editorial review pending)
5. **Footer — Pleo Sitemap Footer** (Home)
   AI suggestion (99% confidence): Complete, substantial footer with locale and social controls, company details, organized navigation columns, legal information, and a distinctive oversized Pleo wordmark.
   Capture: 1440×1302px; page bounds 6583–7885px of 7885px; source section ID: `6dd282b9-6294-4f2f-b50d-f16a51ad4754`; image: https://media.designdetails.io/library/7a27c7d1245c14e83498868fb89d183cbf1bd25f949705aeaa7e911c5792420a/6dd282b9-6294-4f2f-b50d-f16a51ad4754.webp
   SECTION.md v3.2: `6dd282b9-6294-4f2f-b50d-f16a51ad4754` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/bb7a4dc89f98ee48f96e14750a606a3599a465603eafe8d947a1bd1321b9de91/desktop_full-494da779-2026-10-19T16-01-21-758Z.webp
- Mobile screenshot: https://media.designdetails.io/library/2d229e53a17614cfa1b20dac0eddf2747de9f28c79a047fe01a4486e61eb8978/mobile_full-494da779-2026-10-19T16-02-03-125Z.webp
- Open Graph image: https://media.designdetails.io/library/9fc1e5b4b2cd47cba8c558a358baad122196daa258ed4fa0ad35f7bbf05bbf87/og_image-494da779-2026-10-19T16-01-29-610Z.webp
- Full-page video: https://media.designdetails.io/library/251887902dd8389d253c119d48cbfb99b8a2e56e2ea51ba5e6c45bee6b67849c/motion-1792425813912.mp4
- Video poster: https://media.designdetails.io/library/8992fb2b5848c925a4f19c3645b8633b92a78edb0e0d18eefd21b2ed433c5613/motion-poster-1792425813912.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Primary Button
- Feature Card
- Logo Strip
- Testimonial Card
- Footer
- Floating UI Snippets
- Oversized Typographical Footer

## Quality rubric

Overall: 54.85/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Pleo.io is a cleanly executed, well-organized B2B SaaS marketing site with a disciplined custom type scale, a restrained pink-accent palette, and feature cards that sensibly pair UI mockups with their copy — but nearly every structural and motion choice (pill CTAs, floating-UI feature cards, logo strip, testimonial carousel, scroll-triggered reveals, oversized footer wordmark) follows the now-standard fintech marketing template rather than introducing distinctive ideas, keeping the overall experience competent rather than distinguished.

- Typography (15%): 65 — A proprietary type family (Pleo Scandi Gellix Headline/Text) is applied with a genuine scale system: 78px/-1.3px tracking for hero-weight statements, 58-74px for section heroes, 26px subheads, 16/14px body, all sharing consistent negative tracking at large sizes. The hierarchy is legible and consistent across the full page (hero, feature cards, AI section, testimonials, integration list, footer). This is competent, disciplined type craft, but it is a single custom sans pushed across sizes rather than a system with multiple distinct voices, optical adjustments, or expressive pairing — a now-common SaaS display-type move.
- Color (10%): 60 — Palette is tightly controlled: near-black text (#131414) on an off-white canvas (#FAFCFC), a cool-gray surface tint (#EEF4F4) differentiating cards from canvas, and a single saturated pink (#FEB6FE) reserved for CTAs and accent sections (dark AI slab, pink integration/footer-CTA bands). The restraint is real and the accent is used with intent to mark 'important' moments. However this exact formula — neutral canvas + one punchy brand accent + near-black text — is the default contemporary SaaS palette, applied here competently but without an additional supporting hue, textural color move, or tonal range that would elevate it past conventional execution.
- Layout (20%): 61 — The page follows a well-executed but highly conventional modern SaaS marketing structure: sticky nav, hero with segmented toggle, logo strip, alternating two-column feature cards on tinted backgrounds, full-bleed photographic/video breakout sections, a pink statement band, integration marquee list, testimonial carousel, solutions grid, and an oversized wordmark footer. Spacing rhythm and card-to-canvas contrast are handled cleanly and borders are avoided in favor of background shifts, which is a tasteful, consistent system. But the block sequence (hero → logos → feature pairs → breakout photo → testimonials → integrations → CTA band → footer) is near-identical to dozens of other fintech/B2B sites, so while internally coherent, it shows little compositional risk or unique structural idea.
- Motion (20%): 58 — Observed motion includes a looping hero video, staggered slide-up reveals for UI mockup cards, a scrolling/rotating text list for integrations, autoplaying testimonial video thumbnails, and a scaling wordmark in the footer. These are coordinated across multiple sections rather than a single hero trick, which supports a mid-range score, but every individual effect (slide-up-on-scroll cards, marquee text list, logo-scales-in-footer) is a well-worn scroll-reveal pattern seen across current SaaS sites. No evidence of refined easing, timing nuance, or interactive/hover-driven motion was captured; quality of execution (smoothness, choreography precision) cannot be verified from the evidence provided.
- Originality (25%): 38 — Nearly every component — pill-shaped CTA buttons, rounded feature cards with floating UI-mockup overlays, a 'Trusted by' logo strip, a video testimonial carousel, a scrolling integrations list, and a page-filling wordmark in the footer — is an established, widely replicated pattern across B2B fintech/spend-management marketing sites (Ramp, Brex, Mercury, and peers use nearly identical structures). The one distinguishing choice is the saturated pink accent and the diamond/sparkle icon in the 'Automated by AI. Governed by you.' statement, but a single accent color and one icon motif do not constitute a systemic, hard-to-substitute idea. The site reads as competently executed category convention rather than a site built around any genuinely novel structural or conceptual premise.
- Content (10%): 58 — Content and design are reasonably well matched: feature cards pair specific product UI mockups (card limits, entity lists, policy-assistant tooltip, FX currency conversion, accounting sync badge) directly with their corresponding headline copy, and testimonials carry named quotes with photography/video of real people. The integration list names real accounting software (Xero, QuickBooks, NetSuite) and the trust strip uses recognizable client logos, giving the claims some concrete backing. The content is competently integrated into the visual system but doesn't push into territory where content and form are inseparable or mutually reinforcing beyond straightforward feature-illustration pairing.

Coverage: 100% 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

Hot pink accents and a dark card mockup pop against muted grey panels, making the product itself the focal point. Black full-width bands break the page into clear chapters, while real photography of offices and laptops keeps the pitch grounded and trustworthy rather than abstract.

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