Co-architecting JPMorgan's open-source, brand-agnostic component ecosystem from the ground up — replacing a fragmented legacy landscape and establishing a shared design language across every Line of Business.
86%
Adoption across all LOBs
CSAT 75
Designer satisfaction score
$21M
Annual realised benefits
~100%
Markets trading adoption
01Role & Context
From fragmented legacy to a single shared language
When I joined JPMorgan in April 2020, the firm's design landscape was fragmented. Dozens of internal product teams were building on incompatible legacy component libraries — inconsistent visual styles, duplicated engineering effort, and a constantly widening gap between what designers specified and what developers shipped.
I joined as Design System Architect to co-build Salt from the ground up: a themeable, brand-agnostic component ecosystem that could work across client-facing and internal products, for every Line of Business, on every stack.
My Role
I co-architected the component system alongside engineering and design leadership — owning component design, specification, validation, and adoption strategy. I also recruited and onboarded designers into the team, conducting portfolio reviews and interviews to build out capability.
Challenge
Legacy fragmentation at scale
Multiple incompatible UI toolkits across Lines of Business — each with its own Figma library, component set, and naming conventions. New products had no clear starting point. Shared nothing.
UITK legacyMultiple codebasesDesign-dev gap
Approach
Token-first, composable by design
Salt was built on a foundation of design tokens — CSS variables driving colour, typography, spacing, shadow, and density — so that every component could be themed to any JPMorgan brand without touching component logic.
Token-drivenBrand-agnosticWCAG 2.1 AA
02My Contribution
Designing the components trading runs on
My core ownership was Data Grids and Blotters — the most complex, most performance-critical components in the system. These are the interfaces that traders use all day, every day: dense rows of live market data, sortable columns, selection states, inline badges, PnL colouring, and multiple density modes to match different display setups.
I designed, documented, and validated every interaction state — from keyboard navigation to row selection to column sorting — working closely with engineering to ensure the design spec and token references translated exactly to code. These components now run in nearly 100% of Markets trading applications across the firm.
Component ownership
Data Grid & Blotter
Designed all interaction states, density variants, sort behaviour, row selection, inline badge patterns, and PnL colour tokens for Salt's flagship data component.
System architecture
Tokens & Theming
Contributed to the Figma variable structure — ensuring token names matched code exactly, so Dev Mode could be used as a direct handoff reference rather than annotation work.
Adoption strategy
Toolchain integration
Drove adoption planning across Lines of Business — toolchain integration, migration guides, and hands-on training to take Salt from an internal project to a firmwide standard.
03Artefact · Component Design
Data Grid — Markets Trading Blotter
The Data Grid was Salt's most demanding component. Traders need to read dense position data at a glance — the grid had to work across four density levels, two themes, light and dark modes, and remain accessible at every state. Below is an interactive render of the component in a Markets trading context — toggle mode and density to see how the token system adapts.
Salt DS · Data Grid · Markets Equities BlotterSalt DS Component
Equities — Live Positions
Mode
Density
+$124,840Total unrealised P&L
8Open positions
$4.32MMarket value
3Loss positions
Ticker ▲
Instrument ↕
Side ↕
Qty ↕
Avg Price ↕
Last ↕
Unrealised P&L ↕
% Chg ↕
Trend
8 positions · 0 selected
--salt-color-blue-500 →theme/jpm-brand/light
--salt-color-green-700 →positive-pnl
--salt-color-red-700 →negative-pnl
--salt-size-row-height →medium / 36px
Salt DS · Data Grid component · Interactive — toggle Mode and Density in the toolbar above
Impact
A system that keeps compounding
86%
Adoption across client-facing and internal UIs across all Lines of Business
$21M
Annual realised business benefits from component reuse and reduced duplication
~100%
Markets trading applications running on Salt Data Grid and Blotter components
Open Source
Salt Design System was open-sourced by JPMorgan and is publicly available at saltdesignsystem.com — one of the few Tier 1 bank design systems released to the broader industry. The components I designed and validated are live, documented, and in daily use.