跳到主要内容

Graphite Citrine

Fintech App Design Template

Keel is a dark-mode fintech app design with a graphite-and-citrine look, built for founders and designers shipping a banking or money product.

Fintech app overview screen with net worth, account tiles, and trend chart
Fintech app transaction ledger screen with grouped daily transactions and category tags
Fintech app virtual card screen with freeze toggle, limits, and recent activity

探索各界面

预览 fintech 移动应用设计,可在 Sleek 中完整编辑。

Fintech app overview screen with net worth, account tiles, and trend chart
Fintech app transaction ledger screen with grouped daily transactions and category tags
Fintech app virtual card screen with freeze toggle, limits, and recent activity
Transfer Funds第 4 屏
Insights第 5 屏
Invest第 6 屏
Profile第 7 屏

关于 Fintech App

Keel is a fintech app design template built around a "Graphite Citrine" look: a near-black graphite base, slightly raised charcoal panels, warm bone text, and a single electric-citrine accent reserved for positive deltas, the active nav state, and primary actions. There are no floating cards or drop shadows; the interface is built from inset tonal panels divided by hairline rules, so depth comes from tone shifts rather than lift. Every figure sits in tabular monospace, so balances, percentages, and account numbers align to the digit and read as engineered, not decorative.

The template ships seven connected screens that form a complete money-management flow: an Overview with total net worth and account tiles, a Ledger transaction list, a Virtual Card detail, a Transfer Funds flow, an Insights spending breakdown, an Invest portfolio, and a Profile. A signature "ledger spine" runs down the left of every transaction list, a thin hairline with a small citrine node marking each balance change, tying the screens together into one precision-instrument feel.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, all far faster than starting from a blank canvas.

包含的界面

01

Overview

A hero total net worth in oversized monospace with a citrine +2.4% delta, a 7-day trend sparkline, a horizontal strip of Checking, Savings, and Invest account tiles, and a recent-activity list. The home screen that frames the whole financial picture.

02

Ledger

A transaction list grouped by day with merchant, category tag, and right-aligned tabular amounts, threaded by the ledger-spine hairline. A filter bar and search make finding any past transaction quick.

03

Virtual Card

A graphite virtual card with citrine edge-light, masked number and CVV, plus inset switches for Freeze Card and Fraud Protection and a daily-limit row. A recent-on-this-card list and a "Reveal Details" action sit below.

04

Transfer Funds

A from-account selector and recipient row above a large monospace amount entry with a custom keypad and an "Add a note" chip. The "Review Transfer" button confirms the move.

05

Insights

A month total spending figure with a month picker, spending by category as horizontal tonal bars with citrine flagging the over-budget one, and a top-merchants list. Helps users see where money goes at a glance.

06

Invest

A portfolio balance in monospace with total return, an allocation donut for stocks, crypto, and cash, and a holdings list with tickers, shares, and daily change. A citrine "Trade" button anchors the action.

07

Profile

An avatar header with member status, grouped sections for Financial (linked accounts, statements, spending goals) and Security (biometric login, two-factor auth), plus support. The account and settings hub.

核心功能

  • Graphite Citrine aesthetic: near-black base with one electric-citrine accent
  • Inset tonal panels and hairline rules instead of cards or shadows
  • Tabular monospace figures that align balances and percentages to the digit
  • Signature ledger-spine hairline with citrine nodes on transaction lists
  • Slim bottom nav with citrine underbar on the active item
  • Account tiles, net-worth hero, and 7-day sparkline on the overview
  • Virtual card detail with freeze, fraud, and daily-limit controls
  • Allocation donut and holdings list for the investing screen

适合谁

Founders validating a fintech or neobank MVP
Product designers needing a finance-app starting point
Indie developers building a banking or money-management app
Fintech teams prototyping a card or investing experience

你可以做什么

  • Launch an MVP for a personal-finance or banking product
  • Mock up screens for an investor or stakeholder pitch
  • Hand a consistent, dark-mode UI off to developers
  • Explore a redesign of an existing fintech app

如何使用此模板

  1. 1

    打开模板

    浏览各界面并预览完整设计,看看是否契合你的想法。

  2. 2

    使用此模板

    一键在 Sleek 中打开你自己的完全可编辑副本。

  3. 3

    用 AI 编辑

    只需描述你想要的效果,就能重设配色、改布局、增删界面。

  4. 4

    导出并上线

    导出设计或交给开发者,继续推进上线。

有问必答。 开始之前你需要了解的一切。

How do I build a fintech app from this template?
Click "Use this template" to open Keel in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from seven complete screens instead of a blank canvas, so you reach a working fintech app design far faster.
What screens are included in this fintech app design template?
Seven connected screens: Overview, Ledger, Virtual Card, Transfer Funds, Insights, Invest, and Profile. Together they cover the core flow of a real money app, from checking balances to moving funds, tracking spending, and managing investments.
Can I customize the fintech app UI design?
Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the graphite-and-citrine palette, change layouts, and add or remove flows. There's no manual redraw; you describe the change and it's applied.
Can I get this fintech app UI into Figma?
Yes. Sleek copies your design straight into Figma with no plugin required, so you can keep iterating in your existing workflow or hand it to a design team. You can also export it as code or as a prompt for an AI coding agent.
Is this template suitable for a neobank or investing app?
Absolutely. The overview, card, transfer, and invest screens map cleanly onto neobanks, budgeting tools, or brokerage apps. Adjust the accounts, categories, and holdings to fit your product.
Is this fintech app design template free to use?
You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

还有其他问题?请发邮件至 support@sleek.design。

开始设计你的 fintech 应用

在 Sleek 中使用并改成你的:重设配色、用 AI 编辑任意界面,再导出为代码或 Figma。