designmd-forge 1.2.0

package/dist/data/designs/ios-crypto-com.md

@@ -0,0 +1,410 @@
+# Design System Inspiration of Crypto.com (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Crypto.com's iOS app is a premium, dark, navy-tinted financial super-app. Where Binance feels like a bare trading terminal and Coinbase feels like a friendly consumer wallet, Crypto.com positions itself as *aspirational fintech*: a deep near-black canvas with a distinct cool-blue undertone (`#03060F` → `#0B1426`, never neutral gray), generous rounding, and a metallic Visa card that is treated as the hero object of the entire product. The atmosphere is "private bank meets crypto exchange" — luxe, calm, and money-confident. The app spans buy/sell, the Crypto.com Visa card, Earn, staking CRO, Pay, NFT, and DeFi, but the home screen always foregrounds two things: your **total balance** and your **Visa card**.
+
+The brand uses two distinct blues. **Crypto.com Brand Navy** (`#002D74`, lightening to `#103F68`) is the deep institutional blue used in hero gradients, promotional banners, and the logo lockup — it signals "the brand." **Electric Accent Blue** (`#1199FA`) is the interactive color — primary CTAs, links, the active tab, selected states, the floating center "Trade" action. This navy/accent pairing is core to the identity: deep navy is decorative and brand-bearing; electric blue is functional and clickable. Market data is carried by semantic green (`#00C08B`) and red (`#F6485D`), which never invert.
+
+The **Visa card** is the single most recognizable element. It renders as a metallic, weighty rectangle with a brushed-metal gradient that differs per tier — Midnight Blue (1% cashback), Ruby Steel (2%), Royal/Jade Green (3%), Icy White / Frosted Rose Gold (also 3%), and Obsidian (5%, the flagship). The card always shows a metal chip, a masked PAN in monospace, the cardholder name, the embossed tier name in a refined gold/metal color, and the italic VISA wordmark bottom-right. Reproductions must keep the card glossy, heavy, and gradient-driven — it is the brand's status symbol.
+
+Typography is a clean geometric humanist sans for all UI (Crypto.com uses a custom-tuned grotesque close to **Manrope**), paired with a **monospace** (Roboto Mono) for every monetary figure — balances, prices, PAN, APR, cashback percentages — so columns and the card number align with tabular figures. Headlines are heavy (700–800) and tight; body is regular; numbers are mono semibold.
+
+**Key Characteristics:**
+- Deep navy-tinted dark canvas (`#03060F` → `#0B1426`) — cool blue undertone, not neutral gray
+- Two blues: Brand Navy (`#002D74`/`#103F68`) for hero/brand; Electric Accent (`#1199FA`) for interaction
+- The metallic Visa card is the hero object — tiered brushed-metal gradients, gold embossing, italic VISA
+- Card tiers map to cashback: Midnight Blue 1% → Ruby Steel 2% → Jade Green 3% → Obsidian 5%
+- Total-balance hero in monospace at the top of Home, with today's P&L
+- Pill-shaped CTAs (fully rounded), generous 18–24pt card radii — luxe, not terminal-tight
+- Quick-action circle row: Deposit / Send / Trade / Earn
+- Watchlist / Prices list: coin icon + symbol + name + mono price + colored % change
+- Earn / Stake CRO: APR rows, term selectors, allocation rings
+- Bottom tab bar (5) with an emphasized floating-circle center "Trade" action
+- Market semantics green `#00C08B` / red `#F6485D` — never inverted
+
+## 2. Color Palette & Roles
+
+### Brand (decorative / hero)
+- **Brand Navy** (`#002D74`): Deep institutional blue — hero gradient base, logo lockup, promo banners.
+- **Brand Navy 2** (`#103F68`): Lighter navy — gradient top, banner highlights, selected navy chips.
+- **Navy Gradient**: `linear-gradient(135deg, #002D74 0%, #103F68 100%)` — the signature brand sweep.
+
+### Primary (Interactive)
+- **Accent Blue** (`#1199FA`): Primary CTA, links, active tab, floating Trade button, selected states, focus rings.
+- **Accent Pressed** (`#0B7AD1`): Pressed state of accent buttons.
+- **Accent Tint** (`#1199FA1F`): 12% accent wash behind selected rows / info chips.
+
+### Market Semantics (never invert)
+- **Up / Buy Green** (`#00C08B`): Positive change, Buy button, gains, success.
+- **Down / Sell Red** (`#F6485D`): Negative change, Sell button, losses, error.
+
+### Card Metals (tier-specific, theme-invariant)
+- **Card Gold** (`#C8A24A`): Embossed tier name, chip, accents on dark card faces.
+- **Midnight Blue**: `linear-gradient(135deg,#1A1A1E,#2A2A30)` — 1% tier.
+- **Ruby Steel**: `linear-gradient(135deg,#5A1020,#8A1830)` — 2% tier.
+- **Jade Green**: `linear-gradient(135deg,#0E3A30,#14564A)` — 3% tier.
+- **Obsidian**: `linear-gradient(135deg,#0A0A0C,#26262C)` — 5% flagship tier.
+
+### Canvas & Surfaces (Dark — default)
+- **Canvas** (`#03060F`): Primary background — near-black with a cool blue cast.
+- **Surface 1** (`#0B1426`): Cards, sheets, list containers.
+- **Surface 2** (`#103F68`): Brand-navy elevated surfaces, promo cards (reuses Navy 2).
+- **Surface 3** (`#15263F`): Pressed rows, chip backgrounds, input fields.
+- **Divider** (`#1C3354`): 1pt hairlines.
+
+### Canvas & Surfaces (Light — secondary theme)
+- **Canvas Light** (`#FFFFFF`): Light background.
+- **Surface 1 Light** (`#F4F7FB`): Cards, grouped containers.
+- **Divider Light** (`#E3E9F2`): Hairline dividers.
+
+### Text
+- **Text Primary Dark** (`#F4F7FB`): Primary text, prices, headings.
+- **Text Secondary Dark** (`#8DA0BD`): Labels, metadata, secondary values (cool blue-gray).
+- **Text Tertiary Dark** (`#5B6E8C`): Disabled, very low-emphasis.
+- **Text Primary Light** (`#0A1F44`): Primary text on light (navy-black).
+- **Text Secondary Light** (`#5C6B85`): Secondary text on light.
+
+### Semantic (status)
+- **Success** (`#00C08B`): Confirmed deposit/trade (reuses Up Green).
+- **Error** (`#F6485D`): Failed action, validation (reuses Down Red).
+- **Warning** (`#F5A623`): Risk warnings, KYC pending.
+- **Info** (`#1199FA`): Informational toasts (reuses Accent).
+
+### Color → Role Table
+
+| Role | Dark | Light |
+|------|------|-------|
+| Canvas | `#03060F` | `#FFFFFF` |
+| Surface 1 | `#0B1426` | `#F4F7FB` |
+| Surface 3 | `#15263F` | `#EDF1F7` |
+| Divider | `#1C3354` | `#E3E9F2` |
+| Brand Navy | `#002D74` | `#002D74` |
+| Accent (interactive) | `#1199FA` | `#1199FA` |
+| Up / Buy | `#00C08B` | `#00C08B` |
+| Down / Sell | `#F6485D` | `#F6485D` |
+| Text primary | `#F4F7FB` | `#0A1F44` |
+| Text secondary | `#8DA0BD` | `#5C6B85` |
+| Link | `#1199FA` | `#1199FA` |
+
+## 3. Typography Rules
+
+### Font Family
+- **UI Sans**: Crypto.com's custom grotesque — use **Manrope** (by Mikhail Sharanda, SIL OFL) as the open stand-in. Geometric humanist with a confident, slightly tight feel.
+- **Numeric Mono**: **Roboto Mono** (by Christian Robertson, Apache 2.0) for all monetary figures, PAN, APR, %. Always tabular figures.
+- **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 | 800 | 1.2 | -0.6pt | Large nav title (Prices, Earn) |
+| Balance Hero | Mono | 30pt | 600 | 1.15 | -0.5pt | Total balance, tabular |
+| Section Title | Sans | 22pt | 800 | 1.25 | -0.2pt | "Your Visa Card", "Watchlist" |
+| Row Title | Sans | 18pt | 700 | 1.3 | -0.1pt | Coin name, detail heading |
+| Body | Sans | 16pt | 400 | 1.5 | 0pt | Descriptions, explanatory copy |
+| Price / Number | Mono | 15pt | 600 | 1.3 | 0pt | List prices, APR, % change |
+| List Label | Sans | 15pt | 700 | 1.3 | 0pt | "CRO Visa Card", labels |
+| Card PAN | Mono | 15pt | 500 | 1.3 | 2pt | Masked card number on Visa card |
+| Card Tier | Sans | 13pt | 700 | 1.0 | 1.5pt | Embossed tier name, uppercased |
+| Meta | Sans | 14pt | 400 | 1.4 | 0pt | Term, payout cadence, hints |
+| Pill / Chip | Sans | 13pt | 600 | 1.0 | 0pt | Filter chips, term chips |
+| Caption | Sans | 12pt | 600 | 1.35 | 0.1pt | "Available", footnotes |
+| Tab Label | Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Button | Sans | 15pt | 700 | 1.0 | 0pt | Primary / Buy / Sell |
+
+### Principles
+- **Sans for words, mono for money**: Balances, prices, %, APR, cashback, the card PAN — all monospace tabular. Words/labels are Manrope.
+- **Heavy headlines**: Titles and section heads at 700–800; the brand voice is confident, not delicate.
+- **Tabular figures always on numbers**: Prices align down the watchlist; the card number stays evenly spaced.
+- **Color encodes sign, not weight**: A +/- value's color (green/red) carries meaning; weight stays 600.
+- **Tight tracking on display sizes**: Screen titles and balance get slight negative letter-spacing for a modern, premium feel.
+- **Dynamic Type**: Titles, body, labels scale; card text (PAN/tier), numeric mono columns, and tab labels stay FIXED (layout-critical).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Buy Crypto / Confirm / Continue)**
+- Shape: Fully rounded pill (radius 500pt)
+- Background: `#1199FA` (Accent Blue)
+- Text: `#FFFFFF`
+- Padding: 13pt vertical, 28pt horizontal; full-width on forms (height 52pt)
+- Font: Sans 15pt weight 700
+- Pressed: background `#0B7AD1` + scale 0.98
+- Disabled: background `#1199FA` at 40% opacity, text white at 60%
+
+**Buy Button**
+- Background: `#00C08B`; Text `#FFFFFF`; pill; same metrics as primary
+- Pressed: darken ~12%
+
+**Sell Button**
+- Background: `#F6485D`; Text `#FFFFFF`; pill
+- Pressed: darken ~12%
+
+**Ghost / Secondary Button (Stake CRO / Learn more)**
+- Background: transparent; Text `#1199FA`
+- Border: 1.5pt `#1199FA`
+- Corner radius: pill; Padding: 11pt / 22pt
+- Font: Sans 14pt weight 700
+- Pressed: background `#1199FA1F`
+
+**Text Button (See all / View)**
+- Background: transparent; Text `#1199FA`; Font Sans 14pt weight 700; no underline
+- Pressed: text `#0B7AD1`
+
+**Quick-Action Circle**
+- 46pt circle, `#0B1426` bg, `#1199FA` 20pt glyph, label Sans 11pt w600 `#8DA0BD` beneath
+
+### Core Atoms
+
+**Coin Icon**
+- 34pt circle (30pt dense), brand-colored token glyph
+- BTC `#F7931A`, ETH `#627EEA`, CRO `#1199FA`, SOL `#14F195`
+
+**Percentage Change**
+- Mono 12–13pt w600, colored `#00C08B` (up) / `#F6485D` (down); no fill in lists (text only); pill-filled variant on price detail headers
+
+**APR Badge**
+- Mono 15pt w600 `#00C08B`, e.g. `8.00% APR`; or a pill `#00C08B1F` bg / `#00C08B` text
+
+**Visa Card** (signature — see Distinctive Components)
+
+**Term Chips (Earn)**
+- Pill, `#15263F` bg, `#8DA0BD` 13pt w600; selected `#1199FA1F` bg / `#1199FA` text — e.g. Flexible / 1M / 3M
+
+**Tag / Badge**
+- "NEW", "Staking", promo badges — pill, `#15263F` bg, `#8DA0BD` 10pt w700; reward badges use gold `#C8A24A`
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `#03060F` at 96% with 1pt top border `#1C3354`
+- Tabs (5): Home, Prices, **Trade (floating center)**, Earn, Card
+- Center "Trade": a 44pt `#1199FA` filled circle lifted -6pt above the bar with a white swap glyph — the signature focal action
+- Side icon size: 20pt
+- Active: `#1199FA` (filled icon + accent label)
+- Inactive: `#5B6E8C` (outline icon + tertiary label)
+- Labels: Sans 10pt w600, always shown (none under the center button)
+
+**Top Nav (detail screens)**
+- Height: 44pt + safe area
+- Leading: back chevron `#F4F7FB` 22pt
+- Center: title Sans 18pt w700
+- Trailing: search / share / ⋯ in `#F4F7FB`
+
+**Segmented Control (Spot/Margin, Buy/Sell)**
+- Pill track `#15263F`; selected thumb `#1199FA` (or `#00C08B`/`#F6485D` for Buy/Sell) with white text
+
+### Input Fields
+
+**Search Bar**
+- Height: 40pt; Background: `#15263F`; Border: none; Corner radius: 12pt
+- Leading `magnifyingglass` 16pt `#8DA0BD`
+- Placeholder: "Search coins" Sans 14pt `#8DA0BD`
+- Focus: 1.5pt `#1199FA` border
+
+**Amount Input (Buy/Sell/Send)**
+- Large centered Mono value (28–34pt) `#F4F7FB`, currency suffix `#8DA0BD`
+- Background often transparent on a dedicated amount screen; field variant: 52pt `#15263F`, 12pt radius
+- Trailing "MAX" text button in `#1199FA`
+- Error: helper text `#F6485D` 12pt + 1.5pt `#F6485D` border
+
+**Stepper (term/quantity)**
+- `−` / `+` circular `#15263F` buttons flanking a centered mono value
+
+### Distinctive Components
+
+**Metallic Visa Card** (the hero)
+- Aspect ratio ~1.586:1; corner radius 18pt; height ~168–200pt on phone
+- Background: tier-specific brushed-metal gradient (Midnight/Ruby/Jade/Obsidian — see Card Metals)
+- Subtle gloss overlay: a faint 8% white diagonal sheen top-left
+- Elements: embossed tier name top-left in `#C8A24A` Sans 13pt w700 +1.5px tracking uppercased; Crypto.com mark top-right (white); metal chip ~36×26pt rounded-5pt with gold gradient; masked PAN `5482 •••• •••• 7310` in Roboto Mono 15pt w500 +2px tracking bottom-left; cardholder name uppercased Sans 12pt w600 75% white; italic bold `VISA` wordmark bottom-right white
+- Shadow: `rgba(0,0,0,0.8) 0 14px 30px -14px` — the card "floats" with weight
+- Stacked-cards carousel when multiple cards; tap flips to reveal CVV/details
+
+**Total Balance Hero**
+- Label "Total Balance (USD)" Sans 12pt `#8DA0BD`
+- Value Roboto Mono 30pt w600 `#F4F7FB`, e.g. `$ 18,402.65`
+- Today P&L Mono 12pt colored green/red: `+$320.18 (+1.77%) Today`
+- Optional eye toggle to hide
+
+**Quick-Action Row**
+- 4 evenly-spaced circle actions (Deposit / Send / Trade / Earn), 46pt circles `#0B1426`, accent glyphs
+
+**Watchlist / Price Row**
+- ~56pt; 20pt horizontal / 11pt vertical padding
+- Layout: [coin icon 34pt] [symbol + full name stacked] [price + % stacked, right]
+- Symbol Sans 15pt w700 `#F4F7FB`; name Sans 12pt `#8DA0BD`
+- Price Mono 15pt w600 `#F4F7FB`; % Mono 12pt w600 colored
+- Optional sparkline (40×24) in row, colored to trend
+
+**Earn / Allocation Row**
+- [coin icon 30pt] [name + term/cadence] ··· [APR Mono 15pt w600 `#00C08B`]
+- Allocation ring: circular progress in accent/navy on `#15263F` track
+
+**Card Tier Selector**
+- Horizontal carousel of metal-gradient tier tiles; each shows tier name + cashback %; CRO-stake requirement under the flagship tiers
+
+**Promo / Brand Banner**
+- Full-width rounded (18pt) card with the Navy gradient (`#002D74 → #103F68`), white heading + accent CTA pill — the only place deep brand navy fills a large surface
+
+**Spot Trade Card**
+- Buy/Sell pill toggle, amount input, asset selector chip, fee line in `#8DA0BD`, full-width green/red submit pill
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40
+- Screen horizontal inset: 20pt (slightly generous — premium feel)
+- Card internal padding: 20pt; list row vertical padding: 11pt
+- Section header to first row: 10pt; inter-section gap: 20pt
+
+### Grid & Container
+- iPhone: 20pt horizontal insets; the Visa card is inset 20pt (not full-bleed) so its rounded metal edges read
+- Watchlist/Earn: single column, full-width rows separated by hairlines or surface cards
+- iPad: two-pane — list/home left, detail/trade right; card carousel scales up
+
+### Whitespace Philosophy
+- **Premium breathing room**: 20pt insets and generous card padding signal "private bank," not "dense terminal"
+- **The card gets air**: the Visa card sits in its own padded zone with shadow so it reads as a physical object
+- **Hairlines + cards mixed**: watchlist uses hairlines; promotional/earn content uses rounded surface cards
+- **One large navy moment**: deep brand navy only fills the promo banner; everywhere else navy is a tint or accent
+
+### Border Radius Scale
+- Square (0pt): full-bleed dividers, sparkline baselines
+- Subtle (6pt): small chips, badges, metal chip on card
+- Standard (10pt): inputs, small cards
+- Card (14pt): list/content cards, sheets
+- Hero Card (18pt): the Visa card, promo banners
+- Comfortable (24pt): bottom sheets, modals
+- Pill (500pt): all primary/secondary buttons, segmented controls, filter/term chips
+- Circle (50%): coin icons, quick-action circles, the floating Trade button, avatars
+
+## 6. Depth & Elevation
+
+Crypto.com uses moderate elevation — more than Binance (the card and CTAs are meant to feel tactile and premium) but still restrained. Depth comes from navy-tinted surface steps plus a few deliberate shadows.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow; surface step only | List rows, hairline-separated content |
+| Card (Level 1) | `rgba(0,0,0,0.35) 0 6px 16px` | Content cards, promo banners |
+| Hero Card (Level 2) | `rgba(0,0,0,0.8) 0 14px 30px -14px` | The metallic Visa card — heaviest, "floats" |
+| Floating Action (Level 2) | `rgba(17,153,250,0.4) 0 6px 16px` | The center Trade circle (accent-tinted glow) |
+| Sheet (Level 3) | `rgba(0,0,0,0.55) 0 -8px 28px` | Bottom sheets |
+| Modal Overlay | `rgba(0,0,0,0.6)` scrim | Behind modals |
+
+**Shadow Philosophy**: Shadows are reserved to make money-objects feel real — the Visa card carries the deepest shadow so it reads as a physical metal card; the floating Trade button gets an accent-tinted glow to draw the eye to the primary action. List content stays flat with surface steps. On the near-black canvas, floating panels also get a 1pt `#1C3354` border as a secondary elevation cue.
+
+### Motion
+- **Card flip**: tap the Visa card → 3D Y-axis flip (400ms ease-in-out) to reveal CVV/full PAN; soft haptic
+- **Card carousel**: horizontal paged scroll with subtle scale (0.94 → 1.0) on the focused card
+- **Balance reveal**: eye-toggle cross-dissolves the balance to `••••••` over 200ms
+- **Price tick**: list price text color-pulses to green/red briefly (~150ms) on update — subtle, not a full background flash
+- **Tab switch**: instant content swap; the floating Trade button does a 1.0→0.92→1.0 press-spring on tap
+- **Sheet present**: bottom sheet slides up 320ms ease-out; scrim fades
+- **Buy/Sell toggle**: thumb slides + color-morphs green↔red 200ms ease-out
+- **Pull-to-refresh**: accent circular spinner; haptic on trigger
+- **Confirmation**: a green check-circle scales in with a success haptic on completed trade/deposit
+- **Haptics**: soft impact on card flip, selection tick on term/segment change, success notification on completed transaction
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the navy-tinted canvas `#03060F` / `#0B1426` — cool blue undertone, never neutral gray
+- Treat the metallic Visa card as the hero — tier gradients, gold embossing, italic VISA, heavy shadow
+- Keep two blues distinct: Brand Navy `#002D74`/`#103F68` for hero/banners, Accent `#1199FA` for interaction
+- Use fully-rounded pill buttons and 18–24pt card radii — premium, not terminal-tight
+- Set all money (balance, price, APR, %, PAN) in Roboto Mono with tabular figures
+- Keep green `#00C08B` = up/buy and red `#F6485D` = down/sell — never inverted
+- Give the center Trade tab a floating accent circle with an accent-tinted glow
+- Map card tiers to cashback (Midnight 1% → Ruby 2% → Jade 3% → Obsidian 5%)
+- Show the total-balance hero with today's P&L at the top of Home
+- Fill large navy surfaces only for the promo/brand banner
+
+### Don't
+- Don't use a neutral gray dark theme — the canvas must carry a cool navy cast
+- Don't render the Visa card flat or with a single solid color — it must be a brushed-metal gradient with gloss and shadow
+- Don't use Brand Navy `#002D74` for clickable CTAs (use Accent `#1199FA`); don't use Accent for the hero gradient
+- Don't use sharp/small radii on cards or buttons — buttons are pills, cards are 14–18pt
+- Don't render prices/APR in a proportional sans — alignment and the card number break
+- Don't invert market colors in light mode (green stays up, red stays down)
+- Don't omit the floating center Trade action — it's a navigation signature
+- Don't put the embossed tier name in plain white — it's a gold/metal color (`#C8A24A`)
+- Don't fill the whole screen with deep navy — navy is decorative, used in banners/gradients only
+- Don't bold gains while leaving losses regular — color carries the sign
+- Don't drop the heavy shadow on the card — its physical weight is the brand
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Card height ~150pt; quick actions may wrap to 4-up tight |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
+| iPhone 15/16 Pro Max | 430pt | Card height ~200pt; larger balance hero |
+| iPad (portrait) | 768pt | Two-pane: home/list left + detail right; card carousel centered, larger |
+| iPad (landscape) | 1024pt+ | Three-pane: nav + list + detail/trade |
+
+### Dynamic Type
+- Screen titles, section heads, body, labels: scale with Dynamic Type
+- Card text (tier name, PAN), numeric mono columns (prices, APR, balance), tab labels: FIXED — scaling breaks the card layout and tabular alignment
+- The balance hero scales one step then truncates with ellipsis if extreme
+
+### Orientation
+- Portrait default everywhere
+- Card detail / chart screens support landscape (wider chart)
+- Home and Earn lock portrait
+
+### Touch Targets
+- Watchlist row: full-row tap, 56pt
+- Tab icons: 20pt glyph, 44pt+ hit; floating Trade circle: 44pt
+- Quick-action circles: 46pt
+- Pill buttons: ≥48pt tall
+- Card tap (flip): full card surface
+
+### Safe Area Handling
+- Top: nav respects safe area + Dynamic Island
+- Bottom: tab bar + home indicator respected; the floating Trade circle stays above the home indicator
+- Keyboard: amount inputs scroll above keyboard; the MAX button and confirm pill remain visible
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark): `#03060F`; Surface 1: `#0B1426`; Surface 3: `#15263F`; Divider: `#1C3354`
+- Brand Navy: `#002D74` → `#103F68` (hero gradient)
+- Accent (interactive): `#1199FA` (pressed `#0B7AD1`)
+- Up / Buy: `#00C08B`; Down / Sell: `#F6485D`
+- Card gold: `#C8A24A`
+- Text primary: `#F4F7FB` / secondary `#8DA0BD` / tertiary `#5B6E8C`
+- Link: `#1199FA`
+- Canvas (light): `#FFFFFF`; text primary light `#0A1F44`
+
+### Example Component Prompts
+- "Build the Crypto.com metallic Visa card in SwiftUI: a `RoundedRectangle(cornerRadius: 18)` with a `LinearGradient([#0A0A0C, #1A1A1E, #26262C], topLeading→bottomTrailing)` (Obsidian tier). Overlay a faint 8% white diagonal sheen. Top-left: 'OBSIDIAN' in Manrope 13pt w700, tracking 1.5, color `#C8A24A`. Top-right: white Crypto.com mark 22pt. A 36×26 rounded-5 gold-gradient chip. Bottom-left: masked PAN `5482 •••• •••• 7310` in Roboto Mono 15pt w500 tracking 2; cardholder name uppercased Manrope 12pt w600 at 75% white below. Bottom-right: italic bold `VISA` white. Apply shadow `color: .black.opacity(0.8), radius: 30, x: 0, y: 14`. Aspect ratio 1.586."
+
+- "Create the Crypto.com total-balance hero: label 'Total Balance (USD)' in Manrope 12pt `#8DA0BD`. Below: `$ 18,402.65` in Roboto Mono 30pt w600 `#F4F7FB` with `.monospacedDigit()`. Below: `+$320.18 (+1.77%) Today` in Roboto Mono 12pt colored `#00C08B`. Add a trailing eye toggle that cross-dissolves the value to `••••••` over 200ms."
+
+- "Build the Crypto.com watchlist row: 56pt tall, 20pt horizontal / 11pt vertical insets. Leading 34pt circular coin icon. A VStack: symbol `BTC` in Manrope 15pt w700 `#F4F7FB` and `Bitcoin` in Manrope 12pt `#8DA0BD`. Trailing VStack right-aligned: price `$67,284.10` in Roboto Mono 15pt w600 `#F4F7FB` and `+2.34%` in Roboto Mono 12pt w600 `#00C08B` (red `#F6485D` if negative)."
+
+- "Render the Crypto.com bottom tab bar: 5 items on a `#03060F`@96% bar, 1pt `#1C3354` top border. Side tabs Home/Prices/Earn/Card: 20pt icon, label Manrope 10pt w600; active `#1199FA` (filled icon), inactive `#5B6E8C`. The 3rd slot is a floating 44pt `#1199FA` circle lifted -6pt with a white swap glyph and an accent-tinted glow shadow `color: #1199FA.opacity(0.4), radius: 16, y: 6` — no label."
+
+- "Build the Crypto.com primary CTA: a fully-rounded pill (`Capsule()`), `#1199FA` background, white Manrope 15pt w700 text, 13pt vertical / 28pt horizontal padding, full-width 52pt on forms. Pressed: `#0B7AD1` + scale 0.98."
+
+- "Create the Crypto.com Earn row: leading 30pt coin icon, name `Cronos` Manrope 14pt w700 `#F4F7FB` with `3-month term` Manrope 11pt `#8DA0BD` below, trailing `8.00% APR` in Roboto Mono 15pt w600 `#00C08B`. Add a term-chip row above (Flexible / 1M / 3M) as pills `#15263F` → selected `#1199FA1F`/`#1199FA`."
+
+### Iteration Guide
+1. Canvas is navy-tinted dark `#03060F`/`#0B1426` — cool blue cast, never neutral gray
+2. Two blues: Brand Navy `#002D74`/`#103F68` is decorative (hero/banner); Accent `#1199FA` is interactive
+3. The metallic Visa card is the hero — tier gradient + gloss + gold embossing + heavy shadow + italic VISA
+4. Card tiers map to cashback: Midnight 1% → Ruby 2% → Jade 3% → Obsidian 5%
+5. All money (balance, price, APR, %, PAN) in Roboto Mono with tabular figures
+6. Buttons are full pills; cards are 14–18pt; the look is premium, not terminal-tight
+7. Up/buy `#00C08B`, down/sell `#F6485D`, never inverted across themes
+8. The center Trade tab is a floating `#1199FA` circle with an accent-tinted glow
+9. Total-balance hero + today's P&L sits at the top of Home
+10. Deep navy fills only the promo/brand banner; elsewhere it's a tint or accent — light theme keeps accent/navy/card metals unchanged