Finance / iOS / Android / Web

Kuda

Kuda shouts in condensed uppercase on deep purple and speaks softly in lilac, mint and cream, with buttons kept almost square.

Download
  • #40196D
  • #EED3F8
  • #B0E2DE
  • #FCF7F2
  • #DFD8CD
  • #1B161D

Color

Every color token in the file, grouped by role.

Brand

  • primary#40196D
  • on primary#FCF7F2

Surfaces

  • canvas#FFFFFF

Text

  • on lilac#1B161D
  • ink#1B161D
  • ink muted#827D76
  • lavender text#B3A3C5
  • gray text#3F3F3F

More

  • lilac#EED3F8
  • mint#B0E2DE
  • cream#FCF7F2
  • sand#F5EFE6
  • stone#DFD8CD

Typography

Each style is set with the file's own family, size, weight and spacing.

  • modenamodena is private and not available in open fonts. Shown in League Gothic, the closest open match.
  • suissesuisse is private and not available in open fonts. Shown in Schibsted Grotesk, the closest open match.
  • display80px / 800 / 76px

    Kuda

  • headline56px / 800 / 56px

    Kuda

  • eyebrow18px / 700 / 26.1px

    The quick brown fox jumps over the lazy dog

  • lead18px / 400 / 26.1px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 23.2px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 19.6px

    Continue to checkout

  • small14px / 400 / 19.6px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs2px
  • sm4px
  • md6px
  • lg13px
  • xl21px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • sm10px
  • md14px
  • base16px
  • lg20px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button lilac
    button-lilac
  • segment selected
    segment-selected
  • purple band
    purple-band
  • mint band
    mint-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 107 lines
version: alpha
name: Kuda-design-analysis
description: "A Nigerian digital bank in deep Kuda purple (#40196d) with soft lilac (#eed3f8), sea mint (#b0e2de) and cream (#fcf7f2), condensed uppercase Modena headlines at 800, Suisse for text, 48 high buttons with small 4px corners."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#40196d"
  on-primary: "#fcf7f2"
  lilac: "#eed3f8"
  on-lilac: "#1b161d"
  mint: "#b0e2de"
  cream: "#fcf7f2"
  sand: "#f5efe6"
  stone: "#dfd8cd"
  ink: "#1b161d"
  ink-muted: "#827d76"
  lavender-text: "#b3a3c5"
  gray-text: "#3f3f3f"
  canvas: "#ffffff"

typography:
  # Font note: "modena" is a private font and is not available in open fonts. Closest open alternative: "League Gothic".
  # Font note: "suisse" is a private font and is not available in open fonts. Closest open alternative: "Schibsted Grotesk".
  display:
    fontFamily: "modena, 'Arial Narrow', sans-serif"
    fontSize: 80px
    fontWeight: 800
    lineHeight: 76px
  headline:
    fontFamily: "modena, 'Arial Narrow', sans-serif"
    fontSize: 56px
    fontWeight: 800
    lineHeight: 56px
  eyebrow:
    fontFamily: "modena, 'Arial Narrow', sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 26.1px
  lead:
    fontFamily: "suisse, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26.1px
  body:
    fontFamily: "suisse, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 23.2px
  button:
    fontFamily: "suisse, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 19.6px
  small:
    fontFamily: "suisse, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px

rounded:
  xs: 2px
  sm: 4px
  md: 6px
  lg: 13px
  xl: 21px
  full: 9999px

spacing:
  sm: 10px
  md: 14px
  base: 16px
  lg: 20px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 14px 20px
  button-lilac:
    backgroundColor: "{colors.lilac}"
    textColor: "{colors.on-lilac}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 14px 20px
  segment-selected:
    backgroundColor: "{colors.stone}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 14px 16px 14px 20px
  purple-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline}"
  mint-band:
    backgroundColor: "{colors.mint}"
    textColor: "{colors.ink}"
    typography: "{typography.lead}"

Overview

