# Design System Inspiration of Charles Schwab (iOS)

## 1. Visual Theme & Atmosphere

The Charles Schwab iOS app is **the digital lobby of a 50-year-old brokerage** — confident, trustworthy, and built to make handling six- and seven-figure accounts feel safe rather than thrilling. Where a fintech challenger uses gradients and confetti, Schwab uses a deep maritime navy, a single bright cyan-blue action color, and rows of precisely-aligned numbers. Open the app and you land on the **Accounts** screen: a navy gradient hero carrying your **Total Value** in a large 34pt numeral and a green/red day-change line, then a stacked list of every account you hold — Individual Brokerage, Roth IRA, Schwab Bank Checking — each with its balance and percent change, and a prominent **Trade** button. The brand voice is "we have done this for decades; your money is in steady hands."

The signature gesture of the app is the **account-summary → trade pairing**: the Accounts list is the entry point, and the **trade ticket** is the destination. Tap an account → see Positions/Balances/Activity → tap a symbol → see the quote → tap **Trade** → land in the ticket: a segmented **Buy/Sell** control, Symbol, Quantity, Order type (Market/Limit/Stop), price, and a live **Estimated cost** card, finished by a **Review order** then **Place order** flow. This account → trade spine, and the ticket itself, is the most recognizable, most-used surface in the product and is treated as the visual centerpiece.

The color system is exceptionally restrained. The brand is **Schwab Blue** (`#009DDC`, the bright cyan-leaning blue from the logo) on **Schwab Navy** (`#003B5C`, the deep institutional navy). Schwab Blue is the one-and-only action color — primary buttons, the Trade CTA, selected toggles, links (brightened to `#46BEEC` Sky on dark for contrast). Everything else lives in a navy-to-greyscale scale. As with any serious brokerage, **green and red are reserved strictly for financial semantics**: a number is green if it gained, red if it lost, neutral if flat — never a decorative green success state or a red destructive button that could be mistaken for a price move. The only saturated pixels on screen are the blue brand action and the green/red of performance.

Typography is a **clean humanist sans with tabular numerics**. Schwab's brand face is a custom humanist sans ("Charles Modern" in their system); on iOS it falls back to SF Pro, and the closest free substitute is **Source Sans 3** (Adobe, SIL OFL) — an open, legible humanist sans that matches Schwab's measured, professional tone. Every monetary figure — total value, account balances, prices, quantities, percentages, estimated cost — is set in **tabular lining figures** so columns align perfectly down the accounts list and trade ticket. Headings are 700–800 weight; body is 400; numbers lean 700–800 so the eye lands on the value.

**Key Characteristics:**
- Deep maritime navy surfaces — light `#FFFFFF` / navy `#0A1622` dark — confident, institutional, calm
- Schwab Blue (`#009DDC`) as the single action color on Schwab Navy (`#003B5C`)
- Navy gradient account hero (`#003B5C → #002A42`) carrying Total Value — kept even on dark
- Green/red strictly financial semantics — gain `#16895F`/`#18B07B`, loss `#C8443D`/`#E2564E`
- Account → trade spine — Accounts → Account detail → Quote → Trade ticket
- The trade ticket is the visual centerpiece — segmented Buy/Sell + tabular fields + estimated-cost card
- Tabular / monospaced numerals — balances, prices, quantities align down every column
- Accounts list cell: account icon, name, masked number, balance, % change
- Balances tiles — Cash available / Buying power / Market value / Day change in a 2-up grid
- Bottom tab bar: Accounts / Trade / Research / Messages / More — five-tab institutional nav

## 2. Color Palette & Roles

### Primary (Interactive / Brand)
- **Schwab Blue** (`#009DDC`): The single primary action color — Trade CTA, primary buttons, selected toggle fills, brand moments. On-color text is dark navy `#002233` (the blue is bright enough that white-on-blue fails contrast at small sizes).
- **Schwab Blue Pressed** (`#0080B5`): Pressed state of the primary button.
- **Schwab Navy** (`#003B5C`): Deep brand navy — account hero gradient, headers, secondary "Transfer" / banking actions (white text), brand lockups.
- **Sky Accent** (`#0078A8` on light / `#46BEEC` on dark): Links, selected tab tint, inline text actions where contrast on the dark navy requires a brighter blue.

