Salesforce is modernizing the visual style — the look and feel — of the Lightning Experience user interface (UI) to streamline navigation, improve performance and usability, and prepare for future innovations. The enhancements are CSS-based within the Salesforce Lightning Design System (SLDS) and don’t affect the Salesforce Platform.

While the refreshed visual style isn’t broadly available yet, you may encounter changes in the following products:

Let’s go over the key enhancements and what developers need to know.

What are the visual style changes to the Lightning UI?

When we decided how to approach designing the UI updates, we had five foundational principles. The updates had to be:

  1. Seamless: No awkward transitions, interruptions, or disparities, and connected and unified
  2. Responsive: Quick to respond or react appropriately, gets smarter with user input, and adapts to diverse personas, languages, cultures, and environments
  3. Intuitive: Easy to learn, understand, and navigate without explicit instruction
  4. Trusted: Reliable and stable, which ensures the user feels supported and guided
  5. Delightful: Appealing, rewarding, and sparks joy 

Here’s the range of changes and benefits:

UI style changes Purpose Benefits of changes
Circular motifs and rounded corners To convey friendliness, smoothness, and a welcoming feeling The UI enhancements help:

  • Streamline navigation 
  • Reduce cognitive load and help users transition from task to task faster 
  • Reduce time-consuming errors
  • Increase efficiencies and predictability
  • Improve usability
  • Reinforce trust
Increased brightness and contrast of colors To provide a cleaner and more saturated look that conveys a modern aesthetic
Revamped type and font scale, simplified icons, adaptable spacing To improve legibility at varying scales
Use of skeuomorphism, such as drop shadows and gradients on buttons To make UI elements appeal more to human senses, and help delineate between content meant to be consumed versus actions to execute.
Differentiated button states (default, hover, active) and other indicators To clarify indicators of success and prioritization
Reduction of distracting images and optimized CSS To maximize compatibility across operating systems and devices
Design adheres to web content accessibility guidelines (WCAG) To accommodate users with a range of abilities, and to adapt to a range of neurodiversity needs

showing the UI before and after the design enhancements

Developer use cases and actions 

We updated the CSS in SLDS to enable tiered styling changes using styling hooks (CSS custom properties). As a result, global styling hooks for colors, typography, spacing, border radii, and thickness have new values. Here’s what developers need to do in the following use cases.

If you’re working on a new Sales Cloud PE or EE instance:

If you’ve used unsupported CSS overrides to customize an Experience Cloud site or Lightning pages, those customizations may lead to undesirable visual changes as we continue to make updates to our architecture. Be sure to do the following:

For example, if you were using some of the internal –lwc CSS custom properties like so:

You should refactor your CSS to use the publicly supported –slds styling hooks like so:

Or, if you were using the deprecated –sds CSS custom properties like so:

You should refactor your CSS to override these CSS custom properties with the publicly supported –slds styling hooks like so:

This list of recommendations is not exhaustive. To better understand our latest styling hooks and how best to use them, please refer to our New Styling Hooks Guidance.

Future-proof your code now to save time later

Even if the current use cases don’t apply to you now, there are a few development practices that can help future-proof your code.

  • Use the Lightning Design System instead of hacking code for short-term needs. It’s your best bet to be able to implement future architecture updates seamlessly.
  • Use Lightning base components for faster builds and deployments, and increased performance.
  • Use SLDS classes, following blueprints or utility guidelines.
  • Use styling hooks, which provide CSS custom properties that correspond to SLDS component blueprints and design variations.
  • Avoid anti-patterns, such as styling according to rendered markup of Lightning base components and directly overriding SLDS classes and styles. Also, avoid querying elements using an exact class attribute string match.

Next steps, and what to expect in future releases

Be sure to confirm that your components are using supported SLDS customizations. As needed, refer to the Architecture Updates FAQ. 

For future releases, Salesforce is evaluating and planning to update tooling to help ISVs and developers who customized components in unsupported ways. This will include updates to SLDS Validator and Salesforce Code Analyzer.

We’re always working on ways to make your development experience more efficient, so stay connected here for the latest news.

Resources

About the author

Shelby Hubick is a Principal Engineering Architect who has worked on various builders and tools within Salesforce. He is passionate about design systems and creating engaging user experiences. In his free time, Shelby enjoys playing and designing board games, and spending time with his two daughters.

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS