Four patterns from Viky's TradeDesk mockup, rebuilt with our rules. Try them in all three views. Nothing here is merged into the design system yet.
1. Quick read
Under the chart. Change the range (1D to 1Y) and it updates.
- Says what the change is measured from ("since yesterday's close", "over the past month") and shows the rupee amount as well as the percentage.
- Neutral range bar. The dotted tick is the start of the range, the dot is now, and only the move between them is tinted.
- A legend gives Now and the start price; 1D adds shares traded and trades.
- Ends with "A summary of past prices. Not investment advice." Announced to screen readers when it changes.
- Ranges are 1D, 1W, 1M, 3M, 6M and 1Y. CSE trades 5 hours a day, so 1h and 5h are dropped.
- Pro: one line under the candle chart that follows the interval.
2. Stock header
- Code with its class label, and a switcher listing the other share classes and recent stocks.
- Company name in normal case, not capitals. Large price with LKR, ▲▼ change, Live and last trade time.
- Star and Notify me have labels. A paused stock shows the halt inside the header (try PLR.N).
- Sentence-case stats. In Simple, tap a dotted label for a one-line explanation; More shows trades, average price, market cap, 52-week range and foreign holding.
- Pro: one dense line at the top of the chart panel with every stat; explanations on hover.
3. Markets list
- Search filters as you type, across all 48 securities.
- Movers splits into Rising and Falling and leaves out stocks with fewer than 25 trades today, so one small trade can't top the list.
- Rows: code and class, name, "You own" for holdings, price and a ▲▼ percentage pill (the rupee change is on the stock page). Paused stocks say so.
- Desktop Simple: the balance (Available to trade) sits in the top bar with Add funds beside it; hover it for what is reserved for open orders. Below 1024px it moves to the row above the stock. The phone keeps it at the foot of the Markets list.
- Desktop Simple: from 1280px the rail and the content form one centred group (rail plus up to 1200px of content), so wide screens don't leave gaps; below 1280px it opens as a sheet from the "Search and watchlist" button above the stock. Phone: the Markets tab. Pro: the watchlist panel keeps its dense table and gains search and the tabs.
4. Order book and insights
- Best bid, spread and best offer. Prices stay neutral (TradeDesk coloured them green and red).
- The spread is given in price steps ("One price step") instead of a mid price.
- The balance bar says "More shares waiting to buy" with both totals, instead of "59.7% buy".
- Facts only: largest order waiting, orders waiting, average price today. "Fair price" and "Near-term: Bid support" are gone because they read as predictions.
- "What is the order book?" explains it for beginners. Selecting a price puts it in the ticket (on phone and tablet it opens the ticket).
- Trades today: Latest trades beside Shares traded at each price, with neutral bars and Last and Average tags. Tabs when narrow; collapsed on phone.
- Pro: compact header, four facts in one strip with an Insights toggle, and Time and sales / Volume at price tabs.
5. Market strip and one ticket per view
- Market strip in Simple too: indices, turnover, shares traded, trades, foreign buying and selling, buy sentiment with a bar, and stocks up, down and unchanged. It stays under the nav on desktop and sits under the Markets title on the phone; hover a figure for what it means.
- No Simple/Pro switch in the ticket. Simple tickets keep the plain fields on top and every Pro option under More options in plain words (order type, how it fills, board, minimum fill, show part of order, sell short), with Review before placing on by default. The Pro workspace ticket has everything open.