# Studio Sandcastle — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.kuda.com/
Captured: 2026-10-29
CSS measured: 2026-10-29T17:28:51.308Z at 1440×1000 — https://www.kuda.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: claude-sonnet-5

## Design direction

The website presents a modern, bold design for a fintech brand. It utilizes a warm, off-white canvas contrasted heavily with a deep, vibrant purple brand color. Typography is a standout feature, pairing a heavy, tightly tracked display sans-serif with a clean, functional sans-serif for body copy. The layout relies on full-bleed background media (video and photography) interspersed with clean, card-based feature sections. Scroll-linked animations introduce floating UI mockups, adding depth and interactivity to the narrative flow.

## Classification

- Industry: finance
- Site type: Landing, Blog
- Business model: Software
- Styles: bold, minimal, photographic, corporate, hand-drawn, fintech, card-based
- Platform: WordPress
- Technology: Tailwind CSS

## Typography

- Display: modena — weight 800; size 80px; line-height 76px; tracking normal; uppercase (100% role confidence, computed values)
- Heading: modena — weight 800; size 56px; line-height 56px; tracking normal; uppercase (100% role confidence, computed values)
- Body: suisse — weight 400; size 16px; line-height 23.2px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FCF7F2: color-2: computed rgb(252, 247, 242); AI role: The dominant off-white background color (#FCF7F2) used across the page body. (100% role confidence, computed values)
- Primary Action — primary action #40196D: color-1: computed rgb(64, 25, 109); AI role: Deep purple (#40196D) used for the primary CTA buttons and brand emphasis. (100% role confidence, computed values)
- Text — text #1B161D: color-6: computed rgb(27, 22, 29); AI role: Dark color (#1B161D) used for primary body text and most headings on light backgrounds. (90% role confidence, computed values)
- Muted Text — muted text #827D76: color-11: computed rgb(130, 125, 118); AI role: Grey (#827D76) used for secondary text elements like 'Fully licensed by the CBN'. (80% role confidence, computed values)
- Surface — surface #EED3F8: color-3: computed rgb(238, 211, 248); AI role: Lighter purple (#EED3F8) used as a background for the footer and secondary buttons. (70% 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": "modena",
    "fontStack": "modena, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "26.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h1",
        "text": "The digital bank built for Nigerians",
        "top": 207,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Spend above your balance with Kuda’s Overdraft",
        "top": 5670,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Invest in top US stocks from as little as ₦20,000",
        "top": 5670,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "modena",
    "fontStack": "modena, sans-serif",
    "weight": "800",
    "size": "56px",
    "lineHeight": "56px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "More from your money, More for your life",
        "top": 257,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Send",
        "top": 3455,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Unlock rewards with Kuda Premium",
        "top": 4346,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "modena",
    "fontStack": "modena, sans-serif",
    "weight": "800",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Pay bills with less stress",
        "top": 7633,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Download the app",
        "top": 9512,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "modena",
    "fontStack": "modena, sans-serif",
    "weight": "800",
    "size": "80px",
    "lineHeight": "76px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "8 million customers",
        "top": 2134,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "suisse",
    "fontStack": "suisse, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "p",
        "text": "Premium customers: earn 20% a year on a 3-month Locked Savings plan. Limited availability. Learn mor",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Learn more.",
        "top": 10,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Personal",
        "top": 62,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "suisse",
    "fontStack": "suisse, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "23.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "div",
        "text": "Rated 4.8 stars on the App Store",
        "top": 1480,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Over 8 million customers",
        "top": 1480,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Rated 4.5 stars on Google Play",
        "top": 1480,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "suisse",
    "fontStack": "suisse, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "26.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "Send money fast, spend with confidence, and save automatically with Kuda.",
        "top": 393,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Send money fast, schedule payments, and get 25 free transfers every month.",
        "top": 3523,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Free instant notifications",
        "top": 8816,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "suisse",
    "fontStack": "suisse, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Kuda Microfinance Bank Limited is incorporated in Nigeria (RC No: 796975) and is licensed by the Cen",
        "top": 11430,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "suisse",
    "fontStack": "suisse, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "23.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Alerts",
        "top": 8816,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Annual savings rates",
        "top": 8863,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Bill payment fees",
        "top": 8909,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "modena",
    "fontStack": "modena, sans-serif",
    "weight": "700",
    "size": "28px",
    "lineHeight": "33.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Earn cashback on bills, and access exclusive rewards",
        "top": 4699,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Get higher savings rates, budgeting, and more features",
        "top": 4699,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Enjoy discounts and perks from popular brands",
        "top": 4699,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "modena",
    "fontStack": "modena, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Join over",
        "top": 2044,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "suisse",
    "fontStack": "suisse, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 41,
    "contexts": [
      {
        "tag": "a",
        "text": "Join Kuda",
        "top": 62,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Download Kuda",
        "top": 469,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Send money",
        "top": 3587,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#40196D",
    "alpha": 1,
    "cssValue": "rgb(64, 25, 109)",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "Join Kuda",
        "top": 62,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 597,
        "property": "background"
      },
      {
        "tag": "h2",
        "text": "8 million customers",
        "top": 2134,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FCF7F2",
    "alpha": 1,
    "cssValue": "rgb(252, 247, 242)",
    "count": 10,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-NG7FPX6G\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Join Kuda",
        "top": 62,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Send",
        "top": 3455,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#EED3F8",
    "alpha": 1,
    "cssValue": "rgb(238, 211, 248)",
    "count": 31,
    "contexts": [
      {
        "tag": "a",
        "text": "Download Kuda",
        "top": 469,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "<img decoding=\"async\" width=\"19\" height=\"18\" src=\"https://www.kuda.com/wp-content/uploads/2026/05/st",
        "top": 1476,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "Personal Banking Explore Personal Loan App Investments Kuda Card Kuda Premium Savings Transfers Busi",
        "top": 10333,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "oklab(0 0 0 / 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "<img decoding=\"async\" width=\"2560\" height=\"1707\" src=\"https://www.kuda.com/wp-content/uploads/2026/0",
        "top": 3372,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#B0E2DE",
    "alpha": 1,
    "cssValue": "rgb(176, 226, 222)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Switch to more rewarding banking Other banks Alerts Free instant notifications Charge for SMS alerts",
        "top": 8451,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1B161D",
    "alpha": 1,
    "cssValue": "rgb(27, 22, 29)",
    "count": 107,
    "contexts": [
      {
        "tag": "p",
        "text": "Premium customers: earn 20% a year on a 3-month Locked Savings plan. Limited availability. Learn mor",
        "top": 12,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Learn more.",
        "top": 10,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Personal",
        "top": 62,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F5EFE6",
    "alpha": 1,
    "cssValue": "rgb(245, 239, 230)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Personal Business",
        "top": 60,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 60,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "<img decoding=\"async\" width=\"40\" height=\"40\" src=\"https://www.kuda.com/wp-content/uploads/2026/07/et",
        "top": 7729,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#B3A3C5",
    "alpha": 1,
    "cssValue": "rgb(179, 163, 197)",
    "count": 28,
    "contexts": [
      {
        "tag": "div",
        "text": "Rated 4.8 stars on the App Store",
        "top": 1480,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#3F3F3F",
    "alpha": 1,
    "cssValue": "rgb(63, 63, 63)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Charge for SMS alerts",
        "top": 8816,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#EEE7DD",
    "alpha": 1,
    "cssValue": "rgb(238, 231, 221)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Premium customers: earn 20% a year on a 3-month Locked Savings plan. Limited availability. Learn mor",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#827D76",
    "alpha": 1,
    "cssValue": "rgb(130, 125, 118)",
    "count": 6,
    "contexts": [
      {
        "tag": "h1",
        "text": "The digital bank built for Nigerians",
        "top": 207,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Fully licensed by the CBN",
        "top": 2272,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Buy airtime and internet data from any Nigerian mobile network.",
        "top": 7879,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 27,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 17,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 17,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#DFD8CD",
    "alpha": 1,
    "cssValue": "rgb(223, 216, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Personal",
        "top": 62,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFF2F2",
    "alpha": 0.0784313725490196,
    "cssValue": "oklab(0.978604 0.0032815 0.00792193 / 0.08)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "1",
        "top": 4149,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#EDE7DD",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.930708 0.00348729 0.0150211 / 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 1324,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 7753,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FBF7F1",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.978604 0.0032815 0.00792193 / 0.5)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 8818,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.6)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3669,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#CC77E9",
    "alpha": 1,
    "cssValue": "rgb(204, 119, 233)",
    "count": 1,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 4150,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### 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, with tighter grouping inside feature cards.
- Corner style: Mixed: mostly rounded corners on interactive elements and cards, with hard edges on full-bleed background containers.
- Radius: Small border-radius (approx 4-8px) on primary buttons; medium to large border-radius on floating UI cards and feature blocks.
- Borders: Mostly borderless, relying heavily on color contrast to define shapes and containers.
- Buttons: Solid filled backgrounds with contrasting text; primary buttons use the brand purple.
- Content width: Centered constrained text content mixed with full-width bleeding backgrounds and media.
- Density: Low density, breathable layout utilizing large typographic scales and ample whitespace.
- Evidence: Visual inspection reveals an off-white canvas with dark purple functional accents. Structural containers use large corner radii, while primary typography is oversized and highly legible.

## Sections

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

1. **Navbar — Studio Sandcastle Navbar** (Home)
   A thin announcement strip sits above a sparse nav with one filled button, so the offer and the sign-up action stand out.
   Capture: 1440×128px; page bounds 0–128px of 11487px; source section ID: `040d9ccf-06ce-482a-9f6e-6a01b02f0c63`; image: https://media.designdetails.io/library/3b87ac841a14d7a7d4a0fc6f4e93b4fe4fb808d1e05250b1e5ae152c746c83f6/040d9ccf-06ce-482a-9f6e-6a01b02f0c63.webp
   SECTION.md v3.2: `040d9ccf-06ce-482a-9f6e-6a01b02f0c63` (deterministic evidence; editorial review pending)
2. **Hero — Centered headline hero with photo** (Home)
   A bold uppercase headline, one short line and a single download button sit above a wide group photo that makes the bank feel human.
   Capture: 1440×1268px; page bounds 128–1396px of 11487px; source section ID: `969c67a3-a974-4c1d-a468-360cf183de37`; image: https://media.designdetails.io/library/55f65b8c4b74e90526bffca15b90eae5a956c94542885f66144d5cd3f3934590/969c67a3-a974-4c1d-a468-360cf183de37.webp
   SECTION.md v3.2: `969c67a3-a974-4c1d-a468-360cf183de37` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Scrolling ticker of trust badges** (Home)
   Small icon chips carrying ratings and awards run in one quiet line, giving credibility without pulling focus from the hero.
   Capture: 1440×192px; page bounds 1396–1588px of 11487px; source section ID: `bbbe6356-7509-4349-ba33-f72a9328be68`; image: https://media.designdetails.io/library/25fd1890342a4eb9f7fcab9dcecd930ae3370e21b7aea03ad9123a9e79dd02ab/bbbe6356-7509-4349-ba33-f72a9328be68.webp
   SECTION.md v3.2: `bbbe6356-7509-4349-ba33-f72a9328be68` (deterministic evidence; editorial review pending)
4. **Stats — Customer count among scattered portraits** (Home)
   One large purple number sits at the center while small portraits float around it, tying the scale to real people and adding regulator reassurance.
   Capture: 1440×1760px; page bounds 1588–3348px of 11487px; source section ID: `ce5a95bc-9a46-4b88-afb4-7394b3b04608`; image: https://media.designdetails.io/library/24a7df7032910373bc45e14a3425adb35937300855af7420a4d58bcefb7f2055/ce5a95bc-9a46-4b88-afb4-7394b3b04608.webp
   SECTION.md v3.2: `ce5a95bc-9a46-4b88-afb4-7394b3b04608` (deterministic evidence; editorial review pending)
5. **Features — Send money over photo with phone** (Home)
   A full-bleed beach photo carries a phone mockup and numbered pager dots, showing the product in a lifestyle context with one clear action.
   Capture: 1440×948px; page bounds 3348–4296px of 11487px; source section ID: `e34d5752-c346-4f74-8a19-c95f1ecbc614`; image: https://media.designdetails.io/library/839f956ad7780fa9cd2784c000e80d006a96d5ed198e184e5df5243a896eae6b/e34d5752-c346-4f74-8a19-c95f1ecbc614.webp
   SECTION.md v3.2: `e34d5752-c346-4f74-8a19-c95f1ecbc614` (deterministic evidence; editorial review pending)
6. **Features — Three purple premium benefit cards** (Home)
   Equal deep-purple cards pair a short benefit line with a small UI illustration, so each perk can be scanned and understood quickly.
   Capture: 1440×1043px; page bounds 4296–5339px of 11487px; source section ID: `c9404b4d-3311-46af-9783-10b3814b3b23`; image: https://media.designdetails.io/library/5942523db4f5db618af3ac902c63e305658decf3f51e62bb45b736d50236ccfb/c9404b4d-3311-46af-9783-10b3814b3b23.webp
   SECTION.md v3.2: `c9404b4d-3311-46af-9783-10b3814b3b23` (deterministic evidence; editorial review pending)
7. **Features — Tall photo with overdraft slider overlay** (Home)
   A large card-payment photo with a floating limit slider shows the feature in use, while short side captions with links point to next steps.
   Capture: 1440×2254px; page bounds 5339–7593px of 11487px; source section ID: `50d36306-c3e9-4313-bf1a-d1755fbcfbf2`; image: https://media.designdetails.io/library/6e5baf56f7a92b0c7215277e819aec3fb3f0495b29609ae3cbc88798b4701dc3/50d36306-c3e9-4313-bf1a-d1755fbcfbf2.webp
   SECTION.md v3.2: `50d36306-c3e9-4313-bf1a-d1755fbcfbf2` (deterministic evidence; editorial review pending)
8. **Features — Three service cards for bill payments** (Home)
   Three soft cards each hold an icon, one line and a mini illustration of providers, making the range of payments visible at a glance.
   Capture: 1440×834px; page bounds 7593–8427px of 11487px; source section ID: `133a9b5a-51e4-4d66-8a1c-31800c350186`; image: https://media.designdetails.io/library/6541d8de5dc57eb866f5a88dfa354a213d0ec86cd319faea7d6ba6702fbc5d37/133a9b5a-51e4-4d66-8a1c-31800c350186.webp
   SECTION.md v3.2: `133a9b5a-51e4-4d66-8a1c-31800c350186` (deterministic evidence; editorial review pending)
9. **Comparison — Bank versus other banks table** (Home)
   A pale teal panel sets two aligned columns with check and dash marks, so fee differences read row by row at a glance.
   Capture: 1440×802px; page bounds 8427–9229px of 11487px; source section ID: `50b623ac-997d-4637-898b-1ec7d87af858`; image: https://media.designdetails.io/library/b95c48e5e1867f5d78e3aa3d8cc09b7966948fe2ad3a5e6a12ec17f19f59a9e9/50b623ac-997d-4637-898b-1ec7d87af858.webp
   SECTION.md v3.2: `50b623ac-997d-4637-898b-1ec7d87af858` (deterministic evidence; editorial review pending)
10. **CTA — App download with store badges and artwork** (Home)
   A short pitch with App Store and Google Play badges sits beside a vivid illustration with the app icon, making the download path obvious.
   Capture: 1440×1104px; page bounds 9229–10333px of 11487px; source section ID: `248327d9-2163-4425-90d1-c0ba824b1d87`; image: https://media.designdetails.io/library/4e24506a7c7b12280eee5c023ea4863df77a62f49c2a3806119493f2aa700b87/248327d9-2163-4425-90d1-c0ba824b1d87.webp
   SECTION.md v3.2: `248327d9-2163-4425-90d1-c0ba824b1d87` (deterministic evidence; editorial review pending)
11. **Footer — Link columns with oversized wordmark** (Home)
   Grouped link columns and contact details sit above a giant wordmark, keeping navigation tidy while the brand gets a memorable close.
   Capture: 1440×1154px; page bounds 10333–11487px of 11487px; source section ID: `1f41eb27-4bf1-47be-a464-f0de8148ea91`; image: https://media.designdetails.io/library/b76d49eba29ce23ba4bd72c906de914f692c366ed618612c9ef1e9d277c5660f/1f41eb27-4bf1-47be-a464-f0de8148ea91.webp
   SECTION.md v3.2: `1f41eb27-4bf1-47be-a464-f0de8148ea91` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/0e8535b2162c573febf32437b884f0bc9b274d0e406e163b7072b63e902ebfe8/desktop_full-5077902a-2026-10-29T17-28-51-320Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3f00639da5c443de87c7e33b41b473acb72a0b7d267a92d47bbbf2ce35a68498/mobile_full-5077902a-2026-10-29T17-29-39-427Z.webp
- Open Graph image: https://media.designdetails.io/library/96b13b278c9a68184df583109f1fea614104998a2558eef59404e276563ac778/og_image-5077902a-2026-10-29T17-29-01-222Z.webp
- Full-page video: https://media.designdetails.io/library/a50e8994aa3cdba363656c383a8d0c57c11fc8f7662df03d1ac29037d33610a2/motion-1793299394711.mp4
- Video poster: https://media.designdetails.io/library/90937718b936e01b7cd08f0083bc4ea731f15aeb4d46ed0568f97a1cb6815597/motion-poster-1793299394711.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

- Footer
- Parallax Media Backgrounds
- Scroll Triggered UI Reveals
- Announcement Bar
- Navigation Bar
- Hero
- Floating Product Card
- Feature Card
- Comparison Table
- Primary Button
- Text Link

## Quality rubric

Overall: 55.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: This is a well-executed, conventional fintech marketing site: strong typographic hierarchy, a legible purple/off-white brand palette, and content (trust badges, comparison table) that is cleanly integrated into the visual system. However, the layout pattern, motion vocabulary (scroll parallax and reveal-on-scroll), and overall visual language are close to the standard template used across the digital-banking category, with only the closing hand-drawn illustration offering a genuinely distinctive idea. The execution is competent and purposeful but does not yet demonstrate the several hard-to-substitute, systemic ideas required for a higher tier.

- Typography (15%): 64 — A clear two-tier type system is used throughout: a heavy, uppercase display face (Modena, weight 800, sizes from 32px to 80px) for headlines and numerals, paired with a neutral grotesk (Suisse, 400/600) for body and UI copy. The scale jump (80px hero stat vs 14-18px body) creates strong hierarchy, and uppercase tracking gives the brand a confident, consistent voice across hero, stat, feature, and comparison sections.
- Color (10%): 61 — The palette is built on a warm off-white canvas, a saturated deep-purple brand color, and a lighter lilac secondary, giving good brand consistency and sufficient contrast for CTAs. An unexpected mint/teal is introduced for the comparison table, which breaks the established purple system rather than extending it.
- Layout (20%): 58 — The page follows a conventional fintech marketing structure: hero with video, stat band, full-bleed image/phone-mockup sections, a 3-up feature card grid, a bills grid, and a comparison table, closing with footer. Sections are well-spaced and legible, and one scattered/asymmetric photo collage breaks the vertical rhythm, but overall the system relies on standard stacked full-width sections and symmetric card grids rather than a distinctive structural idea.
- Motion (20%): 55 — Motion is limited to parallax image movement, scroll-triggered phone mockup reveals, and fade/slide-in feature cards — all well-established scroll patterns rather than a distinctive motion language. No hover, interaction, or easing detail is confirmed by the evidence, and the recording shows only linear scroll-tied translation/opacity changes.
- Originality (25%): 42 — The overall language (bold condensed-weight headline type, purple-on-cream fintech palette, phone mockups floating over lifestyle video, cashback/rewards comparison table, app-store footer) closely matches the now-common digital-banking marketing template seen across the category. The hand-drawn palm illustration revealing the wordmark at the close is the one genuinely distinctive idea, but it is isolated rather than carried through the rest of the experience.
- Content (10%): 65 — Content is well-integrated with design: trust signals (ratings, customer count, CBN licensing, NDIC insurance) are placed directly under the hero, and the Kuda-vs-other-banks comparison table clearly operationalizes the value proposition using the established card/table components, supporting the page's persuasive goal.

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

Oversized black headlines on a warm cream background sit above real photos of Nigerian customers rather than stock finance imagery, making the bank feel local and trustworthy. Deep purple and teal blocks pace the long page into clear chapters for rewards, spending and bill pay, while a scattered photo collage and bold phone mockups keep the scroll visually lively.

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