Trade Market Design Direction

Mood: a quiet terminal

These notes are written from familiarity with the three products. Capture current screenshots of each for the mood board before visual design starts.

Surfaces and colour

Corner radius: 4 to 6px on desktop panels, 12px on mobile sheets and buttons.

Every text colour meets WCAG AA contrast on its panel. White text on the primary fill also passes, so the button blue stays the same in both themes.

A target for how much of a typical screen each group covers, not a measurement.

Colour rules

• Blue means "you can act here" or "this is selected". It never carries market meaning.
• Green and red mean direction only: change against the previous close, profit and loss, and the trade side. Bid and Ask columns stay neutral. Order-book depth bars use faint tints.
• Trade buttons take the side's colour. The Buy/Sell toggle and the submit button ("Buy JKH.N") are green or red. This is the one place a whole button uses a status colour.
• Amber appears only for market state and warnings.
• Colour is never the only signal. Pair it with ▲ ▼ and a + or − sign.
• Charts: in Simple, one line in the day's direction colour, with a dotted line at the previous close. In Pro, green and red candles, everything else grey.

Typography: crisp at small sizes

Type rules

• Weights 400, 500 and 600 only. Thin weights blur on dark backgrounds; heavy weights glow.
• Data text at 12px or larger. 11px only for chart axes.
• Sentence-case labels instead of tiny uppercase. Small capitals with wide spacing read worse than lowercase at the same size.
• Prices in the interface font's tabular figures, not a monospace font. That is more compact and crisper. Monospace only for order IDs and full security codes.
• Slashed zero only in dense Pro tables, where 0 and O sit close together.
• Test where crisp usually fails: Windows at 100% display scaling, where many ATrad users work, and a mid-range Android phone.
• Keep both while building. Inter and Geist sit behind one font token, so every screen can switch between them with one setting. Compare them on real screens and decide later.

A starting scale in pixels, to be tuned once the typeface is chosen.

Sinhala and Tamil

Shown to test script and label length only. Final wording should come from native financial copywriters.

Two densities, one system

• Motion: a price change gets a brief tint on the number, never a flashing cell background. Sheets slide in. No celebrations.
• Icons: one monochrome line-icon set, drawn at 16 and 20px.

Stock codes and LKR

• Drop the digits only when they are 0000. Warrants and some other classes use them for a series number. Showing only ABC.W could merge two different warrants. Check this rule against the CSE securities list.
• Pair the code with a plain class label such as Voting or Non-voting.
• Simple mode leads with the company name; Pro leads with the code.
• Searching "JKH" returns every class grouped under John Keells Holdings, each with its label.
• Amounts: LKR 1,234.50, code before the amount with a space. Large figures as LKR 28.62M and LKR 1.4B.
• Dense tables: put the currency in the column header, "Price (LKR)", not in every cell.
• Precision: prices always have 2 decimals, quantities are whole numbers with commas, percentages have 2 decimals and a sign. Negatives use a true minus sign (−), never a hyphen.
• Time: Colombo time (UTC+5:30) on the market-state indicator.

Keeping a rebrand cheap

The highlighted path is the only one a rebrand touches.

Feature parity with ATrad

States the exchange connection requires

Order lifecycle

Why an order wasn't accepted

Check names follow the enclave brief, section 3. Figures in the messages are examples.

Money and holdings

Halts and sessions

• Three kinds of halt, three banners: the whole market, one stock, or the user's own account. New orders stop; existing orders stay in place.
• Session phases: order types that aren't allowed in the current phase are shown disabled, with the reason, instead of failing after submit.
• Outside trading hours: say plainly whether an order can be entered now and when it reaches the exchange.
• Too many orders: a short, calm message that asks the user to wait.

Margin, short selling and futures

Margin states to design

• Buying power that shows its source: cleared cash and available margin, listed separately.
• Margin used and margin level: the loan, the value of pledged shares, and the ratio against the maintenance threshold.
• Marginable stocks: which holdings count as collateral and at what value, since providers weight portfolios by risk.
• Early warning in amber as the margin level nears the maintenance threshold.
• Margin call: how much to deposit or sell, and by when.
• Forced sale notice: what was sold, why, and the result.
• Interest and charges in statements.

