diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
index a12de556e620..572640299360 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
@@ -80,6 +80,8 @@
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
index 85acdb265346..d1fb0842e201 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
@@ -61,6 +61,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -123,6 +125,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -185,6 +189,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -247,6 +253,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
index 2da2d59d009f..a4a4873bf87c 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
@@ -261,6 +261,16 @@ $disabled-03: map-get($carbon--theme, 'disabled-03') !default;
 /// @access public
 /// @group @carbon/themes
 $highlight: map-get($carbon--theme, 'highlight') !default;
+/// Skeleton state of graphics
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-01: map-get($carbon--theme, 'skeleton-01') !default;
+/// Skeleton state of text
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-02: map-get($carbon--theme, 'skeleton-02') !default;
 /// @type Color
 /// @access public
 /// @group @carbon/themes
diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
index a12de556e620..572640299360 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
@@ -80,6 +80,8 @@
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
index 85acdb265346..d1fb0842e201 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
@@ -61,6 +61,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -123,6 +125,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -185,6 +189,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -247,6 +253,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
index 2da2d59d009f..a4a4873bf87c 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
@@ -261,6 +261,16 @@ $disabled-03: map-get($carbon--theme, 'disabled-03') !default;
 /// @access public
 /// @group @carbon/themes
 $highlight: map-get($carbon--theme, 'highlight') !default;
