Resources - the Experience Cloud specialty

Links and resources

The sources this Experience Cloud specialty guide draws from. Salesforce shifts setup screens and markup several times a year, so always cross-check against the release notes for your org's version.

Official Salesforce documentation

• Style Your Experience Cloud Site: the supported ways to brand and theme a portal, including the Theme and Head Markup placements.
• Customize CSS in LWR Sites: how custom CSS is applied on the LWR runtime and what shadow DOM blocks.
• Customize SLDS Design Tokens for Components: the design tokens field, the naming conversion, the multi-runtime prefixes, and the Safari limitation.

Design system references

• Lightning Design System: component blueprints, utility classes, and the token catalog.
• SLDS 2 Global Styling Hooks: the --slds-g- system that replaces design tokens in SLDS 2 themes.
• SLDS Design Tokens in LWC: which tokens have global access and how the --lwc- conversion works.
• SLDS Styling Hooks in LWC: component-level hooks like --slds-c-icon-color-background.
• What Are Styling Hooks?: the readable introduction to the hook system.

What's changing

• Release notes for your org's version: markup and setup screens shift three times a year, and this is where the shifts are announced.

Learning paths

• Trailhead: Build Experience Cloud Sites: the platform fundamentals for portals and Experience Builder.
• Trailhead: Lightning Design System: SLDS components, utility classes, and the token system.

OmniStyler tools

• The account center: manage synced themes and brands, compose a URL's deployable CSS (the brand tokens plus its style), merge with existing head CSS, and produce the CLI deploy kit, all in the browser with no install.
• The OmniStyler Chrome extension (install from the Chrome Web Store): pick a live component on any Experience Cloud page, restyle it visually, test selectors, merge with existing head CSS, sync named themes, and export head-ready CSS.