Confirm current margin rules and thresholds with the partner broker before design. The SEC has changed them during market stress before (Daily FT).

Plain language for statuses and terms

Surfaces and modes

Switching modes

• Where: Account › Display on every surface, plus a Simple/Pro switch at the top right of the order ticket, the moomoo pattern. It sits in the same place in both modes.
• First run asks "How do you invest?" and sets the default for that device.
• Contextual links such as "Full order book", "More data" and "Open in Pro" take a Simple user to the matching Pro view.
• Eligibility sits outside the mode. Margin, short selling and other restricted features need account approval in either mode.

Simple navigation

Simple on desktop

• Same structure, wider layout. The four tabs become top navigation, with search, inbox and account on the right. Content sits in a column up to about 1200px wide.
• Home shows the portfolio and holdings on the left and watchlists on the right.
• Stock page keeps the same top-to-bottom order, with the order ticket docked on the right instead of a sheet.
• Same density as the phone: comfortable rows and plain labels. Users who want panels switch to Pro.

The stock page and the order ticket

Stock page, top to bottom

1. HeaderCompany name, code with class badge, sector, watchlist star, Notify me. A halt banner sits here when the stock or market is halted.
2. PriceLKR price, today's move with ▲ ▼ and sign, last trade time.
3. ChartOne line in the day's direction colour, previous close dotted, ranges from 1D to 5Y.
4. Your positionShares you can sell now, shares arriving after the CDS update, average price, value, return after fees, break-even price.
5. Your open ordersFor this stock, with status.
6. TodayBest bid and offer, spread, range, volume, turnover, average price today, and a liquidity cue for thinly traded stocks.
7. Order book previewTop 5 levels, then "Full order book".
8. Dividends and corporate actionsUpcoming dates and entitlements.
9. AnnouncementsCSE filings for this company.
10. AboutCompany details, other share classes such as JKH.X, sector peers, and "More data" for the Pro views.

Pinned at the bottom: one Trade button that opens the order ticket.

Order ticket, one component in both modes

• Checks run while typing: tick size, price band, cleared funds, sellable shares and order types allowed in the current session, each with the plain message from Part 3.
• Confirm: Simple shows a review screen and slide to place. Pro confirms inline, with a "Review before placing" setting like ATrad's Confirm box.
• After placing: the order timeline from Part 3, and a notification when the exchange responds.

Pro workspace

Panel library

Linking, layouts and keys

• Link groups: panels join group A, B or C, marked with a letter rather than a colour. Picking a stock in a linked watchlist updates that group's chart, quote, order book and ticket.
• Preset layouts: ATrad classic (pulse strip, full-width 19-column grid, bottom dock) for migration; Trader (watchlist, chart, order book and ticket); Investor (holdings, chart, announcements and dividends); Market overview (heat map, movers, market tape, indices).
• Saved workspaces: up to 10, switched with Alt and a number, following Kite's limit.
• Pop-out: any panel opens in its own window for a second monitor.
• Keys: Enter buys the selected stock and F2 sells it, as in ATrad. / searches, Ctrl or Cmd with K opens the command menu, Esc closes, arrow keys move through grids.
• Settings: compact or comfortable density, price-change tint on or off, columns per grid.

Cross-cutting systems

• Market and data state: the session indicator on every surface, halt banners for market, stock and account, and a freshness marker when prices stop updating.
• Offline and weak networks: last-known values with their time, and order entry disabled with "You're offline. Orders need a live connection." Orders are never queued on the device.
• Languages: Sinhala, Tamil and English everywhere, switchable before sign-in, with one shared glossary.
• Theme and type: dark and light from the same tokens. The typeface is a token too, so Inter and Geist stay switchable while screens are built.
• Accessibility: WCAG 2.2 AA, larger text sizes respected in Simple, full keyboard use in Pro.
• Migration: imported ATrad watchlists and alerts, the ATrad classic layout, familiar keys, and ATrad's names in tooltips for the first months.

