Fidelity DESIGN.md

1. Visual Theme & Atmosphere

Fidelity's iOS app is institutional calm rendered as software. It is the home screen of one of the largest brokerages in the world, and the design carries that weight: the interface is dense with numbers, but the chrome around those numbers is deliberately quiet so the data never has to compete with decoration. Open the app and you land on the Summary screen — a greeting, your total account value set in a huge 34pt numeral, a green/red day-change line, a sparkline, and then a stacked list of accounts, watchlist symbols, and positions. There is no hero photograph, no marketing illustration, no playful empty-state mascot. The "hero" is your money, typeset large.

The signature gesture of the app is the portfolio + quote pairing: the Summary screen's value header and sparkline sit directly above a tap-through list that opens a full quote screen — symbol, last price, day change, an interactive line/candlestick chart with 1D/1W/1M/1Y/5Y/All ranges, bid/ask, and a sticky Trade button pinned to the bottom. This drill path (Summary → Account → Position → Quote → Trade ticket) is the spine of the entire product, and every screen on it shares the same visual language: a calm dark or light surface, a green primary action, and semantic green/red for performance.

The color system is unusually disciplined. Fidelity's brand is Fidelity Green (#368727) with a deeper Heritage Green (#00754A) — these carry logos, primary buttons, selected states, and brand moments. The single most important rule in the entire system is that green and red are reserved for financial semantics: a number is green if it gained, red if it lost, neutral gray if flat. The app never uses red for a destructive button styling or green for a generic success toast in a way that could be confused with a price move. Everything else — backgrounds, dividers, labels, icons — lives in a near-greyscale scale (with a faint green cast in dark mode) so the only saturated pixels on screen are the ones that mean something financially.

Typography is a clean grotesque sans paired with a tabular/monospaced numeric treatment. Fidelity's brand face is a custom grotesque ("Average Sans" family in their brand system); on iOS it falls back to SF Pro, and a faithful free substitute is Inter. Balances, prices, percentages, and dollar deltas are set with tabular figures so columns of money line up perfectly down a list — this monospaced-numeral discipline is a core part of the brand's "we are precise with your money" feeling. Headings are 700 weight; body is 400; numeric data leans 600–700 for emphasis.

Key Characteristics:

