A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
2radius steps
8pxspacing base
Fidelity, in one page
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#0E1411dark — minimum chrome, maximum data - Fidelity Green (
#368727) + Heritage Green (#00754A) brand anchors — primary actions, logos, selected states - Green/red are sacred financial semantics (
#15833Egain /#D32F2Floss light;#15B374/#E5544Bdark) — 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
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
#0E1411for 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 —#0E1411evergreen 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/#00754Aare the institutional anchors - Don't over-animate; money UI is calm — 120–300ms ease-out, no bounce on financial data
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Fidelity design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Fidelity Green: #368727
- Heritage Green: #00754a
- Fidelity Green Pressed: #2a6b1f
- Leaf Accent: #4fb23b
- Canvas White: #ffffff
- Surface Gray: #f4f6f4
- Surface Pressed: #e8ece8
- Divider: #e1e5e1
- Hairline Strong: #c9d0ca
- Dark Canvas: #0e1411
Type:
- families: Average Sans, Brand, Inter, Fallback Stack
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 22
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 8, 10
Spacing: 8, 12, 14
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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 (
#4FB23Blight 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)
| Role | Light Mode | Dark Mode | Use |
|---|---|---|---|
| Gain (positive) | #15833E | #15B374 | Positive price change, positive $ delta, positive % |
| Loss (negative) | #D32F2F | #E5544B | Negative price change, negative $ delta, negative % |
| Flat (unchanged) | #5A655C | #9DB0A2 | 0.00% change — uses secondary text color |
| Up Fill (chart) | #36872729 | #36872729 | Sparkline / area chart gradient fill (16% green) |
Semantic — System
- Error / Alert (
#D32F2Flight /#E5544Bdark): Form validation, blocked-action banners (visually identical to Loss — context disambiguates). - Warning Amber (
#C8862B): Caution banners, pending-transfer notices. - Success Confirmation (
#15833Elight /#15B374dark): 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.
Type scaleRead the full spec
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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Balance Hero | Inter | 34pt | 800 | 1.1 | -0.6pt | Total account value — tabular figures |
| Screen Title | Inter | 26pt | 700 | 1.2 | -0.3pt | "Accounts", "Summary" — large-title nav |
| Section Header | Inter | 22pt | 700 | 1.25 | -0.2pt | "Today's positions", "Watchlist" |
| Card Title | Inter | 18pt | 700 | 1.3 | -0.1pt | Fund / position names |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Paragraph copy, descriptions |
| Row Value | Inter | 16pt | 700 | 1.3 | 0pt | Price / value in a list row — tabular |
| Row Symbol | Inter | 15pt | 600 | 1.3 | 0pt | Ticker symbol in a holding row |
| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "Last updated 4:00 PM ET", account masks |
| Numeric Mono | Inter (tnum) | 13pt | 600 | 1.3 | 0pt | $ delta + % change line — always tabular |
| Caption | Inter | 12pt | 500 | 1.35 | 0pt | Account type, disclosure footnotes |
| Button | Inter | 16pt | 700 | 1.0 | 0pt | Primary / secondary buttons |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Range Tab | Inter | 11pt | 600 | 1.0 | 0.2pt | 1D / 1W / 1M / 1Y chart range chips |
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.
Components and layoutRead the full spec
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:
#368727at 40% opacity, text#FFFFFFat 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
#368727light /#4FB23Bdark - Text:
#368727light /#4FB23Bdark, Inter 15pt weight 700 - Corner radius: 8pt
- Pressed: 8% green tint fill
Pill / Filter Button
- Background:
#F4F6F4light /#1F2C24dark - 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:
#368727light /#4FB23Bdark, Inter 14pt weight 700 - No background, no underline
- Pressed: 60% opacity
Core Atoms
Holding / Watchlist Row
- Height: 64pt
- Leading: 38pt ticker chip —
#F4F6F4/#1F2C24rounded 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 =
#368727fill, 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
#368727underline, 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
#368727border
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
#3687271.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
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Balance hero 30pt; tighter 16pt insets; sparkline 80pt tall |
| iPhone 15/16 | 393pt | Standard layout; balance 34pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Balance hero 38pt; chart 120pt tall; larger rows |
| iPad (portrait) | 768pt | Two-pane: accounts/watchlist list (360pt) + detail pane |
| iPad (landscape) | 1024pt+ | Three-zone: nav rail + list + quote/chart detail; chart full-height |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-fidelity {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0e1411;
--heading-color: #0e1411;
--link-color: #00754a;
--link-hover-color: #00422a;
--border-color: #d4d5d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(14,20,17,0.06);
--card-hover-shadow: 0 6px 18px rgba(14,20,17,0.12);
--header-bg: #0e1411;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #626664;
--button-bg: #00754a;
--button-text-color: #ffffff;
--button-hover-bg: #00422a;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #0e1411;
--button-secondary-hover-bg: #e2e3e2;
--button-secondary-border: 1px solid #d4d5d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0e1411;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- grammarly 82.5%
- lemon8 81.0%
- plenty of fish 80.2%
- charles schwab 79.6%
- acorns 78.7%
Where this came from
- Source document
ios/design-md/finance/fidelity/DESIGN.md· 25.3 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.