+/// Skeleton state of graphics
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-01: map-get($carbon--theme, 'skeleton-01') !default;
+/// Skeleton state of text
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-02: map-get($carbon--theme, 'skeleton-02') !default;
 /// @type Color
 /// @access public
 /// @group @carbon/themes
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index 0cd6c8e84aee..77de23fb2a8d 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -168,6 +168,8 @@
   - [✅disabled-02 [variable]](#disabled-02-variable)
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
+  - [✅skeleton-01 [variable]](#skeleton-01-variable)
+  - [✅skeleton-02 [variable]](#skeleton-02-variable)
   - [✅⚠️brand-01 [variable]](#brand-01-variable)
   - [✅⚠️brand-02 [variable]](#brand-02-variable)
   - [✅⚠️brand-03 [variable]](#brand-03-variable)
@@ -3341,6 +3343,8 @@ Define theme variables from a map of tokens
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
@@ -3442,6 +3446,8 @@ Define theme variables from a map of tokens
   - [disabled-02 [variable]](#disabled-02-variable)
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
+  - [skeleton-01 [variable]](#skeleton-01-variable)
+  - [skeleton-02 [variable]](#skeleton-02-variable)
   - [brand-01 [variable]](#brand-01-variable)
   - [brand-02 [variable]](#brand-02-variable)
   - [brand-03 [variable]](#brand-03-variable)
@@ -3509,6 +3515,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -3584,6 +3592,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -3657,6 +3667,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -3730,6 +3742,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -4686,6 +4700,42 @@ $highlight: map-get($carbon--theme, 'highlight');
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-01 [variable]
+
+Skeleton state of graphics
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-01: map-get($carbon--theme, 'skeleton-01');
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-02 [variable]
+
+Skeleton state of text
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-02: map-get($carbon--theme, 'skeleton-02');
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `Color`
 - **Used by**:
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
index 8f2703dc8e1a..9038285fcb34 100644
--- a/packages/themes/docs/sass.md
+++ b/packages/themes/docs/sass.md
@@ -66,6 +66,8 @@
   - [✅disabled-02 [variable]](#disabled-02-variable)
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
+  - [✅skeleton-01 [variable]](#skeleton-01-variable)
+  - [✅skeleton-02 [variable]](#skeleton-02-variable)
   - [✅⚠️brand-01 [variable]](#brand-01-variable)
   - [✅⚠️brand-02 [variable]](#brand-02-variable)
   - [✅⚠️brand-03 [variable]](#brand-03-variable)
@@ -136,6 +138,8 @@ Define theme variables from a map of tokens
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
@@ -237,6 +241,8 @@ Define theme variables from a map of tokens
   - [disabled-02 [variable]](#disabled-02-variable)
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
+  - [skeleton-01 [variable]](#skeleton-01-variable)
+  - [skeleton-02 [variable]](#skeleton-02-variable)
   - [brand-01 [variable]](#brand-01-variable)
   - [brand-02 [variable]](#brand-02-variable)
   - [brand-03 [variable]](#brand-03-variable)
@@ -304,6 +310,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -379,6 +387,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -452,6 +462,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -525,6 +537,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -1481,6 +1495,42 @@ $highlight: map-get($carbon--theme, 'highlight');
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-01 [variable]
+
+Skeleton state of graphics
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-01: map-get($carbon--theme, 'skeleton-01');
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅skeleton-02 [variable]
+
+Skeleton state of text
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$skeleton-02: map-get($carbon--theme, 'skeleton-02');
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `Color`
 - **Used by**:
diff --git a/packages/themes/metadata.yml b/packages/themes/metadata.yml
index a6099caf52cc..0dda81b7aa30 100644
--- a/packages/themes/metadata.yml
+++ b/packages/themes/metadata.yml
@@ -191,6 +191,12 @@ tokens:
   - name: highlight
     role:
       - interactive01 high light
+  - name: skeleton01
+    role:
+      - Skeleton state of graphics
+  - name: skeleton02
+    role:
+      - Skeleton state of text
   - name: brand01
     alias: interactive01
     deprecated: true
diff --git a/packages/themes/scss/_mixins.scss b/packages/themes/scss/_mixins.scss
index a12de556e620..572640299360 100644
--- a/packages/themes/scss/_mixins.scss
+++ b/packages/themes/scss/_mixins.scss
@@ -80,6 +80,8 @@
   $disabled-02: map-get($theme, 'disabled-02') !global;
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
+  $skeleton-01: map-get($theme, 'skeleton-01') !global;
+  $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
   $brand-02: map-get($theme, 'brand-02') !global;
   $brand-03: map-get($theme, 'brand-03') !global;
diff --git a/packages/themes/scss/_theme-maps.scss b/packages/themes/scss/_theme-maps.scss
index 85acdb265346..d1fb0842e201 100644
--- a/packages/themes/scss/_theme-maps.scss
+++ b/packages/themes/scss/_theme-maps.scss
@@ -61,6 +61,8 @@ $carbon--theme--white: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -123,6 +125,8 @@ $carbon--theme--g10: (
   disabled-02: #bebebe,
   disabled-03: #8c8c8c,
   highlight: #c9deff,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #bebebe,
   brand-01: #0062ff,
   brand-02: #171717,
   brand-03: #0062ff,
@@ -185,6 +189,8 @@ $carbon--theme--g90: (
   disabled-02: #565656,
   disabled-03: #8c8c8c,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #565656,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
@@ -247,6 +253,8 @@ $carbon--theme--g100: (
   disabled-02: #3d3d3d,
   disabled-03: #6f6f6f,
   highlight: #061f80,
+  skeleton-01: #353535,
+  skeleton-02: #3d3d3d,
   brand-01: #0062ff,
   brand-02: #6f6f6f,
   brand-03: #ffffff,
diff --git a/packages/themes/scss/_tokens.scss b/packages/themes/scss/_tokens.scss
index 2da2d59d009f..a4a4873bf87c 100644
--- a/packages/themes/scss/_tokens.scss
+++ b/packages/themes/scss/_tokens.scss
@@ -261,6 +261,16 @@ $disabled-03: map-get($carbon--theme, 'disabled-03') !default;
 /// @access public
 /// @group @carbon/themes
 $highlight: map-get($carbon--theme, 'highlight') !default;
+/// Skeleton state of graphics
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-01: map-get($carbon--theme, 'skeleton-01') !default;
+/// Skeleton state of text
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$skeleton-02: map-get($carbon--theme, 'skeleton-02') !default;
 /// @type Color
 /// @access public
 /// @group @carbon/themes
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index db4a9ce26f6f..264c6f58f9bb 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -114,6 +114,9 @@ export const disabled03 = gray50;
 
 export const highlight = blue20;
 
+export const skeleton01 = '#e5e5e5';
+export const skeleton02 = gray30;
+
 // Deprecated ☠️
 export const brand01 = interactive01;
 export const brand02 = interactive02;
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 0d2af998de5a..5dea798f49f2 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -114,6 +114,9 @@ export const disabled03 = gray60;
 
 export const highlight = blue90;
 
+export const skeleton01 = '#353535';
+export const skeleton02 = gray80;
+
 // Deprecated ☠️
 export const brand01 = interactive01;
 export const brand02 = interactive02;
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 289106ef81f8..a4ef2611280b 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -115,6 +115,9 @@ export const disabled03 = gray50;
 
 export const highlight = blue90;
 
+export const skeleton01 = '#353535';
+export const skeleton02 = gray70;
+
 // Deprecated ☠️
 export const brand01 = interactive01;
 export const brand02 = interactive02;
diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js
index d019d8a0569a..ff4ac2a015ef 100644
--- a/packages/themes/src/tokens.js
+++ b/packages/themes/src/tokens.js
@@ -83,6 +83,9 @@ const colors = [
 
   'highlight',
 
+  'skeleton01',
+  'skeleton02',
+
   // Deprecated
   'brand01',
   'brand02',
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index e4f74afb34eb..12bdc00e2ffd 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -114,6 +114,9 @@ export const disabled03 = gray50;
 
 export const highlight = blue20;
 
+export const skeleton01 = '#e5e5e5';
+export const skeleton02 = gray30;
+
 // Deprecated ☠️
 export const brand01 = interactive01;
 export const brand02 = interactive02;