### Canvas & Surfaces (Light Mode)
- **Canvas White** (`#FFFFFF`): Primary light canvas.
- **Surface Tint** (`#F2F6F8`): Grouped-list background, cards.
- **Surface Pressed** (`#E6EDF1`): Pressed / selected rows.
- **Divider** (`#DBE3E8`): Hairline dividers between list rows.
- **Hairline Strong** (`#C3CFD6`): Section separators, table rules.

### Canvas & Surfaces (Dark Mode)
- **Dark Canvas** (`#0A1622`): Primary dark canvas — Schwab's maritime navy, NOT pure black.
- **Dark Surface 1** (`#11212F`): Cards, grouped sections, elevated surfaces.
- **Dark Surface 2** (`#18303F`): Account icons, raised rows, pressed surfaces, ticket fields.
- **Dark Divider** (`#1F3A4A`): Hairline dividers.
- **Hero Gradient** (`#003B5C → #002A42`): Account hero — same on light & dark.

### Text
- **Text Primary Light** (`#10222E`): Primary text — deep navy-black.
- **Text Secondary Light** (`#5A707C`): Metadata, labels.
- **Text Tertiary Light** (`#8597A0`): Disabled, lowest emphasis.
- **Text Primary Dark** (`#E6EEF3`): Primary text on dark.
- **Text Secondary Dark** (`#9DB2BF`): Metadata on dark.
- **Text Tertiary Dark** (`#6A8392`): Disabled on dark.
- **On-Hero Text** (`#FFFFFF` primary / `#9DC4D8` secondary): Text inside the navy hero.

### Semantic — Financial (the most important colors in the system)
| Role | Light Mode | Dark Mode | Use |
|------|-----------|-----------|-----|
| Gain (positive) | `#16895F` | `#18B07B` | Positive change, positive $ delta / % |
| Loss (negative) | `#C8443D` | `#E2564E` | Negative change, negative $ delta / % |
| Flat (unchanged) | `#5A707C` | `#9DB2BF` | 0.00% — uses secondary text color |
| On-Hero Gain | `#5FE3B0` | `#5FE3B0` | Day-change line inside the navy hero (brightened for navy bg) |

### Semantic — System
- **Error / Alert** (`#C8443D` light / `#E2564E` dark): Form validation, blocked-trade banners (visually identical to Loss — context disambiguates).
- **Warning Amber** (`#C8862B`): Caution banners, market-closed / extended-hours notices.
- **Success Confirmation** (`#16895F` light / `#18B07B` dark): Order-placed confirmation (same as Gain — intentional brand consistency).
- **Info Blue** (`#0078A8`): Informational links to disclosures, "Learn more".
- **Gold Tier** (`#C8A24B`): Schwab private-client / premium accent, rewards badges.

## 3. Typography Rules

