designmd-forge 1.2.0

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

@@ -0,0 +1,410 @@
+# Design System Inspiration of Binance (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Binance's iOS app is a dark, dense, data-first trading terminal compressed into a phone. The default and dominant experience is dark mode: a near-black canvas (`#0B0E11`) onto which thousands of live numbers stream — prices, percentages, order books, candlesticks, P&L. The atmosphere is "professional exchange, not consumer wallet." Where Coinbase rounds its corners and pads generously to feel friendly, Binance tightens everything: 12pt row paddings, hairline `#2B3139` dividers, and tabular monospace figures so that a markets list shows ten pairs without scrolling. The screen should feel like a Bloomberg terminal that happens to fit in a hand — information density is a feature, not a flaw.
+
+The single brand accent is **Binance Yellow** (`#F0B90B`) — a saturated amber-gold that appears on the logo, the primary "Convert"/"Deposit" CTA, the active tab, selected market-tab underlines, and links. It is used sparingly and deliberately: yellow means "this is the Binance action." Everything else is carried by **semantic market color**: green (`#0ECB81`) for up / buy / bids, red (`#F6465D`) for down / sell / asks. These two colors are absolute and never invert between themes — green is always up, red is always down, because a trader's muscle memory depends on it. The candlestick chart uses the same green/red for bullish/bearish candles.
+
+Typography is split-brain by design. UI chrome (titles, labels, body, tab names) is set in a clean humanist sans — Binance ships a custom **BinancePlex** family, closely modeled on IBM Plex Sans, with PingFang SC for CJK. But every piece of **numeric data** — balances, prices, the order book, 24h volume, percentages — is rendered in a **monospace** face (BinancePlex Mono / IBM Plex Mono fallback) with tabular figures, so decimal points line up vertically in lists and the order book and balances don't "jitter" as digits change. This sans/mono split is the most recognizable typographic signature of the app.
+
+The signature screens are the **Markets list** (favorites/spot/futures tabs, each row = coin icon + pair + 24h volume + monospace price + a colored percentage pill) and the **Trade screen** (candlestick chart on top, depth-shaded order book, Buy/Sell ticket). Secondary signature surfaces: the **Convert** flow (a frictionless from/to coin swap with a single yellow confirm) and the **Wallet/Funding** overview. The home screen leads with an "Est. Total Value" balance hero in monospace plus quick-action buttons (Deposit / Withdraw / Convert).
+
+**Key Characteristics:**
+- Dark-native canvas (`#0B0E11`) — the app was designed in dark; light theme is an afterthought
+- Binance Yellow (`#F0B90B`) is the *only* brand accent — used for primary CTA, active tab, links
+- Absolute market semantics: green `#0ECB81` = up/buy, red `#F6465D` = down/sell — never inverted
+- Sans/mono split: chrome in BinancePlex (IBM Plex Sans), all numbers in monospace tabular figures
+- Markets list: dense rows, colored percentage pills, monospace prices, favorites/spot/futures tabs
+- Candlestick chart with green/red candles, time-interval chips, MA/depth overlays
+- Depth-shaded order book — ask/bid rows with a translucent quantity bar behind the numbers
+- Convert flow — a single-screen from/to swap with one yellow confirm
+- Buy/Sell ticket with limit/market toggle, percentage slider (25/50/75/100%)
+- Bottom tab bar (5): Home, Markets, Trade, Futures, Wallets — active in yellow
+- Small radii (2–8pt) — terminal-tight, not consumer-rounded
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive / Brand)
+- **Binance Yellow** (`#F0B90B`): The single brand accent — primary CTA background, active tab, active market-tab underline, links, focused inputs, selected chips.
+- **Yellow Pressed** (`#C99400`): Pressed/active state of yellow buttons.
+- **Yellow Tint** (`#F0B90B1F`): 12% yellow wash behind selected rows and yellow ghost chips.
+
+### Market Semantics (never invert across themes)
+- **Up / Buy / Bid Green** (`#0ECB81`): Positive price change, Buy button, bid rows, bullish candles, gain P&L.
+- **Down / Sell / Ask Red** (`#F6465D`): Negative price change, Sell button, ask rows, bearish candles, loss P&L.
+- **Up Pressed** (`#0BA572`) / **Down Pressed** (`#D93849`): Pressed states for Buy/Sell.
+
+### Canvas & Surfaces (Dark — default)
+- **Canvas** (`#0B0E11`): Primary app background.
+- **Surface 1** (`#181A20`): Cards, sheets, table containers, nav bars.
+- **Surface 2** (`#1E2026`): Elevated rows, search field, segmented controls, input fields.
+- **Surface 3** (`#2B3139`): Pressed rows, chip backgrounds, skeleton, hairline dividers.
+- **Divider** (`#2B3139`): 1pt hairlines between list rows and sections.
+
+### Canvas & Surfaces (Light — secondary theme)
+- **Canvas Light** (`#FFFFFF`): Light background.
+- **Surface 1 Light** (`#F5F5F5`): Cards, grouped containers.
+- **Surface 2 Light** (`#FAFAFA`): Elevated rows, input fields.
+- **Divider Light** (`#EAECEF`): Hairline dividers.
+
+### Text
+- **Text Primary Dark** (`#EAECEF`): Primary text, prices, headings on dark.
+- **Text Secondary Dark** (`#848E9C`): Labels, metadata, secondary values, placeholders.
+- **Text Tertiary Dark** (`#5E6673`): Disabled, very low-emphasis hints, axis labels.
+- **Text Primary Light** (`#1E2329`): Primary text on light.
+- **Text Secondary Light** (`#707A8A`): Secondary text on light.
+
+### Semantic (status)
+- **Success** (`#0ECB81`): Order filled, deposit confirmed (reuses Up Green).
+- **Error** (`#F6465D`): Order failed, validation error (reuses Down Red).
+- **Warning** (`#F0B90B`): Risk warnings, liquidation alerts (reuses brand Yellow).
+- **Info** (`#3375BB`): Informational toasts, KYC banners.
+
+### Color → Role Table
+
+| Role | Dark | Light |
+|------|------|-------|
+| Canvas | `#0B0E11` | `#FFFFFF` |
+| Surface 1 | `#181A20` | `#F5F5F5` |
+| Surface 2 | `#1E2026` | `#FAFAFA` |
+| Surface 3 / Divider | `#2B3139` | `#EAECEF` |
+| Brand accent (Yellow) | `#F0B90B` | `#F0B90B` |
+| Up / Buy | `#0ECB81` | `#0ECB81` |
+| Down / Sell | `#F6465D` | `#F6465D` |
+| Text primary | `#EAECEF` | `#1E2329` |
+| Text secondary | `#848E9C` | `#707A8A` |
+| Text tertiary | `#5E6673` | `#A1A7B3` |
+| Link | `#F0B90B` | `#F0B90B` |
+
+## 3. Typography Rules
+
+### Font Family
+- **UI Sans**: `BinancePlex` (Binance's custom face, derived from IBM Plex Sans by IBM / Bold Monday, SIL OFL). Use **IBM Plex Sans** as the open fallback.
+- **Numeric Mono**: `BinancePlex Mono` for all numbers. Use **IBM Plex Mono** as the open fallback. Always enable tabular figures (`font-variant-numeric: tabular-nums`).
+- **CJK**: `PingFang SC` (iOS system) for Chinese; `Hiragino Sans` for Japanese.
+- **Fallback Stack (sans)**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Fallback Stack (mono)**: `'SF Mono', ui-monospace, Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Sans | 32pt | 700 | 1.2 | -0.6pt | Large nav title (Markets, Wallets) |
+| Balance Hero | Mono | 28pt | 600 | 1.15 | -0.5pt | Est. total value, tabular |
+| Section Title | Sans | 22pt | 700 | 1.25 | -0.2pt | "Spot Wallet", "Recent Trades" |
+| Row Title | Sans | 18pt | 600 | 1.3 | -0.1pt | Coin pair, page heading on detail |
+| Body | Sans | 16pt | 400 | 1.5 | 0pt | Descriptions, explanatory copy |
+| Price / Number | Mono | 15pt | 600 | 1.3 | 0pt | List prices, order book, % change |
+| List Label | Sans | 14pt | 600 | 1.3 | 0pt | "Order Book", "Trades", labels |
+| Meta | Sans | 14pt | 400 | 1.4 | 0pt | 24h volume, high/low, timestamps |
+| Pill / Chip | Sans | 13pt | 600 | 1.0 | 0pt | % change pill, time-interval chips |
+| Caption | Sans | 12pt | 500 | 1.35 | 0.1pt | "Last updated", footnotes |
+| Mono Caption | Mono | 12pt | 500 | 1.35 | 0pt | Order book secondary qty, depth |
+| Tab Label | Sans | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
+| Button | Sans | 15pt | 600 | 1.0 | 0pt | Primary / Buy / Sell |
+
+### Principles
+- **Sans for words, mono for numbers**: This is the rule. Any glyph that represents a quantity (price, %, volume, balance, qty) is monospace with tabular figures. Any glyph that is a word/label is sans.
+- **Tabular figures always on numbers**: Decimal points must align vertically down a markets list and the order book. Never use proportional figures for live data.
+- **Weight concentrated at 400 / 500 / 600 / 700**: Body 400, captions/meta 500, labels/prices/buttons 600, titles 700. No thin, no black.
+- **Color encodes sign, not weight**: A +/- value's color (green/red) carries the meaning; weight stays 600. Do not bold gains and regular losses.
+- **Dense by default**: Line heights are tight (1.2–1.4) for data rows; only body copy gets 1.5.
+- **Dynamic Type**: Titles, body, labels scale; numeric mono columns, tab labels, and order-book rows stay FIXED to preserve column alignment.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Convert / Deposit / Confirm)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#F0B90B` (Binance Yellow)
+- Text: `#0B0E11` (near-black on yellow — never white)
+- Padding: 12pt vertical, 28pt horizontal; full-width on forms (height 48pt)
+- Font: Sans 15pt weight 600
+- Pressed: background `#C99400` + scale 0.98
+- Disabled: background `#F0B90B` at 40% opacity, text `#0B0E11` at 50%
+
+**Buy Button**
+- Background: `#0ECB81`; Text `#FFFFFF`; 8pt radius; same metrics as primary
+- Pressed: `#0BA572`
+
+**Sell Button**
+- Background: `#F6465D`; Text `#FFFFFF`; 8pt radius
+- Pressed: `#D93849`
+
+**Ghost / Secondary Button (Withdraw / Transfer)**
+- Background: `#2B3139` (Surface 3); Text `#EAECEF`
+- Border: none
+- Corner radius: 8pt; Padding: 11pt / 20pt
+- Font: Sans 14pt weight 600
+- Pressed: background lightens to `#363D47`
+
+**Text Button (View all / See more)**
+- Background: transparent; Text `#F0B90B` (yellow)
+- Font: Sans 14pt weight 600; no underline
+- Pressed: text `#C99400`
+
+**Percentage Slider Chips (25 / 50 / 75 / 100%)**
+- Pill, `#2B3139` bg, `#848E9C` text 13pt w600
+- Selected: `#F0B90B1F` bg, `#F0B90B` text
+
+### Core Atoms
+
+**Coin Icon**
+- 30pt circle (24pt in dense lists), brand-colored token glyph or coin logo
+- BTC `#F7931A`, ETH `#627EEA`, BNB `#F0B90B`, USDT `#26A17B`, SOL `#14F195`
+
+**Percentage Change Pill**
+- Min-width 64pt, height 28pt, 4pt corner radius
+- Background: solid `#0ECB81` (up) or `#F6465D` (down)
+- Text: `#FFFFFF`, Mono 13pt w600, e.g. `+2.34%` / `-0.92%`
+- Variant (chart screen): no fill, colored text only
+
+**Price Cell**
+- Mono 15pt w600 `#EAECEF` primary line; Mono 12pt `#848E9C` USD-equivalent secondary line, right-aligned
+
+**Time Interval Chips (chart)**
+- Row: `1m 5m 15m 1H 4H 1D 1W`
+- Inactive: `#848E9C` 13pt w600, no bg
+- Active: `#F0B90B` text, `#F0B90B1F` pill bg, 4pt radius
+
+**Tag / Badge**
+- "NEW", "10x", "Vol" badge — 4pt radius, `#2B3139` bg, `#848E9C` 10pt w700; leverage badges use `#F0B90B1F` bg / `#F0B90B` text
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `#0B0E11` at 96% with hairline top border `#2B3139`
+- Tabs (5): Home, Markets, Trade, Futures, Wallets
+- Icon size: 22pt (Trade often a centered emphasized icon)
+- Active: `#F0B90B` (filled icon + yellow label)
+- Inactive: `#5E6673` (outline icon + tertiary label)
+- Labels: Sans 10pt w500, always shown
+
+**Top Nav (detail screens)**
+- Height: 44pt + safe area
+- Leading: back chevron `#EAECEF` 22pt
+- Center: pair title Sans 18pt w600 + small % change beneath
+- Trailing: star (favorite) + share + ⋯
+
+**Market Tabs (segmented under header)**
+- Row of text tabs: Favorites / Spot / Futures / Hot
+- Active: `#EAECEF` 14pt w600 + 2pt `#F0B90B` underline
+- Inactive: `#848E9C` 14pt w600
+
+**Buy/Sell Segmented Toggle**
+- Two-segment pill; selected Buy = `#0ECB81` fill / white text; selected Sell = `#F6465D` fill / white text; unselected = `#2B3139` / `#848E9C`
+
+### Input Fields
+
+**Search Bar**
+- Height: 36pt; Background: `#1E2026`; Border: none; Corner radius: 8pt
+- Leading `magnifyingglass` 14pt `#848E9C`
+- Placeholder: "Search BTC, ETH, BNB…" Sans 13pt `#848E9C`
+- Focus: 1pt `#F0B90B` border
+
+**Amount / Order Input**
+- Height: 48pt; Background: `#1E2026`; Corner radius: 8pt
+- Value: Mono 18pt w600 `#EAECEF`, right-aligned; leading currency label `#848E9C`
+- Trailing "MAX" text button in `#F0B90B`
+- Focus: 1pt `#F0B90B` border; Error: 1pt `#F6465D` border + helper text `#F6465D` 12pt
+
+**Stepper / Quantity (limit order)**
+- `−` / `+` 32pt square `#2B3139` buttons flanking a centered mono value field
+
+### Distinctive Components
+
+**Markets List Row**
+- Height: ~56pt; 12pt vertical / 16pt horizontal padding; 1pt `#2B3139` divider
+- Layout: [coin icon 30pt] [pair name + 24h vol stacked] [price + USD stacked, right] [% pill 64pt]
+- Pair: Sans 14pt w600 `#EAECEF`; quote currency `#5E6673` 11pt
+- Volume: Sans 11pt `#848E9C`
+- Price: Mono 14pt w600; USD-eq: Mono 11pt `#848E9C`
+- Long-press: quick "Trade / Add to favorites" sheet
+
+**Candlestick Chart**
+- Bullish candle: `#0ECB81`; Bearish candle: `#F6465D`
+- Grid lines: `#2B3139` at 40% opacity; axis labels Mono 10pt `#5E6673`
+- Crosshair on touch: dashed `#848E9C` with a floating mono price tag
+- Overlays: MA(7/25/99) thin lines; volume histogram beneath in muted green/red
+- Interval chips above; chart-type toggle (candles / depth / line) top-right
+
+**Order Book**
+- Two stacks: asks (red, top) and bids (green, bottom), spread row in the middle
+- Each row: price (Mono, colored) left, quantity (Mono `#EAECEF`) right
+- **Depth shading**: a translucent bar (`rgba(246,70,93,0.14)` ask / `rgba(14,203,129,0.14)` bid) grows from the right edge proportional to cumulative size — the book's signature look
+- Spread/last-price row: Mono 16pt w600, colored to last tick direction, with a ↑/↓ arrow
+- Tap a row to prefill the order ticket price
+
+**Convert Card**
+- Two stacked tiles ("From" / "To") separated by a circular swap button
+- Each tile: coin selector chip (icon + ticker + chevron) + Mono amount input + "Available" line
+- Single full-width yellow "Preview Conversion" CTA; result shows a locked-rate countdown ring
+
+**Trade Ticket (Buy/Sell)**
+- Buy/Sell segmented toggle on top
+- Limit/Market tab; price input (limit only) + amount input + 25/50/75/100% slider
+- "Avbl" balance line in `#848E9C`
+- Submit = full-width `#0ECB81` "Buy BTC" or `#F6465D` "Sell BTC"
+
+**P&L / Portfolio Pill**
+- Today's change shown as Mono `+$214.86 (+1.70%)` colored green/red beneath the balance hero
+
+**Spot/Futures Mode Switch**
+- Pill segmented control; Futures mode tints accents subtly and exposes a leverage badge (`10x` in `#F0B90B1F`)
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40
+- List row vertical padding: 12pt (dense); screen horizontal inset: 16pt
+- Card internal padding: 16pt; section gap: 12pt
+- Inter-element gap in rows: 8–10pt
+
+### Grid & Container
+- iPhone: 16pt horizontal insets; full-bleed chart and order book
+- Markets list: single column, full-width rows, hairline dividers (no card chrome)
+- iPad: two-pane — markets list left (360pt) + chart/trade detail right
+- Chart occupies ~38% of trade screen height; order book + ticket fill the rest
+
+### Whitespace Philosophy
+- **Density is the product**: tight 12pt paddings let a markets list show 8–10 pairs at once — this is intentional, not cramped
+- **Hairlines over cards**: list rows are separated by 1pt `#2B3139` dividers, not card gaps
+- **Numbers breathe via alignment**: tabular mono + right-alignment creates visual order without extra space
+- **Yellow is rare**: large neutral fields make the single yellow CTA pop
+
+### Border Radius Scale
+- Square (0pt): chart area, full-bleed dividers, candlesticks
+- Micro (2pt): order-book depth bars, tiny badges
+- Subtle (4pt): % pills, chips, time-interval chips, tags
+- Standard (8pt): buttons, inputs, search, cards, sheets
+- Comfortable (12–16pt): bottom sheets, modals
+- Pill (500pt): segmented toggles, percentage slider chips
+- Circle (50%): coin icons, swap button, avatars
+
+## 6. Depth & Elevation
+
+Binance is mostly flat — depth comes from surface-tone steps (`#0B0E11` → `#181A20` → `#1E2026` → `#2B3139`), not shadows. Shadows appear only on floating sheets and the active trade ticket.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow; tone step only | List rows, cards, chart, order book |
+| Raised (Level 1) | `rgba(0,0,0,0.4) 0 2px 8px` | Sticky Buy/Sell ticket, floating action bar |
+| Sheet (Level 2) | `rgba(0,0,0,0.5) 0 -6px 24px` | Bottom sheets (coin picker, order confirm) |
+| Modal Overlay | `rgba(0,0,0,0.6)` scrim | Behind modals, KYC, leverage sheet |
+
+**Shadow Philosophy**: On a near-black canvas, shadows barely register, so Binance separates layers with progressively lighter surface tones and 1pt `#2B3139` borders on floating panels. Shadow is used only to lift the order ticket and bottom sheets so "tap outside to dismiss" reads clearly.
+
+### Motion
+- **Price tick flash**: when a price updates, the cell briefly flashes green (up) or red (down) background at ~10% opacity for 150ms, then fades — the heartbeat of the app
+- **Order book reflow**: rows shift in 120ms ease-out as depth changes; no springy bounce (data must feel reliable)
+- **Tab switch (Markets tabs)**: underline slides to the new tab in 200ms ease-out; content cross-fades 150ms
+- **Buy/Sell toggle**: segment fill slides + color-morphs green↔red in 180ms ease-out
+- **Chart interaction**: crosshair tracks finger 1:1 (no lag); interval change re-renders instantly
+- **Convert swap**: from/to tiles swap with a 250ms vertical flip + soft haptic
+- **Sheet present**: bottom sheet slides up 300ms ease-out; scrim fades in
+- **Pull-to-refresh**: yellow circular spinner; haptic on trigger
+- **Haptics**: soft impact on order submit, selection tick on percentage-slider snap, success notification haptic on filled order
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the deep canvas `#0B0E11` as the default — Binance is dark-native
+- Make Binance Yellow `#F0B90B` the *only* brand accent (CTA, active tab, links)
+- Set ALL numbers in monospace with tabular figures so columns align
+- Keep green `#0ECB81` = up/buy and red `#F6465D` = sell/down — absolute, never inverted
+- Use dense 12pt row padding and 1pt `#2B3139` hairline dividers in lists
+- Render the order book with translucent depth bars growing from the right edge
+- Flash a cell green/red for ~150ms when its price ticks
+- Use solid colored % pills (`#0ECB81`/`#F6465D`) in the markets list
+- Put black text on yellow buttons (`#0B0E11` on `#F0B90B`) — never white
+- Separate layers with surface-tone steps + 1pt borders, not heavy shadows
+- Keep the Convert flow to a single screen with one yellow confirm
+
+### Don't
+- Don't use white or any color other than `#F0B90B` for the primary CTA
+- Don't render prices/percentages in a proportional sans — alignment breaks
+- Don't invert up/down colors in light mode (green stays up, red stays down)
+- Don't pad rows generously "to feel friendly" — density is the Binance identity
+- Don't put white text on the yellow button (fails contrast and is off-brand)
+- Don't add heavy drop shadows on list cards — use tone steps
+- Don't bold gains while leaving losses regular — color carries the sign, weight stays 600
+- Don't introduce a second brand accent color — yellow is singular
+- Don't animate the order book with bouncy springs — data must feel stable
+- Don't use rounded 16pt+ corners on trading rows — radii stay 2–8pt there
+- Don't hide the 24h % change — it is the primary scannable signal per row
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Markets rows compress to 24pt icons; chart ~34% height |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
+| iPhone 15/16 Pro Max | 430pt | Chart taller; order book shows more depth levels |
+| iPad (portrait) | 768pt | Two-pane: markets list (360pt) + detail |
+| iPad (landscape) | 1024pt+ | Three-pane: list + chart + order book/ticket side-by-side |
+
+### Dynamic Type
+- Screen titles, body, labels, captions: scale with Dynamic Type
+- Numeric mono columns (markets prices, order book, balances), tab labels, % pills: FIXED — scaling them would break tabular column alignment
+- Chart axis labels: fixed
+
+### Orientation
+- Portrait default everywhere
+- Trade screen supports landscape: full-width chart with a side order book (pro layout)
+- Markets list locks portrait
+
+### Touch Targets
+- Markets row: full-row tap, 56pt tall
+- Tab bar icons: 22pt glyph, 44pt+ hit
+- Percentage slider chips: 32pt tall, ≥44pt hit
+- Order-book row: full-row tap to prefill price (≥28pt)
+- Buy/Sell buttons: ≥48pt tall
+
+### Safe Area Handling
+- Top: nav respects safe area + Dynamic Island
+- Bottom: tab bar + home indicator respected; sticky trade ticket sits above the home indicator
+- Keyboard: amount inputs scroll above keyboard; percentage slider stays visible above the keyboard on the trade ticket
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark): `#0B0E11`
+- Surface 1 / 2 / 3: `#181A20` / `#1E2026` / `#2B3139`
+- Brand accent (Binance Yellow): `#F0B90B` (pressed `#C99400`)
+- Up / Buy / Bid: `#0ECB81`
+- Down / Sell / Ask: `#F6465D`
+- Text primary: `#EAECEF` / secondary `#848E9C` / tertiary `#5E6673`
+- Link: `#F0B90B`
+- Canvas (light): `#FFFFFF`; text primary light `#1E2329`
+- Depth bar (ask): `rgba(246,70,93,0.14)`; (bid): `rgba(14,203,129,0.14)`
+
+### Example Component Prompts
+- "Build the Binance markets list row in SwiftUI: 56pt tall, `#0B0E11` background, 1pt `#2B3139` bottom divider, 16pt horizontal / 12pt vertical insets. Leading 30pt circular coin icon. Then a VStack: pair `BTC` in IBM Plex Sans 14pt w600 `#EAECEF` with `/USDT` quote in `#5E6673` 11pt, and `Vol 1.42B` in 11pt `#848E9C` below. Trailing: a VStack right-aligned with price `67,284.10` in IBM Plex Mono 14pt w600 `#EAECEF` and `$67,284.10` in Mono 11pt `#848E9C`. Far trailing: a 64pt min-width pill, 4pt radius, solid `#0ECB81` background, white Mono 13pt w600 text `+2.34%`."
+
+- "Create the Binance order book in SwiftUI: a VStack of ask rows then a spread row then bid rows. Each row is an HStack: price on the left in IBM Plex Mono 12pt w600 (`#F6465D` for asks, `#0ECB81` for bids), quantity on the right in Mono 12pt `#EAECEF`. Behind each row, a depth bar grows from the trailing edge: a Rectangle filled `Color.red.opacity(0.14)` for asks / `Color.green.opacity(0.14)` for bids, width = cumulativeSize / maxSize. The middle spread row shows last price in Mono 16pt w600 colored by last tick direction with a ↑ or ↓ glyph."
+
+- "Build the Binance balance hero: label 'Est. Total Value' in IBM Plex Sans 12pt `#848E9C` with a trailing eye icon. Below: `12,840.57` in IBM Plex Mono 28pt w600 `#EAECEF` with `USDT` suffix in 14pt `#848E9C`. Below that: today's P&L `+$214.86 (+1.70%)` in IBM Plex Mono 12pt colored `#0ECB81`. Then a row of three buttons: 'Deposit' full `#F0B90B` (black text), 'Withdraw' and 'Convert' as `#2B3139` ghost buttons, all 36pt tall, 8pt radius."
+
+- "Render the Binance Buy/Sell trade ticket: a 2-segment toggle (Buy `#0ECB81` / Sell `#F6465D`, unselected `#2B3139` `#848E9C`). Below: Limit/Market text tabs. A price input (mono, 48pt tall, `#1E2026`, 8pt radius) and an amount input. A 4-stop percentage slider with chips 25/50/75/100 (`#2B3139` → selected `#F0B90B1F`/`#F0B90B`). An 'Avbl 1,204.50 USDT' line in `#848E9C`. Full-width submit button `#0ECB81` 'Buy BTC' (white text, 48pt, 8pt radius)."
+
+- "Build the Binance Convert card: two stacked tiles on `#181A20`, 8pt radius, separated by a 36pt circular `#F0B90B` swap button. Each tile: a coin selector chip (24pt icon + ticker + chevron) at top-left, a right-aligned IBM Plex Mono 18pt w600 amount field, and an 'Available 0.482 BTC' line in `#848E9C` 12pt. Below both tiles: a full-width `#F0B90B` 'Preview Conversion' button with black text."
+
+- "Create the Binance bottom tab bar: 5 items (Home, Markets, Trade, Futures, Wallets) over a `#0B0E11`@96% bar with a 1pt `#2B3139` top border, 56pt + safe area. Active item icon + label `#F0B90B` (filled icon); inactive `#5E6673` (outline icon). Labels IBM Plex Sans 10pt w500."
+
+### Iteration Guide
+1. Canvas is `#0B0E11` (dark-native) — light theme only swaps to `#FFFFFF` / `#1E2329`; accents never change
+2. Binance Yellow `#F0B90B` is the *single* brand accent — black text on it, never white
+3. Every number is IBM Plex Mono with tabular figures — words are IBM Plex Sans
+4. Up/buy = `#0ECB81`, down/sell = `#F6465D`, absolute and never inverted
+5. Markets rows are dense (12pt padding) with 1pt `#2B3139` hairline dividers — density is the identity
+6. The order book's signature is the translucent depth bar growing from the trailing edge
+7. Price cells flash green/red ~150ms on tick — the app's heartbeat
+8. % change is shown as a solid colored pill (`#0ECB81`/`#F6465D`) in the markets list
+9. Radii are tight on trading UI: 2pt depth bars, 4pt pills/chips, 8pt buttons/inputs
+10. Separate layers with surface-tone steps + 1pt borders, not shadows; shadows only lift sheets and the trade ticket