# Crypto dashboard UI design: the 8 panels a portfolio dashboard needs, and its phone side

Source: https://mylarpwallet.com/blog/crypto-dashboard-ui-design
Updated: 2026-11-07
Published: 2026-11-07
Topic: Crypto wallet mockups (https://mylarpwallet.com/blog/crypto-wallets)

> Crypto dashboard UI design, panel by panel: balance, chart, allocation, token list, activity, alerts, empty states, plus number, color and dark mode rules.

Most results for this search are portfolio shots with no explanation. This page is the checklist behind them: eight panels, what each one shows, the mistake each one usually carries, the number and color rules, and how the phone screen fits next to the desktop view.

**Short answer:** A crypto dashboard UI needs eight panels: a balance header, a change row, a price chart, an allocation donut, a token list, an activity feed, alerts, and empty and loading states. Design the numbers first: a fixed decimal rule per asset, the ticker beside every amount, and gains and losses marked by sign, not only by color.

A crypto dashboard UI needs eight panels: 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 of all of them. The panels matter less than the numbers inside them: decimals, tickers, signs and contrast decide whether the screen reads as a product or as a poster.

We read the top search results for "crypto dashboard ui design" on November 7, 2026. They are mostly portfolio pages on Contra and service listings on Dribbble, plus one field guide from the agency Lazarev. Those pages show finished screens. Few explain which panels a dashboard needs, what goes wrong inside each one, or how to treat the numbers. That is what this page does.

## What panels does a crypto dashboard need?

Here is the short list, in the order a reader's eye usually travels on a portfolio screen:

1. **Balance header:** the total value, in one currency, with a timestamp.
2. **Change row:** the move over a chosen period, as a value and a percentage.
3. **Price chart:** the history of the total or of one asset, with a period switch.
4. **Allocation donut:** the share of each asset in the total.
5. **Token list:** one row per asset with quantity, price, value and change.
6. **Activity feed:** recent movements with a clear status.
7. **Alerts:** price thresholds and account notices.
8. **Empty and loading states:** what each panel shows before it has data.

Lazarev's guide, published May 11, 2025, suggests a hard budget for widgets above the fold (five to seven, as an example), and a simple test for each one: state its label, its value and its action in one sentence. That test works well on this list. If a panel cannot pass it, it belongs lower on the page or in a detail view.

### A layout sketch

This is our own sketch of a desktop portfolio layout, drawn as a grid. It is not taken from any published shot.

| Left (wide column) | Right (narrow column) |
|---|---|
| Balance header with timestamp, change row underneath | Alerts, two or three at most |
| Price chart with period switch (1D, 1W, 1M, 1Y, All) | Allocation donut with a legend in the same order as the token list |
| Token list, sortable by value | Activity feed, newest first, five rows and a "See all" link |

On a phone the same content stacks into one column: balance, change row, a short chart, token list, then activity. The donut and the alerts usually move to their own screens. The section on the phone side below comes back to this.

## Panel by panel: what each shows, and the usual mistake

### Balance header

It shows one number, the total value, with its currency and the time it was computed. It is the largest type on the screen.

**Common mistake:** no timestamp. Crypto markets trade around the clock, so a total without "updated a few seconds ago" or a clock time reads as frozen. The second mistake is mixing currencies: a total in dollars above token rows valued in another unit forces the reader to convert in their head.

### Change row

It shows the move over a period: a value and a percentage, with a sign, and the name of the period ("24h", "7d").

**Common mistake:** a percentage with no period. "+3.2%" means nothing without "since yesterday" or "this week". The other mistake is a change row whose value and percentage disagree with the balance above it. On a designed screen this happens all the time, because the numbers were typed separately.

### Price chart

It shows how the total, or one asset, moved over time, with a period switch and a value under the cursor or finger.

**Common mistake:** a decorative curve. A line that rises smoothly from bottom left to top right, with no axis labels and no dates, tells the reader the chart is art. Give it at least a start value, an end value and the period. Lazarev writes that a dashboard succeeds when the first glance answers "What changed?" and the second answers "What should I do?", which is a useful filter for every chart decoration.

### Allocation donut

It shows the share of each asset in the total.

**Common mistake:** too many slices and a legend in a different order from the token list. Group the small positions into "Other" and keep the same order and the same colors as the list, so the eye can move between the two without searching. Put the percentages in the legend, not only in the slices.

### Token list

It is the working heart of the screen: one row per asset with icon, name, ticker, quantity, price, value and change.

**Common mistake:** rows that do not add up. If the values in the list do not sum to the balance header, anyone who looks for more than three seconds will notice. The second mistake is uneven alignment: values must align on the right, in tabular figures, so digits line up in columns.

### Activity feed

It shows recent movements: what moved, how much, when, and its status (pending, completed, failed).

**Common mistake:** status shown by a colored dot alone. Write the word. Lazarev's guide makes a related point: a well-designed dashboard makes security states explicit, such as verification and transaction status.

### Alerts

They show price thresholds the user set and notices from the product.

**Common mistake:** alerts that compete with the balance. Keep them small, at the side or behind a bell, and limit the visible ones to two or three. A dashboard covered in red badges looks broken, not busy.

### Empty and loading states

Every panel above has a moment with no data: a new account, a slow connection, an error. Most portfolio shots skip this, and it is where real products feel finished or not.

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

**Common mistake:** a zero balance shown in the same layout as a full one, with an empty chart and an empty donut. Replace them with one sentence and one action ("No assets yet. Add your first one."), and hide the panels that have nothing to say.

## Number formatting and color rules

A dashboard is a table of numbers with decoration around it. These rules do most of the work:

- **One decimal rule per asset, applied everywhere.** Two decimals for currency values. For token quantities, more places for an expensive coin, fewer for a stablecoin. The rule matters more than the exact choice: a quantity shown with four decimals in the list and two in the detail view looks like a bug.
- **Ticker after the amount, in capitals.** "0.75 ETH", "1,240 USDC". Never a bare number in a token column.
- **Thousands separators and abbreviations.** Full numbers in the token list and detail views, abbreviations such as "1.2M" only on small cards where space is short, and the full value on hover or tap.
- **Tabular figures.** Use a font's tabular (fixed width) digits for every column of numbers, so values do not shift when a price updates.
- **Signs, not only colors.** Gains with a plus sign, losses with a true minus sign, ideally an arrow too. WCAG 2.2 criterion 1.4.1 says color must not be the only visual means of conveying information, and a red or green number with no sign relies on color alone, which many color blind readers cannot decode.
- **Contrast.** WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, defined as at least 18 point, or 14 point bold. Gray secondary labels on a dark card are the usual offender: check them, not only the white headline.
- **Dark mode surfaces.** Google's Material dark theme codelab says the bottom-most layer of a Material dark theme is typically a dark gray (hex value 121212), and notes that more saturated colors tend to vibrate visually against darker backgrounds. In practice: lighter, softer green and red in dark mode than in light mode.

Profit and loss figures follow the same rules. On a design or demo screen, a P&L number is a design element: it shows where the figure sits, its size and its color, not anyone's result. Write it as clearly sample data.

## Crypto dashboard UI kit, Figma file or live prototype?

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

|  | UI kit | Your own Figma file | Live prototype |
|---|---|---|---|
| What it is | Ready components and sample screens | Screens designed for your product | A screen that runs, with data that changes |
| Fits when | You need a starting point or a background slide | A team reviews flows, states and layouts | The screen moves on camera or in a live demo |
| Watch out for | Placeholder totals that do not add up; screens others have seen | Static prices that look frozen in a recording | Scope: it covers one screen well, not every flow |
| Typical output | Exported images | Exported images and click-through prototypes | Screen recordings and live use on a device |

A common split for a founder's deck: the desktop dashboard in Figma, a live phone screen for the demo moment. If the live screen will be recorded for a launch or a deck, our notes on [making a crypto app demo video](https://mylarpwallet.com/blog/crypto-app-demo-video) cover the capture itself. My Larp Wallet is not affiliated with Figma or Dribbble.

## What changes on a crypto trading dashboard UI?

A trading dashboard keeps the eight panels and adds an order panel, a watchlist and often a news or event column. Lazarev describes a three pane layout from its Blockbeat project for traders: a continuously updating news feed on the left, full articles in the center, market stats and personalized watchlists on the right. The same number rules apply, with one more: prices that update in place need tabular figures and a brief, quiet highlight on change, not a flashing cell. Speed is the point of a trading screen, so keep decoration to the minimum.

## The phone side: the wallet screen next to the dashboard

Many products have two faces: a wide dashboard for analysis and a phone screen for the everyday glance. In a deck or a demo, the phone screen is often the one people remember, because it is the one they would use. Its anatomy is simpler: one balance, a change row, a short token list and actions. Our [crypto wallet UI anatomy guide](https://mylarpwallet.com/guides/crypto-wallet-ui-anatomy) breaks that screen down element by element.

This is where My Larp Wallet fits, and only here. A larp wallet, also called a crypto wallet app simulator, is an app that shows a believable crypto wallet screen built from the balances you type in, for videos, skits, pitch decks and demos. It holds no funds and touches no blockchain. You compose the screen (name, avatar, tokens, quantities) and open it full screen from your phone's home screen. SOL, ETH, BTC, HYPE and USDC are drawn with live prices that refresh every 4 seconds; any other token is a custom row with a price you type.

To be plain about scope: it makes the mobile wallet screen only. It does not make a desktop dashboard, an allocation donut or a trading terminal. Design those in Figma or in your own product. If you want to see the phone side before deciding, [the demo](https://mylarpwallet.com/demo) needs no account and is marked DEMO. The page for [demos and decks](https://mylarpwallet.com/for/demos-and-decks) covers how teams use it on stage.

A designed dashboard or a simulated wallet screen is a prop, never proof of funds. Label it as a mockup in clips and decks. Presenting our screens as a real balance, statement or proof of funds is prohibited by our [terms of use](https://mylarpwallet.com/terms).

If you are here for the other meaning of the search, a dashboard used as a prop in videos, that is a different intent with its own page: [fake crypto dashboard for videos and demos](https://mylarpwallet.com/blog/fake-crypto-dashboard).

## A pre-export checklist

1. The token values add up to the balance header.
2. The change row names its period and agrees with the balance.
3. Every amount carries a ticker or a currency code.
4. Each asset uses one decimal rule everywhere.
5. Gains and losses carry a sign or an arrow, not only a color.
6. Secondary text passes 4.5:1 contrast on its actual background.
7. Dark mode uses softer green and red than light mode.
8. Each panel has an empty state and a loading state.
9. Sample data is clearly sample data, and demo screens are labeled as mockups.

We 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](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), read November 7, 2026
- [W3C, Understanding Success Criterion 1.4.1: Use of Color, WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html), read November 7, 2026
- [Nielsen Norman Group, Kate Kaplan, Designing Empty States in Complex Applications: 3 Guidelines](https://www.nngroup.com/articles/empty-state-interface-design/), 2021
- [Nielsen Norman Group, Samhita Tankala, Skeleton Screens 101](https://www.nngroup.com/articles/skeleton-screens/), 2023, reviewed 2026
- [Google Codelabs, Design a dark theme with Material and Figma](https://codelabs.developers.google.com/codelabs/design-material-darktheme/), read November 7, 2026
- [Lazarev.agency, How to create crypto dashboard design your users will love and trust](https://www.lazarev.agency/articles/crypto-dashboard-design), 2025

## Questions

### What should a crypto dashboard UI include?

Eight panels cover almost every portfolio dashboard: balance header, change row, price chart, allocation donut, token list, activity feed, alerts, and the empty and loading states of each. A trading dashboard adds an order panel and a watchlist, but keeps the same number and color rules.

### Is a crypto dashboard UI kit enough for a pitch deck?

A kit is enough when the dashboard is a background element on one slide. It is not enough when the audience will look closely at the numbers, because kit screens usually carry placeholder totals that do not add up. Edit the values so the token rows sum to the balance before you export.

### Should I design a crypto dashboard in Figma or build a prototype?

Use Figma when you need many states and layouts reviewed quickly by a team. Build or use a live prototype when the screen must move on camera or in a demo, with prices that change and a balance that updates. Many teams do both: Figma for the desktop dashboard, a live phone screen for the demo.

### What colors should a crypto trading dashboard UI use?

Pick one color for gains and one for losses, and never let color carry the meaning alone: add a plus or minus sign or an arrow, since WCAG 2.2 criterion 1.4.1 says color must not be the only visual means of conveying information. In dark mode, use lighter, less saturated tones of green and red, since saturated colors tend to vibrate against dark backgrounds.

### How is a crypto wallet dashboard UI different from a portfolio dashboard?

A wallet dashboard is usually a phone screen built around one balance, a short token list and send and receive actions. A portfolio dashboard is usually a wider screen that adds charts, allocation and history. The wallet screen is often the phone side of the same product.

### Does a dashboard mockup prove anything about a portfolio?

No. A designed dashboard, a kit screen or a simulated wallet screen proves nothing about real holdings. Label demo screens as mockups in decks and clips, and use real statements from the actual provider when a balance must be verified.