### Font Family
- **Brand**: `Charles Modern` — Schwab's custom humanist sans used across brand and product.
- **iOS Fallback**: `-apple-system, 'SF Pro Text', 'SF Pro Display'` — system face on device.
- **Recommended free substitute**: `Source Sans 3` (by Paul D. Hunt for Adobe, SIL OFL) — open humanist sans, the closest free match for Schwab's measured professional tone.
- **Numeric treatment**: Tabular / monospaced lining figures **everywhere money appears** (total value, balances, prices, quantities, %, estimated cost). In Source Sans 3 use `font-feature-settings: "tnum" 1;`; on SF use `.monospacedDigit()`.
- **Fallback Stack**: `'Charles Modern', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Total Value Hero | Source Sans 3 | 34pt | 800 | 1.1 | -0.6pt | Total Value in the navy hero — tabular |
| Screen Title | Source Sans 3 | 26pt | 800 | 1.2 | -0.3pt | "Accounts", "Trade" — large title |
| Section Header | Source Sans 3 | 22pt | 700 | 1.25 | -0.2pt | "Place a trade", "Balances" |
| Card Title | Source Sans 3 | 18pt | 700 | 1.3 | -0.1pt | Account / position names |
| Body | Source Sans 3 | 16pt | 400 | 1.5 | 0pt | Paragraph copy, disclosures |
| Row Value | Source Sans 3 | 16pt | 800 | 1.3 | 0pt | Balance / value in a row — tabular |
| Account Name | Source Sans 3 | 15pt | 700 | 1.3 | 0pt | Account name in a list row |
| Meta | Source Sans 3 | 14pt | 400 | 1.4 | 0pt | "As of 4:00 PM ET · Delayed", masks |
| Numeric Mono | Source Sans 3 (tnum) | 13pt | 700 | 1.3 | 0pt | $ delta + % line — always tabular |
| Caption | Source Sans 3 | 12pt | 600 | 1.35 | 0pt | Account mask, footnotes |
| Button | Source Sans 3 | 16pt | 800 | 1.0 | 0.2pt | Primary / secondary buttons |
| Tab Label | Source Sans 3 | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Ticket Field | Source Sans 3 (tnum) | 16pt | 800 | 1.0 | 0pt | Right-aligned trade-ticket values |

### Principles
- **Money is tabular, always**: every currency figure, price, quantity, and percentage uses lining tabular figures so the accounts list and trade ticket align column-perfect. This is the most recognizable typographic trait.
- **Weight signals data importance**: total value and balances are 800; labels are 400–600. The number reads first.
- **Headings are bold humanist**: 700–800 weight, slightly negative tracking — confident and professional, never light or condensed.
- **Restrained scale**: compact ramp (10 → 34pt). Hierarchy is weight + tabular emphasis, not dramatic size jumps.
- **Dynamic Type first-class**: total value, titles, body, meta scale; tab labels, ticket field values, and table headers stay fixed for layout integrity.

## 4. Component Stylings

### Buttons

**Primary Button (Trade / Review order / Place order)**
- Shape: Rounded rectangle, 8pt corner radius
- Background: `#009DDC` (Schwab Blue)
- Text: `#002233` (dark navy — the blue is too bright for white text at body size), Source Sans 3 16pt weight 800
- Padding: 14–15pt vertical, 28pt horizontal; full-width variant spans content inset
- Pressed: background `#0080B5` + scale 0.98
- Disabled: `#009DDC` at 40% opacity, text at 60%
- Sticky variant: pinned to bottom safe area on quote / ticket screens with a 0.5pt top divider + surface backdrop

**Navy / Secondary Action Button (Transfer / Move money)**
- Background: `#003B5C` (Schwab Navy)
- Text: `#FFFFFF`, Source Sans 3 16pt weight 800
- Same shape / padding as primary
- Pressed: darken 10% + scale 0.98

**Outline Button (Add funds / Secondary)**
- Background: transparent
- Border: 1.5pt `#0078A8` light / `#46BEEC` dark
- Text: `#0078A8` light / `#46BEEC` dark, Source Sans 3 15pt weight 700
- Corner radius: 8pt
- Pressed: 8% blue tint fill

**Pill / Filter Button**
- Background: `#F2F6F8` light / `#18303F` dark
- Border: 1pt divider
- Text: primary text, Source Sans 3 14pt weight 600
- Corner radius: 500pt (pill)
- Selected: fill `#009DDC`, text `#002233`

**Text Button (View all activity / All accounts)**
- Text: `#0078A8` light / `#46BEEC` dark, Source Sans 3 14pt weight 700
- No background, no underline
- Pressed: 60% opacity

### Core Atoms

**Account Card / List Cell**
- Height: 66pt
- Leading: 38pt account-type icon — `#18303F` rounded 10pt, glyph stroked in Sky `#46BEEC` (chart for brokerage, clock for retirement, card for bank)
- Middle: account name (15pt w700) over masked number (12pt w600 secondary, e.g. "Brokerage ••4471")
- Trailing (right-aligned): balance (16pt w800 tabular) over % change (12pt w700, gain green / loss red)
- Divider: 0.5pt hairline below
- Pressed: full-row `#18303F` highlight; chevron disclosure optional

