Anatomy of a crypto wallet portfolio screen
What a token list is actually made of — measured on a real wallet app, card by card, down to the hairline on the card edge.
Last updated: 27 August 2026
A wallet home screen is four stacked blocks: a tab rail, a balance header, an optional cash row, and a token list. On a 923 px canvas the cards are 829 px wide with a 52 px radius, token rows are 160 px tall with 19 px between them, and each card carries a one-pixel gradient edge that is lighter at the top.
The vertical rhythm
Everything hangs off a small number of repeated gaps. Get these wrong and the screen reads as "almost right" without anyone locating the fault:
| Element | Height | Gap above |
|---|---|---|
| Tab rail | 94 | 17 (below status bar) |
| Wallet name | 42 type | 79 |
| Balance | 111 type | 18 |
| Daily change row | 51 | 25 |
| Cash card | 164 | 64 |
| Section heading | 70 | 59 |
| Token row | 160 | 32 first, then 19 |
The token row
Left to right: a 94 px circular icon, 29 px of space, then a two-line block — name at 42 px type, quantity and symbol at 36.4 px in a muted grey, separated by 15 px. The value and the day's change are right-aligned in a matching two-line block, 41 px and 37.4 px.
One detail that catches everyone: on right-aligned text with negative letter-spacing, the trailing space after the last glyph is still applied, so the column looks 2 px short. Compensate with a matching right margin rather than by nudging the whole block.
The hairline that makes cards look raised
Wallet cards rarely sit on a flat fill. Measured against a
#181818 card on black, the border is lighter than the
fill and graded: about +8 at the top, +5 on the sides, +2 at the
bottom. It simulates a light source above.
As white overlays that is roughly 3.6 % opacity at the top, 2.2 % at the sides and 0.9 % at the bottom — a single-pixel ring filled with a vertical gradient, not a uniform border.
Why one pixel and not two. At 3× device scale, one screen pixel is 2.3 canvas pixels on a 923 px design. Drawing the border at a round 2 px makes it slightly too thin, at 3 px slightly too thick — and at this contrast the difference is visible as a change in how "solid" the card feels.
Typography
The system font switches optical sizes: on Apple platforms, SF Pro Text below roughly 27 px and SF Pro Display above. A mockup that sets one size for everything gets the letterforms wrong on the balance, which is the largest and most scrutinised element on the screen.
The practical method is to resolve the type size from the ink height of a known string, then the letter-spacing from its width — measuring each string separately rather than assuming a scale.
Colour, and the one rule that matters
Gains and losses carry more meaning than any other colour on the screen. Keep them consistent across the balance header, the badge and every row: a portfolio where the total is green and a row's change is a different green reads as a bug. And make the badge's text dark rather than white — coloured backgrounds at this saturation fail contrast with white type.
Build the screen instead of describing it
My Larp Wallet composes a wallet mockup in the browser and exports it at 1179 × 2556 px — the native resolution these figures describe. One plan, $19/month.
Open my walletKeep reading
- App Store screenshot sizes for iPhoneEvery accepted pixel size, and which ones you actually have to upload.
- iPhone status bar dimensions, measuredExact geometry of the clock, signal, Wi-Fi and battery glyphs.
- Shipping screenshots before you have usersHow to show a full app when the database is still empty.