Notifications

SMS covers events a user needs to know about even with mobile data off.

Key flows

Open questions for amendment

1. Funds as a tab?Or fold it into Home and make Search the fourth tab.
2. A fuller Pro trade page on phones?moomoo offers one; this draft stops at the expanded ticket and Pro data pages.
3. Tablet landscape.Which panels and layouts it supports.
4. Advisor console.Scope, timing, and whether advisors place orders that clients confirm.
5. More than one CDS account.Where the account switcher lives.
6. Bills and bonds at launch?Or equities only.
7. Market orders in Simple?Or limit only, with market under Advanced.
8. Corporate-action steps in the app.Rights subscriptions and similar actions go beyond ATrad parity.
9. Sync across devices.Whether watchlists, alerts and Pro layouts follow the user.
10. Where alerts are managed.Account, Inbox, or both.
11. Margin at launch.Which providers and accounts, and how much of the margin journey (application, limits, calls) lives in the app.
12. Room for futures.Nothing designed now; confirm the asset model can add futures when the CSE launches them.

Why these principles

Perception: how a screen is seen

Gestalt findings about how people group what they see. They decide where dividers, surfaces and shared tracks go.

Proximity, common region and similarity

Applied

Things that sit close together, share a surface or look alike are read as one group.

Panels are flat and separated by 1px dividers instead of boxed cards, so space and surface do the grouping. Stats put each label right above its figure; key-value lists keep labels left and figures right. The fee breakdown keeps value, fees and total together and sets the total apart with a rule. Every status pill and every share-class badge has the same shape, so people learn them once.

In the design systemStats and key-value listsFee breakdownChips and badges

Research: Wertheimer (1923); Palmer (1992) on common region.

Uniform connectedness

Applied

Elements joined by a line or a shared container read as more related than ones that are only near each other.

Segmented controls and contained tabs hold their options in one recessed track, so the options read as a single choice, and the selection bubble moves inside that track. The order timeline joins its steps with one line, so they read as the history of one order.

In the design systemSegmented controlTabsOrder timeline

Research: Palmer and Rock (1994).

Closure

Applied

People complete a shape or a pattern in their head when part of it is missing.

Today's line chart runs its axis to the 14:30 close, so the empty space on the right reads as the rest of the day, and the dotted previous close reads as one line across it. The order timeline shows the steps still to come as open circles on the same line. Skeletons keep the outline of the screen while data loads, so the page reads as whole before the numbers arrive.

In the design systemLine chartOrder timelineSkeletons and empty states

Research: Koffka (1935), Gestalt principles of organisation.

Figure and ground

Applied

People separate what they should look at (the figure) from what sits behind it (the ground).

Surfaces follow option A: the chrome (top bar, panel headers, status bar) is a step darker than the content panels, so content comes forward. Only overlays (menus, sheets, dialogs) are raised and carry a shadow, and sheets and dialogs dim the screen behind them. Chart grids and axes stay grey so the price line is the figure.

In the design systemColourDialogBottom sheet

Research: Rubin (1915).

Attention and memory: what people notice and keep in mind

What stands out, what people learn to ignore, and how much they can hold at once.

Von Restorff (isolation) effect

Applied

Among similar items, the one that differs is the one people notice and remember.

Colour is kept for the few things that need attention. About 90% of a screen is neutral and blue marks actions and selection only. Order status pills stay grey except Checking with the exchange (amber) and Not accepted (red), each with an icon. A stock page has one Trade button, and the review has one filled action.

In the design systemChips and badgesColourButtons and links

Research: von Restorff (1933).

Banner blindness

Applied

People learn to skip anything that looks like an ad or a banner, even when it matters.

Banners appear only for states that change what you can do: pre-open, halts, offline and a paused account. There are no promotional banners to teach people to skip them. The message never lives in the banner alone: the order ticket repeats a halt where the order is made and stops sending, halted rows say so in words in every list, and order types the session doesn't allow show disabled with the reason.