**Account Hero (navy gradient)**
- Background: linear-gradient `#003B5C → #002A42`, 160°
- Row 1: screen title (22pt w800 white) + bell/alerts circular icon button
- "TOTAL VALUE" label: 12pt w600 `#9DC4D8`, uppercase, 0.2pt tracking
- Total value: 34pt w800 white tabular
- Day-change line: ▲/▼ + `+$5,204.18` (13pt w700 tabular `#5FE3B0` gain) + `(+0.86%) today` (`#9DC4D8`)

**Trade Ticket** (the centerpiece)
- Container: `#18303F` card, 12pt radius, 16pt padding
- Segmented Buy/Sell: inset track `#0A1622`, 8pt radius, 3pt padding; active segment `#009DDC` fill, text `#002233` 13pt w700; inactive text secondary
- Field rows: label (13pt w600 secondary, left) + value (16pt w800 tabular, right-aligned); 1pt divider between rows
- Estimated-cost row: same layout, value emphasized
- Sticky **Review order** primary button below; Review screen restates everything before **Place order**

**Balances Tiles**
- 2-column grid, 12pt gap
- Tile: `#18303F`, 12pt radius, 14×16pt padding
- Label (12pt w600 secondary) over value (19pt w800 tabular); day-change tile colors the value gain/loss

**Quote Card**
- `#18303F`, 12pt radius; symbol (16pt w800) + name (12pt secondary) | price (16pt w800 tabular) + % (12pt w700 gain/loss)

### Navigation

**Bottom Tab Bar**
- Height: 56pt + safe area
- Background: surface with `saturate(180%) blur(20px)` translucency, 0.5pt top divider
- Tabs (5): Accounts, Trade, Research, Messages, More
- Icon size: 22pt
- Active: `#46BEEC` (dark) / `#0078A8` (light), filled glyph
- Inactive: tertiary text, stroked glyph
- Labels: Source Sans 3 10pt w600, always shown

**Top Nav (Account / Quote / Ticket screens)**
- Height: 44pt + safe area
- Leading: back chevron + screen/account title (collapses on scroll past hero)
- Trailing: alerts bell + ⋯ overflow (statements, settings, share)
- Large-title collapses to inline on scroll (iOS large-title pattern); hero is the navy gradient block

**Segmented Control (Positions / Balances / Activity on an account)**
- Underline style: active segment carries a 2pt `#009DDC` underline, label primary; inactive secondary
- Height: 44pt; equal-width segments

### Input Fields

**Search Bar (Find a symbol / Research)**
- Height: 40pt
- Background: `#F2F6F8` / `#18303F`, 8pt corner radius
- Leading magnifier 16pt secondary; placeholder "Search symbol or keyword" 14pt secondary
- Focus: 1.5pt `#009DDC` border

**Trade Ticket Field (Quantity / Limit price)**
- Inline within the ticket card: label left, value right-aligned 16pt w800 tabular
- Tapping a field opens a numeric keypad sheet; the focused row shows a 1.5pt `#009DDC` bottom rule
- Error: row rule `#C8443D`, helper text loss red 12pt

### Distinctive Components

**Trade Ticket (full)**
- Symbol header (last price 22pt w800 tabular + day change gain/loss), Buy/Sell segmented, Quantity, Order type (Market/Limit/Stop) selector, price field (for limit/stop), Time-in-force, Estimated-cost card, sticky **Review order**
- Review screen: read-only restatement of every field in tabular figures + a final `#009DDC` **Place order** button; success screen with confirmation number

**Account Detail (Positions / Balances / Activity)**
- Segmented underline header; Positions = symbol/qty/value table (tabular, right-aligned, sortable); Balances = tiles grid; Activity = dated transaction rows

**Positions Table**
- Columns: Symbol | Qty | Price | Mkt value (tabular, right-aligned); sortable headers; flat hairline rows; footer total in 800 weight

