designmd-forge 1.2.0

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

@@ -0,0 +1,385 @@
+# Design System Inspiration of SoFi (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+SoFi's iOS app is a **premium one-stop financial command center** — banking, investing, borrowing, and rewards under a single membership. The visual language signals "modern, ambitious, all-in-one wealth platform" rather than a single-purpose budgeting app, so the design leans confident and dark-native: an **electric SoFi Blue (`#00A0DF`)** sitting on a **deep navy (`#0A0E27`)** ground. This blue-on-navy pairing is so core to SoFi's marketing that the app reads like it was *designed for dark mode first* — the navy is the canonical brand canvas in both themes, and electric blue is the energy that cuts through it.
+
+The signature screen is the **member home dashboard**. It opens with a full-bleed **member hero** — a `#00A0DF → #1B53C4 → #0A0E27` diagonal gradient panel carrying a friendly greeting, the member's **net worth** rendered huge in white (40pt 800), and a green pill showing the month's change ("+$1,840.22 this month"). Below the gradient sits the **account/product tile grid**: a 2-column set of rounded cards — Checking & Savings (with APY), Invest (with today's %), Loans (with the next payment due), Credit Card (with cash-back) — each a small blue-soft icon chip, a label, a big value, and a colored sub-stat. Below that, a "Recent activity" relay list. The dashboard's job is to make a multi-product financial life feel unified and in-control on one screen — that consolidated net-worth-plus-tiles view is the heart of SoFi.
+
+The other SoFi-defining moment is the **product tile / cross-sell card** — SoFi's whole business is one member using many products, so the home and the Invest/Borrow tabs surface rounded cards ("Active Invest — Stocks, ETFs & crypto", "Loan in minutes — check your rate, no credit impact") with a blue-soft icon, a title, and a one-line value prop. The second fixture is the **performance treatment**: gains in green (`#2FD08A`), losses in coral (`#FF6B6B`), rewards in gold (`#F2C14E`) — applied consistently to investment %s, account deltas, and the rewards points loop.
+
+Typography is a clean, confident geometric sans — production SoFi uses a brand-tuned face; **Manrope** is the faithful free stand-in (semibold-forward, modern, tight tracking at display sizes). Hierarchy is wealth-dashboard: the net-worth hero is huge (40pt 800), screen titles 32pt, section headers 22pt, tile values 18-19pt, body 16pt, row titles 15pt, meta 14pt, captions 12pt. Numbers are always 700-800 — net worth, balances, and percentages are the data the member came for. The tone is **bold, confident, dark, and consolidated**.
+
+**Key Characteristics:**
+- Dark-native brand — electric **SoFi Blue** (`#00A0DF`) on deep **navy** (`#0A0E27`); navy is the canonical canvas in both themes
+- The **member hero** is a `#00A0DF → #1B53C4 → #0A0E27` gradient panel with net worth in white + a green month-change pill
+- **Account/product tile grid** — 2-column rounded cards (Banking, Invest, Loans, Card) each with an icon chip, value, and colored sub-stat
+- **Cross-sell product cards** — "one member, many products" is the business; rounded cards with a blue-soft icon + value prop
+- Performance colors: gains green (`#2FD08A`), losses coral (`#FF6B6B`), rewards gold (`#F2C14E`)
+- Blue brightens to `#29C2FF` for accents, links, and active tabs so it pops on navy
+- Fully **pill-shaped buttons** (500pt radius) — premium fintech, not boxy
+- Heavily rounded tiles (18pt) on lifted navy surfaces (`#121736` / `#1B2147`)
+- Manrope typography — confident geometric sans; numbers always 700-800
+- Bottom tab bar: Home, Invest, Banking, Borrow, Me — active in bright blue
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **SoFi Blue** (`#00A0DF`): Primary brand + interactive color — member-hero gradient base, primary pill buttons, logomark.
+- **Blue Bright** (`#29C2FF`): Brighter blue for accents, links, "See all", active tabs, icon glyphs on navy.
+- **Blue Pressed** (`#0086BC`): Pressed state on blue buttons.
+- **Blue Soft Fill** (`#E6F4FB` light / `#0E2A44` dark): Tinted backgrounds for soft buttons, tile icon chips.
+
+### Canvas & Surfaces (Dark-Native — canonical)
+- **Navy Canvas** (`#0A0E27`): The canonical brand canvas — deep navy, used in dark mode and as the marketing ground.
+- **Surface 1** (`#121736`): Cards, tiles, list containers on navy.
+- **Surface 2** (`#1B2147`): Elevated cards, sheets, pressed rows.
+- **Divider** (`#252C55`): Hairline between rows and tile borders.
+
+### Canvas & Surfaces (Light Mode)
+- **Light Canvas** (`#F4F7FB`): The light-mode ground — a cool off-white (the brand identity still stays navy + blue).
+- **Light Surface 1** (`#FFFFFF`): Cards, tiles in light mode.
+- **Light Surface 2** (`#EEF2F8`): Pressed rows, secondary fills.
+- **Light Divider** (`#E2E7F0`): Hairline dividers in light mode.
+
+### Text (on navy / dark-native)
+- **Text Primary** (`#E8EBF7`): Primary body, tile values, row titles.
+- **Text Secondary** (`#9BA3C7`): Metadata, labels, captions.
+- **Text Tertiary** (`#6B7299`): Disabled, low emphasis.
+- **On-Gradient White** (`#FFFFFF`): All text over the member hero gradient.
+- **On-Blue Ink** (`#042235`): Near-black blue ink on solid `#00A0DF` buttons for contrast.
+
+### Text (Light Mode)
+- **Text Primary Light** (`#0C1330`): Primary body in light mode.
+- **Text Secondary Light** (`#5A6286`): Metadata in light mode.
+
+### Semantic
+
+| Role | Dark-Native | Light Mode | Use |
+|------|-------------|-----------|-----|
+| Positive / Gain | `#2FD08A` | `#0FA968` | Investment gains, "+$" deltas, "+%", APY uplift |
+| Negative / Loss | `#FF6B6B` | `#E0484D` | Investment losses, "-%", payment-due warnings |
+| Rewards Gold | `#F2C14E` | `#C8920F` | Rewards points, cash-back, member perks |
+| Info / Link | `#29C2FF` | `#0086BC` | Links, "See all", informational accents |
+| Success | `#2FD08A` | `#0FA968` | Transfer/success confirmation |
+| Attention | `#FF6B6B` | `#E0484D` | Errors, due dates, alerts |
+
+**Performance is color-coded, not neutral.** Unlike a pure spending app, SoFi *does* color money movement — investment and net-worth changes use green/coral because performance is the point. The green month-change pill on the hero is a signature.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: A confident geometric sans. Production SoFi uses a brand-tuned face; **`Manrope`** (by Mikhail Sharanda / Mirko Velimirovic, SIL OFL) is the faithful free stand-in — semibold-forward, modern, tight at display sizes, excellent number legibility.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numeric**: Use tabular/lining figures for net worth, balances, and amounts (`font-variant-numeric: tabular-nums`).
+- **Monospace**: not used in product UI.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Net Worth Hero | Manrope | 40pt | 800 | 1.05 | -1.2pt | The net-worth figure on the member gradient |
+| Screen Title | Manrope | 32pt | 800 | 1.15 | -0.6pt | Large nav title ("Invest", "Borrow") |
+| Section Header | Manrope | 22pt | 700 | 1.2 | -0.3pt | "Recent activity", "Your accounts" |
+| Tile Value | Manrope | 18pt | 700 | 1.25 | -0.4pt | Account/product tile balance (19pt on large devices) |
+| Card Title | Manrope | 16pt | 700 | 1.3 | -0.1pt | Cross-sell card title |
+| Body | Manrope | 16pt | 400 | 1.5 | 0pt | Descriptions, value props |
+| Row Title | Manrope | 15pt | 700 | 1.3 | 0pt | Activity row name |
+| Amount | Manrope | 15pt | 800 | 1.2 | 0pt | Activity amount (tabular) |
+| Meta | Manrope | 14pt | 400 | 1.4 | 0pt | "Today · Auto-invest" |
+| Caption / Sub-stat | Manrope | 12pt | 600 | 1.4 | 0.1pt | "3.80% APY", "+2.4% today", chip text |
+| Button | Manrope | 16pt | 700 | 1.0 | 0pt | Primary / secondary pill buttons |
+| Tab Label | Manrope | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Chip | Manrope | 12pt | 700 | 1.0 | 0.1pt | Status chip text |
+| Link | Manrope | 13pt | 700 | 1.3 | 0pt | "See all", inline links |
+
+### Principles
+- **Net worth is the loudest thing**: 40pt 800 in white on the gradient, tracking -1.2pt — the consolidated number is the headline.
+- **Numbers are always 700-800**: net worth, tile values, balances, percentages — all heavy and tabular so the wealth picture is instantly scannable and aligned.
+- **Confident weights**: 400 body, 600 captions, 700 row titles/headers/buttons, 800 hero/screen titles. Semibold-forward — modern and assured, never thin.
+- **Consolidated hierarchy**: the eye goes net worth → account tiles → activity; the multi-product life is organized, not chaotic.
+- **Dynamic Type first-class**: hero, titles, headers, body, row titles, meta scale; tab labels and chip text stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Transfer money", "Invest now", "Continue")**
+- Shape: **Full pill, 500pt corner radius** (SoFi is pill-shaped, not boxy)
+- Background: `#00A0DF` (SoFi Blue)
+- Text: `#042235` (near-black blue ink), Manrope 16pt weight 700
+- Padding: 14pt vertical, 28pt horizontal; min height 52pt
+- Pressed: background `#0086BC` + scale 0.98
+- Disabled: background `#00A0DF` 35% / text `#042235` 50%
+
+**Secondary / Outline Button ("Invest now", "Learn more")**
+- Background: transparent
+- Text: `#29C2FF` (Blue Bright), Manrope 15pt weight 700
+- Border: 1.5pt `#00A0DF`
+- Shape: full pill, 500pt radius
+- Padding: 12pt vertical, 24pt horizontal
+- Pressed: background `#0E2A44` (Blue Soft)
+
+**Soft Button ("Add account", quick actions)**
+- Background: `#E6F4FB` light / `#0E2A44` dark (Blue Soft Fill)
+- Text: `#0086BC` light / `#29C2FF` dark, Manrope 14pt weight 700
+- Shape: full pill, 500pt radius; no border
+- Padding: 12pt vertical, 20pt horizontal
+
+**Text Button ("See all activity")**
+- Font: Manrope 13-14pt weight 700
+- Color: `#29C2FF` (dark) / `#0086BC` (light)
+- No background, no border, no underline
+
+### Member Hero (the signature surface)
+
+- Container: full-bleed, extends into the top safe area; rounded only at the bottom is optional (often full-bleed top, content padded)
+- Background: linear gradient `#00A0DF → #1B53C4 → #0A0E27` (≈165°) — blends into the navy canvas at the bottom
+- Top row: greeting ("Good morning, Alex") Manrope 18pt 700 white + notification/profile icons (22pt white)
+- Net-worth label: "Net worth" Manrope 13pt 600 `rgba(255,255,255,0.75)`
+- Net-worth value: Manrope 40pt 800 white, tracking -1.2pt, tabular
+- Change pill: "+$1,840.22 this month" Manrope 13pt 700, green `#6EF0B6` on `rgba(47,208,138,0.18)`, 500pt pill, with an up-arrow glyph
+
+### Account / Product Tile (core atom)
+
+- Layout: 2-column grid, 12pt gap, each tile 18pt corner radius
+- Container: Surface 1, 1pt divider border
+- Icon chip: 36pt rounded (11pt) `#0E2A44`/`#E6F4FB` with an 18pt `#29C2FF`/`#0086BC` stroked glyph
+- Label: Manrope 12pt 600 `#9BA3C7`
+- Value: Manrope 18-19pt 800 `#E8EBF7`, tracking -0.4pt, tabular
+- Sub-stat: Manrope 11-12pt 600 — green (`#2FD08A` gain/APY), coral (`#FF6B6B` due/loss), or gold (`#F2C14E` rewards)
+- Tappable → product detail screen
+
+### Cross-Sell Product Card (distinctive component)
+
+- Container: Surface 2, 1pt divider, 18pt radius, 16pt padding
+- Icon chip: 36pt rounded (11pt) `#0E2A44` with an 18pt `#29C2FF` glyph
+- Title: Manrope 14-16pt 700 `#E8EBF7`
+- Value prop: Manrope 12pt 400 `#9BA3C7`, 1-2 lines ("Stocks, ETFs & crypto, no commissions")
+- Often in a horizontal carousel of products on the home / Invest / Borrow tabs
+
+### Activity (Relay) Row
+
+- Layout: 40pt rounded (13pt) icon tile + name/meta column + right-aligned amount
+- Icon tile: gradient or blue-soft, glyph tinted by product (blue for invest/banking, gold for rewards)
+- Name: Manrope 15pt 700 `#E8EBF7`
+- Meta: Manrope 14pt 400 `#9BA3C7` — "Today · Auto-invest"
+- Amount: Manrope 15pt 800, tabular; **positive green** (`#2FD08A`, "+$2,140.55"), **negative neutral ink** (`#E8EBF7`, "-$250.00") — investment buys are neutral, gains/income are green
+- Separator: 1pt `#252C55` divider; no card border
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 49pt + safe area
+- Background: Navy / blurred, 0.5pt top divider `#252C55`
+- Tabs (5): Home, Invest, Banking, Borrow, Me
+- Icon size: 22pt; active `#29C2FF` (icon fills solid); inactive `#6B7299`
+- Labels: Manrope 10pt weight 600, always shown
+- No tint pill — just bright-blue color + filled icon swap
+
+**Top of Member Home**
+- The gradient hero *is* the top — no separate nav bar; greeting + icons live inside the gradient
+
+**Top Nav (sub-screens)**
+- Height: 44pt + safe area
+- Leading back chevron (white on gradient screens, primary text elsewhere)
+- Centered compact title; optional trailing action
+
+### Input Fields
+
+**Amount Entry (Transfer / Invest)**
+- Large centered amount, Manrope 40pt 800, blue cursor; "$" prefix `#9BA3C7`
+- Funding-source row below (account + balance)
+- Numeric keypad sheet
+
+**Text Field**
+- Height: 52pt
+- Background: Surface 1 / Light Surface 1
+- Corner radius: 14pt
+- Floating label on focus; focus ring 1.5pt `#00A0DF`
+- Placeholder Manrope 16pt 400 `#6B7299`
+
+### Distinctive Components
+
+**Member Hero Gradient** — see above; the single most recognizable SoFi surface.
+
+**Account/Product Tile Grid** — see above; the consolidated multi-product view.
+
+**Cross-Sell Product Card** — see above; "one member, many products" embodied.
+
+**Performance Chip**
+- Pill, 500pt radius, Manrope 12pt 700, 7×14pt padding
+- Active: `#0E2A44`/`#E6F4FB` bg, `#29C2FF`/`#0086BC` text
+- Up: `rgba(47,208,138,0.16)` bg, `#2FD08A` text, "▲ +2.4%"
+- Down: `rgba(255,107,107,0.16)` bg, `#FF6B6B` text, "▼ -0.8%"
+- Rewards: `rgba(242,193,78,0.16)` bg, `#F2C14E` text, "+1,240 pts"
+
+**Net-Worth Change Pill** — the green/coral month-delta pill on the hero (signature).
+
+**Rewards Loop**
+- Gold accent throughout — points balance, "earn points" CTAs, cash-back tiles — gold `#F2C14E`
+
+**Sparkline / Mini Chart**
+- On Invest tiles and detail: a thin blue (`#29C2FF`) line, green/coral fill area depending on direction
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Screen horizontal inset: 16pt (tiles) / 20pt (headers, section labels, gradient content)
+- Tile grid: 2 columns, 12pt gap, 16-18pt internal padding
+- Activity row vertical padding: 12pt with a hairline divider
+
+### Grid & Container
+- iPhone: gradient hero full-bleed; tile grid 2-col at 16pt insets
+- iPad: content centered max 680pt; tiles 3-col; hero scales
+- Cross-sell cards: horizontal carousel, ~78% viewport-width peeking cards
+
+### Whitespace Philosophy
+- **The gradient owns the top**: the member hero is full-bleed and tall, blending into the navy — it sets the premium tone before any content
+- **Organized density below**: tiles are a clean 2-col grid with comfortable padding; the multi-product life feels structured, not crowded
+- **Pills everywhere**: buttons and chips are fully rounded — the pill language signals modern, premium fintech
+- **Rounded tiles on lifted navy**: structure comes from rounded `#121736`/`#1B2147` surfaces and faint dividers, not hard borders
+
+### Border Radius Scale
+- Square (0pt): full-bleed gradient top edge (blends, no corner)
+- Subtle (8pt): nested inline elements
+- Standard (11-12pt): tile icon chips, small fills
+- Card (16pt): cross-sell cards, sheets
+- Tile (18pt): account/product tiles, feature cards
+- Comfortable (24pt): large promo cards, bottom-sheet tops
+- Pill (500pt): all buttons, status chips, the change pill
+- Circle (50%): avatars, the logomark dot
+
+## 6. Depth & Elevation
+
+SoFi uses subtle elevation on a dark ground — the gradient itself is the primary "depth," and cards lift gently off navy:
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Activity rows, content on navy (separated by dividers) |
+| Tile (Level 1) | `rgba(0,0,0,0.25) 0 2px 12px` + 1pt `#252C55` border | Account/product tiles, cross-sell cards |
+| Gradient Hero (Level 2) | The gradient itself + soft inner depth | The member hero — color *is* the elevation |
+| Sheet (Level 3) | `rgba(0,0,0,0.4) 0 -8px 28px` | Bottom sheets (transfer, invest), modals |
+| Modal Overlay | `rgba(5,8,20,0.5)` | Scrim behind sheets and modals |
+
+**Shadow Philosophy**: On a dark navy ground, drop shadows are weak, so SoFi separates surfaces with **1pt `#252C55` borders + a soft dark shadow** on tiles, and lets the **gradient hero carry the visual hierarchy** at the top (the color transition reads as depth and importance). In light mode, tiles use a soft neutral shadow instead of the border. The gradient is the brand's signature elevation cue.
+
+### Motion
+- **Net-worth count-up**: on home load / after a transfer, net worth rolls from previous → new over 600ms ease-out
+- **Gradient parallax**: the hero gradient scrolls slightly slower than content (~0.7×), deepening the premium feel
+- **Tile press**: 150ms scale to 0.97 + subtle border brighten on touch-down
+- **Performance tick**: investment %s and the change pill animate value + color when data refreshes (200ms)
+- **Cross-sell carousel**: snap-paged horizontal scroll with 300ms decel; peeking next card
+- **Transfer / invest success**: a blue check draws in (stroke animation, 500ms) + success haptic; net worth re-counts
+- **Tab switch**: instant; active icon fills bright blue, no slide
+- **Pull to refresh**: a blue spinner; tiles + net worth re-animate if changed
+- **Haptic feedback**: medium on transfer/invest success, light on tile and tab taps, soft on pull-refresh release
+
+## 7. Do's and Don'ts
+
+### Do
+- Treat SoFi as dark-native — electric blue `#00A0DF` on deep navy `#0A0E27`; navy is the canonical canvas
+- Open the member home with the `#00A0DF → #1B53C4 → #0A0E27` gradient hero carrying net worth in white
+- Show the consolidated 2-column account/product tile grid below the hero
+- Brighten blue to `#29C2FF` for accents, links, and active tabs so it pops on navy
+- Color performance: gains green `#2FD08A`, losses coral `#FF6B6B`, rewards gold `#F2C14E`
+- Use the green/coral month-change pill on the hero — it's a signature
+- Make every button a full pill (500pt radius) — premium, never boxy
+- Surface cross-sell product cards ("one member, many products" is the business)
+- Set net worth, balances, and percentages in heavy tabular figures (700-800)
+- Lift tiles off navy with a 1pt `#252C55` border + soft dark shadow
+
+### Don't
+- Don't use a neutral or light gray ground — the brand is navy `#0A0E27` even where light mode lifts surfaces
+- Don't render the member hero as a flat solid — the blue→navy gradient is the signature
+- Don't use boxy/sharp buttons — SoFi buttons are fully pill-shaped
+- Don't make blue dull on navy — accents brighten to `#29C2FF`
+- Don't make performance neutral — gains/losses are green/coral; that's the point of a wealth app
+- Don't bury net worth — it's the loudest element, 40pt 800 white on the gradient
+- Don't render amounts in proportional figures — use tabular so columns align
+- Don't hide cross-sell — multi-product membership is SoFi's core model
+- Don't use a Material tint pill on tabs — active is just bright-blue color + filled icon
+- Don't drop the rewards-gold accent — the points/cash-back loop is a brand pillar
+- Don't animate harshly — motion is smooth ease-outs and snaps, haptics measured
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Net worth 34pt; gradient hero shorter; tiles slightly tighter |
+| iPhone 13/14/15 | 390pt | Standard layout; net worth 40pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the in-gradient top row |
+| iPhone 15/16 Pro Max | 430pt | Net worth 44pt; larger tiles; more gradient height |
+| iPad (portrait) | 768pt | Content centered max 680pt; tile grid 3-col; hero scales |
+| iPad (landscape) | 1024pt+ | Two-pane: dashboard + product detail; hero in the left column |
+
+### Dynamic Type
+- Net worth, screen titles, section headers, tile values, body, row titles, meta: full scale
+- Tab labels, chip text, the change-pill ratio: FIXED (layout-sensitive)
+- Amounts scale but stay tabular so columns keep aligning
+
+### Orientation
+- All screens rotate
+- iPad landscape pins a master dashboard beside a detail pane
+- The gradient hero re-fits and re-centers on rotation
+
+### Touch Targets
+- Tab bar icons: 22pt glyph, 49pt bar, 44pt hit
+- Tile: full-tile tappable, ≥ 96pt tall
+- Cross-sell card: full-card tap
+- Primary pill buttons: 52pt min height
+- Performance chips (if interactive): 44pt hit
+
+### Safe Area Handling
+- Top: the gradient hero extends into the top safe area; the in-gradient top row insets below the Dynamic Island
+- Bottom: tab bar + home indicator respected; sheet CTAs sit above the home indicator
+- Keyboard: amount keypad is a sheet; content scrolls above it
+- Sides: 16pt tile inset, 20pt header/gradient-content inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Navy canvas (canonical): `#0A0E27`
+- Light canvas: `#F4F7FB`
+- Surface 1: `#121736` (navy) / `#FFFFFF` (light)
+- Surface 2: `#1B2147` (navy) / `#EEF2F8` (light)
+- Divider: `#252C55` (navy) / `#E2E7F0` (light)
+- Text primary: `#E8EBF7` (navy) / `#0C1330` (light)
+- Text secondary: `#9BA3C7` (navy) / `#5A6286` (light)
+- SoFi Blue: `#00A0DF`
+- Blue Bright: `#29C2FF`
+- Blue Pressed: `#0086BC`
+- Blue Soft Fill: `#0E2A44` (navy) / `#E6F4FB` (light)
+- On-blue ink: `#042235`
+- Gradient: `#00A0DF → #1B53C4 → #0A0E27` (≈165°)
+- Positive / gain: `#2FD08A` (navy) / `#0FA968` (light)
+- Negative / loss: `#FF6B6B` (navy) / `#E0484D` (light)
+- Rewards gold: `#F2C14E` (navy) / `#C8920F` (light)
+
+### Example Component Prompts
+- "Build the SoFi member hero in SwiftUI: a full-bleed panel that extends into the top safe area with a `#00A0DF → #1B53C4 → #0A0E27` 165° linear gradient blending into the navy canvas at the bottom. Top row: greeting 'Good morning, Alex' Manrope 18pt 700 white + a notification bell and profile icon (22pt white), inset below the Dynamic Island. Below: 'Net worth' Manrope 13pt 600 `rgba(255,255,255,0.75)`; the net-worth figure '$84,210.55' Manrope 40pt 800 white tracking -1.2pt tabular; and a change pill '+$1,840.22 this month' Manrope 13pt 700 `#6EF0B6` on `rgba(47,208,138,0.18)`, 500pt pill, with a leading up-arrow glyph."
+
+- "Create a SoFi account tile: a 2-column-grid card, 18pt corner radius, Surface-1 `#121736` background, 1pt `#252C55` border. Inside: a 36pt rounded (11pt) `#0E2A44` icon chip with an 18pt `#29C2FF` stroked glyph; a label Manrope 12pt 600 `#9BA3C7` ('Invest'); a value Manrope 18pt 800 `#E8EBF7` tracking -0.4pt tabular ('$31,884.02'); and a sub-stat Manrope 12pt 600 colored by meaning — green `#2FD08A` for gains/APY ('+2.4% today'), coral `#FF6B6B` for due/loss ('$402 due Jun 1'), gold `#F2C14E` for rewards. Whole tile tappable."
+
+- "Render a SoFi cross-sell product card: Surface-2 `#1B2147`, 1pt `#252C55` border, 18pt radius, 16pt padding. A 36pt rounded (11pt) `#0E2A44` icon chip with an 18pt `#29C2FF` glyph; a title Manrope 16pt 700 `#E8EBF7` ('Active Invest'); a value-prop line Manrope 12pt 400 `#9BA3C7` ('Stocks, ETFs & crypto, no commissions'). Lay several out in a horizontal snap carousel with ~78%-width peeking cards."
+
+- "Create the SoFi primary button: a FULL PILL (500pt corner radius), `#00A0DF` background, `#042235` near-black blue ink text Manrope 16pt 700, 14pt vertical / 28pt horizontal padding, 52pt min height. Pressed: `#0086BC` + scale 0.98. Add an outline variant: transparent, 1.5pt `#00A0DF` border, `#29C2FF` text, same pill shape; and a soft variant: `#0E2A44` bg, `#29C2FF` text, no border, same pill."
+
+- "Build a SoFi activity row: a 40pt rounded (13pt) icon tile (gradient/blue-soft, glyph tinted blue for invest/banking or gold for rewards), a name Manrope 15pt 700 `#E8EBF7`, a meta line Manrope 14pt 400 `#9BA3C7` ('Today · Auto-invest'), and a right-aligned amount Manrope 15pt 800 tabular — POSITIVE/income green `#2FD08A` ('+$2,140.55'), investment buys NEUTRAL ink `#E8EBF7` ('-$250.00'). Separate rows with a 1pt `#252C55` hairline, no card border."
+
+- "Render the SoFi bottom tab bar: 49pt + safe area, navy `#0A0E27` blurred, 0.5pt top `#252C55` divider, 5 tabs — Home, Invest, Banking, Borrow, Me — 22pt icons, Manrope 10pt 600 labels always shown. Active `#29C2FF` with the icon filled solid; inactive `#6B7299`. No tint pill, no slide."
+
+### Iteration Guide
+1. SoFi is dark-native — electric blue `#00A0DF` on deep navy `#0A0E27`; navy is the canonical canvas in BOTH themes
+2. The member home opens with the `#00A0DF → #1B53C4 → #0A0E27` gradient hero carrying net worth in white + a green change pill
+3. Below the hero is a consolidated 2-column account/product tile grid (Banking, Invest, Loans, Card) with colored sub-stats
+4. Blue brightens to `#29C2FF` for accents, links, and active tabs so it reads on navy
+5. Performance is color-coded: gains green `#2FD08A`, losses coral `#FF6B6B`, rewards gold `#F2C14E` — not neutral
+6. Every button is a FULL PILL (500pt radius) — premium fintech, never boxy
+7. Surface cross-sell product cards — "one member, many products" is SoFi's core business model
+8. Net worth, balances, percentages are heavy (700-800) and tabular so the wealth picture aligns
+9. Tiles lift off navy with a 1pt `#252C55` border + soft dark shadow; the gradient is the signature elevation
+10. Manrope throughout; motion is smooth ease-outs / snaps (net-worth count-up, gradient parallax), haptics measured