diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs
index 9b83a1c23c6..5fbef1b94af 100644
--- a/packages/components/rollup.config.mjs
+++ b/packages/components/rollup.config.mjs
@@ -9,6 +9,7 @@ import copy from 'rollup-plugin-copy';
 import scss from 'rollup-plugin-scss';
 import process from 'process';
 import path from 'node:path';
+import * as sass from 'sass';
 
 const addon = new Addon({
   srcDir: 'src',
@@ -61,6 +62,31 @@ const plugins = [
     fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
   }),
 
+  // Custom plugin to compile the themed SCSS with different include paths
+  {
+    name: 'compile-themed-scss',
+    generateBundle() {
+      // Compile the themed SCSS file
+      try {
+        const result = sass.compile('src/styles/@hashicorp/design-system-components-with-css-selectors.scss', {
+          // equivalent to includePaths in rollup-plugin-scss
+          loadPaths: [
+            'node_modules/@hashicorp/design-system-tokens/dist/products/css/themed-tokens/with-css-selectors',
+          ],
+        });
+        
+        // Emit the compiled CSS
+        this.emitFile({
+          type: 'asset',
+          fileName: 'styles/@hashicorp/design-system-components-with-css-selectors.css',
+          source: result.css,
+        });
+      } catch (error) {
+        this.error(`Failed to compile themed SCSS: ${error.message}`);
+      }
+    },
+  },
+
   // Ensure that standalone .hbs files are properly integrated as Javascript.
   addon.hbs(),
 
diff --git a/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss
new file mode 100644
index 00000000000..4c30f8588da
--- /dev/null
+++ b/packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// this file comes from packages/tokens/dist/products/css/tokens.css
+@use "tokens";
+@use "../mixins/screen-reader-only" as *;
+
+.sr-only {
+  @include screen-reader-only();
+}
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css
new file mode 100644
index 00000000000..592d7afc00b
--- /dev/null
+++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css
@@ -0,0 +1,68 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.hds-theme-default,
+[data-hds-theme="default"] {
+  --token-color-palette-neutral-300: #000000;
+  --token-color-palette-neutral-0: #ffffff;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-0
+  );
+}
+
+.hds-theme-cds-0,
+[data-hds-theme="cds-0"] {
+  --token-color-palette-neutral-300: #c00000;
+  --token-color-palette-neutral-0: #cfffff;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-100
+  );
+}
+
+.hds-theme-cds-10,
+[data-hds-theme="cds-10"] {
+  --token-color-palette-neutral-300: #c33333;
+  --token-color-palette-neutral-0: #cccccc;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-200
+  );
+}
+
+.hds-theme-cds-90,
+[data-hds-theme="cds-90"] {
+  --token-color-palette-neutral-300: #cccccc;
+  --token-color-palette-neutral-0: #c33333;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-300
+  );
+}
+
+.hds-theme-cds-100,
+[data-hds-theme="cds-100"] {
+  --token-color-palette-neutral-300: #cfffff;
+  --token-color-palette-neutral-0: #c00000;
+  --token-color-foreground-semantic-outlier: #abcdef;
+}
+
+:root {
+  --token-color-palette-neutral-300: #000000;
+  --token-color-palette-neutral-0: #ffffff;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-0
+  );
+}
+
+:root {
+  --token-color-palette-neutral-200: #dedfe3;
+  --token-color-palette-neutral-100: #f1f2f3;
+  --token-component-a-size: 123px;
+  --token-color-foreground-strong: var(--token-color-palette-neutral-300);
+  --token-color-foreground-primary: var(--token-color-palette-neutral-200);
+  --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0);
+  --token-component-a-color: var(--token-color-palette-neutral-300);
+  --token-component-b-color: var(--token-color-palette-neutral-200);
+  --token-component-b-size: var(--token-component-a-size);
+  --token-component-c-color: var(--token-color-foreground-high-contrast);
+  --token-component-d-color: var(--token-color-foreground-semantic-outlier);
+}
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css
new file mode 100644
index 00000000000..90db7cd8b13
--- /dev/null
+++ b/packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css
@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --token-color-palette-neutral-300: #c00000;
+    --token-color-palette-neutral-0: #cfffff;
+    --token-color-foreground-semantic-outlier: var(
+      --token-color-palette-neutral-100
+    );
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --token-color-palette-neutral-300: #cfffff;
+    --token-color-palette-neutral-0: #c00000;
+    --token-color-foreground-semantic-outlier: #abcdef;
+  }
+}
+
+:root {
+  --token-color-palette-neutral-200: #dedfe3;
+  --token-color-palette-neutral-100: #f1f2f3;
+  --token-component-a-size: 123px;
+  --token-color-foreground-strong: var(--token-color-palette-neutral-300);
+  --token-color-foreground-primary: var(--token-color-palette-neutral-200);
+  --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0);
+  --token-component-a-color: var(--token-color-palette-neutral-300);
+  --token-component-b-color: var(--token-color-palette-neutral-200);
+  --token-component-b-size: var(--token-component-a-size);
+  --token-component-c-color: var(--token-color-foreground-high-contrast);
+  --token-component-d-color: var(--token-color-foreground-semantic-outlier);
+}
diff --git a/showcase/app/components/page-components/badge-count/index.gts b/showcase/app/components/page-components/badge-count/index.gts
index f0783b3ad1d..af27dacb306 100644
--- a/showcase/app/components/page-components/badge-count/index.gts
+++ b/showcase/app/components/page-components/badge-count/index.gts
@@ -4,13 +4,14 @@
  */
 
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContent from 'showcase/components/page-components/badge-count/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge-count/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/badge-count/sub-sections/carbonization';
 
 const BadgeCountIndex: TemplateOnlyComponent = <template>
   {{pageTitle "BadgeCount Component"}}
