Everything you’d ship, already designed

All 45 desktop screens in Viola UI, each designed in light and dark: 90 frames built on one reconciling dataset. The portfolio total is €48,203.11 on every screen that shows it, and the cash ledger runs from a €4,124.16 opening balance to €3,872.16 wherever you look.

New in v1.2

8 new screens in this release: four dashboard layouts and four settings pages.

Full changelog →

Portfolio

4 screens

The home of the app: one account, one total, four ways to look at it.

Portfolio dashboard screen in light mode, from Viola UI, the fintech UI kit for Figma

Portfolio dashboard

Total balance charted against the S&P 500, an AI insights strip, holdings and cash tables, and a watchlist with sparklines and crypto prices.

Performance screen in light mode, from Viola UI, the fintech UI kit for Figma

Performance

Cumulative time-weighted return versus the S&P 500 with 1-year return, best month and max drawdown, plus allocation donuts by asset class, currency and instrument.

Balances screen in light mode, from Viola UI, the fintech UI kit for Figma

Balances

Net liquidation, buying power, settled cash and leverage, with current and overnight margin requirements. All margin figures read 0.00, because it is a cash account.

Portfolio news screen in light mode, from Viola UI, the fintech UI kit for Figma

Portfolio news

An AI news-trends summary, labelled as not investment advice, above research and signal cards for each holding.

AI copilot

6 screens

An “Ask Viola” assistant panel that answers from the user’s own account, labels itself as AI, and never gives investment advice.

Copilot, welcome screen in light mode, from Viola UI, the fintech UI kit for Figma

Copilot, welcome

The assistant panel beside the portfolio dashboard, with suggested questions to start from.

Copilot, action with undo screen in light mode, from Viola UI, the fintech UI kit for Figma

Copilot, action with undo

The assistant highlights a position in the holdings table on request, with Undo and Explain controls and follow-up suggestions.

Copilot, chart answer screen in light mode, from Viola UI, the fintech UI kit for Figma

Copilot, chart answer

A follow-up question answered with an allocation donut and a note on where the data came from.

Copilot, wider panel screen in light mode, from Viola UI, the fintech UI kit for Figma

Copilot, wider panel

The same conversation with the panel dragged wider.

Copilot, collapsed screen in light mode, from Viola UI, the fintech UI kit for Figma

Copilot, collapsed

The panel closed to a floating button, giving the dashboard and watchlist the full width.

Copilot on Documents screen in light mode, from Viola UI, the fintech UI kit for Figma

Copilot on Documents

The assistant opened on the Documents page, showing it works across the app.

Dashboards

5 screens · 4 new

Five alternative dashboard layouts built from the same components and the same numbers.

Summary dashboard screen in light mode, from Viola UI, the fintech UI kit for Figma

Summary dashboard

Headline KPI tiles, an allocation donut with per-position values, a performance chart against cost basis and benchmark, and a holdings table with weight bars.

Home dashboard screen in light mode, from Viola UI, the fintech UI kit for Figma

Home dashboard

New in v1.2

A personal greeting with the cash account card, money in and money out, recent activity, monthly performance against a benchmark, and allocation by holding.

Dashboard overview screen in light mode, from Viola UI, the fintech UI kit for Figma

Dashboard overview

New in v1.2

Portfolio value area chart, asset allocation split into ETFs, stocks and cash, a watchlist, and invested value as a candlestick chart.

KPI overview screen in light mode, from Viola UI, the fintech UI kit for Figma

KPI overview

New in v1.2

Four KPI tiles (portfolio value, today’s P&L, invested, cash), a value, returns and cash-flow chart, weight and value by holding, asset allocation and holdings.

Exposure dashboard screen in light mode, from Viola UI, the fintech UI kit for Figma

Exposure dashboard

New in v1.2

Holding cards with sparklines, the largest position’s exposure by region on a dot map, and a month-by-month stacked chart of how the portfolio is split.

Fund page

5 screens

A full instrument page for an ETF, from quote to fundamentals.

Fund overview screen in light mode, from Viola UI, the fintech UI kit for Figma

Fund overview

Quote with a candlestick chart and average-cost line, day and 52-week ranges, your position and P&L, fund facts (TER, size, domicile) and document links.

Fundamentals screen in light mode, from Viola UI, the fintech UI kit for Figma

Fundamentals

Fund objective and key profile, trailing performance, a style matrix, analyst coverage, ESG ratings, risk statistics, key ratios and dividend policy.

Fund holdings screen in light mode, from Viola UI, the fintech UI kit for Figma

Fund holdings

Top 10 holdings, industry allocation bars, a geographic bubble map with regional weights, and country and currency allocation tables with flags.

Fund performance screen in light mode, from Viola UI, the fintech UI kit for Figma

Fund performance

Price chart with range and currency toggles, cumulative and annualised returns against peers, and risk and statistical analysis tables.

Fund news screen in light mode, from Viola UI, the fintech UI kit for Figma

Fund news

AI news trends for a single fund above research, fund-desk and newswire cards.

Markets

1 screen

Browse and filter instruments across regions.

Markets screen in light mode, from Viola UI, the fintech UI kit for Figma

Markets

Index tiles with sparklines, an instrument table with region tabs, exchange and sector filters, watchlist stars and pagination, and an AI news-trends panel.

