# DeFi Dashboard Design: Cyan for Data and Actions Source: https://www.jvds.cn/en/share/ui-design/ardentis-market-position-action-u044 Language: en Published: 2026-10-13 Author: JVDS Design Studio Ardentis’s DeFi dashboard design places cyan on curves, selected items and primary buttons, keeping most backgrounds close to black. The overview establishes scope through a large trend and small amount cards, then supplies specific objects in the asset list below. Color is consistent while reading density varies. ## Key takeaways - A large trend sits beside four summary cards, giving overall change and specific totals their own positions. - Asset rows align names, quantities, valuations and actions for row-by-row lookup. - Market and personal switching sit near the chart, with the submission panel on the right. ## The overview starts with a broad view Yield Overview fills the large left card, with a faint cyan gradient below the curve. A circle and floating amount emphasize the current point. Axes, ticks and other information remain restrained, making a period of change visible before the selected position is read. The four cards on the right do not simply copy the large chart. Total collateral uses a progress line, total borrowed uses small bars, total supplied a small curve, and the claimable amount has Claim beside it. Similar frames group them as summaries, while different graphics express their content. JVDS considers this size allocation useful for workspaces combining overview and detail. The large chart shows change and the small cards locate themes, but account, network and time scope still need words beside amounts. The displayed numbers are example content, not evidence of actual accounts or returns. ![Ardentis black overview with a cyan yield trend left, four amount cards right, and asset rows with deposit and withdrawal actions below](https://www.jvds.cn/upload/2026/1008/d187-tp/u044-i1.webp) Desktop overview, two levels | Trends and totals come first, followed by locating assets row by row. ## Detail actions follow their row’s object The Earn list places asset icons and names on the left, quantities and dollar values in one column, and curators and actions further right. Icons enable quick recognition; words make each complete row refer to a specific object. Deposit and Withdraw remain within the list, showing which row they belong to. Token quantities and dollar valuations need separate units, and curators need clear identities. Such tables suit back-office interfaces with many repeated objects, where [accurate row correspondence](https://www.jvds.cn/en/share/ui-design/saas-data-table-design) takes priority over attractive local icons. An action confirmation should repeat the asset and direction, reducing the need to return to the list and reassess. ## Scope switches and action panels are different controls The detail page puts Market and My position above the chart, with a period dropdown at the upper right. The asset-pair name appears in the header, followed by total and ratio cards. Reading downward identifies object, data scope and time, offering more direction than a large percentage alone. The right action panel has its own border around inputs, Max, current state and a full-width primary button. This clearly separates browsing data from executing actions, an arrangement worth adapting in dark financial interfaces. However, Repay/Withdraw is selected in the image while the inputs and button still say Supply and Borrow. Align tabs, input names and [submission verbs](https://www.jvds.cn/en/share/ui-design/cognitive-accessibility-clear-content-ux) first, then add a summary of projected changes. Color can indicate selection but cannot explain conflicting action words. This checks the example interface’s semantics rather than discussing asset choices. ![Ardentis asset detail with Market and My position, cyan trend and right-hand inputs, summary and Supply & Borrow button](https://www.jvds.cn/upload/2026/1008/d187-tp/u044-i2.webp) Detail page, upper area and right column | Scope controls stay near the chart; execution has a separate panel. ## Mobile cards form one reading line The mobile version stacks summary cards vertically; another phone starts with the yield trend and then total collateral. Titles and cyan graphics remain, with cards adapted rather than reduced to desktop-style small squares. Connect wallet, network selection, settings and menu remain at the top. Important action pages could also retain a selected-asset and direction summary so scrolling does not leave the basis for a decision on the previous screen. These images establish layout only: amounts beside a connection entry do not establish a connected state. ![Two black Ardentis mobile overviews with wallet and network controls, vertical amount cards and a cyan yield trend](https://www.jvds.cn/upload/2026/1008/d187-tp/u044-i3.webp) Mobile overview | Vertical cards retain titles, with wallet and network entries still at the top. ## Frequently asked questions ### How should a dark data workspace use an accent color? Establish consistent rules for curves, current selections and primary actions, then explain their specific meanings through titles and units. Accent color cannot replace scope or action names. ## Design review checklist - Check quantity and valuation units in asset rows. - Check titles and data definitions after switching Market and My position. - Compare each selected tab, input name and submission verb. ## Reorganize data and actions in an asset workspace If your product combines market data, personal status and multiple actions, begin with objects, scope and confirmation summaries. JVDS provides UI/UX design and website design and development; bring your flows to discuss. JVDS provides UI/UX design and website design and development. We can work through interfaces, content and development needs together. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)