Crypto dashboard UI design: eight panels, the number rules behind them, and the phone screen

Search results for this topic are mostly finished shots with no reasoning attached. Here is the reasoning: the rules for numbers and color, then eight panels grouped into three zones, the traps in each, and where a phone wallet screen sits beside a wide dashboard.

Published: 7 November 2026

Cover every label on a crypto dashboard screenshot and look only at the digits. If the decimals jump around, the tickers go missing or the red and the green are hard to tell apart, the screen fails before anyone reads a word. That is why this guide begins with numbers, and only then moves to the eight panels that carry them: a balance header, a change row, a price chart, an allocation donut, a token list, an activity feed, alerts, and the empty and loading states.

The reading behind it: on November 7, 2026 we went through the top results for "crypto dashboard ui design". They were largely portfolio pages on Contra and service listings on Dribbble, plus a field guide from the agency Lazarev. Plenty of finished pictures, very little about what to put where or what typically breaks.

Numbers first: seven rules that carry the whole screen

A dashboard is a grid of figures with decoration around it, so most of the polish lives in these rules:

• One decimal rule for each asset, used everywhere. Two decimals for currency values. For token quantities, more places for an expensive coin and fewer for a stablecoin. Consistency beats the exact choice: four decimals in the list and two in the detail view reads like a bug.
• A ticker in capitals after every amount. "0.75 ETH", "1,240 USDC". A bare number in a token column is a riddle.
• Separators and abbreviations. Spell numbers out in the token list and detail views. Reserve forms such as "1.2M" for small cards that are short on room, and show the whole value on hover or tap.
• Tabular figures. Use the font's fixed-width digits in every numeric column, so nothing shifts sideways when a price updates.
• Signs beside colors. A plus for gains, a true minus for losses, ideally an arrow. WCAG 2.2 success criterion 1.4.1 says color must not be the only visual means of conveying information, and an unsigned red or green number depends on color alone, which many color blind readers cannot decode.
• Contrast you measured. WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text, meaning 18 point or 14 point bold and above. The usual offender is gray secondary text on a dark card, so test it, not just the white headline.
• Dark surfaces. Google's Material dark theme codelab says the bottom layer of a Material dark theme is typically a dark gray, hex 121212, and notes that more saturated colors tend to vibrate visually against dark backgrounds. So in dark mode use softer greens and reds than in light mode.

Profit and loss figures obey the same rules. On a design or a demo screen, a P&L number is a layout element that shows position, size and color, not anyone's result. Make it obviously sample data.

Eight panels, grouped into three zones

Instead of a flat list, think of the screen as three bands that a reader scans from top to bottom.

Lazarev's guide, published May 11, 2025, proposes a firm limit on the number of widgets above the fold (five to seven, as an example) and a quick test for each one: say its label, its value and its action in a single sentence. Apply that to every panel below. Any panel that fails goes lower on the page or into a detail view. The same guide says a dashboard works when the first glance answers "What changed?" and the second answers "What should I do?"

Zone one: the headline band

Balance header. One total, in one currency, in the biggest type on the page, with the moment it was computed. The classic slip is a missing timestamp: markets trade around the clock, so a total with no "updated a few seconds ago" looks frozen. The second slip is mixed currencies, where a dollar total sits over rows priced in something else and the reader must convert mentally.

Change row. A value, a percentage, a sign and the name of the period ("24h", "7d"). A bare "+3.2%" says nothing without "since yesterday". Also check that the row agrees with the balance above it; on designed screens the two are often typed separately and drift apart.

Zone two: the picture

Price chart. The total, or one asset, over time, with a period switch and a value under the cursor or finger. A smooth line from bottom left to top right with no axis labels and no dates reads as decoration. Give it a start value, an end value and a period at the very least.

Allocation donut. Each asset's share of the total. Too many slices is the usual fault, together with a legend in a different order from the token list. Fold small positions into "Other", keep the same colors and the same order as the list, and write the percentages in the legend so the eye can hop between the two.

Zone three: the working lists

Token list. The heart of the screen: icon, name, ticker, quantity, price, value and change in each row. If the row values do not sum to the balance header, anyone looking longer than three seconds will notice. Align values on the right, in tabular figures.

Activity feed. What moved, how much, when, and the status: pending, completed or failed. A colored dot alone is not a status; write the word. Lazarev makes a related point, that a well-built dashboard shows security states such as verification and transaction status openly.

Alerts. Price thresholds the user set and notices from the product. Keep them small, to the side or behind a bell, and show two or three at most. A dashboard dotted with red badges looks broken, not busy.

A grid to start from

