Salt Design System
J.P. Morgan's open-source framework for accessible, customizable financial interfaces.
Product Overview
Salt Design System (saltdesignsystem.com) is J.P. Morgan's open-source design system, providing high-quality, WCAG 2.1 compliant React components, themes, and guidelines to build exceptional digital experiences in financial services and other industries. It focuses on accessibility, customization, lightweight dependencies (vanilla CSS), and composability, with support for multiple UI densities and dark/light modes. Salt is used internally for over 1,200 applications and is evolving from J.P. Morgan's legacy UI toolkit. React Components: Core and lab packages with accessible, customizable elements like forms, grids, and navigation. Theming: Easy creation of variations using design tokens for colors, typography, and density. Accessibility: WCAG 2.1 compliant with focus on inclusive patterns. Tools: Figma libraries for prototyping; GitHub repo for contributions.
Best For
Teams building scalable, consistent digital products.
Key Features
- React Components: Core and lab packages with accessible, customizable elements like forms, grids, and navigation.
- Theming: Easy creation of variations using design tokens for colors, typography, and density.
- Accessibility: WCAG 2.1 compliant with focus on inclusive patterns.
- Tools: Figma libraries for prototyping; GitHub repo for contributions.
Pros
- +Open source
- +Color palette generation
- +Export to CSS/design tools
- +Accessibility contrast checking
Cons
- -Adoption requires team alignment
- -Customization can be complex
/// SPECS
- Pricing:Free
- Platform:Browser
Paste
Twilio's open-source design system for consistent, accessible communication product interfaces.
Pando Design System
Pluralsight's open-source design system for consistent, accessible web interfaces.
Porsche Design System
open-source framework for consistent, premium automotive digital interfaces.
Primer Design System
GitHub's open-source design system for consistent, accessible web interfaces.
Radius Design System
Rangle's meta-framework accelerating custom design system creation with tools and kits.
Slack Block Kit
modular UI framework for building rich, interactive messages and apps in Slack.
SmartHR UI
open-source React component library for consistent, accessible HR platform interfaces.
U.S. Web Design System
Web Design System: official U.S. government framework for consistent, accessible public digital services.
UNDP Design System
official U.S. government framework for consistent, accessible public digital services.
VKUI
VK's open-source React library for consistent, accessible interfaces in VK apps and services.