Fintech Wallet — Mobile Home Screen

superdesignCC0-1.0Prompt onlyMobile app · mobile-appGlassmorphism · glassmorphismGradient · gradientLight · lightLow (display) · lowCyan · cyanVivid · vividSerif · serifGeneral · generalProfessional · professional

A mobile fintech wallet home screen: a teal gradient hero with a frosted balance card, four quick-action buttons, and a clean recent-activity list, on an off-white sheet with a center-FAB tab bar. Category: Mobile Apps. Prompt author listed upstream: Jason Zhou.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Fintech Wallet — Mobile Home Screen" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/fintech-wallet-mobile-home-screen · 6c6090694520 · © Superdesign

Prompt

{
  "summary": "A polished mobile fintech wallet home screen: a teal gradient hero with a greeting + frosted glass balance card, a row of four quick-action buttons (Send/Request/Transfer/More), an off-white sheet overlapping the hero with available funds + a recent-activity transaction list, and a bottom tab bar with a center FAB. Premium, trustworthy, not generic.",
  "style": {
    "description": "Flat-teal fintech: a teal gradient hero on an off-white sheet, mint accent numerals, neutral ink text, frosted-glass card with inset highlight.",
    "prompt": "Teal hero gradient (#14b896 -> #07795f) on an off-white sheet (#eef0ef / #e9ebea). Mint accent for positive numerals (#0aa886), neutral ink text (#1d2722 / #5b6b64), warm amber notification dot (#ffd166), green for income (#16a34a). A frosted-glass balance card with an inset top highlight creates depth; the off-white sheet overlaps the gradient hero for layered depth (not template flatness). Font: Plus Jakarta Sans (400-800). Real iPhone framing: status bar, home indicator, bottom tab bar with a raised center FAB (ring-4)."
  },
  "layout_and_structure": {
    "description": "Single mobile home screen: status bar, greeting + avatar, balance card, quick actions, off-white sheet with available funds + transaction list, bottom tab bar with center FAB.",
    "prompts": [
      {"part": "Header", "prompt": "Status bar; a 'Good morning,' line + bold user name (white on the teal hero), and a circular avatar with a notification dot whose ring matches the hero."},
      {"part": "Balance card", "prompt": "A frosted-glass card on the hero: 'Total balance' label, a large ~32px balance figure, a small change pill (e.g. up 2.4% MTD), masked card number, and card tier."},
      {"part": "Quick actions", "prompt": "Four equal frosted buttons in a row: Send, Request, Transfer, More, each an icon over a SOLID white semibold label (with a subtle text-shadow for legibility on the gradient)."},
      {"part": "Activity sheet", "prompt": "An off-white sheet overlapping the hero: 'Available funds' (mint figure) + 'Spent this month', then 'Recent activity' with a 'See all' link and rows of transaction tiles (icon + name + relative time, amount right-aligned; income green, expenses ink). Give 2-3 categories distinct tints so the list scans."},
      {"part": "Tab bar", "prompt": "A 5-item bottom tab bar (Home, Stats, [center FAB], Cards, More) on a fixed equal grid; the center FAB is raised and accent-filled."}
    ]
  },
  "special_ui_components": [
    {"component": "Frosted balance card", "description": "Glassmorphic card on the gradient.", "prompt": "A translucent white card over the teal hero with a subtle inset top highlight and soft shadow, holding the balance + meta."},
    {"component": "Center-FAB tab bar", "description": "Raised primary action.", "prompt": "A bottom tab bar whose middle slot is a raised, accent-filled circular FAB with a light ring, breaking the bar line."}
  ],
  "special_notes": "Keep one consistent date format. Make quick-action labels solid white (not low-opacity). Real mobile proportions (~390px-wide phone)."
}

---
"Fintech Wallet — Mobile Home Screen" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Fintech Wallet — Mobile Home Screen. \"Fintech Wallet — Mobile Home Screen\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-fintech-wallet-mobile-home-screen",
      "license": "CC0-1.0",
      "attribution": "\"Fintech Wallet — Mobile Home Screen\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#eef0ef"
    },
    "foreground": {
      "$type": "color",
      "$value": "#07795f"
    },
    "card": {
      "$type": "color",
      "$value": "#eef0ef"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#07795f"
    },
    "primary": {
      "$type": "color",
      "$value": "#14b896"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#07795f"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#07795f"
    },
    "accent": {
      "$type": "color",
      "$value": "#07795f"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e0e2e1"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5ea897"
    },
    "border": {
      "$type": "color",
      "$value": "#cdcece"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#14b896"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Fintech Wallet — Mobile Home Screen" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520. */
:root {
  --background: #eef0ef;
  --foreground: #07795f;
  --card: #eef0ef;
  --card-foreground: #07795f;
  --primary: #14b896;
  --primary-foreground: #fafaf9;
  --secondary: #07795f;
  --secondary-foreground: #07795f;
  --accent: #07795f;
  --accent-foreground: #fafaf9;
  --muted: #e0e2e1;
  --muted-foreground: #5ea897;
  --border: #cdcece;
  --destructive: #dc2626;
  --ring: #14b896;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Fintech Wallet — Mobile Home Screen" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520. */
/** Tailwind theme extend for Fintech Wallet — Mobile Home Screen (superdesign-fintech-wallet-mobile-home-screen) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#eef0ef",
        "foreground": "#07795f",
        "card": "#eef0ef",
        "primary": "#14b896",
        "primary-foreground": "#fafaf9",
        "secondary": "#07795f",
        "accent": "#07795f",
        "muted": "#e0e2e1",
        "border": "#cdcece",
        "destructive": "#dc2626",
        "ring": "#14b896"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Fintech Wallet — Mobile Home Screen" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/fintech-wallet-mobile-home-screen @ 6c6090694520. */
@layer base {
:root {
  --background: #eef0ef;
  --foreground: #07795f;
  --card: #eef0ef;
  --card-foreground: #07795f;
  --primary: #14b896;
  --primary-foreground: #fafaf9;
  --secondary: #07795f;
  --secondary-foreground: #07795f;
  --accent: #07795f;
  --accent-foreground: #fafaf9;
  --muted: #e0e2e1;
  --muted-foreground: #5ea897;
  --border: #cdcece;
  --destructive: #dc2626;
  --ring: #14b896;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}