Finance · Midnight Terminal
Stock Trading App System Design Template
Ticker is a dark, data-dense trading app design with a Midnight Terminal look, built for founders and designers shipping a brokerage or markets product.
预览
探索各界面
预览 stock trading 移动应用设计，可在 Sleek 中完整编辑。
关于 Stock Trading App
Ticker is a stock trading app system design template built on a "Midnight Terminal" aesthetic: a near-black charcoal base, raised slate panels split by hairline rules, and cool slate figures set in tabular monospace so every price and ticker aligns column-perfect. Only two saturated colors appear, emerald for gains and coral-red for losses, with a muted electric-cyan reserved for the active tab and primary actions. It reads like a professional trading desk at midnight: calm, exact, and built around numbers as the hero.
The template ships six connected screens that form a complete trading flow. A scrollable Watchlist blotter pairs every ticker with a live sparkline and a tracked-out delta chip, a Stock detail screen with an interactive candlestick chart and key-stats grid, an Order ticket with Market/Limit/Stop selection and a slide-to-confirm bar, a Portfolio with a net-worth hero number, allocation donut and holdings P/L, a Discover hub of top movers and trending themes, and an Activity ledger of filled orders, dividends, and deposits with monospace timestamps.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, a far faster start than a blank canvas.
内容概览
包含的界面
Watchlist
A dense blotter of tickers with a market-index strip up top (S&P 500, NASDAQ, Dow), each row pairing a live sparkline with a price and color-coded delta chip. The at-a-glance home for tracking the market.
Stock Detail
A giant monospace price with a green delta badge over an interactive candlestick chart and 1D/1W/1M/3M/1Y/ALL range tabs, plus a key-statistics grid and a split Buy/Sell block. The core research-to-trade surface.
Order Ticket
A Market/Limit/Stop order-type selector, a quantity stepper, estimated cost and buying-power lines, and a slide-to-buy confirmation bar. Where an order gets reviewed and placed.
Portfolio
A total net-worth hero number with a day-change chip, an allocation donut split across Tech, Crypto, ETF and Cash, and a holdings list showing shares, average cost, market value and unrealized P/L. The full account snapshot.
Discover
A markets search bar above Top Movers cards with mini sparklines, trending theme tiles like Semiconductors and Web3 & Crypto, and an earnings-this-week list. The place to find new ideas.
Activity
A chronological ledger grouped by Today, Yesterday and Last Week, listing buys, sells, transfers and dividends with monospace amounts, timestamps and status labels. A trustworthy record of every transaction.
设计与功能
核心功能
- Midnight Terminal aesthetic: charcoal base, slate panels, hairline rules
- Tabular monospace for every number, ticker, and price
- Signature sparkline-plus-delta chip pairing on every price
- Split Buy/Sell blocks in emerald and coral with crisp edges
- Interactive candlestick chart with 1D to ALL range tabs
- Order ticket with Market/Limit/Stop and slide-to-confirm
- Portfolio allocation donut with holdings P/L
- Flat bottom navigation with a thin cyan active underline
受众
适合谁
使用场景
你可以做什么
- Launch an MVP for a retail brokerage or investing app
- Mock up trading screens for an investor pitch
- Hand a consistent, data-dense UI off to developers
- Explore a redesign of an existing markets product
如何使用此模板
- 1
打开模板
浏览各界面并预览完整设计，看看是否契合你的想法。
- 2
使用此模板
一键在 Sleek 中打开你自己的完全可编辑副本。
- 3
用 AI 编辑
只需描述你想要的效果，就能重设配色、改布局、增删界面。
- 4
导出并上线
导出设计或交给开发者，继续推进上线。
