designmd-forge 1.2.0

package/dist/data/designs/ios-webull.md

@@ -0,0 +1,375 @@
+# Design System Inspiration of Webull (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+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
+
+## 2. Color Palette & Roles
+
+### 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** (`#20D5C4` on `#04121C`): The signature paper-trading indicator.
+
+## 3. Typography Rules
+
+### 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 as `Oswald`/`Barlow Semi Condensed` — but Inter `tnum` is 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.
+
+## 4. Component Stylings
+
+### 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 `#00C076` if up on day, `#FA5252` if down
+- Right (right-aligned): last price (15pt w700 tabular) over a % chip
+- % chip: solid pill, 4pt radius, `#00C076` bg + `#03150D` text (up) / `#FA5252` bg + `#1B0606` text (down), 11pt w800 tabular
+- Divider: 0.5pt hairline below
+
+**Quote Header**
+- Symbol (20pt w800) + exchange/name (12pt secondary); optional cyan `PAPER` badge 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 `#1B9EFB` reference line
+- Crosshair on touch: vertical+horizontal `#8B95A1` lines + OHLC tooltip
+- Timeframe strip below: 1m/5m/1D/5D/1M/1Y chips — 11pt w700; active = `#1B9EFB` text 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, `#00C076` w700) | Strike (center, primary w800) | Put (right, `#FA5252` w700)
+- Uppercase 11pt column header, 0.5pt divider; rows 0.5pt-separated, tabular
+- ATM strike row subtly highlighted (`#1C2127` bg)
+
+### 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 `#1B9EFB` underline; 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 `#1B9EFB` border
+
+**Order Entry Field (Quantity / Limit price)**
+- Background: `#1C2127`, 6pt radius, 1pt `#232931` border
+- 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 `#20D5C4` pill, `#04121C` text, 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
+
+## 5. Layout Principles
+
+### 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
+- iPhone: 18pt horizontal insets; the candlestick chart is full-bleed edge-to-edge
+- iPad: multi-pane terminal — watchlist rail + chart + ladder/options simultaneously
+- Tables (ladder, option chain) are fixed-column grids; numbers right/decimal-aligned
+- Landscape: the chart goes full-screen with crosshair scrubbing (a core trader gesture)
+
+### Whitespace Philosophy
+- **Density is the feature**: traders want more data per screen — rows are compact, chrome is minimal, the chart is huge
+- **The chart dominates**: it gets the most pixels; everything else is efficient supporting data
+- **Color does the wayfinding**: green/red and the blue gradient carry meaning so layout can stay tight and unlabeled
+
+### Border Radius Scale
+- Square (0pt): Chart area, table cells, full-bleed regions
+- Tiny (2pt): Depth bars, micro tags
+- Subtle (4pt): % chips, timeframe chips, paper badge, indicator chips
+- Standard (6pt): Buttons, search bar, inputs, order-type chips
+- Comfortable (10pt): Cards, panels, bottom sheets
+- Large (16pt): Modal containers, full sheets
+- Pill (500pt): Rare — some filter toggles
+- Circle (50%): Avatars, circular icon buttons
+
+## 6. Depth & Elevation
+
+Webull is flat and dark — depth is functional only.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Chart, ladder, watchlist rows, panels |
+| Panel (Level 1) | 1pt `#232931` border, optional `#14181D` fill | Cards, grouped sections |
+| Floating (Level 2) | `rgba(0,0,0,0.5) 0 8px 24px` + 1pt `#232931` border | Crosshair tooltip, dropdowns, order-type popover |
+| Sheet (Level 3) | `rgba(0,0,0,0.6) 0 -8px 32px` + 1pt top border | Order ticket sheet, indicator picker |
+| Modal Scrim | `rgba(0,0,0,0.65)` | Dim behind sheets/dialogs |
+
+**Shadow Philosophy**: on a near-black canvas shadows barely register, so elevation is communicated almost entirely by a 1pt `#232931` border and a slight surface lift, not by drop shadow. Floating elements (crosshair tooltip, order-type popover, ticket sheet) get a heavy dark shadow plus the border so they read above the dense data. The chart never has a shadow — it is the ground plane.
+
+### Motion
+- **Live price tick**: the last price flashes its up/down color brightly for ~250ms then settles to the steady up/down color; the ladder cell that changed flashes its row tint; digits do NOT roll
+- **Chart timeframe switch**: candles re-layout with a 250ms ease-out; axis re-scales
+- **Chart crosshair scrub**: 1:1 finger tracking, no easing; OHLC tooltip follows instantly
+- **Ladder updates**: rows update in place; size changes briefly flash the depth bar opacity
+- **Buy/Sell → ticket**: ticket sheet slides up 280ms ease-out; the sheet's confirm button inherits green/red
+- **Tab switch**: instant content swap; selected icon fills and tints with a 120ms cross-fade
+- **Landscape chart**: rotate-to-fullscreen transitions in 300ms; crosshair becomes primary interaction
+- **Pull-to-refresh** (watchlist/markets): blue→cyan gradient spinner; light haptic on trigger
+- **Haptics**: light impact on timeframe change & tab change; selection tick while scrubbing key levels; medium impact on order submit; success notification on fill
+
+## 7. Do's and Don'ts
+
+### Do
+- 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
+- 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 `PAPER` badge to mark paper-trading mode
+- Communicate elevation with a 1pt `#232931` border + 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
+
+## 8. Responsive Behavior
+
+### 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
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark, canonical): `#0B0E11`
+- Surface 1: `#14181D` · Surface 2: `#1C2127`
+- Divider: `#232931` · Chart grid: `#1A1F26`
+- Webull Blue: `#1B9EFB` · Webull Cyan: `#20D5C4` · Gradient: `#1B9EFB → #20D5C4`
+- On-brand text: `#04121C`
+- Text primary: `#EAEEF2` · secondary: `#8B95A1` · tertiary: `#5A636E`
+- Up / bid / call: `#00C076` (on-text `#03150D`)
+- Down / ask / put: `#FA5252` (on-text `#1B0606`)
+- Up fill: `#00C07624` · Down fill: `#FA525224`
+- Alert amber: `#F7A600` · Prev-close line: `#1B9EFB` dashed
+
+### Example Component Prompts
+- "Build the Webull quote header in SwiftUI on canvas `#0B0E11`: symbol 'TSLA' (20pt w800 `#F5F8FA`) over 'Tesla, Inc. · NASDAQ' (12pt `#8B95A1`), a cyan `PAPER` badge top-right (`#20D5C4` bg, `#04121C` text, 10pt w800, 4pt radius). Last price `248.50` in Inter 32pt w800 `.monospacedDigit()` colored `#00C076` (up). Delta line `+7.32 (+3.04%) ▲` 14pt w700 tabular `#00C076`."
+
+- "Render a Webull candlestick chart: full-width ~158pt tall. Up candles body+wick `#00C076`, down `#FA5252`. Horizontal grid lines `#1A1F26` only. A 1pt dashed `#1B9EFB` previous-close line. Below: timeframe chip strip 1m/5m/1D/5D/1M/1Y in Inter 11pt w700; active chip is `#1B9EFB` text on `#1B9EFB` at 16% opacity, 4pt radius. On touch, show a `#8B95A1` crosshair + OHLC tooltip tracking 1:1."
+
+- "Create the Webull order-book ladder: ask rows above, bid rows below a centered mid divider. Each row: price left (64pt, 13pt w700 tabular — `#FA5252` for asks, `#00C076` for bids) + size right (12pt `#8B95A1` tabular). Behind each row a right-anchored depth bar, width ∝ size, `#FA525224` for asks / `#00C07624` for bids. Mid divider: '248.50 · Spread 0.08' 13pt w800 `#EAEEF2`, 0.5pt `#232931` top+bottom borders."
+
+- "Build the Webull docked Buy/Sell pair: a horizontal row, equal width, 10pt gap, 18pt side insets. Buy = `#00C076` bg, text `#03150D` Inter 15pt w800, 6pt radius, 48pt tall. Sell = `#FA5252` bg, text `#1B0606`. Pressed: darken 8% + scale 0.98; medium haptic; tapping opens the order-ticket sheet whose confirm button inherits the same green/red."
+
+- "Render a Webull watchlist row: 56pt tall on `#0B0E11`. Left = ticker 14pt w600 `#EAEEF2` over name 11pt `#8B95A1` (truncate). Center = 56×28pt sparkline, 2pt stroke `#00C076` if up else `#FA5252`. Right = last price 15pt w700 tabular over a solid % chip (4pt radius, `#00C076` bg `#03150D` text if up / `#FA5252` bg `#1B0606` text if down, 11pt w800 tabular). 0.5pt `#232931` divider below."
+
+- "Render a Webull options chain: 3-column grid Call | Strike | Put. Uppercase 11pt w600 `#5A636E` header with a 0.5pt `#232931` underline. Rows 13pt tabular, 0.5pt-separated: Call left `#00C076` w700, Strike center `#EAEEF2` w800, Put right `#FA5252` w700. Highlight the ATM strike row with `#1C2127`."
+
+### Iteration Guide
+1. Dark is the only canonical mode — near-black `#0B0E11`; do not build a primary light theme
+2. Brand is the blue→cyan gradient `#1B9EFB → #20D5C4` — Trade action, selected timeframes, paper badge; never for gain/loss
+3. Performance color is loud and everywhere — up `#00C076`, down `#FA5252` on candles, sparklines, chips, ladder, buttons
+4. The candlestick chart is the centerpiece — full-bleed, timeframe strip, dashed `#1B9EFB` prev-close, near-invisible `#1A1F26` grid
+5. The last price is colored up/down (not neutral) and tabular — instant directional read
+6. Every numeric is tabular — the ladder and option chain align to the decimal, non-negotiable
+7. Buy (green) / Sell (red) is one docked equal-width pair on the quote screen
+8. The order ladder uses right-anchored depth bars at ~14% opacity behind tabular rows
+9. Elevation is a 1pt `#232931` border + surface lift on near-black — not drop shadow
+10. Motion is a brief color flash on tick (no rolling digits), 250ms timeframe re-layout, 1:1 crosshair scrub