In the design systemBannersOrder ticketCross-cutting states

Research: Benway and Lane (1998); Nielsen Norman Group eye-tracking studies (2007, 2018).

Miller's law and chunking

Applied

People hold only a few items in mind at once, so break information into small, named groups.

Cash is split into five named amounts (cleared, reserved for open orders, available to trade, deposits clearing, withdrawable) instead of one balance with footnotes. Shares split into can sell now, reserved for open sells and arriving after the CDS update. Figures group digits with commas and shorten large values (LKR 28.62M). The stock page reads in named sections from top to bottom.

In the design systemPortfolio and cashHoldings and positionFormats

Research: Miller (1956); Cowan (2001), about four chunks.

Zeigarnik effect and goal gradient

Partly applied

Unfinished tasks stay on people's minds, and effort rises as the finish comes into view.

An open order never drops out of view: a partly filled order shows a progress bar and how many shares are left, and the timeline marks the current step. Not built yet: the first-run checklist on Home (sign in, verify the device, import from ATrad, add funds, first watchlist) with visible progress, from the key flows in Part 4.

In the design systemOrdersOrder timeline

Research: Zeigarnik (1927); Hull (1932); Kivetz, Urminsky and Zheng (2006).

Peak-end rule

Applied

People judge an experience mostly by its most intense moment and by how it ends.

The peak of a trade is the moment money is committed, so the review shows everything first: price, validity, fees, total, break-even and when it settles. The end is calm and clear: a toast that says what happened in plain words, the order timeline, and a notification when the exchange replies. A refusal ends with the reason and a button to fix it, never a dead end. No celebrations.

In the design systemOrder review and slide to confirmToastRejection messagesNotifications

Research: Kahneman, Fredrickson, Schreiber and Redelmeier (1993).

Decisions: how people choose

How the number and familiarity of options change the time and quality of a choice.

Hick's law

Applied

The more options people see at once, the longer they take to choose.

Simple has four tabs (Home, Markets, Orders, Funds), with Account behind the avatar. The Simple ticket shows what every order needs (side, quantity, price, valid until) and keeps the rest under More options in plain words. Segmented controls hold two to five options; longer lists become a dropdown. Pro opens everything for people who already know it.

In the design systemOrder ticketSegmented controlPhone app

Research: Hick (1952); Hyman (1953).

Choice overload

Partly applied

Too many choices at once lead to worse decisions, or none at all.

Lists start from presets instead of a blank setup: the market grid has Essential, Trader and ATrad's full 19 columns, and Pro opens on the Trader workspace. Valid until offers three choices, each with one line on what it does. Movers leave out stocks with fewer than 25 trades today, so one small trade can't top the list. Search groups every share class under its company. Not built yet: the other workspace presets (ATrad classic, Investor, Market overview).

In the design systemInput fields and dropdownsData tableSearchPro workspace

Research: Iyengar and Lepper (2000). The effect varies between studies (Scheibehenne et al., 2010), so we use it as a caution, not a rule.

Jakob's law

Partly applied

People spend most of their time in other products and expect yours to work the same way.

For ATrad users: Enter buys and F2 sells in Pro, the market grid has ATrad's 19-column preset, and every plain status maps one to one to an ATrad status. For everyone: a bottom tab bar on phones, / to search and Esc to close. Not built yet: the ATrad classic layout, ATrad names in tooltips, the command menu, and importing ATrad watchlists and alerts.

In the design systemTooltip, menu and keysData tablePro workspace

Research: Nielsen (2000).

Tesler's law

Applied

Every task has complexity that can't be removed. The question is whether the system or the person carries it.

Trade Market carries it. Enter a rupee amount and the ticket works out whole shares with the 1.12% fee included and shows what is left over. Prices snap to the CSE price step. The review works out the break-even price. Cash and shares are shown the way settlement works, so nobody has to work out T+2 or the CDS update in their head.

In the design systemAmount and quantityPrice stepperFee breakdownHoldings and position

Research: Larry Tesler, conservation of complexity (Xerox PARC, mid 1980s).

