Lightning/
By Salesforce™
Human \nterface Guidelines
Why Atomic SDKs are the smarter way than ever with AI all combined? AI brings automation to early wireframes by suggesting layouts, grouping UI elements, and even generating low-fidelity structures code-based. It saves time while still encouraging exploration and scalability. SDKs becomes a conversation, not a chore—helping designers or developers validate ideas rapidly and experiment confidently with structural concepts while moving into higher fidelity and deployment, to deliver as fast as the quantum speed within any workflow.
Utility-First Class System
SLDS 2.0 offers a utility-first CSS class approach, similar to Tailwind. You can apply spacing, sizing, text alignment, visibility, and more directly via class names. This consistency helps users navigate seamlessly across different Salesforce tools with minimal learning curve.
01
Components Library
Includes a comprehensive set of UI components: buttons, forms, cards, modals, tables, icons, and more — all styled to match Salesforce’s look and feel.
02
Design Tokens
Tokens abstract visual design values such as color, spacing, typography, and elevation. They allow you to customize themes while maintaining design consistency.
03
Blueprint Markup
SLDS provides reusable HTML markup (called “blueprints”) that you can copy and customize to suit your design needs outside of Salesforce’s platform.
04
Scalability & Customization
While SLDS is strict in style enforcement to maintain brand cohesion, it also allows theming and extension for custom app design needs.
05
Iconography Set
Offers an extensive set of SVG-based icons that are accessible and easy to implement across applications.
06
Documentation and Support
Rich documentation with live examples, code snippets, and design guidance. Plus, it’s backed by the robust Salesforce ecosystem.
07
User Interface (UI) components are the building blocks of digital experiences. —reusable elements like buttons, input fields, modals, navigation bars, and cards that work together to create consistency and clarity across a product. Well-designed components follow established design systems and accessibility standards, ensuring a seamless user journey while also streamlining development. As a UX designer, defining and refining UI components means balancing aesthetic precision with functional purpose—ensuring every interaction feels intuitive, responsive, and aligned with user needs across devices and platforms.
Salesforce Lightning™ Design System [SLDS2] — a powerful and thoughtfully crafted front-end framework designed for building Salesforce applications with consistent UX/UI/AIX.
A11y Optimization
Animations/Effects
Automated SEO
Built-in Analytics
Content [CMS]
Components
Forms
Layout
Project Styles
P3 Color
Rich Media
Carousel
Slideshow-Tickers
Sticky Scrolling
Link Styles
Overlays
Responsive Design
Text Styles
Sticky Scrolling
Parallax Scrolling
Custom Cursors
Visual Breakpoints
.
1
3
