Crypto wallet UI design: what the good ones have in common

Six patterns repeat across every wallet worth copying. Here they are, with the measurements and the thresholds behind them.

Published: 27 August 2026

The six traits

Open five well-regarded wallets side by side and the surface differences are loud: different palettes, different iconography, different amounts of chrome. The structure underneath is nearly identical. That is not laziness. Each of these patterns solves a problem that every wallet has, and the wallets that deviate mostly deviate by accident.

• One number is three to four times the size of everything else.
• The token list is a grid with two aligned columns, not free-form rows.
• Addresses appear truncated, with the same head and tail length everywhere.
• Green and red mean gain and loss, and nothing else on the screen uses them.
• Every tappable thing is at least 44 pt tall, including invisible padding.
• Secondary text is dimmer than primary text but still passes 4.5:1.

One number owns the screen

The portfolio total is the reason the screen exists. In the wallets that read well, it is set several steps above everything else in the type scale, sits above the fold with nothing competing beside it, and carries no decoration — no card, no border, no icon.

The common failure is a header that tries to be a dashboard: total, 24-hour change, a chart, a network selector and four action buttons, all at similar weights. Nothing is dominant, so the eye starts scanning instead of reading, and the screen feels busy at exactly the moment the user wanted reassurance.

A practical test: squint until the screen blurs. If more than one element is still legible in the top third, the hierarchy is not doing its job.

Decimals are a design decision, not a data decision

Token contracts carry far more precision than a human wants to read. Ether has 18 decimal places, Bitcoin has 8, and the widely used dollar stablecoins on Ethereum use 6. None of that belongs on a list row. Fiat totals get two decimals; token amounts get enough digits to be unambiguous and no more; the full precision belongs on the detail screen, if anywhere.

The token list is a two-column grid

A token row looks like four pieces of information but behaves like two columns. On the left, the icon plus a stacked pair — token name above, quantity below. On the right, another stacked pair — fiat value above, change below — aligned to the right edge, not centred, not left-aligned inside a fixed-width column.

Right-alignment matters more than it sounds. Numbers of different lengths only scan as a column when their last digits line up. A list where 1,204.50 and 82.10 are left-aligned forces the reader to re-anchor on every row.

The other half of that is tabular figures. Most typefaces ship proportional digits by default, where a 1 is narrower than a 0, so a column of numbers visibly shifts as values update. Turning on tabular figures fixes it in one line. We wrote up the rest of the row geometry — widths, radii, vertical rhythm — in the anatomy of a wallet portfolio screen.

Addresses are truncated the same way everywhere

No wallet shows a full address in a list. They all truncate, and the ones that feel solid truncate to a fixed number of leading and trailing characters rather than to a pixel width — because a fixed pixel width produces a different number of characters on every device, and the tail is the part people actually verify.

Chain	Address form	Length
Ethereum and EVM chains	0x + 40 hex characters	42
Bitcoin, native SegWit	bc1 + 39 characters	42
Bitcoin, Taproot	bc1p + base32	62
Bitcoin, legacy	base58, starts with 1	26–35
Solana	base58 public key	32–44

Two rules that hold across all of them. Keep the prefix visible — 0x and bc1 tell a user which chain they are looking at before they read a single character. And never truncate the tail to fewer characters than the head: people compare the end of an address against a clipboard, so the end is the part that has to survive.

Gain and loss colour means one thing

This is the rule most often broken, and it is broken by adding rather than by removing. A green success toast, a green "connected" dot and a green +2.4 % badge on the same screen train the eye to stop reading green as a direction.

The second half of the rule is contrast, and it has a specific trap. Bright greens and reds are light colours. White text on a saturated green sits around 2.2:1 against typical wallet greens — nowhere near the 4.5:1 that body text needs — while black text on the same green clears 9:1. On a red, white text lands near 4.1:1, which still fails. If a badge has a coloured fill, its text should be dark. Almost every wallet that looks polished has already made this choice; it is one of the quietest tells.

Targets, and the thumb

A row that looks tappable has to be tappable at arm's length, on a moving train, with a thumb. The published minimums differ by source, and it is worth knowing which one you are being held to:

Source	Minimum target	Status
Apple Human Interface Guidelines	44 × 44 pt	Platform recommendation
Material Design	48 × 48 dp	Platform recommendation
WCAG 2.2, SC 2.5.8	24 × 24 CSS px	Level AA
WCAG 2.1, SC 2.5.5	44 × 44 CSS px	Level AAA

The number to design to is 44 pt, because that is the one an iOS reviewer and an accessibility audit will both accept. The size can come from padding: a 16 pt copy glyph inside a 44 pt hit area is correct, a 16 pt glyph with a 16 pt hit area is not.

What the weak ones do instead

• Equal weights. Balance, change and token names all set within two steps of each other, so nothing leads.
• Decorative precision. Eight decimal places on a list row, because that is what the API returned.
• Borders instead of spacing. Every group boxed, when whitespace would have separated them.
• Icons carrying meaning alone. A coloured dot with no label is invisible to a third of the people who need it.

Measuring rather than guessing

Every figure above is either a published threshold or arithmetic. We ended up collecting them because My Larp Wallet draws wallet-style mockup screens at native resolution, and drawing a convincing screen means knowing the real geometry rather than approximating it — the same rules apply whether you are building an interface or a picture of one.

Worth being explicit about the second case: a mockup of a wallet screen is a design artefact. It is legitimate in a portfolio, a store listing or a deck, and it is not a record of holdings — never present it as one.