The product
A web app to trade, store and track crypto in Toman and USDT. Candlestick charts, an order book, wallets and a markets list sit next to Persian numerals and a Jalali calendar.
03TopArz
Case studyCrypto exchangeWeb app
The world of crypto, in Persian.
TopArz lets people in Iran buy, sell and hold crypto currency. I designed the web app, the brand and the UI kit right-to-left, from the logo down to the last component.
01 — Overview
Crypto, built for Iranians.
TopArz is designed for Iranians to access the world of crypto currency. Trading is dense by nature. The job was to make it feel clear in a right-to-left, Persian-first interface.
The system
One brand in English and Persian, a two-typeface type scale, five colour scales and a component library, so every screen is built the same way.
- 13destinations one tap from the dashboard
- 3core screens: dashboard, trade, landing
- 2logos: English and Persian
- 2typefaces: Inter and IRANYekan
- 5colour scales
- 11shades in each scale
02 — Architecture
One dashboard, thirteen places to go.
Architecture represents a product’s features and functions, and the relationships between them. Everything starts at the dashboard and branches into three groups: the wallet, transactions and account controls.
03 — Brand
A logo that reads both ways.
The mark pairs a blue emblem with two wordmarks, one in English and one in Persian. Both are built on the same proportional grid, so they stay balanced at any size.
Typography
Inter for Latin text, IRANYekan for Persian, each in Bold, Medium and Regular. The scale runs from 12 up to 48 pixels in both scripts.
Colour
Blue leads. Modern gray carries the interface, green and red mark gains and losses, orange warns. Each scale has eleven shades, from 50 to 950.
Click a swatch to copy its hex code.
Mood imagery: markets, glass and neon light.
04 — Components
Built from the same parts.
The wallet chart, the Jalali calendar, the buy and sell form with its percentage slider, markets list, progress bars, file upload and donut chart. Each is designed once, right-to-left, and reused everywhere.
05 — Interface
Three screens that matter.
Dashboard
The home page gives an overview of the key information: wallet, personal information, markets and assets.
Trade
The professional trading screen has a candlestick chart, a markets list, the buy and sell form and the order history. A simpler instant buy and sell form lives one tab away.
Landing page
The landing page invites people to invest in their future. It runs from the hero through the banners and the features to the markets table, the sign-up call to action and the footer.
06 — In context
On the phone, on the desk.
