Explore the new design

A refreshed visual style helps you navigate Salesforce easily and complete tasks quickly. Can you spot the streamlined color palettes, font and spacing improvements, and increased contrast?

A before-and-after image of a Salesforce account page that showcases the new design.

The new design is available today and is a preview of what's possible with Salesforce Lightning Design System (SLDS 2), coming soon.

Simplify how you use, design, and build on Salesforce

Developers and designers work more efficiently with CSS-based updates and companion tools.

Streamline the user experience.

Now, it’s easy to find and follow what matters most to you. Visual styling updates bring key actions to a user’s attention. This includes a simplified appearance, smart color highlights, and improved font size.

Save time in product development cycles.

Keep code up to date with the SLDS Validator tool that checks your markup and suggests improvements.

Accommodate users with a range of abilities.

Adhere to Web Content Accessibility Guidelines (WCAG 2.1 AA) with adaptable spacing that improves legibility at varying scales.

Discover when you can use the new design

Starting in Summer ’24, the new design is available in:

  • New and existing Starter and Pro Suite orgs
  • New Sales PE and EE orgs

Opt in to the new design when it becomes available in your product and edition.

View AvailabilityView Roadmap

Learn what you can do today

Developers

A headshot of a man who’s smiling, has dark hair, and is wearing a blue collared shirt.

Keep using SLDS base components, blueprints, and styling hooks to seamlessly receive design system updates.

Read the Development Best Practices

Designers

A headshot of a woman who’s smiling, has clear glasses, and is wearing an orange shirt.

Uplift your user experience with the new design.

Read the blog

Try out new development and design tools

Prototype with the new Figma kit.

Grab prebuilt UI components with styling hooks that reflect our refreshed colors and spacing, and map 1:1 to variables used in live code.

Start designingA cursor hovers over the cover of the new Figma kit.

Assess your code with the SLDS Validator.

Check your markup and make quick updates with suggested improvements.

Start validatingAn illustration of the SLDS Validator tool with a cursor selecting a section of code.

Keep up with the help resources

Learn about our team’s design principles and apply them to your designs:

We Are Refreshing Our Visual Design – Here’s How It Helps You Work Faster
Style Guide: Figma Kit v2.24.4

Ensure that your component customizations use supported techniques:

What Developers Need to Know About the Lightning UI Enhancements in the Summer ’24 Release
Prepare Customizations for SLDS Architecture Updates
Confirm Your Components Use Supported Design System Customizations
Anti-Patterns for Styling Components
New Global Styling Hooks Guidance
Trailhead: The New Design for Lightning UI: Quick Look
Enhanced Lightning UI

Tour the new design:

Sign up for a Sales Cloud Professional Edition trial

Find Answers to Common Questions

Stay Connected

Be the first to get the latest release announcements, design blogs, and perspectives from UX designers.

Designer Linkedin
Designer Community
Developer Community