Salt DS
J.P. Morgan's system for dense financial interfaces: four densities on a three-layer token model.
Same component, five systems
The same component in each system’s own styling, in the mode you are viewing.
Foundations 9
Colour, type, spacing and the rules the components are built on.
8 foundation ramps × 9 shades (incl.
salt-ds icons - ~430 unique SVG icons in 2 styles (Default outline, Solid filled) across 15 categories.
Open Sans + Amplitude + PT Mono.
5 shadow levels (lowest through medium).
4px base grid. Proportional scale (25–300).
3-layer system: Foundation (raw) → Palette (mode switch) → Characteristic (semantic).
WCAG 2.1 AA core. 4.5:1 contrast, focus rings, 44px touch targets, screen reader tested, reduced motion.
4 levels: High (20px), Medium (28px), Low (36px), Touch (44px).
UX writing: simple, direct, human.
Components 49
Live specimens. Open one for states, properties, tokens, code and a five-system comparison.
Actions 6
3 appearances: solid, bordered, transparent.
3 variants: Accent, Primary, Secondary.
Toggle selection. Accent fill when active.
Connected buttons for single/multi select.
Removable labels for categorization.
Toggle on/off selection. Single-select and multi-select groups.
Inputs 14
Composable: CalendarNavigation + CalendarWeekHeader + CalendarGrid.
Accent fill when checked.
Filterable dropdown. Variants: primary/secondary/tertiary.
Composable: DatePicker > DatePickerSingleInput + DatePickerOverlay + DatePickerSinglePanel + DatePickerActions.
Select from predefined options.
Upload by click or drag-drop.
Wraps inputs with label, helper text, validation, necessity indicator.
Single/multi-select list.
Resizable text area. Same variant/bordered/validation API as Input.
Increment/decrement stepper buttons.
Single selection with accent ring + inner dot.
Range input with accent color.
Toggle on/off. Accent track when on.
Bottom-border accent on focus.
Navigation 7
Grouped/basic templates. Items with icon, separator, secondary label.
Horizontal/vertical nav items with active indicator.
Page navigation with prev/next.
Keyboard-only link on Tab focus.
Horizontal/vertical progress steps.
Underline-style. Active shows accent underline + semibold.
Sidebar navigation with active indicator.
Communication 8
Circular initials. Multiple sizes.
Accent, negative, positive, caution, and dot variants.
Info (blue), Positive (green), Caution (orange), Negative (red).
Floating modal with shadow-300.
Linear bar (4px) + circular spinner.
Indeterminate loading indicator.
Auto-dismiss notification.
Hover-triggered. Inverted background.
Containment 14
Expandable sections. Single open at a time.
AG Grid data table themed with Salt DS tokens.
Hover lifts with shadow. Gradient header.
Slides with progress dots, autoplay, counter.
Controlled open/close container.
Primary/Secondary/Zebra fill.
1px border line. Full-width and inset variants.
Slide-out panel. Primary/secondary.
Clickable card with selection.
Overlay positions content above page.
Contained section with optional header/close button.
Drag handle to resize panes.
Non-interactive display list.
Semantic HTML table. Simpler than Data Grid.
Patterns 10
Page layouts and flows assembled from several components.
Stat cards, charts, and data tables composed into an analytics overview layout.
Header, sidebar navigation, content area, and footer composed into a full application layout.
12 chart types: line, area, column, pie, scatter, bar, donut, spline, stacked column, gauge, heatmap, treemap.
Filter bar, sortable data grid, and pagination for tabular data views.
Input fields, validation, labels, and button bar composed into a data entry form.
Master list alongside detail pane - email client, file browser, settings patterns.
Authentication form with brand header, inputs, validation, and action buttons.
Search input with filterable result cards and pagination.
Navigation sidebar with form sections for application configuration.
Multi-step form with progress indicator, validation per step, and review.
Tools 5
Inspect tokens, audit pasted code and edit a theme.
Token reference for all design tokens - colors, spacing, typography, and elevation with contrast ratios.
Paste code to audit for raw hex values, wrong APIs, accessibility issues, and dark mode compliance.
Cross-system gallery of the builder's block vocabulary with real export code.
Token reference
Every colour token for the system in view in one searchable table. Copy single values or the whole set as JSON.
Theme builder
Change a system's colours, check contrast against a live preview, then copy the changes as JSON.