Design system v1.0 · built from the Figma file

A crypto wallet that stays simple, with a pop of colour.

Story 01 · NightExchange assets in a few minutes
Story 02 · CobaltTrade & spend in one place
Story 03 · PaperManage assets, anywhere
Screens100+
Brand colours3
TypefaceRoobert
Canvas402 pt

Simple first

A beginner can send, receive, buy and earn from the home screen. Advanced tools such as limit orders, slippage and routing sit one step deeper and never crowd the first view.

Colour is a signal

The interface is near-black so colour can carry meaning. Volt means go and selected, Orchid marks the action in focus, Cobalt carries information and Ethereum-blue data. Green and red are kept for price.

Many styles, one voice

Glass cards, chunky illustration, hand-drawn avatars and flat line icons share one palette and one radius scale, so the mix reads as a single product.

02 Colour

A dark room with three lights on.

Every screen starts on Night, a black with a hint of green. Three brand colours do the talking, and each one has a job. Tap a swatch to copy it.

Neutrals, measured from the screens
Price signals
How much of each, on an average screen
Approved text pairs
Aa Night on Volt 15.6:1
Aa Volt on Night 15.6:1
Aa Night on Orchid 8.4:1
Aa White on Cobalt 4.9:1
Gradients, lifted from the mark
Cobalt · Violet · Orchid
Volt · Sand · Orchid
Volt · Mint · Sky · Cobalt
Illustration palette, sampled from the vectors
03 Type

Roobert, from Light to Heavy.

One grotesk does everything, from a 10 pt timestamp to the balance. The letters below are drawn from the glyph outlines stored in the Figma file. The interactive text on this page uses Figtree as a stand-in until the licensed Roobert files are added.

Roobert · Displaay Type FoundryRegular and SemiBold carry 95% of the app
900
700
600 · titles, numbers
500
400 · body, lists
300
Scale · measured from 1,533 Roobert text layers
Balance$2344.0048 / 600 + 400
DisplayExchange assets in a few minutes28 / 600 / -2%
Title LLatest recipients22 / 600
Title MCreate & sell your wallets18 / 600
Title SKeyless wallet16 / 600 · 293 uses
BodyCreate an MPC wallet with your platform account.16 / 400
Body S1 ETH = 1.876,515984 USDC14 / 400 · 369 uses
CaptionEstimated network charges · $3,71 (1 Minute)12 / 400 · 408 uses
Micro11:34 AM · BTC10 / 400
Tidy-up for the next build. Lato and Poppins crept into some cards and buttons during design (about 380 layers). Fold them back into Roobert so numbers and labels share one rhythm. Keep tabular figures on for every price.
04 Surfaces

Rounded, layered, and lit from behind.

Seven radii cover every shape in the file. Cards are frosted glass over a soft blob of the coin's colour, so each asset glows in its own light.

4Change pills
8Tags, checks
12Buttons, inputs
16Chips, coin cards
20Panels, nav
24Sheets
PillStory CTAs
BitcoinBTC
$30780▲ 11,75%
Glass recipe

White at 12%, background blur 55, a 1.5 pt border in the coin's colour, and a blob of that colour at 70% behind it.

background: rgba(255,255,255,.12); backdrop-filter: blur(55px); border: 1.5px solid var(--coin); border-radius: 16px;
Stefan Milovic@8tfn
Total Balance
$2344.00
Signature · the balance stack

Three cards, one for each colour.

The balance sits on a Volt card with Orchid and Cobalt cards tucked behind it at −3° and +3°. It's the one place all three brand colours meet. Hover or tap to fan the cards out. In the app, swiping between accounts brings the next colour forward.

radius 20rotation ±3°offset 8 ptbalance 48/600 + cents 400
05 Icons

Thin lines, round joins, one weight.

The interface icons follow the Phosphor family at regular weight on a 24 pt grid. These are the actual vectors from the screens, recoloured to the current text colour.

send
receive
buy
earn
history
home
exchange
earn-nav
wallet
swap
search
bell
gift
funnel
share
star
fire
check
eye-off
back
Action tiles are 56 pt, radius 16. The chosen one turns Orchid with Night icon. Tap to try.
Bitcoin
Ethereum
Cardano
Coin logos stay in their own colours, at 32 pt in a circle.
06 Illustration

Ribbons, thick coins and hands that hold things.

The illustrations are flat vectors with one idea each. A wide ribbon loops through every story scene, and coins are drawn as thick discs with their edge showing. Small sparkles show where something happened. People appear as hands, or as head-and-shoulder avatars in a circle.

Ribbon · Story 01
Ribbon · Story 03
Keys · password changed
Hand · reset password
Hand · information received
Ribbon · Story 02

One object, one moment

Each scene shows a single object at the moment it matters: the keys after a new password, the phone with a check, the card being handed over.

Depth without 3D

Volume comes from a darker edge and one highlight. Coins show their rim. There are no gradients inside objects, only on the ribbons.

Brand colours on props

Phones and cards are Orchid, Cobalt or Volt. Skin and hair use the warm illustration palette. Black outlines are used only for small details.

Avatars

Every recipient is a character.

Contacts are drawn head-and-shoulders on a solid circle in a brand or illustration colour, never photos. They're diverse in skin, hair and style, and stay readable at 56 pt in the recipients row.

07 Components

The kit, live.

Rebuilt in code from the measurements in the file. Everything here responds to touch.

Buttons
height 50radius 12story pills radius 40label 16/600
Inputs and one-time code
Resend in 00:57
field 52radius 12focus 1.5 Voltplaceholder #6D6D6D
Segmented control and filter chips
segment track radius 16 · 1 pt Voltchip Ash · selected 2 pt Volt
Market list
Ξ
ETH$360,6M
$1.878,80-1,62%
B
BNB$132,18M
$378,80+1,62%
₿
WBTC$50,56M
$30.001,96-0,64%
A
ARB$31,55M
$1,11+3,71%
row 56change pill radius 4 · 12/400tabular figures
Coin cards · glass over colour
BitcoinBTC
$30780▲ 11,75%
BinanceBNB
$270.10▲ 21,59%
EthereumETH
$1478.10▲ 4,75%
ArbitrumARB
$1,11▲ 3,71%
card 150 × 150radius 16border 1.5 coin colourblob coin colour at 70%, blurredsparkline 1.6 pt, drawn on load
Bottom sheet · filter
Time
sheet radius 24 topoption 44 · radius 14selected 1.5 Volt + check
Notification and navigation
!
Low stock warning: MN14825 minutes ago
i
Vaulta's index components have been adjusted.2 hours ago
unread: 1.5 Orchid ring + dottab bar Night at 20% + bluractive tab Up green
Live Activity · Dynamic Island
Sending 0.0056 BTC to Kerri Colby
Confirming on the network · about 1 min
+11,75%

Vaulta is built for iOS 17+ and uses the Dynamic Island to track transactions, price moves and news without opening the app. Compact, it shows the mark and one number. Expanded, it shows one sentence, one progress bar and one line of status. Press the island to expand it.

08 Screens

The system at work.

Fourteen of the screens, redrawn as vectors straight from the file. Scroll sideways.

Story 1
Story 2
Story 3
04 Login
07 Info received
12 Home
15 Notification
24 Market
26 Exchange · connect
32 Exchange · input
34 Exchange · charts
36 Earn · stablecoin
40 Wallet
44 Latest recipient
Complete user flow
01Stories02Login and register03One-time code04Reset password05Home06Notifications07Rating and filters08News09Market10Exchange: convert & link11Limit order12Earn13Wallet and history14Send to a recipient
09 Tokens

Copy, paste, build.