@@ -21,6 +22,15 @@ const BadgeCountIndex: TemplateOnlyComponent = <template>
     <SubSectionContent />
     <SubSectionVariants />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default BadgeCountIndex;
diff --git a/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..21e9f6e361e
--- /dev/null
+++ b/showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+// import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsBadgeCount } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge-count/index';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwTextH2>Size</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsBadgeCount @text="3" @size={{size}} />
+            <HdsBadgeCount @text="99+" @size={{size}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Type</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item>
+            <HdsBadgeCount @text="3" @type={{type}} />
+            <HdsBadgeCount @text="99+" @type={{type}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Color</ShwTextH2>
+
+  {{#each COLORS as |color index|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq index 0) true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--{{color}}">
+              <HdsBadgeCount @text="3" @type={{type}} @color={{color}} />
+              <HdsBadgeCount @text="99+" @type={{type}} @color={{color}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each}}
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-components/badge/index.gts b/showcase/app/components/page-components/badge/index.gts
index 532b10f63e2..9fb9e9d2721 100644
--- a/showcase/app/components/page-components/badge/index.gts
+++ b/showcase/app/components/page-components/badge/index.gts
@@ -7,10 +7,12 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/badge/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/badge/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/badge/sub-sections/carbonization';
 
 const BadgeIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Badge Component"}}
@@ -22,6 +24,15 @@ const BadgeIndex: TemplateOnlyComponent = <template>
     <SubSectionVariants />
     <SubSectionContainers />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default BadgeIndex;
diff --git a/showcase/app/components/page-components/badge/sub-sections/carbonization.gts b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..f4430b2c6bd
--- /dev/null
+++ b/showcase/app/components/page-components/badge/sub-sections/carbonization.gts
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+// import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge/index';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwTextH2>Content</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <HdsBadge @text="Only text" />
+        </SF.Item>
+        <SF.Item>
+          <HdsBadge @icon="activity" @text="Text + icon" />
+        </SF.Item>
+        <SF.Item>
+          <HdsBadge @icon="activity" @text="Only icon" @isIconOnly={{true}} />
+        </SF.Item>
+        <SF.Item {{style width="200px"}}>
+          <HdsBadge
+            @icon="activity"
+            @text="This is a very long text that should go on two lines"
+          />
+        </SF.Item>
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Size</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsBadge
+              @icon="activity"
+              @isIconOnly={{true}}
+              @text="Lorem ipsum"
+              @size={{size}}
+            />
+            <HdsBadge @icon="activity" @text="Lorem ipsum" @size={{size}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Type</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item>
+            <HdsBadge
+              @icon="activity"
+              @isIconOnly={{true}}
+              @text="Lorem ipsum"
+              @type={{type}}
+            />
+            <HdsBadge @icon="activity" @text="Lorem ipsum" @type={{type}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Color</ShwTextH2>
+
+  {{#each COLORS as |color index|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq index 0) true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--{{color}}">
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem Ipsum"
+                @type={{type}}
+                @color={{color}}
+                @isIconOnly={{true}}
+              />
+              <HdsBadge
+                @icon="activity"
+                @text="Lorem ipsum"
+                @type={{type}}
+                @color={{color}}
+              />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each}}
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-components/badge/sub-sections/content.gts b/showcase/app/components/page-components/badge/sub-sections/content.gts
index 0f49ea5915a..2e08c5da7a1 100644
--- a/showcase/app/components/page-components/badge/sub-sections/content.gts
+++ b/showcase/app/components/page-components/badge/sub-sections/content.gts
@@ -6,8 +6,8 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import style from 'ember-style-modifier';
 
-import ShwFlex from 'showcase/components/shw/flex';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
 
 import { HdsBadge } from '@hashicorp/design-system-components/components';
 
diff --git a/showcase/app/components/page-components/button/index.gts b/showcase/app/components/page-components/button/index.gts
index fcebeaf707f..edbb65c94e0 100644
--- a/showcase/app/components/page-components/button/index.gts
+++ b/showcase/app/components/page-components/button/index.gts
@@ -6,6 +6,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/button/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/button/sub-sections/content';
@@ -13,6 +14,7 @@ import SubSectionDisplay from 'showcase/components/page-components/button/sub-se
 import SubSectionGeneratedElement from 'showcase/components/page-components/button/sub-sections/generated-element';
 import SubSectionStates from 'showcase/components/page-components/button/sub-sections/states';
 import SubSectionVariants from 'showcase/components/page-components/button/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/button/sub-sections/carbonization';
 
 const ButtonIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Button Component"}}
@@ -28,6 +30,15 @@ const ButtonIndex: TemplateOnlyComponent = <template>
     <SubSectionStates />
     <SubSectionContainers />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default ButtonIndex;
diff --git a/showcase/app/components/page-components/button/sub-sections/carbonization.gts b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..3f41a999f47
--- /dev/null
+++ b/showcase/app/components/page-components/button/sub-sections/carbonization.gts
@@ -0,0 +1,128 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+import { capitalize } from '@ember/string';
+import { eq } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextBody from 'showcase/components/shw/text/body';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+} from '@hashicorp/design-system-components/components/hds/button/index';
+
+// these are used only for presentation purpose in the showcase
+const STATES = ['default', 'hover', 'active', 'focus', 'disabled'];
+
+import CodeFragmentWithLoadingState from 'showcase/components/page-components/button/code-fragments/with-loading-state';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwTextH2>Content</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <HdsButton @text="Lorem ipsum" />
+        </SF.Item>
+        <SF.Item>
+          <HdsButton @icon="plus" @iconPosition="leading" @text="Lorem ipsum" />
+        </SF.Item>
+        <SF.Item>
+          <HdsButton
+            @icon="arrow-right"
+            @iconPosition="trailing"
+            @text="Lorem ipsum"
+          />
+        </SF.Item>
+        <SF.Item>
+          <HdsButton @icon="plus" @isIconOnly={{true}} @text="Lorem ipsum" />
+        </SF.Item>
+        <SF.Item {{style width="200px"}}>
+          <HdsButton
+            @icon="plus"
+            @text="This is a very long text that should go on multiple lines"
+          />
+        </SF.Item>
+        <SF.Item {{style width="150px"}}>
+          <CodeFragmentWithLoadingState />
+        </SF.Item>
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Sizes</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsButton
+              @icon="plus"
+              @text="Lorem ipsum"
+              @size={{size}}
+              @isInline={{true}}
+            />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Colors</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each COLORS as |color|}}
+          <SF.Item>
+            <HdsButton @icon="plus" @text="Lorem ipsum" @color={{color}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>States</ShwTextH2>
+
+  {{#each COLORS as |color|}}
+    <ShwTextH3>{{capitalize color}}</ShwTextH3>
+    {{#each STATES as |state|}}
+      <ShwTextBody>{{state}}</ShwTextBody>
+      <ShwCarbonizationComparisonGrid>
+        <:themed>
+          <ShwFlex @direction="column" @gap="0.75rem" as |SF|>
+            {{#each SIZES as |size|}}
+              <SF.Item>
+                {{#if (eq state "disabled")}}
+                  <HdsButton
+                    @icon="plus"
+                    @text="Lorem"
+                    @size={{size}}
+                    @color={{color}}
+                    disabled
+                  />
+                {{else}}
+                  <HdsButton
+                    @icon="plus"
+                    @text="Lorem"
+                    @size={{size}}
+                    @color={{color}}
+                    mock-state-value={{state}}
+                  />
+                {{/if}}
+              </SF.Item>
+            {{/each}}
+          </ShwFlex>
+        </:themed>
+      </ShwCarbonizationComparisonGrid>
+    {{/each}}
+  {{/each}}
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-foundations/focus-ring/index.gts b/showcase/app/components/page-foundations/focus-ring/index.gts
index 696af96d4ea..7efc5d2c742 100644
--- a/showcase/app/components/page-foundations/focus-ring/index.gts
+++ b/showcase/app/components/page-foundations/focus-ring/index.gts
@@ -6,9 +6,11 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionBase from 'showcase/components/page-foundations/focus-ring/sub-sections/base';
 import SubSectionVariants from 'showcase/components/page-foundations/focus-ring/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-foundations/focus-ring/sub-sections/carbonization';
 
 const FocusRingIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Focus ring"}}
@@ -19,6 +21,15 @@ const FocusRingIndex: TemplateOnlyComponent = <template>
     <SubSectionBase />
     <SubSectionVariants />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default FocusRingIndex;
diff --git a/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..b48c7417471
--- /dev/null
+++ b/showcase/app/components/page-foundations/focus-ring/sub-sections/carbonization.gts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier/modifiers/style';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        <SF.Item>
+          <div
+            class="hds-focus-ring-action-box-shadow"
+            {{style width="fit-content"}}
+          >
+            <ShwPlaceholder
+              @text="no radius"
+              @width="100"
+              @height="100"
+              @background="transparent"
+            />
+          </div>
+        </SF.Item>
+        <SF.Item>
+          <div
+            class="hds-focus-ring-action-box-shadow"
+            {{style border-radius="5px" width="fit-content"}}
+          >
+            <ShwPlaceholder
+              @text="with border radius"
+              @width="100"
+              @height="100"
+              @background="transparent"
+            />
+          </div>
+        </SF.Item>
+        <SF.Item>
+          <div
+            class="hds-focus-ring-critical-box-shadow"
+            {{style border-radius="5px" width="fit-content"}}
+          >
+            <ShwPlaceholder
+              @text="with border radius"
+              @width="100"
+              @height="100"
+              @background="transparent"
+            />
+          </div>
+        </SF.Item>
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-foundations/typography/index.gts b/showcase/app/components/page-foundations/typography/index.gts
index 02a1b0e68e5..c8c87ffd3c7 100644
--- a/showcase/app/components/page-foundations/typography/index.gts
+++ b/showcase/app/components/page-foundations/typography/index.gts
@@ -6,10 +6,12 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionFamilies from 'showcase/components/page-foundations/typography/sub-sections/families';
 import SubSectionWeights from 'showcase/components/page-foundations/typography/sub-sections/weights';
 import SubSectionStyles from 'showcase/components/page-foundations/typography/sub-sections/styles';
+import SubSectionCarbonization from 'showcase/components/page-foundations/typography/sub-sections/carbonization';
 
 const TypographyIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Typography"}}
@@ -21,6 +23,15 @@ const TypographyIndex: TemplateOnlyComponent = <template>
     <SubSectionWeights />
     <SubSectionStyles />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default TypographyIndex;
diff --git a/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
new file mode 100644
index 00000000000..48ebfe226bb
--- /dev/null
+++ b/showcase/app/components/page-foundations/typography/sub-sections/carbonization.gts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { STYLES_COMBINATIONS } from './styles';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  {{#each-in STYLES_COMBINATIONS as |style weights|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq style "display-500") true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each weights as |weight|}}
+            <SF.Item>
+              <p
+                class="hds-typography-{{style}} hds-font-weight-{{weight}}"
+              >{{style}} / {{weight}}</p>
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each-in}}
+</template>;
+
+export default SubSectionCarbonization;
diff --git a/showcase/app/components/page-foundations/typography/sub-sections/styles.gts b/showcase/app/components/page-foundations/typography/sub-sections/styles.gts
index a79719d9629..ff1ceb8a4f2 100644
--- a/showcase/app/components/page-foundations/typography/sub-sections/styles.gts
+++ b/showcase/app/components/page-foundations/typography/sub-sections/styles.gts
@@ -9,7 +9,7 @@ import ShwTextBody from 'showcase/components/shw/text/body';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
 
 // we add all the allowed combinations here, per design specs
-const STYLES_COMBINATIONS = {
+export const STYLES_COMBINATIONS = {
   'display-500': ['bold'],
   'display-400': ['medium', 'semibold', 'bold'],
   'display-300': ['medium', 'semibold', 'bold'],
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
new file mode 100644
index 00000000000..386a499dffd
--- /dev/null
+++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts
@@ -0,0 +1,65 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { eq } from 'ember-truth-helpers';
+
+import ShwLabel from 'showcase/components/shw/label';
+import ShwCarbonizationComparisonGridItem from './item';
+
+export interface ShwCarbonizationComparisonGridSignature {
+  Args: {
+    label?: string;
+    hideThemeLabels?: boolean;
+  };
+  Blocks: {
+    label: [];
+    themed: [];
+    reference: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export const THEMES = [
+  'hds',
+  'cds-g0',
+  'cds-g10',
+  'cds-g90',
+  'cds-g100',
+] as const;
+
+export type Theme = (typeof THEMES)[number];
+
+const ShwCarbonizationComparisonGrid: TemplateOnlyComponent<ShwCarbonizationComparisonGridSignature> =
+  <template>
+    {{#if @label}}
+      <ShwLabel>{{@label}}</ShwLabel>
+    {{/if}}
+    {{#if (has-block "label")}}
+      <ShwLabel>{{yield to="label"}}</ShwLabel>
+    {{/if}}
+    <div class="shw-carbonization-comparison-grid" ...attributes>
+      {{#if (has-block "themed")}}
+        {{#each THEMES as |theme|}}
+          <ShwCarbonizationComparisonGridItem
+            @scope="show"
+            @theme={{theme}}
+            @label={{(unless @hideThemeLabels theme)}}
+          >
+            {{yield to="themed"}}
+          </ShwCarbonizationComparisonGridItem>
+        {{/each}}
+      {{/if}}
+      {{#if (has-block "reference")}}
+        {{#each THEMES as |theme|}}
+          {{#unless (eq theme "hds")}}
+            <ShwCarbonizationComparisonGridItem
+              @scope="reference"
+              @theme={{theme}}
+            >
+              {{yield to="reference"}}
+            </ShwCarbonizationComparisonGridItem>
+          {{/unless}}
+        {{/each}}
+      {{/if}}
+    </div>
+  </template>;
+
+export default ShwCarbonizationComparisonGrid;
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
new file mode 100644
index 00000000000..e38b4e44bf7
--- /dev/null
+++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { eq } from 'ember-truth-helpers';
+
+import ShwLabel from '../../label';
+
+import type { ComponentLike } from '@glint/template';
+import type { ShwLabelSignature } from 'showcase/components/shw/label';
+
+import type { Theme } from './index';
+
+export interface ShwCarbonizationComparisonGridItemSignature {
+  Args: {
+    label?: string;
+    theme: Theme;
+    scope: 'show' | 'reference';
+  };
+  Blocks: {
+    default: [
+      {
+        Label?: ComponentLike<ShwLabelSignature>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class ShwCarbonizationComparisonGridItem extends Component<ShwCarbonizationComparisonGridItemSignature> {
+  get areaName(): string {
+    if (this.args.scope === 'reference') {
+      // `hds` is not included in the loop for the references
+      return this.args.theme.replace('cds', 'cwc');
+    } else {
+      return this.args.theme;
+    }
+  }
+
+  get classNames(): string {
+    const classes = ['shw-carbonization-comparison-grid__item'];
+
+    // add a class based on the `@scope` argument
+    classes.push(
+      `shw-carbonization-comparison-grid__item--scope-${this.args.scope}`,
+    );
+
+    // add a class based on `this.area`
+    classes.push(
+      `shw-carbonization-comparison-grid__item--area-${this.areaName}`,
+    );
+
+    return classes.join(' ');
+  }
+
+  get themeSelector(): string {
+    if (this.args.scope === 'reference') {
+      // TODO! once the theming CSS is ready, update this to use the right CSS selector
+      return `data-hds-theme="${this.args.theme}"`;
+      // TODO! add here a way for the Carbon web components to be locally themed
+    } else {
+      return `data-cds-theme="${this.args.theme}"`;
+    }
+  }
+
+  <template>
+    <div
+      class={{this.classNames}}
+      ...attributes
+      {{! TODO! once the theming CSS is ready, update this to use the right CSS selector }}
+      data-hds-theme={{if (eq @scope "show") @theme}}
+      {{! TODO! add here a way for the Carbon web components to be locally themed }}
+      data-cds-theme={{if (eq @scope "reference") @theme}}
+    >
+      {{#if @label}}
+        <ShwLabel>{{@label}}</ShwLabel>
+      {{/if}}
+      {{yield (hash Label=ShwLabel)}}
+    </div>
+  </template>
+}
diff --git a/showcase/app/components/shw/yield.gts b/showcase/app/components/shw/yield.gts
new file mode 100644
index 00000000000..2bc89c6157b
--- /dev/null
+++ b/showcase/app/components/shw/yield.gts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export interface ShwYieldSignature {
+  Blocks: {
+    default?: [];
+  };
+}
+
+const ShwYield: TemplateOnlyComponent<ShwYieldSignature> = <template>
+  <yield />
+</template>;
+
+export default ShwYield;
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index fb06fee50bd..80d3ef63bef 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -23,6 +23,7 @@
 @use "./showcase-components/label";
 @use "./showcase-components/outliner";
 @use "./showcase-components/placeholder";
+@use "./showcase-components/carbonization/comparison-grid";
 @use "./mock-components/app";
 @use "./mock-components/demo/breakpoints";
 
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
new file mode 100644
index 00000000000..f5c2e53e92d
--- /dev/null
+++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -0,0 +1,35 @@
+.shw-carbonization-comparison-grid {
+  & + & {
+    margin-top: 2rem;
+  }
+
+  display: grid;
+  grid-template-areas:
+    "hds cds-g0 cds-g10 cds-g90 cds-g100"
+    "--- cwc-g0 cwc-g10 cwc-g90 cwc-g100";
+  grid-template-rows: auto, auto;
+  grid-template-columns: repeat(5, 1fr);
+  row-gap: 0; // we use vertical margin to separate the web-components row from the one above
+  column-gap: 1rem;
+}
+
+// .shw-carbonization-comparison-grid__item {}
+
+.shw-carbonization-comparison-grid__item--scope-reference {
+  margin-top: 1rem;
+}
+
+@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'cwc-g0', 'cwc-g10', 'cwc-g90', 'cwc-g100' {
+  .shw-carbonization-comparison-grid__item--area-#{$area} {
+    grid-area: #{$area};
+  }
+}
+
+// DEBUG
+
+// .shw-carbonization-comparison-grid {
+//   outline: 1px solid blue;
+// }
+// .shw-carbonization-comparison-grid__item {
+//   outline: 1px dotted magenta;
+// }