@salesforce-ux/sds-metadata/current/SLDSStylingHooks.csv

This package simplifies the management, distribution, and usage of Salesforce Design System metadata, ensuring that developers and designers can easily access and integrate design system metadata into their workflows.

"⚠️ If you feel a value for these Styling Hooks needs to change to accommodate your component. Please reach out to the team before making any changes. If column F has a 🔒 symbol, the value has been confirmed and cannot change.",,,,,,,,,,,,,
SDS Global Styling Hooks: Cookbook,,,,,,,,,,,,,
Group,Category,Type,Property,Styling Hook,,SLDS Value,,Alias,Kondo Value,,Alias,Places in use,Notes
Derived System,Surface Colors,,background-color,--slds-g-color-surface-1,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,page background,
,,,,--slds-g-color-surface-2,🔒,#f3f3f3,,neutral-95,#f3f3f3,,neutral-95,Entire page background,
,,,,--slds-g-color-surface-3,🔒,#e5e5e5,,neutral-90,#f3f3f3,,neutral-95,instead use --sds-g-color-surface-3,mapped to surface-2
,,,,--slds-g-color-surface-inverse-1,🔒,#032d60,,blue-20,#032d60,,blue-20,,
,,,,--slds-g-color-surface-inverse-2,🔒,#001639,,blue-10,#03234d,,blue-15,,
,,,"color, fill",--slds-g-color-on-surface-1,🔒,#747474,,neutral-50,#5C5C5C,,neutral-40,"Lightest text and icon color fill. Used for: Body text, placeholder text, field labels, sub headings, taglines.", 
,,,,--slds-g-color-on-surface-2,🔒,#2e2e2e,,neutral-20,#2e2e2e,,neutral-20,"Darker text and icons color fill.
Used for: Secondary and tertiary headings, dark body copy, filled in input fields",
,,,,--slds-g-color-on-surface-3,🔒,#181818,,neutral-10,#03234D,,blue-15,Darkest text and icon fill. Used for: titles for pages or components., 
,,,,--slds-g-color-on-surface-inverse-1,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,Lightest text and Icon fill on dark backgrounds (50 - 10),
,,,,--slds-g-color-on-surface-inverse-2,🔒,#aeaeae,,neutral-70,#a8cbff,,electric-blue-80,Darker text and Icon fill on dark backgrounds (50 - 10),
,,,background-color,--slds-g-color-surface-container-1,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,"Default color for component containers (backgrounds) i.e. cards, modals",
,,,,--slds-g-color-surface-container-2,🔒,#f3f3f3,,neutral-95,#f3f3f3,,neutral-95,Component container or background fill,
,,,,--slds-g-color-surface-container-3,🔒,#e5e5e5,,neutral-90,#e5e5e5,,neutral-90,"Component container or background fill. I.e. data table cell hover state, stateful button active bkgd.",
,,,,--slds-g-color-surface-container-inverse-1,🔒,#032d60,,blue-20,#032d60,,blue-20,Inverse component containers (backgrounds),
,,,,--slds-g-color-surface-container-inverse-2,🔒,#001639,,blue-10,#03234d,,blue-15,Inverse component containers (backgrounds),
,,,border-color,--slds-g-color-border-1,🔒,#c9c9c9,,neutral-80,#c9c9c9,,neutral-80,Borders for components that are decorative or divider lines between content.,
,,,,--slds-g-color-border-2,🔒,#747474,,neutral-50,#5c5c5c,,neutral-40,"Borders for components that are functional or interactive i.e. neutral outline buttons, text inputs",
,,,,--slds-g-color-border-inverse-1,🔒,#f3f3f3,,neutral-95,#f3f3f3,,neutral-95,Borders for components that are functional or interactive on a dark background.,
,,,,--slds-g-color-border-inverse-2,🔒,#032d60,,blue-20,#032d60,,blue-20,Borders for components that are decorative or divider lines between content on a dark background,
,Accent Colors,,"color, fill",--slds-g-color-accent-1,🔒,#1b96ff,,blue-60,#066afe,,electric-blue-50,Fill color for text and icons on buttons and interactive element such as button icons,
,,,,--slds-g-color-accent-2,🔒,#0176d3,,blue-50,#0250d9,,electric-blue-40,"Fill color for text and icons on buttons and interactive element such as button icons, links, and hover states",
,,,,--slds-g-color-accent-3,🔒,#014486,,blue-40,#022ac0,,electric-blue-30,"Fill color for text and icons on buttons and interactive element such as button icons, links, and hover states",
,,,background-color,--slds-g-color-accent-container-1,🔒,#0176d3,,blue-50,#066afe,,electric-blue-50,Branded component containers such as the brand button.,
,,,,--slds-g-color-accent-container-2,🔒,#0b5cab,,blue-40,#0250d9,,electric-blue-40,Branded component containers or hover states such as the brand button.,
,,,,--slds-g-color-accent-container-3,🔒,#014486,,blue-30,#022ac0,,electric-blue-30,Branded component containers or hover states,
,,,"color, fill",--slds-g-color-on-accent-1,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,"Text and icon fill color displayed on accent containers (electric-blue-50,40,30)",
,,,border-color,--slds-g-color-border-accent-1,🔒,#0176d3,,blue-50,#066afe,,electric-blue-50,Border color for branded containers,
,,,,--slds-g-color-border-accent-2,🔒,#0b5cab,,blue-40,#0250d9,,electric-blue-40,Border color for branded containers  e.g. Outline Button.,
,,,,--slds-g-color-border-accent-3,🔒,#014486,,blue-30,#022ac0,,electric-blue-30,Border color (on hover) for branded containers e.g. Outline Button.,
,Feedback Colors,error,"color, fill",--slds-g-color-error-1,🔒,#ba0517,,red-40,#b60554,,pink-40,Fill color for text and icons displaying an error,
,,,background-color,--slds-g-color-error-container-1,🔒,#ba0517,,red-40,#fddde3,,pink-90,Error component containers (background) e.g. error Toast or Alerts,
,,,,--slds-g-color-error-container-2,🔒,#8e030f,,red-30,#fdb6c5,,pink-80,Error component containers (background) on hover e.g. for Destructive Buttons,
,,,"color, fill",--slds-g-color-on-error-1,🔒,#ffffff,,neutral-100,#b60554,,pink-40,Fill color for text and icons displayed on top of an error container,
,,,,--slds-g-color-on-error-2,🔒,---,,---,#8a033e,,pink-30,Fill color for text and icons displayed on top of an error container,
,,,border-color,--slds-g-color-border-error-1,🔒,#ba0517,,red-40,#b60554,,pink-40,Border color for error containers e.g Destructive Buttons.,
,,,,--slds-g-color-border-error-2,🔒,#8e030f,,red-30,#8a033e,,pink-30,Border color (on hover) for error containers e.g. Destructive Buttons.,
,,warning,"color, fill",--slds-g-color-warning-1,🔒,#fe9339,,orange-70,#8c4b02,,yellow-40,Fill color for text and icons displaying a warning,
,,,background-color,--slds-g-color-warning-container-1,🔒,#dd7a01,,orange-60,#f9e3b6,,yellow-90,Warning component containers (background) e.g. warning Toast or Alerts,
,,,"color, fill",--slds-g-color-on-warning-1,🔒,#181818,,neutral-10,#8c4b02,,yellow-40,Fill color for text and icons displayed on top of a warning container,
,,success,"color, fill",--slds-g-color-success-1,🔒,#2e844a,,green-50,#056764,,teal-40,Fill color for text and icons displaying success,
,,,background-color,--slds-g-color-success-container-1,🔒,#2e844a,,green-50,#acf3e4,,teal-90,Success component containers (background) e.g success Toast or Alerts,
,,,,--slds-g-color-success-container-2,🔒,#194e31,,green-30,#04E1CB,,teal-80,Success component containers (background) on hover e.g. Success buttons,
,,,"color, fill",--slds-g-color-on-success-1,🔒,#ffffff,,neutral-100,#056764,,teal-40,Fill color for text and icons displayed on top of a success container,
,,,,--slds-g-color-on-success-2,🔒,#181818,,neutral-10,#024D4C,,teal-30,Fill color (on hover) for text and icons displayed on top of a success container,
,,,border-color,--slds-g-color-border-success-1,🔒,#2e844a,,green-50,#056764,,teal-40,Border color for success containers e.g. Success buttons.,
,,,,--slds-g-color-border-success-2,🔒,#2e844a,,green-50,#024d4c,,teal-30,Border color (on hover) for success containers e.g. Success buttons,
,,info,"color, fill",--slds-g-color-info-1,🔒,#444444,,neutral-30,#0B5CAB,,blue-40,Fill color for text and icons displaying informational content,
,,,background-color,--slds-g-color-info-container-1,🔒,#5c5c5c,,neutral-40,#d6e6ff,,blue-90,Information component containers (background) e.g. Info Toast or Alerts,
,,,"color, fill",--slds-g-color-on-info-1,🔒,#ffffff,,neutral-100,#0B5CAB,,blue-40,Fill color for text and icons displayed on top of a info container,
,,disabled,"color, fill",--slds-g-color-disabled-1,🔒,#c9c9c9,,neutral-80,#c9c9c9,,neutral-80,Fill color for text and icons for disabled components or content,
,,,,--slds-g-color-disabled-2,🔒,#aeaeae,,neutral-70,#c9c9c9,,neutral-80,,mapped to disabled-1
,,,background-color,--slds-g-color-disabled-container-1,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,Disabled component containers (background) for white components,
,,,,--slds-g-color-disabled-container-2,🔒,#c9c9c9,,neutral-80,#c9c9c9,,neutral-80,Disabled component containers (background) for dark components,
,,,"color, fill",--slds-g-color-on-disabled-1,🔒,#939393,,neutral-80,#c9c9c9,,neutral-80,Fill color for text and icons displayed on top of disabled-container-1 (neutral-100),
,,,,--slds-g-color-on-disabled-2,🔒,#aeaeae,,neutral-50,#939393,,neutral-60,Fill color for text and icons displayed on top of disabled-container-2 (neutral-80),
,,,border-color,--slds-g-color-border-disabled-1,🔒,#c9c9c9,,neutral-80,#c9c9c9,,neutral-80,Border color for disabled containers. border-2 becomes border-disabled-1 for disabled states,
,,,,--slds-g-color-border-disabled-2,🔒,#aeaeae,,neutral-70,#c9c9c9,,neutral-80,,mapped to border-disabled-1
System,Color,neutral,*,--slds-g-color-neutral-base-100,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,,
,,,,--slds-g-color-neutral-base-95,🔒,#f3f3f3,,neutral-95,#f3f3f3,,neutral-95,,
,,,,--slds-g-color-neutral-base-90,🔒,#e5e5e5,,neutral-90,#e5e5e5,,neutral-90,,
,,,,--slds-g-color-neutral-base-80,🔒,#c9c9c9,,neutral-80,#c9c9c9,,neutral-80,,
,,,,--slds-g-color-neutral-base-70,🔒,#aeaeae,,neutral-70,#aeaeae,,neutral-70,,
,,,,--slds-g-color-neutral-base-65,🔒,#a0a0a0,,neutral-65,#a0a0a0,,neutral-65,,
,,,,--slds-g-color-neutral-base-60,🔒,#939393,,neutral-60,#939393,,neutral-60,,
,,,,--slds-g-color-neutral-base-50,🔒,#747474,,neutral-50,#747474,,neutral-50,,
,,,,--slds-g-color-neutral-base-40,🔒,#5c5c5c,,neutral-40,#5c5c5c,,neutral-40,,
,,,,--slds-g-color-neutral-base-30,🔒,#444444,,neutral-30,#444444,,neutral-30,,
,,,,--slds-g-color-neutral-base-20,🔒,#2e2e2e,,neutral-20,#2e2e2e,,neutral-20,,
,,,,--slds-g-color-neutral-base-15,🔒,#242424,,neutral-15,#242424,,neutral-15,,
,,,,--slds-g-color-neutral-base-10,🔒,#181818,,neutral-10,#181818,,neutral-10,,
,,brand,,--slds-g-color-brand-base-100,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,,
,,,,--slds-g-color-brand-base-95,🔒,#eef4ff,,blue-95,#edf4ff,,electric-blue-95,Info palette,
,,,,--slds-g-color-brand-base-90,🔒,#d8e6fe,,blue-90,#d6e6ff,,electric-blue-90,Info palette,
,,,,--slds-g-color-brand-base-80,🔒,#aacbff,,blue-80,#a8cbff,,electric-blue-80,Info palette,
,,,,--slds-g-color-brand-base-70,🔒,#78b0fd,,blue-70,#7cb1fe,,electric-blue-70,Info palette,
,,,,--slds-g-color-brand-base-65,🔒,#57a3fd,,blue-65,#5f9ffe,,electric-blue-65,,
,,,,--slds-g-color-brand-base-60,🔒,#1b96ff,,blue-60,#4992fe,,electric-blue-60,Info palette,
,,,,--slds-g-color-brand-base-50,🔒,#0176d3,,blue-50,#066afe,,electric-blue-50,Info palette,
,,,,--slds-g-color-brand-base-40,🔒,#0b5cab,,blue-40,#0250d9,,electric-blue-40,Info palette,
,,,,--slds-g-color-brand-base-30,🔒,#014486,,blue-30,#022ac0,,electric-blue-30,,
,,,,--slds-g-color-brand-base-20,🔒,#032d60,,blue-20,#002775,,electric-blue-20,,
,,,,--slds-g-color-brand-base-15,🔒,#03234d,,blue-15,#001e5b,,electric-blue-15,,
,,,,--slds-g-color-brand-base-10,🔒,#001639,,blue-10,#001642,,electric-blue-10,,
,,error,,--slds-g-color-error-base-100,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,,
,,,,--slds-g-color-error-base-90,🔒,#feded8,,red-90,#fddde3,,pink-90,,
,,,,--slds-g-color-error-base-80,🔒,#feb8ab,,red-80,#fdb6c5,,pink-80,inverse destructive buttons,
,,,,--slds-g-color-error-base-70,🔒,#fe8f7d,,red-70,#fe8aa7,,pink-70,"inverse destructive button active state, ",
,,,,--slds-g-color-error-base-60,🔒,#fe5c4c,,red-60,#ff538a,,pink-60,toast icons,
,,,,--slds-g-color-error-base-50,🔒,#ea001e,,red-50,#e3066a,,pink-50,Text/icons on white backgrounds.,
,,,,--slds-g-color-error-base-40,🔒,#ba0517,,red-40,#b60554,,pink-40,Text/icons on 95 backgrounds. Borders,
,,,,--slds-g-color-error-base-30,🔒,#8e030f,,red-30,#8A033E,,pink-30,Dynamic Badge hover,
,,,,--slds-g-color-error-base-20,🔒,#640103,,red-20,#61022A,,pink-20,,
,,,,--slds-g-color-error-base-10,🔒,#300c01,,red-10,#370114,,pink-10,,
,,warning,,--slds-g-color-warning-base-100,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,,
,,,,--slds-g-color-warning-base-90,🔒,#fedfd0,,orange-90,#f9e3b6,,yellow-90,"badge background,",
,,,,--slds-g-color-warning-base-80,🔒,#ffba90,,orange-80,#FCC003,,yellow-80,"icon on dark, text hover (dynamic badge)",
,,,,--slds-g-color-warning-base-70,🔒,#fe9339,,orange-70,#E4A201,,yellow-70,,
,,,,--slds-g-color-warning-base-60,🔒,#dd7a01,,orange-60,#ca8501,,yellow-60,icon on light gray,
,,,,--slds-g-color-warning-base-50,🔒,#a96404,,orange-50,#a86403,,yellow-50,Text/icons on white backgrounds.,
,,,,--slds-g-color-warning-base-40,🔒,#825101,,orange-40,#8c4b02,,yellow-40,Text/icons on 95 backgrounds. Borders,
,,,,--slds-g-color-warning-base-30,🔒,#5f3e02,,orange-30,#6F3400,,yellow-30,Dynamic Badge hover,
,,,,--slds-g-color-warning-base-20,🔒,#3e2b02,,orange-20,#4F2100,,yellow-20,,
,,,,--slds-g-color-warning-base-10,🔒,#201600,,orange-10,#281202,,yellow-10,,
,,success,,--slds-g-color-success-base-100,🔒,#ffffff,,neutral-100,#ffffff,,neutral-100,,
,,,,--slds-g-color-success-base-90,🔒,#cdefc4,,green-90,#acf3e4,,teal-90,backgrounds,
,,,,--slds-g-color-success-base-80,🔒,#91db8b,,green-80,#04E1CB,,teal-80,text hover (dynamic badge),
,,,,--slds-g-color-success-base-70,🔒,#45c65a,,green-70,#01C3B3,,teal-70,icon on dark,
,,,,--slds-g-color-success-base-60,🔒,#3ba755,,green-60,#06a59a,,teal-60,icon on light gray,
,,,,--slds-g-color-success-base-50,🔒,#2e844a,,green-50,#0b827c,,teal-50,i,
,,,,--slds-g-color-success-base-40,🔒,#22683e,,green-40,#056764,,teal-40,Text/icons on 95 backgrounds. Borders,
,,,,--slds-g-color-success-base-30,🔒,#194e31,,green-30,#024D4C,,teal-30,Dynamic Badge hover,
,,,,--slds-g-color-success-base-20,🔒,#0e3522,,green-20,#023434,,teal-20,,
,,,,--slds-g-color-success-base-10,🔒,#071b12,,green-10,#071B12,,teal-10,,
,Font,,   ,--slds-g-font-family-base,🔒,"system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",,,"MacOS,iOS: SF Pro; Windows: Segoe UI; Chrome OS, Android; Roboto",,,,
,,,,--slds-g-font-family-monospace,🔒,"Consolas, Menlo, Monaco, Courier, monospace",,,"SF Mono, Segoe UI Mono, Roboto Mono",,,,
,,,font-weight,--slds-g-font-weight-1,🔒,<code>100</code>,,,<code>100</code>,,,,
,,,,--slds-g-font-weight-2,🔒,<code>200</code>,,,<code>200</code>,,,,
,,,,--slds-g-font-weight-3,🔒,<code>300</code>,,,<code>300</code>,,,,
,,,,--slds-g-font-weight-4,🔒,<code>400</code>,,,<code>400</code>,,,,
,,,,--slds-g-font-weight-5,🔒,<code>500</code>,,,<code>500</code>,,,,
,,,,--slds-g-font-weight-6,🔒,<code>600</code>,,,<code>600</code>,,,,
,,,,--slds-g-font-weight-7,🔒,<code>700</code>,,,<code>700</code>,,,,
,,,line-height,--slds-g-font-lineheight-base,🔒,<code>1.5</code>,,,<code>1.5</code>,,,,
,,,,--slds-g-font-lineheight-1,🔒,<code>1</code>,,,<code>1</code>,,,,
,,,,--slds-g-font-lineheight-2,🔒,<code>1.25</code>,,,<code>1.25</code>,,,,
,,,,--slds-g-font-lineheight-3,🔒,<code>1.375</code>,,,<code>1.375</code>,,,,
,,,,--slds-g-font-lineheight-4,🔒,<code>1.5</code>,,,<code>1.5</code>,,,,
,,,,--slds-g-font-lineheight-5,🔒,<code>1.75</code>,,,<code>1.75</code>,,,,
,,,,--slds-g-font-lineheight-6,🔒,<code>2</code>,,,<code>2</code>,,,,
,,,font-size,--slds-g-font-scale-neg-4,🔒,-,,,-,,,Font scale = modified minor second 1.067 rounded to the nearest pixel. 13px is our fixed base size.,mapped to font-scale-neg-2
,,,,--slds-g-font-scale-neg-3,🔒,-,,,-,,,,mapped to font-scale-neg-2
,,,,--slds-g-font-scale-neg-2,🔒,0.625rem,,10px,0.625rem,,10px,,
,,,,--slds-g-font-scale-neg-1,🔒,0.75rem,,12px,0.75rem,,12px,,
,,,,--slds-g-font-size-base,🔒,0.8125rem,,13px,0.8125rem,,13px,,
,,,,--slds-g-font-scale-1,🔒,0.875rem,,14px,0.875rem,,14px,,
,,,,--slds-g-font-scale-2,🔒,1rem,,16px,1rem,,16px,,
,,,,--slds-g-font-scale-3,🔒,1.125rem,,18px,1.25rem,,20px,,
,,,,--slds-g-font-scale-4,🔒,1.25rem,,20px,1.5rem,,24px,,
,,,,--slds-g-font-scale-5,🔒,1.5rem,,24px,1.75rem,,28px,,
,,,,--slds-g-font-scale-6,🔒,1.75rem,,28px,2rem,,32px,,
,,,,--slds-g-font-scale-7,🔒,2rem,,32px,2.5rem,,40px,,
,,,,--slds-g-font-scale-8,🔒,2.625rem,,42px,3rem,,48px,,
,,,,--slds-g-font-scale-9,🔒,-,,,-,,,,mapped to font-scale-8
,,,,--slds-g-font-scale-10,🔒,-,,,-,,,,mapped to font-scale-8
,Radius,,border-radius,--slds-g-radius-border-1,🔒,0.125rem,,2px,0.25rem,,4px,"Badge, checkboxes, pills",
,,,,--slds-g-radius-border-2,🔒,0.25rem,,4px,0.5rem,,8px,"Text inputs, comboboxes, text areas, popovers, tooltips",
,,,,--slds-g-radius-border-3,🔒,0.5rem,,8px,0.75rem,,12px,"listboxes, menus",
,,,,--slds-g-radius-border-4,🔒,1rem,,16px,1.25rem,,20px,"Cards, Modals Docked Composer",
,,,,--slds-g-radius-border-circle,🔒,<code>100%</code>,,,<code>100%</code>,,,"Buttons, Button icons, Avatars, Radios",
,,,,--slds-g-radius-border-pill,🔒,15rem,,,15rem,,,,
,Shadows,,box-shadow,bevel tdb,,,,,"2px 2px 5px 0px #0000001A inset; 
0px 0.5px 2px 0px #8C8C8C inset;",,,,internal shadow / bevel
,,,,--slds-g-shadow-1,,"0 0 2px 0 #18181814, 0 2px 4px 1px #18181828",,,"0px 0px 1.5px 0px #00000017; 
0px 1.4px 1.5px 0px #00000017;
0px -1px 1px 0px #0000000B;",,,,
,,,,--slds-g-shadow-2,,"0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828",,,"0px 0px 3px 0px #00000016;
0px 2.8px 3px 0px #00000016; 
0px -1px 1.2px 0px #00000009",,,,
,,,,--slds-g-shadow-3,,"0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828",,,"0px 0px 4.4px 0px #00000014;
0px 4.3px 4.4px 0px #00000017; 
0px -1px 1.44px 0px #00000008;",,,,
,,,,--slds-g-shadow-4,,0 24px 48px -4px #18181833,,,"0px 0px 5.9px 0px #00000012; 
0px 5.7px 5.9px 0px #00000012;
0px -1px 1.7px 0px #00000007;",,,,
,,,,--slds-g-shadow-5,,,,,-,,,,mapped to shadow-4
,,,,--slds-g-shadow-6,,,,,-,,,,mapped to shadow-4
,Sizing,,border-width,--slds-g-sizing-border-1,🔒,1px,,,1px,,,,
,,,,--slds-g-sizing-border-2,🔒,2px,,,2px,,,,
,,,,--slds-g-sizing-border-3,🔒,3px,,,3px,,,,
,,,,--slds-g-sizing-border-4,🔒,4px,,,4px,,,,
,,,"width, height",--slds-g-sizing-1,🔒,0.125rem,,2px,0.125rem,,2px,,
,,,,--slds-g-sizing-2,🔒,0.25rem,,4px,0.25rem,,4px,,
,,,,--slds-g-sizing-3,🔒,0.5rem,,8px,0.5rem,,8px,,
,,,,--slds-g-sizing-4,🔒,0.75rem,,12px,0.75rem,,12px,,
,,,,--slds-g-sizing-5,🔒,1rem,,16px,1rem,,16px,,
,,,,--slds-g-sizing-6,🔒,1.25rem,,20px,1.25rem,,20px,,
,,,,--slds-g-sizing-7,🔒,1.5rem,,24px,1.5rem,,24px,,
,,,,--slds-g-sizing-8,🔒,1.75rem,,28px,1.75rem,,28px,,
,,,,--slds-g-sizing-9,🔒,2rem,,32px,2rem,,32px,,
,,,,--slds-g-sizing-10,🔒,3rem,,48px,3rem,,48px,,
,,,,--slds-g-sizing-11,🔒,4rem,,64px,4rem,,64px,,
,,,,--slds-g-sizing-12,🔒,5rem,,80px,5rem,,80px,,
,,,,--slds-g-sizing-13,🔒,10rem,,160px,10rem,,160px,,
,,,,--slds-g-sizing-14,🔒,15rem,,240px,15rem,,240px,,
,,,,--slds-g-sizing-15,🔒,20rem,,320px,20rem,,320px,,
,,,,--slds-g-sizing-16,🔒,30rem,,480px,30rem,,480px,,
,,,"width , max-inline-size (text only)",--slds-g-sizing-content-1,🔒,20ch,,,20ch,,,,
,,,,--slds-g-sizing-content-2,🔒,45ch,,,45ch,,,,
,,,,--slds-g-sizing-content-3,🔒,60ch,,,60ch,,,,
,,,"width , max-inline-size (text heading only)",--slds-g-sizing-heading-1,🔒,25ch,,,25ch,,,,
,,,,--slds-g-sizing-heading-2,🔒,25ch,,,25ch,,,,
,,,,--slds-g-sizing-heading-3,🔒,35ch,,,35ch,,,,
,Spacing,,"padding*,margin*",--slds-g-spacing-1,🔒,0.25rem,,4px,0.25rem,,4px,,
,,,,--slds-g-spacing-2,🔒,0.5rem,,8px,0.5rem,,8px,,
,,,,--slds-g-spacing-3,🔒,0.75rem,,12px,0.75rem,,12px,,
,,,,--slds-g-spacing-4,🔒,1rem,,16px,1rem,,16px,,
,,,,--slds-g-spacing-5,🔒,1.5rem,,24px,1.25rem,,20px,,
,,,,--slds-g-spacing-6,🔒,2rem,,32px,1.5rem,,24px,,
,,,,--slds-g-spacing-7,🔒,2.5rem,,40px,1.75rem ,,28px,,
,,,,--slds-g-spacing-8,🔒,3rem,,48px,2rem ,,32px,,
,,,,--slds-g-spacing-9,🔒,3.5rem,,56px,2.5rem ,,40px,,
,,,,--slds-g-spacing-10,🔒,4rem,,64px,3rem,,48px,,
,,,,--slds-g-spacing-11,🔒,4.5rem,,72px,3.5rem ,,56px,,
,,,,--slds-g-spacing-12,🔒,5rem,,80px,4rem ,,64px,,