Salesforce UX

Salesforce Lightning Design System

Design Tokens formatter

A library to parse/stringify SCSS

A library to traverse/modify an AST

ESLint plugin provides custom linting rules specifically built for Salesforce Lightning Design System 2 (SLDS 2 beta)

Compares Dom

The Salesforce Lightning Design System shareable config for stylelint

Salesforce Icons

This package simplifies the management, distribution, and usage of Salesforce Design System metadata, ensuring that developers and designers can easily access and integrate design system metadata into their workflows.

SLDS Linter CLI tool for linting styles and components

The SDS grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, flow, and gaps.

Salesforce Lightning Design System

Global Styling hooks use CSS custom properties which make it easy to customize application-wide styling.

A set of foundations supporting the C360 Design System at Salesforce.

A badge is a read only element used to label content.

A Popover used to display floating transient content in relation to a target.

The button represent an control that should invoke an action

Global Styling hooks for C360 use CSS custom properties which make it easy to customize application-wide styling.

The C360 grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, flow, and gaps.

Icons are symbols used to represent features, functionality, or content.

Global Styling hooks for WES use CSS custom properties which make it easy to customize application-wide styling.

A set of foundations supporting the WES Design System at Salesforce.

Icons are symbols used to represent features, functionality, or content.

A card is a summary of larger set of content with links that drive visitors to more content.

Primitive tokens are an abstraction of Salesforce's UI into name and value design properties

Salesforce Lightning Design System 2 (SLDS 2), is a complete design framework that helps you create consistent, accessible, and scalable user interfaces across its applications and platform.

Extracts contextual metadata from component bundles and classifies styling hooks suggestions for SLDS design token replacement