• Calm institutional surfaces — light #FFFFFF / deep evergreen #0E1411 dark — minimum chrome, maximum data
• Fidelity Green (#368727) + Heritage Green (#00754A) brand anchors — primary actions, logos, selected states
• Green/red are sacred financial semantics (#15833E gain / #D32F2F loss light; #15B374 / #E5544B dark) — never decorative
• Total account value as the screen hero — 34pt numeral, day-change line, sparkline directly below
• Portfolio → quote drill path is the product spine — Summary → Account → Position → Quote → Trade
• Tabular / monospaced numerals — money columns align perfectly down every list
• Sparkline + range tabs (1D / 1W / 1M / 1Y / 5Y / All) — the recurring chart unit
• Sticky bottom Trade button on every quote screen — the primary conversion affordance
• Bottom tab bar: Summary / Planning / Invest / News / Profile — five-tab institutional nav
• Watchlist + holdings rows: ticker chip, name, price, % change — the atomic list cell

2. Color Palette & Roles

Primary (Interactive / Brand)

• Fidelity Green (#368727): Primary brand & action color — Trade button, primary CTAs, brand moments, selected toggle fills.
• Fidelity Green Pressed (#2A6B1F): Pressed state of the primary button.
• Heritage Green (#00754A): Deeper brand green — secondary brand surfaces, logo lockups, "Transfer" / banking actions, headers.
• Leaf Accent (#4FB23B light contexts use #368727; dark uses #4FB23B): Links, selected tab tint, inline text actions where contrast on dark requires a brighter green.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas.
• Surface Gray (#F4F6F4): Grouped-list background, cards, subtle elevated rows.
• Surface Pressed (#E8ECE8): Pressed / selected rows.
• Divider (#E1E5E1): Hairline dividers between list rows.
• Hairline Strong (#C9D0CA): Section separators, table rules.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#0E1411): Primary dark canvas — Fidelity's evergreen-tinted dark, NOT pure black.
• Dark Surface 1 (#16201B): Cards, grouped sections, elevated surfaces.
• Dark Surface 2 (#1F2C24): Ticker chips, raised rows, pressed surfaces.
• Dark Divider (#26342B): Hairline dividers.

Text

• Text Primary Light (#1A1F1B): Primary text — near-black with a faint warm-green cast.
• Text Secondary Light (#5A655C): Metadata, labels, secondary rows.
• Text Tertiary Light (#8A938C): Disabled, lowest emphasis.
• Text Primary Dark (#E8EFE9): Primary text on dark.
• Text Secondary Dark (#9DB0A2): Metadata on dark.
• Text Tertiary Dark (#6B7E72): Disabled on dark.

Semantic — Financial (the most important colors in the system)

Semantic — System

• Error / Alert (#D32F2F light / #E5544B dark): Form validation, blocked-action banners (visually identical to Loss — context disambiguates).
• Warning Amber (#C8862B): Caution banners, pending-transfer notices.
• Success Confirmation (#15833E light / #15B374 dark): Order-placed confirmation (same as Gain — intentional brand consistency).
• Info Blue (#1E6FB8): Informational links to disclosures, "Learn more".
• Gold Tier (#C8A24B): Premium / Private Client Group accent, rewards tier badges.

3. Typography Rules

Font Family

• Brand: Average Sans — Fidelity's custom grotesque sans used across brand and product.
• iOS Fallback: -apple-system, 'SF Pro Text', 'SF Pro Display' — system face on device.
• Recommended free substitute: Inter (by Rasmus Andersson, SIL OFL) — geometric humanist grotesque with excellent tabular-figure support, the closest free match.
• Numeric treatment: Tabular / monospaced lining figures everywhere money appears (balances, prices, %, $ deltas, table columns). In Inter use font-feature-settings: "tnum" 1;; on SF use .monospacedDigit().
• Fallback Stack: 'Average Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

Hierarchy

Principles

• Money is tabular, always: every figure that represents currency, a price, a quantity, or a percentage uses lining tabular figures so columns align down a list. This is the single most recognizable typographic trait of the brand.
• Weight signals data importance: balances and prices are 700–800; labels are 400–500. The eye should land on the number first.
• Headings are bold grotesque: 700 weight, slightly negative tracking — institutional, confident, never light or condensed.
• Restrained scale: the type ramp is compact (10 → 34pt). Hierarchy comes from weight and tabular emphasis, not dramatic size jumps.
• Dynamic Type first-class: balance, titles, body, meta scale; tab labels, range tabs, and chart-axis labels stay fixed for layout integrity.

4. Component Stylings

Buttons

Primary Button (Trade / Continue / Place Order)

• Shape: Rounded rectangle, 8pt corner radius
• Background: #368727 (Fidelity Green)
• Text: #FFFFFF, Inter 16pt weight 700
• Padding: 14pt vertical, 28pt horizontal; full-width variant spans content inset minus 16pt
• Pressed: background #2A6B1F + scale 0.98
• Disabled: #368727 at 40% opacity, text #FFFFFF at 60%
• Sticky variant: pinned to bottom safe area on quote / trade screens with a 0.5pt top divider and surface backdrop

Heritage / Secondary Action Button (Transfer / Move money)

• Background: #00754A (Heritage Green)
• Text: #FFFFFF, Inter 16pt weight 700
• Same shape / padding as primary
• Pressed: darken 10% + scale 0.98

Outline Button (Add to watchlist / Secondary)

• Background: transparent
• Border: 1.5pt #368727 light / #4FB23B dark
• Text: #368727 light / #4FB23B dark, Inter 15pt weight 700
• Corner radius: 8pt
• Pressed: 8% green tint fill

Pill / Filter Button

• Background: #F4F6F4 light / #1F2C24 dark
• Border: 1pt divider
• Text: primary text, Inter 14pt weight 600
• Corner radius: 500pt (pill)
• Selected: fill #368727, text #FFFFFF

Text Button (View all holdings / Edit)

• Text: #368727 light / #4FB23B dark, Inter 14pt weight 700
• No background, no underline
• Pressed: 60% opacity

Core Atoms

Holding / Watchlist Row

• Height: 64pt
• Leading: 38pt ticker chip — #F4F6F4 / #1F2C24 rounded 10pt, symbol in 12pt weight 800; brand-held funds tint to 18% green
• Middle: symbol (15pt w600) over name (12pt w400 secondary, truncates)
• Trailing (right-aligned): value (16pt w700 tabular) over % change (12pt w600, gain green / loss red)
• Divider: 0.5pt hairline below
• Pressed: full-row #E8ECE8 / surface-2 highlight; chevron disclosure optional

Balance Header Block

• Greeting: 13pt w500 secondary
• Screen title: 26pt w700
• "Total account value" label: 12pt w500 secondary
• Balance: 34pt w800 tabular
• Day-change line: triangle glyph + +$3,841.20 (13pt w600 tabular gain/loss) + (+0.90%) today (muted)

Sparkline / Area Chart

• Stroke: 2pt — #4FB23B (gain day) or #E5544B (loss day)
• Fill: vertical gradient of the stroke color, 32% → 0% opacity
• Baseline: optional 0.5pt dashed divider at the open price
• Range tabs below: 1D / 1W / 1M / 1Y / 5Y / All — 11pt w600 pills; active = #368727 fill, white text

Quote Card

• Background: #F4F6F4 / #1F2C24, 12pt corner radius, 14×16pt padding
• Left: symbol (16pt w800) over name (12pt secondary)
• Right: price (16pt w700 tabular) over % (12pt w700 gain/loss)

Performance Pill

• Padding: 8pt × 14pt, 8pt corner radius
• Gain: bg #15B37429 (16% gain green), text gain green, leading ▲
• Loss: bg #E5544B29, text loss red, leading ▼
• Flat: bg surface-2, text secondary, leading —

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: surface with saturate(180%) blur(20px) translucency, 0.5pt top divider
• Tabs (5): Summary, Planning, Invest, News, Profile
• Icon size: 22pt
• Active: #4FB23B (dark) / #368727 (light), filled glyph
• Inactive: tertiary text, stroked glyph
• Labels: Inter 10pt w600, always shown

Top Nav (Quote / Detail screens)

• Height: 44pt + safe area
• Leading: back chevron + screen/symbol title (compact, appears on scroll past hero)
• Trailing: watchlist star (toggle) + ⋯ overflow (alerts, share, account actions)
• Large-title collapses to inline title on scroll (iOS large-title pattern)

Segmented Control (Positions / Activity / Balances on an account)

• Underline style: active segment carries a 2pt #368727 underline, label in primary; inactive in secondary
• Height: 44pt; full-width equal segments

Input Fields

Search Bar (Find a symbol)

• Height: 40pt
• Background: #F4F6F4 / #1F2C24, 8pt corner radius
• Leading magnifier 16pt secondary; placeholder "Search quotes & news" 14pt secondary
• Focus: 1.5pt #368727 border

Trade Ticket Field (Quantity / Limit price)

• Height: 52pt
• Background: surface, 8pt corner radius, 1pt divider border
• Label floats above (12pt w600 secondary); value 18pt w700 tabular, right-aligned
• Focus: border #368727 1.5pt
• Error: border #D32F2F, helper text in loss red 12pt

Distinctive Components

Trade Ticket

• Full-sheet form: symbol header (price + day change), Action (Buy/Sell segmented), Quantity, Order type (Market/Limit/Stop), Time-in-force, estimated cost summary card, sticky Preview order primary button
• Estimated-cost card: surface, 12pt radius, label/value rows with tabular figures
• Review screen restates everything before a final green Place order button

Account Summary Card

• Account name + masked number (••3814), 18pt w700 title
• Value: 22pt w800 tabular
• Day change line in gain/loss
• Tap → account detail (Positions / Activity / Balances segmented)

Positions Table

• Columns: Symbol | Last | Day chg % | Mkt value (tabular, right-aligned)
• Sortable headers; alternating-free flat rows separated by hairlines
• Footer total row in 700 weight

News / Research Tile

• Headline (16pt w700, 2-line clamp), source + timestamp (12pt secondary), optional related-symbol chips with inline gain/loss

Performance Donut / Asset-Allocation Ring

• Ring segments use a calm tonal palette (greens + neutral grays + one gold for "Other"); center shows total value tabular; legend rows below with % tabular

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
• List row vertical padding: 12pt; row height target 64pt
• Section header top margin: 20pt
• Screen content inset: 20pt horizontal (16pt for full-bleed cards/charts)

Grid & Container

• iPhone: content at 20pt horizontal insets; charts and grouped cards may extend to 16pt
• iPad: grouped two-column layout — accounts/watchlist rail + detail pane; max content width 760pt centered
• Lists are single-column, hairline-separated; no card borders on simple rows (cards only for summary/quote/estimate blocks)

Whitespace Philosophy

• Data density with breathing rows: rows are compact but never cramped — 12pt vertical padding keeps numbers scannable
• Cards only where grouping adds meaning: account summary, quote, estimated cost — never a card around a plain list row
• The number gets the space: the balance hero is given generous vertical room; everything else is efficient

Border Radius Scale

• Square (0pt): Full-bleed charts, table rules, status bar region
• Subtle (4pt): Inline chips, small tags
• Standard (8pt): Buttons, search bar, input fields, performance pills
• Comfortable (12pt): Cards (account, quote, estimated cost)
• Large (16–20pt): Bottom sheets, modal containers, chart panel
• Pill (500pt): Filter pills, range tabs, segmented toggles
• Circle (50%): Avatars, donut chart center hole

6. Depth & Elevation

Fidelity is mostly flat — depth is used sparingly and functionally, never decoratively.

Shadow Philosophy: shadows say "this groups separately" or "this floats above and is dismissible" — nothing more. On dark mode, shadows are barely visible against #0E1411, so cards and floating panels get a 1pt #26342B border as the elevation cue instead. The sticky Trade bar uses a translucent blurred backdrop so scrolling content reads faintly beneath it without losing the button's prominence.

Motion

• Balance / number updates: live price ticks cross-fade the digit color to gain/loss for 600ms then settle; the digits themselves do not slide (avoid distracting motion on money)
• Chart range switch: tapping 1D→1Y morphs the path with a 280ms ease-out interpolation; the fill gradient follows
• Chart scrub: dragging a finger across the chart shows a vertical crosshair + value bubble that tracks 1:1 with the touch, no easing
• Push navigation: standard iOS push (300ms horizontal slide) for Account → Position → Quote
• Sticky Trade button: always visible; on scroll it gains a subtle top divider as content passes beneath
• Trade ticket sheet: slides up 300ms ease-out; review screen pushes within the sheet
• Tab switch: instant content swap; selected icon fills and tints with a 120ms cross-fade
• Pull-to-refresh: green spinner in Fidelity Green; haptic light-impact on trigger
• Haptics: light impact on tab change and range-tab change; medium impact on "Place order" confirmation; success notification haptic on order filled

7. Do's and Don'ts

Do

• Use Fidelity Green (#368727) for the primary action and brand moments; Heritage Green (#00754A) for money-movement actions
• Reserve green/red strictly for financial semantics — gain #15833E/#15B374, loss #D32F2F/#E5544B
• Set every monetary figure in tabular/monospaced lining figures so columns align
• Make the total account value the visual hero — 34pt, bold, with a day-change line and sparkline directly below
• Keep the Summary → Account → Position → Quote → Trade drill path consistent in every screen's chrome
• Pin a sticky green Trade button to the bottom of every quote screen
• Use a deep evergreen #0E1411 for dark mode — never pure black
• Use hairline-separated single-column lists for holdings; reserve cards for summary/quote/estimate groupings
• Keep range tabs (1D/1W/1M/1Y/5Y/All) as compact pills under every chart
• Use a calm tonal ring (greens + grays + one gold) for asset allocation

Don't

• Don't use red for a generic destructive button or green for a non-financial success toast in a way that reads like 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 slide/roll — only a brief color cross-fade
• Don't use pure black (#000000) for the dark canvas — #0E1411 evergreen is correct
• Don't put card borders/shadows around plain list rows — Fidelity lists are flat hairlines
• Don't introduce a second saturated accent color — the palette is green + semantic red on near-greyscale
• Don't bury the Trade button below the fold — it is sticky and always reachable
• Don't use bright/neon greens for brand surfaces in light mode — #368727/#00754A are the institutional anchors
• Don't over-animate; money UI is calm — 120–300ms ease-out, no bounce on financial data

8. Responsive Behavior

Device Sizes

Dynamic Type

• Balance hero, screen title, section header, body, meta: full scale
• Tab labels, range tabs, chart-axis labels, table column headers: FIXED (layout-sensitive)
• Tabular numerals remain tabular at all sizes (never substitute proportional)

Orientation

• iPhone: portrait-primary; charts may rotate to a full-screen landscape chart view with crosshair scrubbing
• iPad: split-view controller — primary list rail + secondary detail; rotation preserves selection

Touch Targets

• List row: 64pt tall, full-row tap
• Tab bar icon: 22pt glyph, 56pt hit
• Range-tab pill: 28pt tall, 44pt hit
• Sticky Trade button: 52pt tall minimum
• Watchlist star toggle: 24pt glyph, 44pt hit

Safe Area Handling

• Top: large-title and top nav respect safe area and Dynamic Island
• Bottom: sticky Trade button and tab bar respect home indicator; both add safe-area padding
• Keyboard: trade-ticket fields scroll above the keyboard; sticky bar repositions above the keyboard during entry
• Sides: 20pt content inset; charts/cards extend to 16pt

9. Agent Prompt Guide

Quick Color Reference

• Brand / primary action (Fidelity Green): #368727
• Heritage Green (money movement): #00754A
• Leaf accent (dark links / selected): #4FB23B
• Canvas (light): #FFFFFF / (dark): #0E1411
• Surface 1 (dark): #16201B · Surface 2 (dark): #1F2C24
• Divider (dark): #26342B · (light): #E1E5E1
• Text primary: #1A1F1B light / #E8EFE9 dark
• Text secondary: #5A655C light / #9DB0A2 dark
• Gain: #15833E light / #15B374 dark
• Loss: #D32F2F light / #E5544B dark
• Flat: secondary text color
• Gold tier: #C8A24B · Info link: #1E6FB8

Example Component Prompts

• "Build the Fidelity Summary header in SwiftUI: greeting 'Good morning' (13pt w500 secondary), screen title 'Accounts' (26pt w700), 'Total account value' label (12pt w500 secondary), then the balance $428,164.92 in Inter 34pt weight 800 with .monospacedDigit(), then a day-change row: filled up-triangle + +$3,841.20 (13pt w600 tabular, #15B374) + (+0.90%) today in #9DB0A2. Dark canvas #0E1411."

• "Create a Fidelity holding row: 64pt tall, leading 38pt ticker chip (#1F2C24 bg, 10pt radius, symbol 12pt w800; if brand fund tint bg to #36872729 and text #4FB23B), middle = symbol 15pt w600 over fund name 12pt w400 #9DB0A2 (truncate), trailing right-aligned = market value 16pt w700 tabular over % change 12pt w600 (#15B374 if up, #E5544B if down). 0.5pt #26342B divider below; pressed = full-row #1F2C24."

• "Render a Fidelity sparkline + range tabs: 2pt stroke in #4FB23B for an up day (or #E5544B down), vertical gradient fill of the same color 32%→0%. Below: pill row 1D / 1W / 1M / 1Y / 5Y / All, Inter 11pt w600; active pill #368727 fill white text, inactive secondary text. Tapping a range morphs the path over 280ms ease-out. Finger-drag shows a vertical crosshair + tabular value bubble tracking 1:1."

• "Build the Fidelity sticky Trade bar: pinned to bottom safe area, surface backdrop with saturate(180%) blur(20px), 0.5pt #26342B top divider, containing a full-width #368727 button 'Trade', Inter 16pt w700 white, 52pt tall, 8pt corner radius; pressed #2A6B1F + scale 0.98; medium haptic on tap."

• "Create the Fidelity trade ticket sheet: symbol header (price 22pt w700 tabular + day change gain/loss), Buy/Sell segmented (underline-style, active 2pt #368727), Quantity field (52pt, label floats 12pt w600 secondary, value 18pt w700 tabular right-aligned, focus border #368727 1.5pt), Market/Limit/Stop segmented, an estimated-cost card (surface, 12pt radius, label/value tabular rows), and a sticky green Preview order primary button. Sheet slides up 300ms ease-out."

• "Render a Fidelity performance pill set: 8pt radius, 8×14pt padding. Gain pill = bg #15B37429, text #15B374, leading ▲. Loss pill = bg #E5544B29, text #E5544B, leading ▼. Flat = surface-2 bg, #9DB0A2 text, leading —. All numerals tabular."

Iteration Guide

1. Canvas is #FFFFFF light / deep evergreen #0E1411 dark — never pure black, never gray
2. Fidelity Green #368727 is the brand/action; Heritage #00754A for money movement — nothing else is saturated except semantics
3. Green/red mean gain/loss ONLY — #15833E/#15B374 gain, #D32F2F/#E5544B loss — never decorative
4. Every dollar, price, %, and quantity uses tabular/monospaced figures so columns align — non-negotiable
5. The total account value is the screen hero — 34pt w800, day-change line + sparkline directly under it
6. The product spine is Summary → Account → Position → Quote → Trade — same calm chrome on every step
7. A sticky green Trade button is pinned to the bottom of every quote screen
8. Holdings are flat hairline-separated single-column rows — cards only for summary/quote/estimate blocks
9. Range tabs (1D/1W/1M/1Y/5Y/All) sit as compact pills under every chart; active = green fill
10. Motion is calm — color cross-fade on price ticks, 280ms chart morph, no rolling digits, no bounce