This sketch of a desktop portfolio layout is ours, not taken from any published shot.

On a phone the content stacks into one column: balance, change row, short chart, token list, then activity. The donut and alerts usually go to screens of their own.

The eighth panel: when there is nothing to show

Each panel has a moment without data: a brand new account, a slow connection, an error. Portfolio shots skip it, which is exactly where a real product feels finished or unfinished.

Nielsen Norman Group has clear rules for both situations. On empty states, Kate Kaplan's guidelines (2021) say the screen should communicate system status, give learning cues about what the area is for, and offer a direct path to the key task. On loading, Samhita Tankala's article on skeleton screens (2023, last reviewed September 2, 2026) keeps skeleton screens for full page loads and points spinners to a single module, such as a card on a dashboard. Below 1 second neither is needed; past 10 seconds, the article strongly recommends a progress bar.

The typical error is a zero balance shown in the layout of a full one, with an empty chart and an empty donut. Swap them for one sentence and one action ("No assets yet. Add your first one.") and hide the panels that have nothing to say.

Three ways to get a dashboard on screen

Google's autocomplete for "crypto dashboard ui" on November 7, 2026 offered "ui kit", "ui design figma" and "ui figma" among its first suggestions. They are three different needs.

A ready-made UI kit gives components and sample screens. It fits when you need a starting point or a background slide. Watch for placeholder totals that do not add up, and for screens other people have already seen. You export images.

Your own Figma file holds screens drawn for your product. It fits when a team reviews flows, states and layouts. The risk is static prices that look frozen in a recording. You export images and click-through prototypes.

A live prototype is a screen that runs with changing data. It fits when the screen moves on camera or in a live demo. Its limit is scope: it covers one screen well, not every flow. The output is a recording or live use on a device.

A common split for a founder's deck puts the desktop dashboard in Figma and a live phone screen at the demo moment. For capturing that live screen, see our notes on making a crypto app demo video. Flexdger Wallet has no affiliation with Figma or Dribbble.

What a trading screen changes

A trading dashboard keeps the eight panels and adds an order panel, a watchlist and frequently a news or event column. Lazarev describes a three-pane layout from its Blockbeat project for traders: a constantly updating news feed on the left, full articles in the middle, market stats and personal watchlists on the right. One more number rule applies here: prices that change in place need tabular figures and a short, quiet highlight when they tick, not a flashing cell. Traders came for speed, so decoration should be minimal.

The phone face of the same product

A lot of products have two faces: a wide dashboard for analysis and a phone screen for the everyday glance. In a deck or demo the phone is often what people remember, since it is what they would actually use. It is also simpler: one balance, a change row, a few tokens and some buttons. Our crypto wallet UI anatomy guide goes through that screen piece by piece.

This is where Flexdger Wallet comes in, and nowhere else on this page. It is a mockup of a crypto wallet that runs in your browser, drawn after Ledger Live. You choose the balance, the tokens, the name and the avatar, and the prices on the major coins are real and keep moving. There is nothing to install, and nothing in it is held or read from a chain.

To be clear about scope, it produces the mobile wallet screen only. It does not make a desktop dashboard, an allocation donut or a trading terminal; design those in Figma or inside your own product. If you want to see the phone face before deciding, the demo needs no account and carries a DEMO mark. The page on demos and decks shows how teams use it on stage.

If you came for the other meaning of the search, a dashboard as a prop in videos, that has its own page: fake crypto dashboard for videos and demos.

Before you export

1. Token values add up to the balance header.
2. The change row names its period and agrees with the balance.
3. Every amount has a ticker or currency code.
4. One decimal rule per asset, everywhere.
5. Gains and losses have a sign or an arrow, not just a color.
6. Secondary text reaches 4.5:1 on its real background.
7. Dark mode uses softer greens and reds than light mode.
8. Every panel has an empty state and a loading state.
9. Sample data is plainly sample data, and demo screens say "mockup".

We will recheck this page on November 22 and December 15, 2026, against the search results and the sources below.

Sources

• W3C, Understanding Success Criterion 1.4.3: Contrast (Minimum), WCAG 2.2, read November 7, 2026
• W3C, Understanding Success Criterion 1.4.1: Use of Color, WCAG 2.2, read November 7, 2026
• Nielsen Norman Group, Kate Kaplan, Designing Empty States in Complex Applications: 3 Guidelines, 2021
• Nielsen Norman Group, Samhita Tankala, Skeleton Screens 101, 2023, reviewed 2026
• Google Codelabs, Design a dark theme with Material and Figma, read November 7, 2026
• Lazarev.agency, How to create crypto dashboard design your users will love and trust, 2025