diff --git a/scss/core/core.scss b/scss/core/core.scss
index 8dba102ca3..4605e6bf6d 100644
--- a/scss/core/core.scss
+++ b/scss/core/core.scss
@@ -1,4 +1,5 @@
 @import "css/variables";
+@import "css/custom-media-breakpoints";
 @import "functions";
 @import "variables";
 @import "~bootstrap/scss/mixins";
diff --git a/scss/core/css/custom-media-breakpoints.css b/scss/core/css/custom-media-breakpoints.css
new file mode 100644
index 0000000000..e368a857ca
--- /dev/null
+++ b/scss/core/css/custom-media-breakpoints.css
@@ -0,0 +1,12 @@
+/**
+ * IMPORTANT: This file is the result of assembling design tokens
+ * Do not edit directly
+ * Generated on Fri, 24 Feb 2023 11:38:50 GMT
+ */
+
+@custom-media --pgn-size-breakpoint-xs (max-width: 0); 
+@custom-media --pgn-size-breakpoint-sm (max-width: 576px); 
+@custom-media --pgn-size-breakpoint-md (max-width: 768px); 
+@custom-media --pgn-size-breakpoint-lg (max-width: 992px); 
+@custom-media --pgn-size-breakpoint-xl (max-width: 1200px); 
+@custom-media --pgn-size-breakpoint-xxl (max-width: 1400px); 
diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js
index f8df5107d0..3098ea6ce5 100755
--- a/tokens/build-tokens.js
+++ b/tokens/build-tokens.js
@@ -42,6 +42,13 @@ const config = {
             outputReferences: true,
           },
         },
+        {
+          format: 'css/custom-media-breakpoints',
+          destination: 'custom-media-breakpoints.css',
+          options: {
+            outputReferences: true,
+          },
+        },
       ],
       transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
       options: {
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index c2cf345075..dc3443d1a8 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -154,4 +154,24 @@ StyleDictionary.registerFormat({
   },
 });
 
+/**
+ * Formatter to generate CSS custom media queries for responsive breakpoints.
+ * Gets input about existing tokens of the 'size' category,
+ * 'breakpoints' subcategory, and generates a CSS custom media queries.
+ */
+StyleDictionary.registerFormat({
+  name: 'css/custom-media-breakpoints',
+  formatter({ dictionary, file }) {
+    const { size: { breakpoint } } = dictionary.properties;
+
+    let customMediaVariables = '';
+
+    Object.values(breakpoint).forEach(item => {
+      customMediaVariables += `@custom-media --${item.name} (max-width: ${item.value}); \n`;
+    });
+
+    return fileHeader({ file }) + customMediaVariables;
+  },
+});
+
 module.exports = StyleDictionary;