**Research / Quote Detail**
- Symbol header, line/candlestick chart with range tabs (1D/5D/1M/6M/1Y/5Y), bid/ask, key stats grid, news list; sticky Trade button

**Message Center Row**
- Subject (16pt w700, unread = dot + bolder), preview (13pt secondary 1-line), timestamp (12pt secondary)

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
- List row vertical padding: 14pt; account cell height target 66pt
- Section header top margin: 16pt
- Screen content inset: 20pt horizontal (16pt for full-bleed hero / cards)

### Grid & Container
- iPhone: content at 20pt horizontal insets; the navy hero is full-bleed
- iPad: two-pane — accounts/research rail (360pt) + detail/ticket pane; max content width 760pt centered
- Lists are single-column hairline-separated; cards reserved for hero, ticket, balances tiles, quote

### Whitespace Philosophy
- **Trust through order**: rows are evenly spaced, numbers right-aligned, columns true — the layout itself signals precision
- **The hero gets weight**: the navy total-value block is given generous vertical room; lists below are efficient
- **Cards only where grouping matters**: hero, trade ticket, balances tiles, quote — never a card around a plain account row

### Border Radius Scale
- Square (0pt): Full-bleed hero, table rules, status bar region
- Subtle (4pt): Inline chips, small tags
- Standard (8pt): Buttons, search bar, segmented track, pills
- Comfortable (12pt): Cards (account hero inner, ticket, balances tiles, quote)
- Large (16–20pt): Bottom sheets, modal containers
- Pill (500pt): Filter pills, segmented toggles
- Circle (50%): Avatars, circular icon buttons (bell)

## 6. Depth & Elevation

Schwab is mostly flat — depth is functional, never decorative.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Account rows, plain sections, dividers |
| Hero (Level 1) | Navy gradient block, no shadow | Total-value hero |
| Card (Level 1) | `rgba(0,0,0,0.06) 0 1px 3px` light / 1pt `#1F3A4A` border dark | Ticket / balances / quote cards |
| Sticky Bar (Level 2) | 0.5pt top divider + `saturate(180%) blur(20px)` backdrop | Sticky Trade / Review-order bar, tab bar |
| Sheet (Level 3) | `rgba(0,0,0,0.14) 0 -4px 24px` | Trade keypad sheet, order-type picker, filter sheet |
| Modal Scrim | `rgba(0,0,0,0.45)` | Dim behind sheets / alerts |

**Shadow Philosophy**: shadows say "grouped" or "floating and dismissible" — nothing more. On dark mode, shadows vanish against `#0A1622`, so cards and floating panels get a 1pt `#1F3A4A` border as the elevation cue. The navy hero needs no shadow — its gradient and color separate it from the canvas naturally. The sticky bar uses a translucent blurred backdrop so list content reads faintly beneath it.

### Motion
- **Total value / balance updates**: live ticks cross-fade the digit color to gain/loss for ~600ms then settle; digits do not roll (calm money UI)
- **Trade segmented toggle**: the active `#009DDC` pill slides between Buy/Sell over 200ms ease-out
- **Chart range switch**: tapping 1D→1Y morphs the path over 280ms ease-out
- **Push navigation**: standard iOS push (300ms horizontal slide) Accounts → Account → Quote → Ticket
- **Sticky Trade / Review button**: always visible; gains a top divider as content scrolls beneath
- **Trade keypad / order-type sheet**: slides up 300ms ease-out; Review pushes within the flow
- **Tab switch**: instant content swap; selected icon fills and tints with a 120ms cross-fade
- **Pull-to-refresh**: Schwab Blue spinner; light-impact haptic on trigger
- **Haptics**: light impact on tab change, segmented toggle, range-tab change; medium impact on "Place order"; success notification haptic on order accepted

## 7. Do's and Don'ts

