It is necessary to develop the interface design for the cryptocurrency trading application UPDOWNX. The work is to be done only as UI design, without layout and without development. The main task is to draw the interface in Figma, so that the developer can easily layout it using TailwindCSS.
The design should be executed in a dark theme in the style of crypto / cyberpunk, with neon accents, glowing elements, and modern cards. The interface should look technological, minimalist, and premium. The main background of the interface is dark, and elements are highlighted with soft glows and neon colors.
Main colors of the interface:
background — #05070A,
cards — #0B0F14,
main neon color — #00FFA3,
red for decline — #FF3B3B,
additional accent — #2CF6C3.
Interface elements should have soft borders, glow effects, and neat shadows. It is important not to overload the design with complex effects. Since the interface will be laid out using TailwindCSS, the design should be as structured and logical as possible.
Avoid using complex shapes, non-standard containers, or heavy visual effects. All blocks should be built on cards, flex or grid structure. It is preferable to use simple radii, such as the rounded-xl style, simple shadows, and light glow. Gradients can be used, but without complex transitions.
The main font is Inter.
Headings should be large and readable, subheadings medium, and the main text standard interface text. The interface should look modern and neat.
For desktop, use a 1440px container, with a working area of approximately 1280px. For the mobile version, a width of 375px or 390px should be used. It is important to adhere to an 8-pixel grid to make it easy for the developer to replicate the design.
The following interface pages need to be drawn.
The first page is Trading (main trading page). It should have the main asset chart, cryptocurrency selection, timeframes, asset price, UP / DOWN buttons for opening trades, a trade timer, a Live Trades block with the latest user trades, and an open positions block.
The second page is Markets. This is a list of cryptocurrencies. The page should have a search function, a list of assets (BTC, ETH, SOL, etc.), price, change over 24 hours, and a button to go to trading.
The third page is Balance. This page displays the user's total balance. There should be Deposit and Withdraw buttons, a QR code for deposits, and a list of recent transactions.
The fourth page is History. Here, the user's transaction history is displayed. A filter by transaction type should be made: All, Trading, Deposits, Withdrawals. The date of the transaction, asset, rate, and result of the trade should also be displayed.
The fifth page is Tournaments. The page should have a tournament banner (e.g., Bull vs Bear), prize pool, participation button, participant leaderboard, and a list of available tournaments.
The sixth page is Profile (personal account). This displays the user's profile, avatar, trader statistics (Win Rate, Profit, number of trades), and transaction history.
A mobile version of all pages is also required. For the mobile interface, there should be bottom navigation with icons: Trading, Markets, Balance, Tournaments, History. The interface should be adapted for mobile use.
In addition to the pages, a set of components (UI Kit) should be created. It should include buttons (primary, secondary, danger), cards (asset card, trade card, stats card, tournament card), tables (trades, history, leaderboard), search fields, and filtering elements.
As a result, the designer should deliver a Figma file that includes the project structure: Desktop version of pages, Mobile version of pages, and Components / UI Kit.
The main goal is to create a modern cryptocurrency trading interface that looks technological and is easy to layout using TailwindCSS.
