Discover the New UI

Learning Objectives

After completing this unit, you’ll be able to:

List the five guiding principles that Salesforce used to develop the new UI.
Describe some key elements of the new design.
Explain who can access the new UI and when.
Disable and enable the new UI.

What Is the New UI?

In 2015 we launched Lightning user interface (UI), the visual design of the Salesforce Lightning Platform. Lightning UI is what you interact with to use Salesforce applications and data.

The new UI is a set of visual style enhancements to the Lightning UI framework. This refreshed, modern design of Salesforce delivers easy navigation, improved page load speed, and approachability for every job function.

An example Account screen displaying the new UI icons, buttons, fonts, and interactivity.

So why did we refresh the UI? A lot has changed since 2015. Salesforce products have grown beyond CRM to include AI, Data Cloud, Einstein Trust Layer, and much more. User and customer expectations are growing. And AI has ushered in a new era. These changes require a refreshed UI to support fast, easy, and compelling experiences.

The new design enhancements:

Align with the expanding Salesforce product portfolio.
Provide a cohesive user experience across all Salesforce clouds and features.
Match customer expectations for modern UI.

Now let’s take a look at our guiding principles for the design.

Our Guiding Design Principles

In developing the new UI, the Salesforce User Experience (UX) team focused on these key principles.

Seamless. The UI is connected and unified across all experiences.
Responsive. It reacts appropriately and responds quickly.
Intuitive. It’s easy to learn, use, and navigate.
Trusted. It’s reliable and stable as it guides and supports you.
Delightful. It’s enjoyable to use.

We keep these principles top of mind as we continuously learn from feedback on our #True to the Core Trailblazer Community channel (login required).

And, as we developed the new UI, we conducted research with external end users to identify and design it. Those customers report two key benefits of the enhancements.

Productivity. Study participants found that the new UI exceeds their expectations for a clean, productive experience.
Task completion. Participants found that they completed tasks more efficiently and with more confidence using it.

Explore Key Features

Next, let’s check out some key elements of the new design.

Circular Motifs

Circular shapes and rounded edges convey friendliness and smoothness: They make you feel welcome. Rounded corners in the new UI indicate that an element is interactive. Elements in the interface with square corners aren’t interactive.

Four interactive, rounded buttons.

Legible Icons

Icons are more legible at varying scales, which creates uniformity across the UI. The icon improvements provide visual clarity so that users can more easily see when a button is active, for example.

Legible Fonts

We also improved legibility through type and font scale. These improvements help bring to the forefront the data and insights that benefit users.

Higher Contrast Colors

UI colors are grounded in the Salesforce color system, with cleaner, brighter, higher-contrast selections. Our updated, accessible color theory improves contrast in innovative ways.

Example colors from the new UI Foundational Palette, Functional Palette, and Expressive Palette.

Inviting Cues

The new design welcomes you to navigate through your tasks with buttons and other interactivity that mimics real-world experiences. Cues like drop shadows and gradients on buttons define what actions you should take when.

An example three-part button with rounded edges and New, Import, and Assign Label sections

How Do These Enhancements Help You?

We think the refreshed design will delight our users. But it also offers significant productivity benefits. The new UI helps you work faster and more efficiently because:

With streamlined navigation, simplified icons, at-a-glance views, adaptable spacing, and intuitive cues, your work is organized and harmonious.
Intentional use of color contrast, space, and icons provide clear indicators of success and priority.
Optimized Cascading Style Sheets (CSS) code improves performance and load times.
Adherence to Web Content Accessibility Guidelines (WCAG) means the UI is approachable and accessible.

Work with the New UI

We started our rollout of the new UI on June 5, 2024, to new and existing orgs. For more information on availability, read the Enhanced Lightning User Interface article.

If you’re working in a new or existing org that has the new design enabled, enjoy the experience. If you need to turn it off and revert to the original Lightning Design System UI, here’s how to do that.

In this module, we assume you are a Salesforce administrator with the proper permissions to take these actions. If you’re not an administrator, that’s OK. Read along to learn how your administrator would take the steps in a production org. Don’t try to follow these steps in your Trailhead Playground. The new UI isn't available in the Trailhead Playground.

In your org, click and select Setup.
For Starter orgs, click Open Advanced Setup. For all other orgs, skip this step.
In the Quick Find box, search for and select User Interface.
Uncheck Turn on an enhanced Lightning user interface.
Click Save.

An example org’s Setup | User Interface menu with a highlight on Turn on an enhanced Lightning user interface

To turn the enhanced Lightning UI back on, follow steps 1–3, and then check Turn on an enhanced Lightning user interface. Click Save.

Note: The enhanced Lightning user interface Setup checkbox appears only if you’re working in an org that has it enabled. We created the new UI through CSS-based updates to the Lightning UI, including tiered changes using styling hooks in CSS custom properties. If you’re a designer or developer using Lightning UI and you are switching to the new UI, read What Developers Need to Know.

Hai bisogno di aiuto?