### Do
- Use Schwab Blue (`#009DDC`) as the single action color; Schwab Navy (`#003B5C`) for the hero and money-movement actions
- Put dark navy text on Schwab Blue buttons (`#002233`) — white-on-`#009DDC` fails contrast at body sizes
- Reserve green/red strictly for financial semantics — gain `#16895F`/`#18B07B`, loss `#C8443D`/`#E2564E`
- Set every monetary figure in tabular/monospaced lining figures so the accounts list and ticket align
- Lead with the navy total-value hero — 34pt, bold, day-change line, kept even on dark
- Treat the trade ticket as the visual centerpiece — segmented Buy/Sell + tabular right-aligned fields + estimated-cost card
- Keep the Accounts → Account → Quote → Trade spine consistent in every screen's chrome
- Use a deep maritime navy `#0A1622` for dark mode — never pure black
- Use flat hairline single-column rows for the accounts list; cards only for hero/ticket/tiles/quote
- Use a 2-up Balances tile grid for Cash / Buying power / Market value / Day change

### Don't
- Don't use white text on Schwab Blue buttons — contrast fails; use dark navy `#002233`
- Don't use red for a generic destructive button or green for a non-financial success in a way that reads as a price move
- Don't use proportional figures for money — columns must align; tabular is mandatory
- Don't add marketing illustrations, mascots, or photographic heroes to core trading screens
- Don't animate the digits of a changing balance with a roll — only a brief color cross-fade
- Don't use pure black (`#000000`) for the dark canvas — `#0A1622` maritime navy is correct
- Don't put card borders/shadows around plain account rows — they are flat hairlines
- Don't introduce a second saturated accent — palette is Schwab Blue + semantic green/red on navy-greyscale
- Don't drop the navy gradient from the hero on dark mode — it carries the brand identity
- Don't over-animate; money UI is calm — 120–300ms ease-out, no bounce on financial data

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Total value 30pt; tighter 16pt insets; tiles stack to 1-up if cramped |
| iPhone 15/16 | 393pt | Standard layout; total value 34pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above the navy hero |
| iPhone 15/16 Pro Max | 430pt | Total value 38pt; larger account rows |
| iPad (portrait) | 768pt | Two-pane: accounts/research rail (360pt) + detail/ticket pane |
| iPad (landscape) | 1024pt+ | Three-zone: nav rail + accounts list + ticket/quote detail |

### Dynamic Type
- Total value, screen title, section header, body, meta: full scale
- Tab labels, ticket field values, table column headers: FIXED (layout-sensitive)
- Tabular numerals remain tabular at all sizes (never substitute proportional)

### Orientation
- iPhone: portrait-primary; chart screens may rotate to a full-screen landscape chart with crosshair scrub
- iPad: split-view controller — primary rail + secondary detail; rotation preserves selection

### Touch Targets
- Account row: 66pt tall, full-row tap
- Tab bar icon: 22pt glyph, 56pt hit
- Segmented Buy/Sell: 40pt tall segments, full-segment tap
- Sticky Trade / Review button: 52pt tall minimum
- Bell / circular icon button: 34pt, 44pt hit

### Safe Area Handling
- Top: navy hero + top nav respect safe area and Dynamic Island
- Bottom: sticky Trade/Review button and tab bar respect home indicator; both add safe-area padding
- Keyboard: the numeric keypad sheet positions over the ticket; sticky bar repositions above it
- Sides: 20pt content inset; hero / cards extend to 16pt or full-bleed

## 9. Agent Prompt Guide

### Quick Color Reference
- Brand action (Schwab Blue): `#009DDC` — on-color text `#002233`
- Schwab Navy (hero / money movement): `#003B5C`
- Sky accent (dark links / selected): `#46BEEC` / light `#0078A8`
- Canvas (light): `#FFFFFF` / (dark): `#0A1622`
- Surface 1 (dark): `#11212F` · Surface 2 (dark): `#18303F`
- Divider (dark): `#1F3A4A` · (light): `#DBE3E8`
- Text primary: `#10222E` light / `#E6EEF3` dark
- Text secondary: `#5A707C` light / `#9DB2BF` dark
- Gain: `#16895F` light / `#18B07B` dark
- Loss: `#C8443D` light / `#E2564E` dark
- On-hero gain: `#5FE3B0` · Hero gradient: `#003B5C → #002A42`
- Gold tier: `#C8A24B` · Info link: `#0078A8`

