Salt DS

Tokens

Token reference for all design tokens - colors, spacing, typography, and elevation with contrast ratios.

Design Audit

Paste code to audit for raw hex values, wrong APIs, accessibility issues, and dark mode compliance.

Builder Blocks

Cross-system gallery of the builder's block vocabulary with real export code.

Color

8 foundation ramps × 9 shades (incl. Brown). Named backgrounds (snow/marble/limestone/titanium + jet/granite/leather). 40 categorical colors. From Figma.

Iconography

salt-ds icons - ~430 unique SVG icons in 2 styles (Default outline, Solid filled) across 15 categories. Density-responsive sizing.

Typography

Open Sans + Amplitude + PT Mono. 12 type styles. Line height 1.3×. Size adjusts with density.

Elevation

5 shadow levels (lowest through medium). Shadow + z-index for depth. Dark mode doubles opacity.

Spacing

4px base grid. Proportional scale (25–300). Fixed spacing for borders. Adjusts with density.

Token Architecture

3-layer system: Foundation (raw) → Palette (mode switch) → Characteristic (semantic). Pure CSS variables.

Accessibility

WCAG 2.1 AA core. 4.5:1 contrast, focus rings, 44px touch targets, screen reader tested, reduced motion.

Density

4 levels: High (20px), Medium (28px), Low (36px), Touch (44px). All on 4px scaling grid.

Content Design

UX writing: simple, direct, human. Present tense, active voice, sentence case.

Buttons

3 appearances: solid, bordered, transparent. 5 sentiments: accented, neutral, positive, caution, negative. States: Default, Hover, Active, Disabled, Loading, Focus.

Pills / Tags

Toggle selection. Accent fill when active. Used for filters, categories, skills.

Text Input

Bottom-border accent on focus. Salt's signature flat-top input with strong baseline.

Checkbox

Accent fill when checked. Accessible with role='checkbox' and keyboard support.

Radio Buttons

Single selection with accent ring + inner dot. Arrow key navigation within group.

Switch

Toggle on/off. Accent track when on. Thumb slides with decelerate easing.

Slider

Range input with accent color. Drag to select value.

Cards

Hover lifts with shadow. Gradient header. Outline border + background shift.

Tabs

Underline-style. Active shows accent underline + semibold. Content switches.

Banners

Info (blue), Positive (green), Caution (orange), Negative (red). Left accent border.

Dialog

Floating modal with shadow-300. Title, body, action buttons. Financial confirmation pattern.

Badges

Accent, negative, positive, caution, and dot variants. Pill-shaped counters.

Avatars

Circular initials. Multiple sizes. Accent, blue, purple, red backgrounds.

Tooltips

Hover-triggered. Inverted background. Fade-in transition.

Progress

Linear bar (4px) + circular spinner. Accent-colored. Determinate + indeterminate.

Accordion

Expandable sections. Single open at a time. Chevron indicator rotates.

Dividers

1px border line. Full-width and inset variants.

Form Field

Wraps inputs with label, helper text, validation, necessity indicator. States: Default, Hover, Active, Read-only, Disabled, Error.

Link

3 variants: Accent, Primary, Secondary. States: Default, Hover, Active, Visited. Optional trailing icon.

Menu

Grouped/basic templates. Items with icon, separator, secondary label. States: Default, Hover, Active, Disabled.

Toast

Auto-dismiss notification. Sentiments: Info, Success, Warning, Error. Top-right positioning.

Toggle Button

Toggle on/off selection. Single-select and multi-select groups. Works with icon buttons.

Segmented Button Group

Connected buttons for single/multi select. Shape morphs on press. All densities (High/Medium/Low/Touch).

Tag

Removable labels for categorization. Dismissible (vs Pill which is selectable).

Drawer

Slide-out panel. Primary/secondary. Border placement: Left, Right, Top, Bottom.

Spinner

Indeterminate loading indicator. Sizes scale with density.

List Box

Single/multi-select list. Optional border. Keyboard nav. Used inside ComboBox, Dropdown.

Calendar

Composable: CalendarNavigation + CalendarWeekHeader + CalendarGrid. Modes: Single, Range, Multiselect, Offset. Day states: Selected, Range, Today, Unselectable, Disabled.

Date Picker

Composable: DatePicker > DatePickerSingleInput + DatePickerOverlay + DatePickerSinglePanel + DatePickerActions. Single/range. Requires LocalizationProvider. lab (RC).

Stepper

Horizontal/vertical progress steps. Active, Completed, Pending, Error states.

Pagination

Page navigation with prev/next. Truncation for large counts. Compact mode.

Panel

Contained section with optional header/close button.

Data Grid

Primary/Secondary/Zebra fill. Column groups, multi-select, filter bar, sorting.

AG Grid

AG Grid data table themed with Salt DS tokens. Sorting, filtering, pagination, row selection.

Table

Semantic HTML table. Simpler than Data Grid. Column alignment, zebra striping.

Vertical Navigation

Sidebar navigation with active indicator. Supports nesting, icons, badges.

Overlay / Scrim

Overlay positions content above page. Scrim is semi-transparent backdrop.

File Drop Zone

Upload by click or drag-drop. States: Default, Drag-drop, Error, Success, Disabled.

Splitter

Drag handle to resize panes. Horizontal/vertical. Collapse to minimum.

Skip Link

Keyboard-only link on Tab focus. Jumps past navigation. WCAG 2.4.1.

Navigation Item

Horizontal/vertical nav items with active indicator. Icons, badges, nesting.

Static List

Non-interactive display list. Icons, status indicators.

Carousel

Slides with progress dots, autoplay, counter. Bordered/transparent.

ComboBox

Filterable dropdown. Variants: primary/secondary/tertiary. bordered prop. Keyboard nav. Multi-select available.

Dropdown

Select from predefined options. Variants: primary/secondary/tertiary. bordered prop. ValidationStatus support.

Number Input

Increment/decrement stepper buttons. Variants: primary/secondary/tertiary. bordered, min, max, step props.

Multiline Input

Resizable text area. Same variant/bordered/validation API as Input. rows prop.

Interactable Card

Clickable card with selection. Variants: primary/secondary/tertiary. Hover lift + focus ring.

Collapsible

Controlled open/close container. Used internally by Accordion. CSS transition. open prop.

Analytical Dashboard

Stat cards, charts, and data tables composed into an analytics overview layout.

Forms

Input fields, validation, labels, and button bar composed into a data entry form.

List-Detail

Master list alongside detail pane - email client, file browser, settings patterns.

App Shell

Header, sidebar navigation, content area, and footer composed into a full application layout.

Login / Auth

Authentication form with brand header, inputs, validation, and action buttons.

Settings Page

Navigation sidebar with form sections for application configuration.

Search Results

Search input with filterable result cards and pagination.

Wizard / Stepper

Multi-step form with progress indicator, validation per step, and review.

Data Table Page

Filter bar, sortable data grid, and pagination for tabular data views.

Charts & Dataviz

12 chart types: line, area, column, pie, scatter, bar, donut, spline, stacked column, gauge, heatmap, treemap.