A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
1radius steps
13pxspacing base
Webull, in one page
Webull's iOS app is a dark-native trading terminal in your pocket. Where Fidelity or Schwab present a calm brokerage lobby, Webull presents a Bloomberg-terminal aesthetic for retail traders: a near-black canvas, dense candlestick charts, a live order-book ladder, an options chain, and a split green/red Buy/Sell action pair. The app is built for people who stare at charts — the entire visual system optimizes for chart legibility and information density, not for warmth or simplicity. There is no meaningful "light mode"; like every serious trading product, dark is the only mode that matters.
The signature surface is the quote/chart screen paired with the watchlist. The Quotes tab is the home of the product: a watchlist of symbols, each a row with ticker, name, a tiny sparkline, last price, and a saturated percent-change chip. Tap any symbol and you land on the full quote screen — symbol header with last price in a huge tabular numeral, a full-width interactive candlestick chart with a timeframe strip (1m/5m/1D/5D/1M/1Y) and indicators, the order-book ladder (bid/ask with depth bars), key stats, options chain, and a docked Buy / Sell button pair. This chart-screen + watchlist pairing, and the candlestick chart itself, is the most recognizable and most-used part of Webull.
The color system is loud where it counts. Webull's brand is a blue→cyan gradient (#1B9EFB → #20D5C4) — used for the logo, the primary Trade action, selected timeframe chips, the paper-trading badge, links, and focus. Unlike a calm brokerage where green/red is sparing, Webull's performance color is pervasive and saturated: up is #00C076, down is #FA5252, and it floods the screen — every candle, sparkline, % chip, order-ladder row, and the Buy (green) / Sell (red) button pair. The near-black canvas (#0B0E11) exists precisely to make these saturated greens, reds, and the blue→cyan gradient pop with maximum contrast. Surfaces lift only barely; chart grid lines are nearly invisible so the data dominates.
Typography is a clean grotesque with strong tabular DIN-style numerics. Webull's numbers — prices, the ladder, option strikes, % changes — must align to the decimal point in dense tables, so every figure uses tabular lining figures. The brand UI face on iOS falls back to SF Pro; the closest free substitute is Inter with tnum enabled. Headings are 700–800; body is 400; numbers lean 700–800 and tabular always. The overall feel is precise, technical, fast — a tool, not a brochure.
Key Characteristics:
- Dark-native only — near-black canvas
#0B0E11; no meaningful light mode (it's a trading terminal) - Webull blue→cyan brand gradient
#1B9EFB → #20D5C4— logo, Trade action, selected timeframes, paper badge - Pervasive saturated performance color — up
#00C076, down#FA5252— candles, sparklines, chips, ladder, buttons - Candlestick chart as the centerpiece — full-width, timeframe strip, indicators, dashed prev-close line
- Quote screen + watchlist pairing is the product spine — Quotes → Symbol → Chart → Trade
- Order-book ladder — bid/ask rows with depth bars and a mid/spread divider
- Split Buy (green) / Sell (red) action pair — docked on the quote screen
- Options chain — Call | Strike | Put three-column table, green calls / red puts
- Tabular / monospaced numerals everywhere — ladder, chain, prices align to the decimal
- Bottom tab bar: Markets / Quotes / Trade / Portfolio / Menu — five-tab terminal nav
- Paper-trading badge (cyan) — Webull's signature "practice with fake money" mode
Do's and don'ts
Do
- Treat dark as the only canonical mode — near-black
#0B0E11to maximize candle/contrast - Use the blue→cyan gradient (
#1B9EFB → #20D5C4) for brand, the Trade action, selected timeframes, and the paper badge - Make performance color loud and pervasive — up
#00C076, down#FA5252on candles, sparklines, chips, ladder, buttons - Make the candlestick chart the visual centerpiece — full-width, timeframe strip, dashed prev-close line
- Use a split Buy (green) / Sell (red) docked pair on the quote screen
- Set every numeric value tabular so the ladder and option chain align to the decimal
- Color the big last price up/down (not neutral) for an instant directional read
- Keep chart grid lines nearly invisible (
#1A1F26) so candles dominate - Use a cyan
PAPERbadge to mark paper-trading mode - Communicate elevation with a 1pt
#232931border + surface lift, not drop shadow
Don't
- Don't design a primary light mode — a trading terminal is dark-native
- Don't make performance color timid — Webull's identity is saturated green/red everywhere
- Don't use the blue→cyan gradient for gain/loss — it's brand/action only; green/red is market color
- Don't use proportional figures for the ladder, chain, or prices — tabular is mandatory
- Don't render the last price in neutral text — it must carry the up/down color
- Don't put bright grid lines on the chart — they must recede behind candles
- Don't add marketing illustrations or photographic heroes — it's a terminal, data-first
- Don't roll/odometer the price digits on tick — only a brief color flash
- Don't separate Buy and Sell into distant CTAs — they are a docked, equal, color-coded pair
- Don't hardcode up=green globally — respect the region setting that may invert up/down color in Asia markets
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Webull design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- blue→cyan gradient: #1b9efb
- Webull Blue: #1b9efb
- Webull Cyan: #20d5c4
- Brand Gradient: #1b9efb
- Webull Blue Pressed: #1684d6
- Dark Canvas: #0b0e11
- Dark Surface 1: #14181d
- Dark Surface 2: #1c2127
- Divider: #232931
- Grid Line: #1a1f26
Type:
- families: Brand UI, Inter, Oswald, Barlow Semi Condensed
- scale: 10, 11, 12, 13, 14, 15, 17, 20, 24
- weights: 400, 600, 700, 800
Shape:
- radius: 6
Spacing: 13, 14
Rules:
- Treat dark as the only canonical mode — near-black `#0B0E11` to maximize candle/contrast
- Use the blue→cyan gradient (`#1B9EFB → #20D5C4`) for brand, the Trade action, selected timeframes, and the paper badge
- Make performance color loud and pervasive — up `#00C076`, down `#FA5252` on candles, sparklines, chips, ladder, buttons
- Make the candlestick chart the visual centerpiece — full-width, timeframe strip, dashed prev-close line
- Use a split Buy (green) / Sell (red) docked pair on the quote screen
- Set every numeric value tabular so the ladder and option chain align to the decimal
Avoid:
- Don't design a primary light mode — a trading terminal is dark-native
- Don't make performance color timid — Webull's identity is saturated green/red everywhere
- Don't use the blue→cyan gradient for gain/loss — it's brand/action only; green/red is market color
- Don't use proportional figures for the ladder, chain, or prices — tabular is mandatory
- Don't render the last price in neutral text — it must carry the up/down color
- Don't put bright grid lines on the chart — they must recede behind candles
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive / Brand)
- Webull Blue (
#1B9EFB): Primary brand blue — start of the gradient, primary Trade button, links, selected timeframe, focus rings. On-color text is near-black#04121C. - Webull Cyan (
#20D5C4): End of the gradient — paper-trading badge, accent highlights, gradient terminus. - Brand Gradient (
#1B9EFB → #20D5C4, 135°): Logo, primary Trade CTA, hero accents, selected/active brand surfaces. - Webull Blue Pressed (
#1684D6): Pressed state of the primary blue button.
Canvas & Surfaces (Dark — the only mode)
- Dark Canvas (
#0B0E11): Primary canvas — near-black, maximizes chart/candle contrast. - Dark Surface 1 (
#14181D): Cards, panels, grouped sections. - Dark Surface 2 (
#1C2127): Raised rows, chips, pressed surfaces, inputs. - Divider (
#232931): Hairline dividers between rows and sections. - Grid Line (
#1A1F26): Chart grid lines — almost invisible, never competes with candles.
Optional Light Mode (rarely used; provided for completeness)
- Light Canvas (
#FFFFFF), Light Surface (#F4F6F8), Light Divider (#E4E8EC), Light Text (#101418). Webull ships a light theme but the product is designed and overwhelmingly used in dark; treat dark as canonical.
Text
- Text Primary (
#EAEEF2): Primary text on dark. - Text Secondary (
#8B95A1): Metadata, names, labels. - Text Tertiary (
#5A636E): Disabled, axis labels, lowest emphasis. - On-Brand Text (
#04121C): Text on the blue/cyan gradient or solid blue. - On-Up Text (
#03150D) / On-Down Text (#1B0606): Text on the green Buy / red Sell buttons.
Semantic — Market (loud and pervasive, the core of the system)
| Role | Color | Use |
|---|---|---|
| Up / Bid / Call | #00C076 | Up candles, positive %, gain chips, bid ladder rows, Buy button, calls |
| Down / Ask / Put | #FA5252 | Down candles, negative %, loss chips, ask ladder rows, Sell button, puts |
| Flat / Unchanged | #8B95A1 | 0.00% — uses secondary text color |
| Up Fill (depth/area) | #00C07624 | Bid depth bars, area-chart fill (≈14% green) |
| Down Fill (depth/area) | #FA525224 | Ask depth bars, down area fill (≈14% red) |
| Prev-close line | #1B9EFB (dashed) | Dashed reference line at previous close on the chart |
Region note: in many Asia markets Webull inverts up=red / down=green. The tokens stay the same; only the up/down→color mapping flips by a user/region setting. Default here is US (up=green).
Semantic — System
- Alert Amber (
#F7A600): Price-alert triggers, halted/extended-hours banners, caution. - Error Red (
#FA5252): Form validation, order-rejected (same as Down — context disambiguates). - Success (
#00C076): Order-filled confirmation (same as Up — intentional). - Info / Link (
#1B9EFB): Informational links, disclosures. - Paper Badge (
#20D5C4on#04121C): The signature paper-trading indicator.
Type scaleRead the full spec
Font Family
- Brand UI: a clean grotesque with DIN-style numerics (Webull uses a custom UI sans + a DIN-like numeric face for prices).
- iOS Fallback:
-apple-system, 'SF Pro Text', 'SF Pro Display'— system face on device. - Recommended free substitute:
Inter(by Rasmus Andersson, SIL OFL) with tabular figures; for an even more terminal feel, prices may use a condensed DIN-like face such asOswald/Barlow Semi Condensed— but Intertnumis the simplest faithful default. - Numeric treatment: Tabular / monospaced lining figures everywhere (last price, %, ladder, option chain, stats). In Inter use
font-feature-settings: "tnum" 1;; on SF use.monospacedDigit(). The ladder and option chain MUST align to the decimal. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Last Price | Inter | 32pt | 800 | 1.1 | -0.6pt | Quote-screen last price — tabular, colored up/down |
| Screen Title | Inter | 24pt | 800 | 1.2 | -0.3pt | "Quotes", "Markets" |
| Section Header | Inter | 20pt | 700 | 1.25 | -0.2pt | "Order book", "Options" |
| Symbol Header | Inter | 17pt | 700 | 1.3 | -0.1pt | "TSLA · NASDAQ" |
| Body | Inter | 15pt | 400 | 1.5 | 0pt | Descriptions, disclosures |
| Row Symbol | Inter | 14pt | 600 | 1.3 | 0pt | Watchlist ticker |
| Row Value | Inter | 15pt | 700 | 1.3 | 0pt | Watchlist last price — tabular |
| Meta | Inter | 13pt | 400 | 1.4 | 0pt | "Vol 84.2M · Mkt Cap 791B" |
| Numeric Mono | Inter (tnum) | 12pt | 700 | 1.3 | 0pt | % change line, ladder sizes — tabular |
| Ladder / Chain | Inter (tnum) | 13pt | 700 | 1.3 | 0pt | Bid/ask prices, option strikes — tabular |
| Label | Inter | 11pt | 600 | 1.0 | 0.4pt | "BID/ASK", "LEVEL 2", column heads (uppercase) |
| Button | Inter | 15pt | 800 | 1.0 | 0.3pt | Buy / Sell / Trade buttons |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Timeframe | Inter | 11pt | 700 | 1.0 | 0.2pt | 1m/5m/1D/5D/1M/1Y chips |
Principles
- Everything numeric is tabular: the order ladder, option chain, and price columns must align to the decimal — this is the defining typographic requirement of a trading terminal.
- Last price is colored, not just bold: the big quote-screen price takes the up/down color, not a neutral text color — instant directional read.
- Weight signals data importance: prices and the ladder are 700–800; names/labels 400–600.
- Dense but legible: line heights are tight (1.1–1.3) to fit more data; never so tight numbers collide.
- Dynamic Type with limits: last price, titles, body scale modestly; the ladder, option chain, timeframe chips, and tab labels stay FIXED — these are tabular, layout-critical grids.
Components and layoutRead the full spec
Buttons
Buy Button (green) / Sell Button (red) — the signature action pair
- Shape: Rounded rectangle, 6pt corner radius
- Buy: background
#00C076, text#03150D(near-black-green), Inter 15pt weight 800 - Sell: background
#FA5252, text#1B0606, Inter 15pt weight 800 - Layout: a docked horizontal pair on the quote screen, equal width, 10pt gap
- Padding: 14pt vertical; full available width split 50/50
- Pressed: darken 8% + scale 0.98
Primary Button (Trade / Confirm order)
- Background:
#1B9EFB(or the blue→cyan gradient for hero CTAs) - Text:
#04121C, Inter 15pt weight 800 - Corner radius: 6pt; padding 13pt × 26pt
- Pressed:
#1684D6+ scale 0.98
Outline Button (Add to list / Secondary)
- Background: transparent
- Border: 1pt
#1B9EFB - Text:
#1B9EFB, Inter 14pt weight 700 - Corner radius: 6pt
- Pressed: 10% blue tint fill
Ghost Button (Indicators / Settings)
- Background:
#1C2127 - Border: 1pt
#232931 - Text: primary text, Inter 13pt weight 600
- Corner radius: 6pt
Core Atoms
Watchlist Row
- Height: 56pt
- Left: ticker (14pt w600) over name (11pt w400 secondary, truncates)
- Center: 56×28pt sparkline — stroke
#00C076if up on day,#FA5252if down - Right (right-aligned): last price (15pt w700 tabular) over a % chip
- % chip: solid pill, 4pt radius,
#00C076bg +#03150Dtext (up) /#FA5252bg +#1B0606text (down), 11pt w800 tabular - Divider: 0.5pt hairline below
Quote Header
- Symbol (20pt w800) + exchange/name (12pt secondary); optional cyan
PAPERbadge top-right - Last price: 32pt w800 tabular, colored up/down
- Delta line:
+7.32 (+3.04%) ▲— 14pt w700 tabular, up/down colored
Candlestick Chart (the centerpiece)
- Full-width, ~158pt tall on the quote screen (expands to full-screen landscape)
- Up candle: body + wick
#00C076; down candle:#FA5252 - Grid lines:
#1A1F26(nearly invisible) horizontal rules only - Previous-close: 1pt dashed
#1B9EFBreference line - Crosshair on touch: vertical+horizontal
#8B95A1lines + OHLC tooltip - Timeframe strip below: 1m/5m/1D/5D/1M/1Y chips — 11pt w700; active =
#1B9EFBtext on#1B9EFB@16% fill, 4pt radius
Order-Book Ladder (Level 2)
- Rows: price (left, 64pt, w700 tabular — bid
#00C076/ ask#FA5252) + size (secondary, tabular) - Depth bar: behind each row, right-anchored, width ∝ size,
#00C07624(bid) /#FA525224(ask) - Mid/spread divider: centered last price + spread, 13pt w800, bordered top & bottom 0.5pt
- Asks stacked above the mid; bids below (book convention)
Options Chain
- Three columns: Call (left,
#00C076w700) | Strike (center, primary w800) | Put (right,#FA5252w700) - Uppercase 11pt column header, 0.5pt divider; rows 0.5pt-separated, tabular
- ATM strike row subtly highlighted (
#1C2127bg)
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background: canvas with
saturate(180%) blur(20px)translucency, 0.5pt top divider - Tabs (5): Markets, Quotes, Trade, Portfolio, Menu
- Icon size: 22pt
- Active:
#1B9EFB, filled glyph - Inactive: tertiary text, stroked glyph
- Labels: Inter 10pt w600, always shown
Top Nav (Quote screen)
- Height: 44pt + safe area
- Leading: back chevron + symbol (compact); Trailing: search, add-to-watchlist star, ⋯ overflow (alerts, share, settings)
- The candlestick chart begins immediately below — no large hero block (data-first)
Segmented / Tabs (Chart / Options / News / Financials on a symbol)
- Underline style: active segment label primary with a 2pt
#1B9EFBunderline; inactive secondary - Height: 40pt
Input Fields
Search Bar (Find symbol)
- Height: 38pt
- Background:
#1C2127, 6pt corner radius - Leading magnifier 16pt secondary; placeholder "Search symbol / company" 13pt secondary
- Focus: 1pt
#1B9EFBborder
Order Entry Field (Quantity / Limit price)
- Background:
#1C2127, 6pt radius, 1pt#232931border - Value right-aligned 16pt w800 tabular; ± stepper buttons on either side (44pt hit)
- Focus: border
#1B9EFB; error: border#FA5252, helper text red 12pt
Distinctive Components
Order Ticket (Buy/Sell flow)
- Opens from the docked Buy/Sell pair: Action (Buy/Sell, inherits the green/red color), Order type (Market/Limit/Stop/Stop-Limit), Quantity stepper, Limit price, Time-in-force, estimated cost; a colored confirm button (green for buy, red for sell) and a quick-confirm review
- Order-type selector: segmented chips, active =
#1B9EFB@16% fill
Paper-Trading Badge
- The signature "practice money" indicator: cyan
#20D5C4pill,#04121Ctext, 10pt w800, 4pt radius, "PAPER" — appears on the quote header and portfolio when in paper mode
Depth/Heatmap Bar
- Behind ladder rows; some screens show a market-depth area chart (cumulative bid/ask) using the up/down fills
Mini Sparkline
- 56×28pt inline trend in watchlist rows; 2pt stroke, up/down colored, no fill
Indicator Chips Row
- On the chart: MA / EMA / BOLL / MACD / RSI toggle chips — ghost when off,
#1B9EFB@16% when on
Spacing System
- Base unit: 4pt
- Scale: 4, 6, 8, 10, 12, 16, 20, 24, 32, 40
- Watchlist row height: 56pt; ladder row ~26pt (dense)
- Section header top margin: 12pt
- Screen content inset: 18pt horizontal (chart is full-bleed; ladder 18pt)
Grid & Container
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Chart ~140pt; ladder shows 3 levels each side; tighter 14pt insets |
| iPhone 15/16 | 393pt | Standard layout; chart ~158pt; 5 ladder levels |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Taller chart ~190pt; more ladder depth visible |
| iPhone (landscape) | — | Full-screen candlestick chart with crosshair — the core power gesture |
| iPad (portrait) | 768pt | Two-pane: watchlist rail + quote/chart |
| iPad (landscape) | 1024pt+ | Terminal layout: watchlist + chart + ladder + options simultaneously |
Dynamic Type
- Last price, screen title, section header, body: modest scale
- Ladder, option chain, timeframe chips, tab labels, column headers: FIXED (tabular grids, layout-critical)
- Tabular figures remain tabular at every size
Orientation
- iPhone: portrait for browse/trade; landscape = full-screen chart with crosshair + drawing tools
- iPad: split/terminal multi-pane; rotation preserves the selected symbol and chart timeframe
Touch Targets
- Watchlist row: 56pt tall, full-row tap
- Tab bar icon: 22pt glyph, 56pt hit
- Timeframe chip: 28pt tall, 44pt hit
- Buy/Sell buttons: 48pt tall each
- Quantity stepper ±: 44pt hit
- Chart crosshair: full-chart drag region
Safe Area Handling
- Top: top nav respects safe area and Dynamic Island; chart starts right below
- Bottom: docked Buy/Sell pair and tab bar respect home indicator; both add safe-area padding
- Keyboard: order-entry fields lift above the keyboard; the keypad sheet covers lower content
- Sides: 18pt content inset; chart is full-bleed
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-webull {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #3e5464;
--heading-color: #3e5464;
--link-color: #936100;
--link-hover-color: #603f00;
--border-color: #dce0e3;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(62,84,100,0.06);
--card-hover-shadow: 0 6px 18px rgba(62,84,100,0.12);
--header-bg: #3e5464;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #64727c;
--button-bg: #f7a600;
--button-text-color: #000000;
--button-hover-bg: #c48400;
--button-border: none;
--button-border-radius: 6px;
--button-secondary-bg: #f3f5f6;
--button-secondary-text-color: #3e5464;
--button-secondary-hover-bg: #e8eaec;
--button-secondary-border: 1px solid #dce0e3;
--prompt-bg: #f5f6f7;
--prompt-text-color: #3e5464;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 6px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- life360 83.1%
- grammarly 82.8%
- plenty of fish 82.5%
- garmin connect 80.3%
- coffee meets bagel 79.5%
Where this came from
- Source document
ios/design-md/finance/webull/DESIGN.md· 25.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.