This section lists the available global styling hooks and their values. Use the global styling hooks to apply Salesforce Lightning Design System values correctly to style your components. The design system determines the values of global styling hooks. Salesforce can change these values at any time and announce the changes in release notes. We don't support overriding the values of global styling hooks in your customizations.
Semantic UI Color System
All color styling hooks are prefixed with --slds-g-color- and are followed by the color name. For example, --slds-g-color-accent-1 is the styling hook for the accent color.
Surface Colors
on-surface-1
on-surface-2
on-surface-3
border-1
border-2
surface-1
surface-2
surface-3
surface-container-1
surface-container-2
surface-container-3
Accent Colors
accent-1
accent-2
accent-3
accent-4
accent-container-1
accent-container-2
accent-container-3
on-accent-1
on-accent-2
on-accent-3
border-accent-1
border-accent-2
border-accent-3
Feedback Colors
Error Colors
error-1
error-2
error-container-1
error-container-2
on-error-1
on-error-2
border-error-1
border-error-2
Warning Colors
warning-1
warning-2
warning-container-1
warning-container-2
on-warning-1
on-warning-2
border-warning-1
border-warning-2
Success Colors
success-1
success-2
success-container-1
success-container-2
on-success-1
on-success-2
border-success-1
border-success-2
Info Colors
info-1
info-2
info-container-1
info-container-2
on-info-1
on-info-2
Disabled Colors
disabled-1
disabled-2
disabled-container-1
disabled-container-2
on-disabled-1
on-disabled-2
border-disabled-1
border-disabled-2
Accessible System Colors
Neutral Colors
neutral-base-10
neutral-base-15
neutral-base-20
neutral-base-30
neutral-base-40
neutral-base-50
neutral-base-60
neutral-base-65
neutral-base-70
neutral-base-80
neutral-base-90
neutral-base-95
neutral-base-100
Brand Colors
brand-base-10
brand-base-15
brand-base-20
brand-base-30
brand-base-40
brand-base-50
brand-base-60
brand-base-65
brand-base-70
brand-base-80
brand-base-90
brand-base-95
brand-base-100
Error Colors
error-base-10
error-base-20
error-base-30
error-base-40
error-base-50
error-base-60
error-base-70
error-base-80
error-base-90
error-base-100
Warning Colors
warning-base-10
warning-base-20
warning-base-30
warning-base-40
warning-base-50
warning-base-60
warning-base-70
warning-base-80
warning-base-90
warning-base-100
Success Colors
success-base-10
success-base-20
success-base-30
success-base-40
success-base-50
success-base-60
success-base-70
success-base-80
success-base-90
success-base-100
Accessible Color Palettes
blue-10
blue-15
blue-20
blue-30
blue-40
blue-50
blue-60
blue-65
blue-70
blue-80
blue-90
blue-95
cloud-blue-10
cloud-blue-15
cloud-blue-20
cloud-blue-30
cloud-blue-40
cloud-blue-50
cloud-blue-60
cloud-blue-65
cloud-blue-70
cloud-blue-80
cloud-blue-90
cloud-blue-95
green-10
green-15
green-20
green-30
green-40
green-50
green-60
green-65
green-70
green-80
green-90
green-95
hot-orange-10
hot-orange-15
hot-orange-20
hot-orange-30
hot-orange-40
hot-orange-50
hot-orange-60
hot-orange-65
hot-orange-70
hot-orange-80
hot-orange-90
hot-orange-95
indigo-10
indigo-15
indigo-20
indigo-30
indigo-40
indigo-50
indigo-60
indigo-65
indigo-70
indigo-80
indigo-90
indigo-95
orange-10
orange-15
orange-20
orange-30
orange-40
orange-50
orange-60
orange-65
orange-70
orange-80
orange-90
orange-95
pink-10
pink-15
pink-20
pink-30
pink-40
pink-50
pink-60
pink-65
pink-70
pink-80
pink-90
pink-95
purple-10
purple-15
purple-20
purple-30
purple-40
purple-50
purple-60
purple-65
purple-70
purple-80
purple-90
purple-95
red-10
red-15
red-20
red-30
red-40
red-50
red-60
red-65
red-70
red-80
red-90
red-95
teal-10
teal-15
teal-20
teal-30
teal-40
teal-50
teal-60
teal-65
teal-70
teal-80
teal-90
teal-95
violet-10
violet-15
violet-20
violet-30
violet-40
violet-50
violet-60
violet-65
violet-70
violet-80
violet-90
violet-95
yellow-10
yellow-15
yellow-20
yellow-30
yellow-40
yellow-50
yellow-60
yellow-65
yellow-70
yellow-80
yellow-90
yellow-95
neutral-10
neutral-15
neutral-20
neutral-30
neutral-40
neutral-50
neutral-60
neutral-65
neutral-70
neutral-80
neutral-90
neutral-95
Shadows
These properties control the appearance of shadows, affecting the depth perception and layering of UI elements.
shadow-1
shadow-2
shadow-3
shadow-4
Borders
Border Radius
These properties manage the curvature of UI elements' corners, impacting the perceived softness or hardness of components.
radius-border-1
radius-border-2
radius-border-3
radius-border-4
radius-circle
radius-border-pill
Border Width
Use these styling hooks to specify the pixel width of a border.
sizing-border-1
sizing-border-2
sizing-border-3
sizing-border-4
Typography
Font Scale
Font sizes are scaled, based on the --slds-g-font-size-base property which sets the default font-size of the application.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Font Weight
Font weights are available in a range where --slds-g-font-weight-4 is normal weight.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Line Height
Line height values are set to unitless numbers which are multiplied by the font size used in the element to obtain the desired line height.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde harum officiis sit at mollitia, ducimus natus doloremque quos maiores obcaecati consequuntur pariatur quisquam nobis sequi excepturi in dolorem provident iste!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde harum officiis sit at mollitia, ducimus natus doloremque quos maiores obcaecati consequuntur pariatur quisquam nobis sequi excepturi in dolorem provident iste!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde harum officiis sit at mollitia, ducimus natus doloremque quos maiores obcaecati consequuntur pariatur quisquam nobis sequi excepturi in dolorem provident iste!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde harum officiis sit at mollitia, ducimus natus doloremque quos maiores obcaecati consequuntur pariatur quisquam nobis sequi excepturi in dolorem provident iste!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde harum officiis sit at mollitia, ducimus natus doloremque quos maiores obcaecati consequuntur pariatur quisquam nobis sequi excepturi in dolorem provident iste!
Spacing
The spacing values are used to create space between elements. The styling hook values are relative to the root font size and follow a modular scale of 4. Use them to set values for margins and padding, for example.
Don't use spacing properties to establish dimensions of an element targeting width and height. Use the sizing properties for this purpose.
Sizing
Use these styling hooks for elements like icons to set their height and width relative to the root element's font-size.