Crypto wallet UI design: a wallet screen taken apart, with measurements

What a crypto wallet screen is built from, measured on a real wallet app one card at a time, with the contrast ratios that justify its colours.

Last updated: 8 September 2026

Four blocks, top to bottom

The measured home screen reads as a stack of four things: a tab rail, then the balance header, then a cash row that may or may not be there, then the token list. The canvas is 923 px wide. Cards span 829 px and round their corners at 52 px; each token row is 160 px high, and rows are separated by 19 px. Every card also wears a one-pixel edge with a gradient, paler at the top than at the bottom.

The vertical rhythm

A screen like this hangs from a short list of repeated gaps. If one is off, the result looks nearly correct and nobody can point at the reason. These are the figures read from the build:

Six habits the best wallets have in common

Lay five admired wallets next to each other. Their colours and icon styles shout, yet the skeleton is almost the same. Each habit below answers a question every wallet has to answer, and a wallet that ignores one has usually done so by neglect rather than by choice.

A dominant figure

The portfolio total gets three to four times the type size of its neighbours, sits in the first screenful, and has no card, outline or icon around it. Teams often drift the other way and turn the header into a control room: total, 24-hour move, sparkline, network picker and four buttons of similar weight. A quick test is to squint at the screen until it blurs. When more than one thing survives in the top third, nothing is leading.

Precision is chosen, not inherited

The chains store far more digits than a reader can use: 18 decimal places for Ether, 8 for Bitcoin, 6 for the dollar stablecoins on Ethereum. Fiat amounts take two decimals. Token quantities take as many digits as it takes to be unambiguous, and the complete figure belongs, if anywhere, on the detail screen.

Rows behave like two columns

It looks like four items per row, yet it works as two stacks. On the left: icon and name above the quantity. On the right, flush with the edge: the fiat value above the day's change. Digits only form a readable column when their last characters line up, and tabular figures stop the column twitching when a price ticks. The row's dimensions are in the token row section below.

One way to shorten an address

No list shows an address in full. Reliable wallets keep a fixed count of characters at each end (think 0x1a2b…9f8e) and avoid fixing a pixel width, which would yield different counts on different phones. Leave the prefix (0x, bc1) in place so the chain is readable at a glance. Never give the tail fewer characters than the head, because users check the end of an address against what they copied.

Green and red mean direction

This is the rule that gets broken, nearly always by addition. A green success toast and a green “connected” dot appearing beside a green +2.4 % badge teach people that green no longer says up. One green and one red, only for gains and losses, on every surface. The contrast half of the rule is under colour.

Hit areas of 44 pt

Apple’s Human Interface Guidelines call for 44 × 44 pt, Material Design for 48 × 48 dp, and WCAG 2.2 sets the AA floor at 24 × 24 CSS px (criterion 2.5.8). Aim at 44 pt: it satisfies an iOS review and an accessibility audit at once. Padding can supply the size. A 16 pt copy icon inside a 44 pt tappable area is correct; the same icon with a 16 pt tappable area is not.

What the weaker ones do

• Everything at the same volume. Balance, change and token names sit within two type steps of each other, so no entry point.
• Digits for show. Eight decimals in a list row, only because the API returned eight.
• Boxes where space would do. Each group framed, when a gap would have split them.
• Meaning left to an icon. An unlabelled coloured dot vanishes for anyone who is colour-blind.

Inside one token row

From the left edge: a circular icon of 94 px, a 29 px gap, and a block of two lines. The name is set at 42 px; below it, separated by 15 px, the quantity and symbol at 36.4 px in a subdued grey. The right-hand block mirrors that structure, flush right: value at 41 px, day change at 37.4 px. For icon sizes, shapes and what tends to go wrong with them, read token icon sizes, shapes and traps.

A small trap lurks in right-aligned text with negative letter-spacing: the trailing space after the final glyph is still applied, so the column ends 2 px early. Offset it with a matching right margin. Shifting the entire block would only move the error.

The edge that lifts a card

Flat fills make cards look pasted on. Against a #181818 card over black, the measured edge is paler than the fill and graded: about +8 levels at the top, +5 at the sides and +2 at the bottom, as if a lamp hung above the screen.

Expressed as white overlays, that is nearly 3.6 % opacity at the top, 2.2 % at the sides and 0.9 % at the bottom. In practice: a one-pixel ring painted with a vertical gradient, not a border of one even colour.

Type

Apple's system font changes optical size with scale: SF Pro Text below about 27 px, SF Pro Display above it. A mockup that uses a single size for every string misshapes the letters of the balance, the biggest and most examined piece of text on the page.

The method that works: derive the font size from the ink height of a string whose content you know, then the letter-spacing from its width, doing each string separately and never assuming a type scale.

Colour, and a rule worth enforcing

Of all the colours on a wallet screen, gain and loss carry the most meaning, so they have to agree everywhere: header, badge, rows. A total in one green and a row's change in a slightly different one looks like a bug. Put dark text on the badge, too. A bright green or red is light, and white lettering on a fill that saturated usually fails contrast; the worked numbers are further down. To see these rules on a populated, measured screen, there is a page for crypto wallet app builders.

Dark mode contrast: two thresholds, then a palette

No separate standard exists for dark themes. Body text needs 4.5:1 against the surface under it, and large text or the parts of a control that identify it need 3:1 (WCAG AA). The ratio is (L1 + 0.05) / (L2 + 0.05) using relative luminance, topping out at 21:1 for pure white on pure black.

A very dark background makes passing easy, and that is the catch. When every element clears the bar with room to spare, nothing is quieter than anything else, and a screen that scores perfectly has lost its hierarchy. On dark surfaces, contrast is the hierarchy.

A real dark palette, measured

Each ratio below uses the WCAG formula against #0a0811, this site's background. It is not the wallet screen's palette (that one sits on black with #181818 cards), so take it as a demonstration of the method:

The last two lines are cautions, not scores. Dim grey at 3.7:1 sits under the body-text bar: acceptable for a timestamp that is only decoration, wrong for anything the reader needs. The hairline's 1.3:1 is far from 3:1, and that is right for a divider, since 3:1 governs borders that identify a control rather than every rule on the page. The same arithmetic explains the dark badge label from the colour section: white on violet #d4a0ff gives 3.5:1 and fails, near-black on that violet gives 5.7:1 and passes.

Pure white on pure black is a mistake

21:1 is the ceiling, not a goal. Bright type on true black causes halation, where letters seem to glow outward, and long stretches at maximum contrast tire the eye in ways a checker will not report. The usual practice is an off-black surface with off-white text. Material Design's dark baseline is #121212, which still reaches 18.7:1 with white.

A short audit

• Background: off-black, never #000000.
• Body text: 4.5:1 or above on the surface it really lands on, the lightest card included.
• Coloured buttons and badges: dark label instead of white.
• Below 4.5:1 is allowed only for things nobody has to read.
• Focus rings and control outlines: 3:1; dividers are exempt.
• State is never colour on its own: add a glyph or a word.