# Lightspark — Design Reference

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

## Design direction

The Lightspark website employs a minimal and highly polished design language characterized by extensive use of whitespace, stark typography, and soft, glassmorphic visual treatments. The interface relies on a subdued monochromatic palette (off-whites and blacks) accented by vibrant, heavily blurred product UI cards that float within the layout. This creates a clean, modern, and slightly ethereal aesthetic typical of contemporary fintech infrastructure platforms.

## Classification

- Industry: finance
- Site type: Landing
- Business model: AI, Software
- Styles: minimal, typographic, soft, glassmorphic, fintech-modern
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Suisse Intl — weight 400; size 48px; line-height 55.2px; tracking -1.9px; Regular (100% role confidence, computed values)
- Heading: Suisse Intl — weight 400; size 36px; line-height 43.9px; tracking -1.1px; Regular (90% role confidence, computed values)
- Body: Suisse Intl — weight 400; size 20px; line-height 26px; tracking -0.6px; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #F8F8F7: color-1: computed rgb(248, 248, 247); AI role: #F8F8F7 off-white used as the primary background color for the majority of the page. (100% role confidence, computed values)
- Text — text #1A1A1A: color-2: computed rgb(26, 26, 26); AI role: #1A1A1A used for primary typography including main headlines. (100% role confidence, computed values)
- Muted Text — muted text #7C7C7C: color-4: computed rgb(124, 124, 124); AI role: #7C7C7C used for secondary, less prominent text like 'historical uptime'. (95% role confidence, computed values)
- Primary Action — primary action #1A1A1A: color-2: computed rgb(26, 26, 26); AI role: #1A1A1A is also used as the background fill for primary CTA buttons. (90% role confidence, computed values)
- Surface — surface #F0F0EE: color-5: computed rgb(240, 240, 238); AI role: #F0F0EE used as the subtle background for secondary buttons. (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": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "36px",
    "lineHeight": "43.9px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "65+",
        "top": 1838,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "99.99%",
        "top": 1838,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2–5",
        "top": 1838,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h3",
        "text": "Global accounts",
        "top": 2542,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Payments",
        "top": 3058,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Accounts & cards",
        "top": 3556,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "55.2px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "The API for money",
        "top": 443,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "Launch global accounts, payments, cards, stablecoins, and more. All of it under your brand, with you",
        "top": 508,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "countries on local rails",
        "top": 1882,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "historical uptime",
        "top": 1882,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Lightspark is the open infrastructure for moving money worldwide. One integration to send, receive, ",
        "top": 1291,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Lightspark is the open infrastructure for moving money worldwide.",
        "top": 1292,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2022–2026 Lightspark Group, Inc. Lightspark is a financial technology company. Lightspark and its ",
        "top": 7573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "8.5px",
    "lineHeight": "11.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 23,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 2113,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 2113,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 2113,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "Reach",
        "top": 1612,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Performance",
        "top": 1612,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Integration",
        "top": 1612,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "span",
        "text": "Learn more→",
        "top": 2544,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Try playground→",
        "top": 2572,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Book a demo→",
        "top": 2600,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "What we do",
        "top": 13,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Who we serve",
        "top": 13,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About us",
        "top": 13,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Documentation",
        "top": 5478,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sandbox",
        "top": 5478,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Playground",
        "top": 5478,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "36px",
    "lineHeight": "43.9px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Talk with sales→",
        "top": 6246,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "→",
        "top": 6246,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 7,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Suisse Intl VF",
    "fontStack": "\"Suisse Intl VF\", \"Suisse Intl\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "23.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 50,
    "contexts": [
      {
        "tag": "a",
        "text": "Global accounts",
        "top": 6559,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Payouts",
        "top": 6603,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pay-ins",
        "top": 6626,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Suisse Intl",
    "fontStack": "\"Suisse Intl\", sans-serif",
    "weight": "450",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 565,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get API key",
        "top": 565,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 5361,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F8F8F7",
    "alpha": 1,
    "cssValue": "rgb(248, 248, 247)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Our productsWhat we doWho we serveAbout usWhat we doWho we serveAbout usView docsLog inContactMenuTh",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "The API for moneyLaunch global accounts, payments, cards, stablecoins, and more. All of it under you",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 565,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 54,
    "contexts": [
      {
        "tag": "h1",
        "text": "The API for money",
        "top": 443,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 565,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "Get API key",
        "top": 565,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#E3E3E2",
    "alpha": 1,
    "cssValue": "rgb(227, 227, 226)",
    "count": 1,
    "contexts": [
      {
        "tag": "body",
        "text": "Opens in a new window Opens an external website Opens an external website in a new window Close this",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#7C7C7C",
    "alpha": 1,
    "cssValue": "rgb(124, 124, 124)",
    "count": 42,
    "contexts": [
      {
        "tag": "p",
        "text": "Launch global accounts, payments, cards, stablecoins, and more. All of it under your brand, with you",
        "top": 508,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Reach",
        "top": 1612,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 4560,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F0F0EE",
    "alpha": 1,
    "cssValue": "rgb(240, 240, 238)",
    "count": 54,
    "contexts": [
      {
        "tag": "a",
        "text": "Get API key",
        "top": 565,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Talk with sales→",
        "top": 6246,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Global accounts",
        "top": 6559,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#00A2C7",
    "alpha": 1,
    "cssValue": "rgb(0, 162, 199)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4656,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#0052FF",
    "alpha": 1,
    "cssValue": "rgb(0, 82, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4656,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#262623",
    "alpha": 1,
    "cssValue": "rgb(38, 38, 35)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4656,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#820AD1",
    "alpha": 1,
    "cssValue": "rgb(130, 10, 209)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4656,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#656565",
    "alpha": 1,
    "cssValue": "rgb(101, 101, 101)",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "What we do",
        "top": 6418,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "© 2022–2026 Lightspark Group, Inc. Lightspark is a financial technology company. Lightspark and its ",
        "top": 7573,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#020202",
    "alpha": 1,
    "cssValue": "rgb(2, 2, 2)",
    "count": 19,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 23,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "What we do",
        "top": 13,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#E5E5E4",
    "alpha": 1,
    "cssValue": "rgb(229, 229, 228)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#272727",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(38, 38, 35, 0.1)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "Reach65+countries on local rails01",
        "top": 1612,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "Get startedThe easiest money infrastructure to build on. See it live with our team, or go straight t",
        "top": 5274,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "DocumentationView API docs→01",
        "top": 5478,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "View docs",
        "top": 13,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#EEEEEE",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(243, 243, 245, 0.06)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "What we doGlobal accountsPayoutsPay-insRampsCross-border P2PStablecoin paymentsAgentic paymentsVirtu",
        "top": 6418,
        "property": "border"
      }
    ]
  }
]
```

### 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: Airy and expansive, utilizing large margins to isolate the hero content and generous padding within grid cells.
- Corner style: Fully rounded (pill shape) for interactive elements like buttons and tags, while large structural cards have soft, medium radii.
- Radius: Buttons appear to use maximum border-radius (e.g., 999px), creating pill shapes.
- Borders: Extremely subtle; structural dividers are solid but very low opacity (10%), creating hairline definitions without heavy contrast.
- Buttons: Solid fills with contrasting text; primary buttons are dark pills, secondary buttons are light gray pills.
- Content width: Centered content with a constrained maximum width, flanked by large margins on larger viewports.
- Density: Low density. The layout relies heavily on whitespace to draw focus to the scattered, colorful UI cards and crisp typography.
- Evidence: Observations derived from the visual rhythm of the hairline grid, DOM token mapping (color-13 for borders), and optical evaluation of button shapes and spacing.

## Sections

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

1. **Features — Intro** (Home)
   Reusable feature composition from Home, organized around “Intro”.
   Capture: 1440×512px; page bounds 1100–1612px of 7682px; source section ID: `971d8989-b1ec-4fcf-9908-ef4f5bebf94d`; image: https://media.designdetails.io/library/3d762106bd88474bcdeb7133e325374c10c7421e02367127bb397cb928e15729/section_crop-971d8989-2026-10-13T02-27-21-657Z.webp
   SECTION.md v3.2: `971d8989-b1ec-4fcf-9908-ef4f5bebf94d` (deterministic evidence; editorial review pending)
2. **Features — Overview** (Home)
   Reusable feature composition from Home, organized around “Overview”.
   Capture: 1440×512px; page bounds 1612–2124px of 7682px; source section ID: `239766f6-607a-46d8-88b7-2b9afb423b35`; image: https://media.designdetails.io/library/44985ae6320de4bf621818b8bb5de94474477bc2f2ac39569cbed0717ab88689/section_crop-239766f6-2026-10-13T02-27-22-750Z.webp
   SECTION.md v3.2: `239766f6-607a-46d8-88b7-2b9afb423b35` (deterministic evidence; editorial review pending)
3. **Features — What we do** (Home)
   Reusable feature composition from Home, organized around “What we do”.
   Capture: 1440×2232px; page bounds 2124–4356px of 7682px; source section ID: `3d55f805-2042-4138-8987-61b83f4168a6`; image: https://media.designdetails.io/library/fb8226723604b3fc208201094300d43e33349117ac4b2e03ea9eb2a5dc7e0887/section_crop-3d55f805-2026-10-13T02-27-23-669Z.webp
   SECTION.md v3.2: `3d55f805-2042-4138-8987-61b83f4168a6` (deterministic evidence; editorial review pending)
4. **CTA — Get started** (Home)
   CTA composition from Home, organized around “Get started”.
   Capture: 1440×717px; page bounds 5274–5991px of 7682px; source section ID: `2f7e50d8-fc1f-4889-a6d3-dfe8d3f11e57`; image: https://media.designdetails.io/library/af8902d5f878e04de9f5ba013a88343cf83ba501f135d0a939c5d3457b0b86a8/section_crop-2f7e50d8-2026-10-13T02-27-26-143Z.webp
   SECTION.md v3.2: `2f7e50d8-fc1f-4889-a6d3-dfe8d3f11e57` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/d53bffbf2475c19797e3247be7796399ac669f086f0cc8e292ae1cc38f19d795/desktop_full-d06d5857-2026-10-13T02-27-05-665Z.webp
- Mobile screenshot: https://media.designdetails.io/library/04910c06f6bd75ea75b9d65dc80d62b66af429a325f2e1c7b5a4a17b11b22767/mobile_full-d06d5857-2026-10-13T02-28-02-414Z.webp
- Open Graph image: https://media.designdetails.io/library/4fabec22ddb191a0d88c227ebeba4b7ae3d11a76ded604c669337d59935ed58a/og_image-d06d5857-2026-10-13T02-27-17-978Z.webp
- Full-page video: https://media.designdetails.io/library/75f4c4ffad7adecd39a6e126bc570d8f08a9711a8352fda8e18f2e4a5568cfba/motion-1791859687922.mp4
- Video poster: https://media.designdetails.io/library/c89c709d16a52b35bbae451b3a7d049747f936828feb1cd8eb2f9f4fb7f6c8b5/motion-poster-1791859687922.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
- Primary Button
- Ghost Button
- Logo Strip
- Feature Collection
- Footer
- Floating UI Cards
- Hairline Grid Layout

## Quality rubric

Overall: 52.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Lightspark's site is a polished, well-organized execution of the now-standard fintech/infrastructure template: a calm neutral palette, hairline-grid sectioning, a single consistent typeface system, and scroll-linked floating product cards that disperse and reconverge with scroll direction. Content is tightly mapped to visuals (specific stats, matched product mockups), and the craft is clean throughout. However, almost every structural and visual idea—from the blurred glassmorphic cards to the oversized dim footer wordmark—is a close match to widely-seen peers in this space, and the motion and layout patterns repeat uniformly across sections rather than varying. This places it solidly in the competent band: well-made, functional, visually tidy, but not distinctive or risk-taking enough to be called strong or exceptional.

- Typography (15%): 58 — A single family (Suisse Intl) is used across a wide range of weights/sizes (10px labels to 48px display) with tight negative letter-spacing on large text, giving a clean, consistent hierarchy typical of contemporary SaaS/fintech sites. It is competently executed but offers no distinctive voice, pairing, or editorial flourish beyond standard practice.
- Color (10%): 50 — The chrome itself is a restrained near-monochrome system (off-white canvas #F8F8F7, near-black text #1A1A1A, gray #7C7C7C), which is coherent and calm. However, the vivid accent colors (teal #00A2C7, blue #0052FF, purple #820AD1) appear only inside the floating product-card imagery and seem assigned somewhat arbitrarily to each card rather than functioning as a deliberate, legible color-coding system tied to product categories.
- Layout (20%): 60 — A hairline-bordered grid (rgba borders at ~10% opacity) organizes stat columns and feature sections with consistent generous whitespace, centered content, and a repeating card+copy+link pattern for each product section. This is well-executed and legible, but it is a familiar template structure (stat strip, alternating feature blocks, logo strip, large footer wordmark) seen across many infrastructure/fintech sites.
- Motion (20%): 56 — Scroll-linked motion is present and bidirectional: hero cards disperse outward and fade on scroll down, and converge back on scroll up, while subsequent content fades/translates into view. This is a coherent, deliberate effect rather than a single one-off animation, but it is a common contemporary pattern (parallax hero disassembly + scroll reveals) and no evidence supports claims about easing quality, frame smoothness, or refinement beyond the observed directional behavior.
- Originality (25%): 36 — The overall idiom—blurred floating UI/product cards scattered around a centered headline, a hairline-divided stat grid, pill-shaped buttons, and a giant dim wordmark in a dark footer—closely matches a widely circulated contemporary fintech/infrastructure template seen across many comparable companies. Execution is clean, but there is no hard-to-substitute idea unique to this brand; the concept could be reskinned onto most B2B payments sites without structural change.
- Content (10%): 64 — Each feature section pairs a specific product mockup (wallet balance, payment feed, virtual card, withdrawal screen) directly with its corresponding copy block and related sub-links, and the stat strip (65+, 99.99%, 2–5, 3–5x) gives concrete, relevant figures rather than vague claims. This creates reasonably tight alignment between visual and content.

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

## Curator notes

Soft glowing colour gradients behind cropped app cards hint at real wallets, cards and transactions without cluttering the plain white page. A tight four column stat row and repeated thin rule lines down the page keep dense numbers and features easy to scan at a glance.

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