---
schema_version: "1"
id: 998f967afdd43148953b78f01f01512e39d331622f6ba1d1df7bfefbea7706eb
title: Salesforce Lightning Design System Component Blueprints Updates
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/release-notes/260-0-0/rn_slds_updates.md
canonical_url: https://help.salesforce.com/s/articleView?id=release-notes.rn_slds_updates.htm&release=260&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 74ae3cafd1d7b2a58c62d4a7f618346045718d1abe6d7066b56d4fdef39cf30e
description: Get more out of SLDS component blueprints and utilities with these enhancements and bug fixes.
products:
  - Cross Cloud Packages Solutions
release: "260"
---
# Salesforce Lightning Design System Component Blueprints Updates

Get more out of SLDS component blueprints and utilities with these enhancements and bug fixes.

**Where:** These changes apply to Salesforce Lightning Design System (SLDS) and Lightning Experience.

**How:** Improve your user interface (UI) with these recent updates to SLDS component designs.

- To improve accessibility, we made a small color adjustment to the SLDS 1 theme Lightning Blue.
- We added two new component designs for empty state and illustration. Both are implemented as Lightning base components, `lightning-empty-state` and `lightning-illustration`, and they’re available as beta features.
    - The empty state component is designed to show visuals that adapt to your brand, helpful messages, and guidance when there’s no content to display.
    - The illustration component is designed to add visuals that adapt to your brand, and enhance communication and engagement.
    - The `lightning-illustration` component currently can display the same illustrations as `lightning-empty-state` without descriptive text or buttons. We’re working on more illustrations to use with `lightning-illustration`.
    - Depending on the SLDS version in your org, both the illustration and empty state components switch between SLDS 1 and SLDS 2 automatically. Additionally, SLDS 2 illustration and empty state colors are optimized for dark mode.
        
        ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-salesforce_release_notes-260-0-0-production-enus/ba62a63b-6cd1-440e-8d24-e867afab0363/images/icon_note.png)
        
        Note Empty state component, illustration component, and dark mode are a pilot or beta service that is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/) or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the [Product Terms Directory](https://ptd.salesforce.com/). Use of these pilot or beta services is at the Customer's sole discretion.
- To meet the Web Content Accessibility Guidelines (WCAG) 1.4.11 standard for non-text accessibility, we updated the root `::selection` styling to use the system color keywords `Highlight` and `HighlightText`. This change allows the user agent, or web browser, to control the styling of highlighted and selected content.

#### See Also

- [_Salesforce Release Notes_: Display Consistent Empty State Illustrations With Theme Support (Beta)](https://help.salesforce.com/s/articleView?id=release-notes.rn_lc_empty_state_illustration.htm&release=260&type=5 "Use the new lightning-empty-state component to add meaningful visuals and content to your components that show empty states. This component displays the latest Salesforce Lightning Design System (SLDS) empty state illustration and correctly sizes it for the container, simplifying your UI development. The SVG illustrations automatically adjust to the user's selected theme, and can adapt to dark mode in SLDS 2 themes, for a consistent look and feel across your app. The new lightning-illustration component displays the same set of illustrations without text.")
- [_Salesforce Release Notes_: Styling Change to Highlighted and Selected Content](https://help.salesforce.com/s/articleView?id=release-notes.rn_general_styling_change.htm&release=260&type=5 "To meet the Web Content Accessibility Guideline (WCAG) 1.4.11 standard for non-text accessibility, we changed the styling of highlighted and selected content throughout the Lightning UI. Previously, we applied our own styling to show when content was highlighted or selected, but have determined that the styling didn’t meet this WCAG standard. Now when you highlight or select content, the Lightning UI uses the styling applied by the user agent, which is your browser or device. The user agent determines the color contrast ratio.")