Trade

6 screens

A full-page trade screen and a compact order ticket, each empty, buying and selling.

Trade, empty state screen in light mode, from Viola UI, the fintech UI kit for Figma

Trade, empty state

The order form before an instrument is chosen, with an AI order-help panel that explains market, limit and stop orders without recommending what to buy.

Trade, buy order screen in light mode, from Viola UI, the fintech UI kit for Figma

Trade, buy order

A limit buy of 5 VWCE: quote with bid and ask, candlestick chart, your position, key metrics and an order bar with an estimated cost of €832.50.

Trade, sell order screen in light mode, from Viola UI, the fintech UI kit for Figma

Trade, sell order

The same order as a sell, showing estimated proceeds instead of cost, plus a link to select tax lots.

Order ticket, empty screen in light mode, from Viola UI, the fintech UI kit for Figma

Order ticket, empty

A compact order-ticket drawer that opens over any screen, shown before a symbol is chosen.

Order ticket, buy screen in light mode, from Viola UI, the fintech UI kit for Figma

Order ticket, buy

Quote, available cash, margin and current position, then quantity, limit price, time-in-force and outside-hours options with the estimated cost.

Order ticket, sell screen in light mode, from Viola UI, the fintech UI kit for Figma

Order ticket, sell

The sell version with lot selection, estimated proceeds and a red sell button.

Cash & transfers

4 screens

Money in and out of the account, reconciled to the cent.

Cash overview screen in light mode, from Viola UI, the fintech UI kit for Figma

Cash overview

Cash balance, money in and out, a cumulative cash-flow chart, the cash account card, balance by day, and a transaction history from the €4,124.16 opening to the €3,872.16 closing balance.

Deposit screen in light mode, from Viola UI, the fintech UI kit for Figma

Deposit

Currency picker and deposit methods (open banking, SEPA, linked wallet, debit card) with an AI panel explaining what happens after you deposit.

Withdraw screen in light mode, from Viola UI, the fintech UI kit for Figma

Withdraw

Available-to-withdraw balance and SEPA, SWIFT and linked-wallet methods, each with speed, fees and steps.

Transfer history screen in light mode, from Viola UI, the fintech UI kit for Figma

Transfer history

Date-range and reference search above a list of deposits and withdrawals with methods and pending or available statuses.

Documents

3 screens

Statements, transactions and tax paperwork.

Statements screen in light mode, from Viola UI, the fintech UI kit for Figma

Statements

Default statements, a delivery schedule, quick downloads and an empty state for custom statements.

Transactions screen in light mode, from Viola UI, the fintech UI kit for Figma

Transactions

Trades, deposits and withdrawals with quantity, price, gross, fees and net, plus beginning and ending cash balance.

Tax documents screen in light mode, from Viola UI, the fintech UI kit for Figma

Tax documents

Tax forms, dividend tax vouchers, a cost-basis method picker and an AI tax summary that reports the user’s own figures and is clearly marked as not tax advice.

Settings

6 screens · 4 new

Six account settings pages that share one tab bar.

Profile screen in light mode, from Viola UI, the fintech UI kit for Figma

Profile

Account header with setup progress, profile details, account profile and configuration, a cumulative return chart, recent orders and holdings.

Security screen in light mode, from Viola UI, the fintech UI kit for Figma

Security

Two-step sign-in warning, a sign-in activity chart, security settings, signed-in devices and a security log.

Funding screen in light mode, from Viola UI, the fintech UI kit for Figma

Funding

New in v1.2

Cash account status, linked bank accounts, address and tax residence, and a list of confirmations and receipts.

Monthly statement screen in light mode, from Viola UI, the fintech UI kit for Figma

Monthly statement

New in v1.2

Opening balance, net change and closing balance for the month, line-by-line entries including commissions, and reporting settings.

Preferences screen in light mode, from Viola UI, the fintech UI kit for Figma

Preferences

New in v1.2

Personal details form, connected apps, trading and platform settings, email updates, a notification matrix and a close-account flow.

Activity log screen in light mode, from Viola UI, the fintech UI kit for Figma

Activity log

New in v1.2

Recent orders with fill status and a timestamped log of account activity.

Onboarding (KYC)

3 screens

A three-step account-opening flow with a stepper and save-and-exit.

Step 1: Profile screen in light mode, from Viola UI, the fintech UI kit for Figma

Step 1: Profile

Profile details, personal information and citizenship.

Step 2: Residence, identity & employment screen in light mode, from Viola UI, the fintech UI kit for Figma

Step 2: Residence, identity & employment

Residential address, phone number, identification, tax residency and employment details.

Step 3: Review screen in light mode, from Viola UI, the fintech UI kit for Figma

Step 3: Review

A summary of everything entered, with masked ID and tax numbers, before the application is submitted.

Sign in

2 screens

Two sign-in layouts.

Sign in, centred screen in light mode, from Viola UI, the fintech UI kit for Figma

Sign in, centred

Email and password with remember-me and forgot-password, plus Google, Microsoft and Apple sign-in.

Sign in, split screen in light mode, from Viola UI, the fintech UI kit for Figma

Sign in, split

The sign-in form beside a gradient brand panel with a tagline.

Months of design work, ready today