# Pliant — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.getpliant.com/en-us
Captured: 2026-11-05
CSS measured: 2026-11-05T15:56:30.537Z at 1440×1000 — https://www.getpliant.com/en-us
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: claude-sonnet-5

## Design direction

The Pliant website features a clean, modern, and minimal aesthetic combined with bold, colorful geometric elements. It utilizes generous white space, rounded corners, and a vibrant neon yellow accent color against primarily off-white and dark slate backgrounds. The typography pairs a geometric sans-serif for headings with a clean sans-serif for body copy, contributing to a highly readable and professional tech-focused design.

## Classification

- Industry: finance
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, colourful, geometric, corporate, tech-modern
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Pangea — weight 400; size 56px; line-height 64px; tracking normal; Regular (95% role confidence, computed values)
- Heading: Pangea — weight 400; size 48px; line-height 56px; tracking normal; Regular (90% role confidence, computed values)
- Body: GeistSans — weight 400; size 18px; line-height 32px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #F5F5F0: color-1: computed rgb(245, 245, 240); AI role: Off-white (#F5F5F0) used as the primary background color for most of the page. (90% role confidence, computed values)
- Accent — accent #E7FF53: color-10: computed rgb(231, 255, 83); AI role: Neon yellow (#E7FF53) used for badges, highlights, and the AI graphic pattern. (90% role confidence, computed values)
- Surface — surface #FFFFFF: color-4: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for elevated surfaces like the navigation bar and certain feature cards. (85% 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": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "18px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "h4",
        "text": "Real-time monitoring",
        "top": 4516,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Real-time monitoring",
        "top": 4516,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Spend control",
        "top": 4516,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "GeistSans",
    "fontStack": "GeistSans, \"GeistSans Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Customize everything you need to make payments, control spend, and optimize finance operations using",
        "top": 305,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Our products",
        "top": 2717,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Streamline processes with Pliant’s best-in-class credit cards and card management apps.",
        "top": 3223,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "56px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Payment Apps",
        "top": 2837,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Pro API",
        "top": 2909,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "CaaS & BaaS",
        "top": 2981,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "24px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "90,000 single-use cards",
        "top": 1789,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "25%",
        "top": 1789,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "3x growth",
        "top": 1789,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Success stories possible with Pliant",
        "top": 1629,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Payment Apps",
        "top": 4372,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Pro API",
        "top": 4372,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "64px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Payments optimized",
        "top": 225,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "GeistSans",
    "fontStack": "GeistSans, \"GeistSans Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": "Close",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Home page",
        "top": 135,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "generated each year by Salabam Solutions",
        "top": 1829,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "GeistSans",
    "fontStack": "GeistSans, \"GeistSans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Beware of fraudulent websites appearing in Google Ads. Always ensure you are on getpliant.com before",
        "top": 16,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "+1 917-540-4658",
        "top": 5575,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "+1 917-877-7005",
        "top": 5575,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Pliant is certified as a Payment Card Industry (PCI) Data Security Standard service provider and has",
        "top": 7278,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Payment Card Industry (PCI) Data Security Standard",
        "top": 7278,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "ISO Certificate 27001-2022.",
        "top": 7278,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2020 – 2026 Pliant GmbH",
        "top": 7426,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "GeistSans",
    "fontStack": "GeistSans, \"GeistSans Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Pliant is a financial technology company, not an FDIC Insured bank. Banking services provided by Coa",
        "top": 7326,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 43,
    "contexts": [
      {
        "tag": "span",
        "text": "\"With",
        "top": 2130,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pliant,",
        "top": 2130,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "we're",
        "top": 2130,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Payment products",
        "top": 6436,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Platform products – Automation",
        "top": 6436,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Platform products – Programs",
        "top": 6436,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Follow us onlinkedinPliant's Youtube channel",
        "top": 7316,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "linkedin",
        "top": 7315,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pliant's Youtube channel",
        "top": 7315,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "Products",
        "top": 88,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Solutions",
        "top": 88,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Resources",
        "top": 88,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Pliant is the credit card platform that allows businesses to",
        "top": 1253,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "No matter if you use our Payment Apps, Pro API, or CaaS & BaaS solutions,",
        "top": 1349,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "and help you succeed.",
        "top": 1429,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "GeistSans",
    "fontStack": "GeistSans, \"GeistSans Fallback\"",
    "weight": "700",
    "size": "14px",
    "lineHeight": "24px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "b",
        "text": "getpliant.com",
        "top": 19,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Call Sales",
        "top": 5575,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Call Support",
        "top": 5575,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "b",
        "text": "optimize their payment processes.",
        "top": 1293,
        "property": "font"
      },
      {
        "tag": "b",
        "text": "Pliant will adapt to your unique needs",
        "top": 1389,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "SPOTLIGHT",
        "top": 6607,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "HIRING",
        "top": 6777,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "GeistSans",
    "fontStack": "GeistSans, \"GeistSans Fallback\"",
    "weight": "500",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Security alert",
        "top": 16,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 50,
    "contexts": [
      {
        "tag": "a",
        "text": "Cards",
        "top": 6460,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Business accounts",
        "top": 6496,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Credit & financing",
        "top": 6532,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Pangea",
    "fontStack": "Pangea, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Login",
        "top": 100,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get started",
        "top": 100,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Watch product tour",
        "top": 401,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F5F5F0",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 240)",
    "count": 20,
    "contexts": [
      {
        "tag": "a",
        "text": "\"With Pliant, we're deepening our relationships with customers and increasing overall customer satis",
        "top": 2037,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 0.8784313725490196,
    "cssValue": "lab(0 0 0 / 0.8775)",
    "count": 221,
    "contexts": [
      {
        "tag": "span",
        "text": "Security alert",
        "top": 16,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Beware of fraudulent websites appearing in Google Ads. Always ensure you are on getpliant.com before",
        "top": 16,
        "property": "text"
      },
      {
        "tag": "b",
        "text": "getpliant.com",
        "top": 19,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#19242A",
    "alpha": 1,
    "cssValue": "rgb(25, 36, 42)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3524,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 43,
    "contexts": [
      {
        "tag": "header",
        "text": "Home pageProductsPaymentsCardsAll card types, all B2B use casesBusiness AccountsAccounts for global ",
        "top": 80,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Get started",
        "top": 100,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Watch product tour",
        "top": 401,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#A5C3C3",
    "alpha": 1,
    "cssValue": "rgb(165, 195, 195)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5948,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#404C52",
    "alpha": 1,
    "cssValue": "rgb(64, 76, 82)",
    "count": 120,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3946,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#6B787E",
    "alpha": 1,
    "cssValue": "rgb(107, 120, 126)",
    "count": 27,
    "contexts": [
      {
        "tag": "cite",
        "text": "Christian Ritosek, CEO and Co-Founder of Candis",
        "top": 2314,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Pro API",
        "top": 2909,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Pro API",
        "top": 4372,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Pliant is the credit card platform that allows businesses to",
        "top": 1253,
        "property": "text"
      },
      {
        "tag": "b",
        "text": "optimize their payment processes.",
        "top": 1293,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E4D7CF",
    "alpha": 1,
    "cssValue": "rgb(228, 215, 207)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Security alertBeware of fraudulent websites appearing in Google Ads. Always ensure you are on getpli",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#E7FF53",
    "alpha": 1,
    "cssValue": "rgb(231, 255, 83)",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "Security alert",
        "top": 16,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3961,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 100,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "Watch product tour",
        "top": 401,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 0.1450980392156863,
    "cssValue": "oklab(0 0 0 / 0.146253)",
    "count": 29,
    "contexts": [
      {
        "tag": "header",
        "text": "Home pageProductsPaymentsCardsAll card types, all B2B use casesBusiness AccountsAccounts for global ",
        "top": 80,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Login",
        "top": 100,
        "property": "border"
      },
      {
        "tag": "li",
        "text": "Streamline processes with Pliant’s best-in-class credit cards and card management apps.Learn more",
        "top": 2717,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#E6FF52",
    "alpha": 1,
    "cssValue": "rgb(230, 255, 82)",
    "count": 1,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 6316,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#201C1C",
    "alpha": 1,
    "cssValue": "rgb(32, 28, 28)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6328,
        "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 spacing between major sections (often 100px+), creating a breathable, distinct layout. Inner padding in cards is proportional and balanced.
- Corner style: Consistently rounded corners across interactive and structural elements.
- Radius: Large border-radii used for cards (e.g., feature cards, testimonial cards) and fully rounded (pill-shaped) radii for buttons.
- Borders: Subtle 1px solid borders using semi-transparent colors (color-12) to delineate navigation and outlined buttons without adding visual weight.
- Buttons: Pill-shaped containers, predominantly using dark solid fills for primary actions, and outlined styles with transparent backgrounds for secondary actions.
- Content width: Content is constrained to a central max-width column, with some background elements breaking out to full bleed.
- Density: Low density. The design prioritizes whitespace and large typography over packing information tightly, creating a focused user experience.
- Evidence: Observations of the DOM properties for buttons, header borders, and overall layout structure in the provided screenshots.

## Sections

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

1. **Navbar — Pliant Navbar** (Home)
   A highlighted security notice sits above a slim menu, so visitors see the warning first while login and sign-up stay easy to find.
   Capture: 1440×161px; page bounds 0–161px of 7530px; source section ID: `0593f9ad-8b01-43a7-967b-f1b70c2af62b`; image: https://media.designdetails.io/library/b07172173b0e79d3d1e2c9f9d9c643e33fe27c25a2a0239b7515d79148d3e3aa/0593f9ad-8b01-43a7-967b-f1b70c2af62b.webp
   SECTION.md v3.2: `0593f9ad-8b01-43a7-967b-f1b70c2af62b` (deterministic evidence; editorial review pending)
2. **Hero — Centered hero with card mosaic** (Home)
   A large centered headline and one dark button lead into a colorful row of cards that shows the product range at once.
   Capture: 1440×828px; page bounds 161–989px of 7530px; source section ID: `e9e8d044-9a73-45b5-8e32-cda8f234bfb6`; image: https://media.designdetails.io/library/d449a57704f2883349545de35a050738930e9ece8a732e7772f55d7b8242dc9b/e9e8d044-9a73-45b5-8e32-cda8f234bfb6.webp
   SECTION.md v3.2: `e9e8d044-9a73-45b5-8e32-cda8f234bfb6` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Grayscale customer logo strip** (Home)
   Muted single-color logos in one row add credibility without competing with the colorful hero above.
   Capture: 1440×264px; page bounds 989–1253px of 7530px; source section ID: `ee785b72-933b-4b06-b81b-670084a1582f`; image: https://media.designdetails.io/library/8e13fd1b0a838ae95f8356c28831a8bb049e14d73ad861da00d89669bff3d8c7/ee785b72-933b-4b06-b81b-670084a1582f.webp
   SECTION.md v3.2: `ee785b72-933b-4b06-b81b-670084a1582f` (deterministic evidence; editorial review pending)
4. **Stats — Four customer result stats** (Home)
   Large numbers with small icons and one-line captions make each customer outcome easy to scan side by side.
   Capture: 1440×408px; page bounds 1561–1969px of 7530px; source section ID: `e1ce3fe2-7e84-42a4-b0ea-ea415ff615f4`; image: https://media.designdetails.io/library/c820264ccdd6522fcd96fe7d65b0c4548ec141f2b0151bbde7a8539b75025550/section-manual-e1ce3fe2-7e84-42a4-b0ea-ea415ff615f4-1793903423376.webp
   SECTION.md v3.2: `e1ce3fe2-7e84-42a4-b0ea-ea415ff615f4` (deterministic evidence; editorial review pending)
5. **Testimonials — Customer quote with portrait** (Home)
   A pale card pairs a long quote with a smiling founder photo, adding a human face to the claim; arrows hint at more quotes.
   Capture: 1440×520px; page bounds 2037–2557px of 7530px; source section ID: `a7fa7dfe-f32e-4963-993d-4ec7de063d42`; image: https://media.designdetails.io/library/749ed348ef91803448c799f37976fe9bb53d3f164f0a0c41e47bcbba97744606/a7fa7dfe-f32e-4963-993d-4ec7de063d42.webp
   SECTION.md v3.2: `a7fa7dfe-f32e-4963-993d-4ec7de063d42` (deterministic evidence; editorial review pending)
6. **Features — Product list with preview card** (Home)
   Large text names sit beside a product preview, so visitors can pick a solution and see what it looks like.
   Capture: 1440×647px; page bounds 2717–3364px of 7530px; source section ID: `37d07d13-73cf-4e47-8ca7-845c9d964797`; image: https://media.designdetails.io/library/ce247eb342d58352fb4ba89b58617e5a33d115189c7c0e0ecd717b97ac3a8ab4/37d07d13-73cf-4e47-8ca7-845c9d964797.webp
   SECTION.md v3.2: `37d07d13-73cf-4e47-8ca7-845c9d964797` (deterministic evidence; editorial review pending)
7. **CTA — Dark AI banner with ring pattern** (Home)
   A dark panel with a lime ring of tiles pulls the eye to a centered headline and a single button.
   Capture: 1440×801px; page bounds 3441–4242px of 7530px; source section ID: `2a248e91-7bd6-46be-9b82-05aa74eb93ee`; image: https://media.designdetails.io/library/89f83a576ee85a75875760daa5871c25636f342f5cdc76e3d08f156daa6b390a/section-manual-2a248e91-7bd6-46be-9b82-05aa74eb93ee-1793903438184.webp
   SECTION.md v3.2: `2a248e91-7bd6-46be-9b82-05aa74eb93ee` (deterministic evidence; editorial review pending)
8. **Features — Tabbed bento grid of features** (Home)
   Tabs and soft cards with mini interface mockups show each feature in action, so visitors grasp it without reading much.
   Capture: 1440×936px; page bounds 4316–5252px of 7530px; source section ID: `1fc9ab52-af31-4672-97ed-2346c08befe2`; image: https://media.designdetails.io/library/b9891c228a45099ef7e09adc81184eeacc8c9c9afaf8e9fbb1be781d59eb2aa1/1fc9ab52-af31-4672-97ed-2346c08befe2.webp
   SECTION.md v3.2: `1fc9ab52-af31-4672-97ed-2346c08befe2` (deterministic evidence; editorial review pending)
9. **CTA — Closing call with product visuals** (Home)
   A bold headline, one button and phone numbers sit above card, dashboard and phone images, giving two clear ways to act.
   Capture: 1440×891px; page bounds 5345–6236px of 7530px; source section ID: `68b557d5-47da-475b-b58f-cdf0e65c231c`; image: https://media.designdetails.io/library/a2a347d351904e638bec740f71a5a8e8ef3c2bbd5edc1c17ddc518b233d0838a/section-manual-68b557d5-47da-475b-b58f-cdf0e65c231c-1793903465435.webp
   SECTION.md v3.2: `68b557d5-47da-475b-b58f-cdf0e65c231c` (deterministic evidence; editorial review pending)
10. **Footer — Multi-column link footer** (Home)
   Link columns grouped by products, use cases and company help visitors find pages, while legal notes and app badges sit below.
   Capture: 1440×1294px; page bounds 6236–7530px of 7530px; source section ID: `7e943a3f-698c-4087-9926-8129f3926341`; image: https://media.designdetails.io/library/d97e44d1e4c92da234878100fef08ecfaec7b40066b4ffcf8faf6f55f991af9b/7e943a3f-698c-4087-9926-8129f3926341.webp
   SECTION.md v3.2: `7e943a3f-698c-4087-9926-8129f3926341` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/2000744ffb452977f3f8f8f9ec7ec2f756b2682a3ce4b67bfc2be3297edb308b/desktop_full-58438289-2026-11-05T15-56-30-565Z.webp
- Mobile screenshot: https://media.designdetails.io/library/8c8319fa6b246607c8eea90e598b622fd4f579a105811679ecdca647efbda77b/mobile_full-58438289-2026-11-05T15-57-17-271Z.webp
- Open Graph image: https://media.designdetails.io/library/4ad45b33fcbc204d29992247034df0a602303d39ae76e2b4e63040d6528160e2/og_image-58438289-2026-11-05T15-56-39-359Z.webp
- Full-page video: https://media.designdetails.io/library/318c7414936d026043535251986cbb995c4189e1261b9dc4fb04ea2665894a09/motion-1793895857003.mp4
- Video poster: https://media.designdetails.io/library/a44e1f910ac73f4730a363ca2e7769af5d57393011e0aa8f04270a74c7c5f9c2/motion-poster-1793895857003.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
- Navigation Bar
- Hero
- Logo Strip
- Testimonial Card
- Feature Collection
- Primary Button
- Badge
- Footer
- Staggered Visual Grid

## Quality rubric

Overall: 57.45/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Pliant's homepage is a clean, well-organized B2B fintech marketing page: a consistent type scale, a single cohesive neon-yellow-on-off-white palette, generous whitespace, and three scroll-triggered motion moments (parallax hero cards, a rotating AI badge ring, staggered feature-card reveals) combine into a professional, easy-to-navigate experience. Content — testimonials, stat callouts, and product UI mockups — is tied back into the brand's color and card system reasonably well. The core limitation is originality: the palette formula, card-grid hero, pill buttons, and tabbed feature sections are all patterns common across contemporary fintech marketing sites, and the page's single standout idea (the rotating ring motif) is not extended into a broader distinctive system. The result is competent, polished execution in a well-worn idiom rather than a site that demonstrates several hard-to-substitute design decisions working together.

- Typography (15%): 60 — A two-family system (Pangea for display/heading/labels, GeistSans for body) is applied with a clear, consistent scale (56/48/40/32/24/18/16/14/12px) and consistent line-heights across many contexts, giving the page legible, orderly hierarchy. However, Pangea is used for nearly every non-paragraph role (headings, buttons, badges, nav, footer links), which is efficient but limits expressive range, and the pairing itself is a common, unremarkable geometric-sans + humanist-sans fintech combination rather than a considered editorial choice.
- Color (10%): 63 — The palette (off-white #F5F5F0 canvas, white surface, neon yellow #E7FF53 accent, dark slate #19242A/#404C52 for contrast sections, muted teal duotone) is applied consistently for badges, CTAs, graphic motifs, and section backgrounds, giving a cohesive, branded feel. This is a well-executed but increasingly common fintech palette formula (warm neutral + single neon accent + dark contrast section), limiting its distinctiveness.
- Layout (20%): 62 — The page follows a generous, grid-based composition with consistent spacing rhythm (100px+ between sections), rounded-corner cards, and a staggered hero card grid that adds some visual interest. Structurally, though, it is a conventional SaaS marketing sequence (hero → logo strip → stats → testimonial carousel → tabbed feature cards → dark CTA band → product mockups → mega-footer) without unexpected compositional risks.
- Motion (20%): 58 — Three scroll-driven moments are documented: parallax translation of hero card grid, a rotating circular arrangement around the AI headline, and staggered upward settling of feature cards. These add some layered interest but are each common scroll-animation patterns (parallax hero, rotate-on-scroll decorative ring, staggered fade/slide-in) rather than a distinctive, purpose-built motion system, and no evidence establishes animation smoothness, easing quality, or restraint beyond presence.
- Originality (25%): 47 — The dominant visual ideas — neon-yellow accent on off-white, pill buttons, card-grid hero with parallax, a dark circular 'AI' showcase — are recognizable fintech-marketing conventions seen across comparable B2B payment platforms. The rotating badge motif around the AI headline is a modestly distinctive touch, but it is a single idea amid an otherwise template-standard page, not a system of several hard-to-substitute choices.
- Content (10%): 64 — Content (testimonial quote with photo, quantified success metrics, product UI mockups, mobile wallet screenshot) is embedded within cards that reuse the site's rounded-corner, color-coded system, and the neon accent is carried into actual product UI mockups (yellow sidebar/card imagery), tying marketing claims to visual brand consistently.

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

## Curator notes

A wide fan of overlapping cards in teal, pink, lime and black shows the product itself instead of a stock photo, letting visitors read the variety of card types at a glance. Short stat tiles with simple line icons and a dark starburst section break up the long scroll into easy, trustworthy chunks of proof.

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