domains / families / design / design-systems-slds-apply

design-systems-slds-apply

separate

Apply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons. Use when building any UI that needs SLDS, choosing between Lightning Base Components and SLDS Blueprints, applying styling hooks for theming, using utility classes for layout and spacing, or selecting icons. Triggers include \"build a modal\", \"create a form\", \"data table\", \"SLDS styling\", \"style with hooks\", \"add an icon\".

When to use

• Which blueprint to use for a given UI pattern
• How to style with hooks (color, spacing, typography, shadows, borders)
• Which utility classes to use for layout, spacing, visibility
• Which icon to use and from which category
• SLDS naming conventions, class structure, hook syntax
• **Design decisions** -- visual hierarchy, composition, interaction patterns
• **LWC mechanics** -- component structure, @wire, @api, lifecycle, events (not yet available)
• **Full accessibility** -- WCAG conformance, ARIA patterns, keyboard navigation, focus management, contrast ratios (not yet available)

When not to use

• design decisions
• visual hierarchy
• composition
• interaction patterns
• LWC mechanics
• component structure
• full accessibility
• WCAG conformance

Skill page

Source