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.

The client'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 6, starting with Robinhood, Arkham and Hyperliquid, next to the client'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