Salt Design System
The Salt Design System is JPMorgan Chase & Co.’s open-source solution for building exceptional digital experiences. Salt is a comprehensive library that provides accessible, well-documented UI components and extensive design resources. Consequently, product teams across various lines of business use it to create consistent, high-quality applications. The system focuses on building small, high-quality components and providing flexible patterns. This approach allows teams to compose complex solutions for specific business requirements. Therefore, Salt helps you maintain a universal design language across a vast ecosystem of products. This powerful resource is a prime example of top-tier enterprise Figma design systems available today.
Core Technology and Accessible Component Libraries
Salt primarily uses React to build its UI components, and the codebase is predominantly written in TypeScript. Furthermore, the system minimizes dependencies on third-party libraries, opting instead to build its components from the ground up. This makes Salt lightweight, performant, and easy to maintain. Crucially, Salt components fully comply with WCAG 2.1 to AA standards, making accessibility a core requirement—not an afterthought. In addition, Salt supports Server-Side Rendering (SSR) and the latest, stable releases of all major browsers, including Chrome, Firefox, Edge, and Safari. For more examples of top enterprise tools, explore the Carbon Design System by IBM.
Theming, Tokens, and Multi-Mode Figma Design Systems Architecture
Theming is a central feature of the Salt Design System. The system drives all styling holistically through an abstraction layer of Design Tokens (CSS variables). These tokens link components together and allow for highly flexible theming. Moreover, Salt offers multiple theming options, including a JPM Brand theme and a Legacy (UITK) theme, which assists with application migration.
Salt provides full, native Dark Mode support. The system offers multiple modes—Light Mode and Dark Mode—and multiple UI densities. For example, a palette token references different foundational tokens depending on the selected mode, ensuring colors maintain proper contrast and visual hierarchy across themes. Salt’s Figma design systems libraries use variables to enable designers to switch themes, modes (Light/Dark), and densities (High, Medium, Low, Touch) directly in their files, maintaining a 1:1 match with the coded components.