Speed and effort: how fast a task feels

Target size, response time and what the system accepts, which together decide how quick a task is.

Fitts's law

Applied

A target is quicker to hit the bigger it is and the closer it sits.

Simple controls are 48px tall and list rows 56px; Pro rows and controls grow to 36px on touch screens. Buy and Sell share the full width of the ticket. On phones the one Trade button is pinned at the bottom, within reach of the thumb. Clicking a price in the order book puts it in the ticket. Placing an order is the deliberate exception: slide to confirm makes the step that can't be undone take a decision.

In the design systemSegmented controlOrder bookOrder review and slide to confirmDensity

Research: Fitts (1954).

Doherty threshold

Partly applied

People stay engaged when the system answers within about 400 milliseconds.

Everything the interface can do on its own answers at once: checks run while typing, a price change tints the number, buttons show a loading state on the first click and ignore a second, and skeletons hold the layout while data loads. What depends on the exchange and the data feed can't be promised by design, so the interface shows honest states (Waiting for the exchange, Checking with the exchange) and a freshness marker on prices. Still to agree: response-time targets with the developers.

In the design systemSkeletons and empty statesMotionButtons and linksMarket state and freshness

Research: Doherty and Thadani (1982), IBM.

Parkinson's law

Partly applied

A task expands to fill the time it is given, so make the quick path the default.

The ticket starts filled in: the limit price at the best price for your side, valid until today, quantity in whole shares, so a usual order is a few taps and one review. The market-state chip counts down to the next session change, which is a real deadline rather than an open one. Not built yet: prefilled bank reference codes for adding funds, and an onboarding flow that keeps your place.

In the design systemPrice stepperOrder ticketMarket state and freshness

Research: Parkinson (1955), The Economist.

Postel's law

Partly applied

Be liberal in what you accept from people and strict in what you pass on.

Search takes a name or a code in any case, and a full CSE code such as JKH.N0000 still finds John Keells. A price off the price step isn't refused: the stepper offers the two nearest valid prices. Quantity can be entered as shares or as a rupee amount. What goes to the exchange is always a whole number of shares at a valid price. Not built yet: search by Sinhala and Tamil names.

In the design systemSearchPrice stepperAmount and quantity

Research: Postel (1980), RFC 761.

Trust: why people rely on it

A product that handles people's savings has to look careful and act in their interest.

Aesthetic-usability effect

Applied

People see attractive designs as easier to use and forgive small problems in them.

The Instrument look (smooth corners, recessed fields, soft fills, a calm dark palette) is there to earn trust in a product that handles people's savings. The same effect can hide problems in a test, because people are kinder to a good-looking prototype. That is why the usability test counts time and errors against ATrad, not only opinions.

In the design systemButtons and linksColourSpacing and radius

Research: Kurosu and Kashimura (1995); Tractinsky (1997).

Ethical design

Applied

Design for people's interests, not for engagement that costs them money.

No confetti or celebration after a trade. No attention funnels: Movers leave out thinly traded stocks, and the Quick read summary in the pattern lab says Not advice. Fees, break-even and settlement show before every order, limit orders are the default because CSE order books are thin, and there are no streaks, rewards or leaderboards. See what to take from Robinhood, and what to leave.

In the design systemOrder review and slide to confirmToastFee breakdown

Research: Barber, Huang, Odean and Schwarz (2022), attention-induced trading.

Viky's mockup, measured against this direction

ATrad today

How the CSE differs from a crypto exchange

Why the fee row matters

Who uses it

What to take from Robinhood, and what to leave

What the Sri Lankan market needs

Ten to study first