Kuda is a digital bank in Nigeria with accounts, cards, transfers, savings and loans in its app. Its site is deep purple with soft lilac, sea mint and cream, big condensed uppercase headlines and small, almost square buttons. [Observed]

What defines the look:

  1. Deep Kuda purple. #40196d fills the hero and large sections, sets the "8 MILLION CUSTOMERS" headline and the Join Kuda button. [Measured]
  2. Soft lilac and mint. Lilac #eed3f8 fills second buttons and bands, and sea mint #b0e2de fills calm sections. [Measured]
  3. Condensed uppercase headlines. Modena at 800, 56 to 80, uppercase, with line heights at or under the size. [Measured]
  4. Cream, not white, on purple. Text on purple is cream #fcf7f2. [Measured]
  5. Small 4px corners. Buttons and the Personal and Business switch use 4, cards 13 and 21. [Measured]

Source for this file: the home page, the transfers page and the help centre, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Kuda does not publish its design system. The app sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Purple#40196d with cream textHero, sections, Join Kuda [Measured]
Lilac#eed3f8 with ink textDownload Kuda, Send money, bands [Measured]
Sea mint#b0e2deCalm sections [Measured]
Cream#fcf7f2Text on purple [Measured]
Sand and stone#f5efe6, #dfd8cdBands and the selected switch [Measured]
Ink#1b161dText on light [Measured]
Muted#827d76, lavender #b3a3c5Eyebrows and text on purple [Measured]

Typography

Modena at 700 and 800 for headlines, and Suisse at 400 and 600 for everything else. [Measured]

RoleDesktopMobileFace and weight
Display80 on 76, uppercase32 on 32Modena 800 [Measured]
Headline56 on 56, uppercase32 on 32Modena 800 [Measured]
Eyebrow18 on 26.1not measuredModena 700 [Measured]
Lead18 on 26.1sameSuisse 400 [Measured]
Body16 on 23.2sameSuisse 400 [Measured]
Button14 on 19.6sameSuisse 600 [Measured]
Small and nav14 on 19.6sameSuisse 400 [Measured]

Shape and spacing

Buttons and switches use 4 (the most frequent corner), small parts 2 and 6, cards 13 and 21, and carousel dots full round. [Measured] Buttons carry 14 by 20 padding. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light page with fixed purple sections. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Kuda iOS app looks and behaves was not captured. Kuda does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, payments, cards and more is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A purple send money action. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the purple, lilac and condensed headlines with the web. [Inferred]

Platform: Android

How the Kuda Android app looks and behaves was not captured. Kuda does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, payments, cards and more is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A purple send money action. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the purple, lilac and condensed headlines with the web. [Inferred]

Platform: Web

The home page, the transfers page and the help centre, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A header with a Personal and Business switch (48 high, the selected one stone #dfd8cd with a 4px corner), menus, and a purple Join Kuda button, 48 high. [Measured]

Main action

Expected on Web: Page-level button.

A purple #40196d button with cream 14px semibold text, 48 high with a 4px corner and 14 by 20 padding. The second action is lilac with ink text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Carousels use 40 high round number buttons on a faint cream tint. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down sharply at the mobile width (80 to 32). [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons and the switch are 48 high, carousel buttons 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A conventional responsive site whose condensed headlines shrink by more than half on mobile. [Measured]

Cross-platform consistency

Consistent across platforms: the purple, lilac, cream and condensed headlines. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use deep purple for the brand and the main action, and lilac for the second.
  • Set headlines condensed, heavy and uppercase.
  • Put cream text on purple.
  • Keep buttons nearly square at 4px.

Don't

  • Don't use pure white text on purple.
  • Don't round buttons into pills.
  • Don't set body text in the condensed face.

Known Gaps

  • The app, cards and transfers sit behind an account and were not measured.
  • The iOS and Android apps were not captured, and Kuda publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • Modena and Suisse are private. League Gothic (within 2 percent at 80px, the only condensed face close in width) and Schibsted Grotesk (within 1 percent at 18px) were chosen by comparing the same line side by side. DM Sans was a close second for Suisse.
  • Account deletion and store policy rules were not verified.