### Example Component Prompts
- "Build the Schwab Accounts hero in SwiftUI: a 160° linear gradient `#003B5C → #002A42` block, full-bleed. Row 1: 'Accounts' (22pt w800 white) and a 34pt circular bell button (`rgba(255,255,255,0.10)` fill, white stroke icon). 'TOTAL VALUE' label (12pt w600 `#9DC4D8`, uppercase). Total `$612,408.55` in Source Sans 3 34pt w800 white `.monospacedDigit()`. Day-change line: `▲ +$5,204.18` (13pt w700 `#5FE3B0`) + `(+0.86%) today` in `#9DC4D8`."

- "Create a Schwab account card: 66pt tall, leading 38pt icon chip (`#18303F` bg, 10pt radius, glyph stroked `#46BEEC`), middle = account name 15pt w700 over masked number 12pt w600 `#9DB2BF` ('Brokerage ••4471'), trailing right-aligned = balance 16pt w800 tabular over % change 12pt w700 (`#18B07B` up / `#E2564E` down). 0.5pt `#1F3A4A` divider below; pressed = full-row `#18303F`."

- "Build the Schwab trade ticket: a `#18303F` card (12pt radius, 16pt padding). Segmented Buy/Sell — inset `#0A1622` track, 8pt radius, 3pt pad; active segment `#009DDC` fill text `#002233` 13pt w700, inactive `#9DB2BF`. Then field rows (Symbol, Quantity, Order type, Limit price, Est. cost): label 13pt w600 `#9DB2BF` left + value 16pt w800 tabular right-aligned, 1pt `#1F3A4A` divider between. Below, a full-width `#009DDC` 'Review order' button (text `#002233` 16pt w800, 8pt radius, 52pt tall)."

- "Render the Schwab sticky Trade bar: pinned to bottom safe area, surface backdrop `saturate(180%) blur(20px)`, 0.5pt `#1F3A4A` top divider, a full-width `#009DDC` button 'Trade' (text `#002233` Source Sans 3 16pt w800, 52pt tall, 8pt radius); pressed `#0080B5` + scale 0.98; medium haptic on tap."

- "Create the Schwab Balances tiles: a 2-column grid, 12pt gap. Each tile `#18303F`, 12pt radius, 14×16pt padding: label 12pt w600 `#9DB2BF` over value 19pt w800 tabular. The 'Day change' tile colors its value `#18B07B` if positive (`#E2564E` if negative). Cash available / Buying power / Market value / Day change."

- "Render a Schwab segmented control (Positions / Balances / Activity): equal-width segments, 44pt tall; active segment label `#E6EEF3` with a 2pt `#009DDC` underline; inactive `#9DB2BF`; switching slides nothing — just swaps the underline + content, light haptic."

### Iteration Guide
1. Canvas is `#FFFFFF` light / maritime navy `#0A1622` dark — never pure black, never gray
2. Schwab Blue `#009DDC` is the ONE action color; Schwab Navy `#003B5C` for hero + money movement — nothing else saturated except semantics
3. Dark navy text on Schwab Blue buttons (`#002233`) — white-on-blue fails contrast
4. Green/red mean gain/loss ONLY — `#16895F`/`#18B07B` gain, `#C8443D`/`#E2564E` loss — never decorative
5. Every dollar, price, %, and quantity uses tabular/monospaced figures so columns align — non-negotiable
6. The navy total-value hero leads — 34pt w800, day-change line, gradient kept even on dark
7. The trade ticket is the centerpiece — segmented Buy/Sell + right-aligned tabular fields + estimated-cost card
8. The spine is Accounts → Account → Quote → Trade ticket — one calm chrome on every step
9. Accounts are flat hairline single-column rows — cards only for hero/ticket/tiles/quote
10. Motion is calm — color cross-fade on balance ticks, 200ms segmented slide, 280ms chart morph, no rolling digits