1. HyperliquidThe Pro layout reference. Study the order panel, the positions, orders and fills tabs under the chart, and thin dividers in place of cards.
2. Robinhood and Robinhood Legend✓One brand across both densities. The app is the Simple reference. Legend (US 2024, UK 2025) carries the same brand into a dark desktop workspace with preset and custom layouts.
3. Zerodha Kite and Terminal Mode✓Complex exchange rules shown calmly, in light and dark. Terminal Mode, in beta since February 2026, adds drag-and-resize panels and up to 10 saved workspaces. The closest example of ATrad parity without ATrad's clutter.
4. moomoo✓A Lite/Pro switch at the top right of the trade page itself. Lite is for new users; Pro adds the order book and more order types. The most direct precedent for a Simple/Pro switch on mobile.
5. Coinbase Simple and Advanced✓One account and one balance in two modes, with no money moved between them. Study where the switch sits and what each mode leaves out.
6. Groww✓India's simple-first broker: phone-first onboarding, stock pages a first-time investor can read, Indian-language support. Its separate 915 terminal, announced in 2025, is the pro side.
7. Stockbit✓Indonesia, with tick sizes, lots, price bands and thinly traded small caps much like the CSE. Study watchlist density, the order book on a phone, and fees shown at order time.
8. Asia Securities Athena✓The direct local competitor, launched August 2025. The first CSE trading platform fully integrated with TradingView, on mobile and web, with depth, watchlists, alerts and portfolio. Get a demo account and compare feature by feature.
9. ArkhamThe monochrome density reference: 12 to 13px tables, a grey hierarchy, minimal colour. Its exchange shows the same style applied to an order ticket.
10. TradingView✓The chart engine decision. Lightweight Charts v5 is open source with a 35 kB base bundle, which suits mid-range Android. The broker-grade Advanced Charts library needs an access request. Athena already uses TradingView, and the CSE added TradingView charts to MyCSE in 2023.

Close behind: IBKR Desktop, a modern replacement for an old terminal, which is the same job as replacing ATrad. Kraken, which splits simple and pro into two separate apps, the opposite of this direction. The CSE Mobile App, reportedly relaunched in December 2025.

By category

Retail brokers with clean design

Emerging and frontier markets

Sri Lanka

Pro and desktop terminals

Crypto exchanges and DEXs

Charting, analytics and screen libraries

Patterns the best ones share

• One account, two densities, no money moved between modes. moomoo, Coinbase, Aster and Robinhood with Legend all work this way, and the switch sits in the same place in both modes. Kraken and Webull ship separate apps, the weaker pattern here.
• One order ticket, expanded in Pro. By default it shows side, quantity, price and estimated total; board, validity, stop and other advanced fields sit behind an Advanced row.
• Costs before confirmation, including the break-even price. Coinbase Simple hides its spread; Trade Market shouldn't.
• One hero number, everything else quiet.
• Flat panes in Pro: one background, 1px dividers, and a tabbed bottom panel for positions, open orders, fills and history.
• Market state and freshness always visible: the session, the last trade time, a stale-data marker, and "last traded 3 days ago" on illiquid stocks.
• Order status as a timeline with a timestamp at each step.
• Corporate actions and announcements next to the holding, as iBroker LBS and the CSE app put announcements on the dashboard.
• Restraint survives redesigns; novelty doesn't. Trading 212 and Trade Republic both met backlash for redesigns that hid information users relied on. Simple mode must never remove what a holder checks every day.
• Built for the device: small chart bundles, skeleton loading states, cached last-known values with timestamps, and long Sinhala and Tamil labels tested in dense tables.

Open items

1. Keep both typefaces in the build.Inter and Geist sit behind one font token while screens are built. Switch back and forth on real screens, including Windows at 100% scaling and a mid-range Android phone, in English, Sinhala and Tamil, then decide.
2. Build the mood board.Capture current screens from the ten platforms in Part 7, starting with Robinhood, Arkham and Hyperliquid, next to Viky's mockup. Get a demo account for Athena.
3. Confirm the code rule.Check against the CSE securities list which classes carry series digits other than 0000.
4. Confirm market rules with the CSE and broker.Current hours, the price-step table, the fee schedule, and the capital gains treatment of listed shares after the 2026 tax amendment.
5. Refine the architecture.Draft 1 is in Part 4 and stays open for amendments. Its numbered open questions are the place to start.
6. Test with people.Short sessions with holders, swing traders, ATrad power users and advisors once screens exist.

Sources