From 98dba883604a29d465bdc2f593cecab73922134a Mon Sep 17 00:00:00 2001
From: Dylan Hyun <dylan.hyun@hashicorp.com>
Date: Wed, 4 Mar 2026 15:57:08 -0500
Subject: [PATCH 1/5] HDS-6078 Card carbonization showcase page

---
 .../components/card/index.gts                 | 131 ++++++++++++++++++
 showcase/app/index.html                       |   1 +
 showcase/app/router.ts                        |   1 +
 showcase/app/templates/index.gts              |   5 +
 .../page-carbonization/components/card.gts    |  13 ++
 5 files changed, 151 insertions(+)
 create mode 100644 showcase/app/components/page-carbonization/components/card/index.gts
 create mode 100644 showcase/app/templates/page-carbonization/components/card.gts

diff --git a/showcase/app/components/page-carbonization/components/card/index.gts b/showcase/app/components/page-carbonization/components/card/index.gts
new file mode 100644
index 00000000000..d7087bfc5e8
--- /dev/null
+++ b/showcase/app/components/page-carbonization/components/card/index.gts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+import style from 'ember-style-modifier';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextBody from 'showcase/components/shw/text/body';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+
+import {
+  HdsCardContainer,
+  HdsTextBody,
+} from '@hashicorp/design-system-components/components';
+import {
+  BACKGROUNDS,
+  LEVELS,
+} from '@hashicorp/design-system-components/components/hds/card/container';
+
+const CardCarbonizationIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "Card - Carbonization"}}
+
+  <ShwTextH1>Card - Carbonization</ShwTextH1>
+
+  <section>
+
+    <ShwTextH2>Basic Content</ShwTextH2>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <HdsCardContainer>
+          <div {{style width="200px" height="150px"}}>
+            <HdsTextBody>Card content</HdsTextBody>
+          </div>
+        </HdsCardContainer>
+      </:theming>
+      <:reference>
+        <cds-tile>
+          <div {{style width="200px" height="150px"}}>
+            Card content
+          </div>
+        </cds-tile>
+      </:reference>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Elevation Levels</ShwTextH2>
+
+    <ShwTextBody>Note: The Carbon Tile contains no elevation variant.</ShwTextBody>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each LEVELS as |level|}}
+            <SF.Item>
+              <HdsCardContainer @level={{level}}>
+                <ShwPlaceholder
+                  @text={{level}}
+                  @width="200"
+                  @height="100"
+                  @background="transparent"
+                />
+              </HdsCardContainer>
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Border</ShwTextH2>
+
+    <ShwTextBody>Note: The Carbon Tile contains no border variant.</ShwTextBody>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each LEVELS as |level|}}
+            <SF.Item>
+              <HdsCardContainer @level={{level}} @hasBorder={{true}}>
+                <ShwPlaceholder
+                  @text={{level}}
+                  @width="200"
+                  @height="100"
+                  @background="transparent"
+                />
+              </HdsCardContainer>
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+    <ShwDivider @level={{2}} />
+
+    <ShwTextH2>Background</ShwTextH2>
+
+    <ShwTextBody>Note: The Carbon Tile contains no background variant.</ShwTextBody>
+
+    <ShwCarbonizationComparisonGrid>
+      <:theming>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each BACKGROUNDS as |background|}}
+            <SF.Item>
+              <HdsCardContainer @level="mid" @background={{background}}>
+                <ShwPlaceholder
+                  @text={{background}}
+                  @width="200"
+                  @height="100"
+                  @background="transparent"
+                />
+              </HdsCardContainer>
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:theming>
+    </ShwCarbonizationComparisonGrid>
+
+  </section>
+</template>;
+
+export default CardCarbonizationIndex;
diff --git a/showcase/app/index.html b/showcase/app/index.html
index 74978589221..13372d47a59 100644
--- a/showcase/app/index.html
+++ b/showcase/app/index.html
@@ -88,6 +88,7 @@
       cds-radio-tile:not(:defined),
       cds-text-input:not(:defined),
       cds-tag:not(:defined),
+      cds-tile:not(:defined),
       cds-tile-group:not(:defined),
       cds-dismissible-tag:not(:defined),
       cds-operational-tag:not(:defined),
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index c68519da860..a9ceb752431 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -175,6 +175,7 @@ Router.map(function () {
       this.route('badge');
       this.route('badge-count');
       this.route('button');
+      this.route('card');
       this.route('form', function (): void {
         this.route('text-input');
         this.route('radio-card');
diff --git a/showcase/app/templates/index.gts b/showcase/app/templates/index.gts
index 2a972c4610a..5b73ab08c61 100644
--- a/showcase/app/templates/index.gts
+++ b/showcase/app/templates/index.gts
@@ -437,6 +437,11 @@ const Index: TemplateOnlyComponent = <template>
             Button
           </LinkTo>
         </li>
+        <li>
+          <LinkTo @route="page-carbonization.components.card">
+            Card
+          </LinkTo>
+        </li>
         <li>
           <LinkTo @route="page-carbonization.components.form.text-input">
             Form::TextInput
diff --git a/showcase/app/templates/page-carbonization/components/card.gts b/showcase/app/templates/page-carbonization/components/card.gts
new file mode 100644
index 00000000000..8ee244df582
--- /dev/null
+++ b/showcase/app/templates/page-carbonization/components/card.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import CardCarbonizationIndex from 'showcase/components/page-carbonization/components/card';
+
+const PageCarbonizationComponentsCard: TemplateOnlyComponent = <template>
+  <CardCarbonizationIndex />
+</template>;
+
+export default PageCarbonizationComponentsCard;

From 008eda0975041d71e8a6fdd7872d55030855c3ea Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 20:01:02 +0000
Subject: [PATCH 2/5] Feat: Card carbonization tokens and styles

---
 .../src/styles/components/card/container.scss | 10 ++---
 packages/tokens/src/products/shared/card.json | 42 +++++++++++++++++++
 2 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 packages/tokens/src/products/shared/card.json

diff --git a/packages/components/src/styles/components/card/container.scss b/packages/components/src/styles/components/card/container.scss
index 8e7c2a5f6de..19dab6e2322 100644
--- a/packages/components/src/styles/components/card/container.scss
+++ b/packages/components/src/styles/components/card/container.scss
@@ -9,12 +9,12 @@
 
 $hds-card-container-style: ("surface", "elevation");
 $hds-card-container-levels: ("base", "mid", "high");
-$hds-card-container-border-radius: var(--token-border-radius-medium);
 
 .hds-card__container {
   position: relative;
-  background-color: #fff;
-  border-radius: $hds-card-container-border-radius;
+  padding: var(--token-card-padding);
+  background-color: var(--token-card-surface-color-primary);
+  border-radius: var(--token-border-radius-medium);
 }
 
 // LEVEL (elevation style as "drop" + "border" shadow effects)
@@ -47,11 +47,11 @@ $hds-card-container-border-radius: var(--token-border-radius-medium);
 // BACKGROUND
 
 .hds-card__container--background-neutral-primary {
-  background-color: var(--token-color-surface-primary);
+  background-color: var(--token-card-surface-color-primary);
 }
 
 .hds-card__container--background-neutral-secondary {
-  background-color: var(--token-color-surface-faint);
+  background-color: var(--token-card-surface-color-secondary);
 }
 
 // OVERFLOW
diff --git a/packages/tokens/src/products/shared/card.json b/packages/tokens/src/products/shared/card.json
new file mode 100644
index 00000000000..231507372dd
--- /dev/null
+++ b/packages/tokens/src/products/shared/card.json
@@ -0,0 +1,42 @@
+{
+  "card": {
+    "padding": {
+      "$type": "dimension",
+      "$value": "0",
+      "unit": "px",
+      "$modes": {
+        "default": "0",
+        "cds-g0": "16",
+        "cds-g10": "16",
+        "cds-g90": "16",
+        "cds-g100": "16"
+      }
+    },
+    "surface": {
+      "color": {
+        "primary": {
+          "$type": "color",
+          "$value": "{color.surface.primary}",
+          "$modes": {
+            "default": "{color.surface.primary}",
+            "cds-g0": "{carbon.color.gray.10}",
+            "cds-g10": "{carbon.color.white.0}",
+            "cds-g90": "{carbon.color.gray.80}",
+            "cds-g100": "{carbon.color.gray.90}"
+          }
+        },
+        "secondary": {
+          "$type": "color",
+          "$value": "{color.surface.faint}",
+          "$modes": {
+            "default": "{color.surface.faint}",
+            "cds-g0": "{carbon.color.white.0}",
+            "cds-g10": "{carbon.color.gray.10}",
+            "cds-g90": "{carbon.color.gray.70}",
+            "cds-g100": "{carbon.color.gray.80}"
+          }
+        }
+      }
+    }
+  }
+}

From 534b2b26f9f064dcd5395fbf7a1851a9bb1f4909 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 20:01:40 +0000
Subject: [PATCH 3/5] Fix: Remove padding token

---
 .../src/styles/components/card/container.scss        |  1 -
 packages/tokens/src/products/shared/card.json        | 12 ------------
 2 files changed, 13 deletions(-)

diff --git a/packages/components/src/styles/components/card/container.scss b/packages/components/src/styles/components/card/container.scss
index 19dab6e2322..2fbb7c30870 100644
--- a/packages/components/src/styles/components/card/container.scss
+++ b/packages/components/src/styles/components/card/container.scss
@@ -12,7 +12,6 @@ $hds-card-container-levels: ("base", "mid", "high");
 
 .hds-card__container {
   position: relative;
-  padding: var(--token-card-padding);
   background-color: var(--token-card-surface-color-primary);
   border-radius: var(--token-border-radius-medium);
 }
diff --git a/packages/tokens/src/products/shared/card.json b/packages/tokens/src/products/shared/card.json
index 231507372dd..c06bfb3b914 100644
--- a/packages/tokens/src/products/shared/card.json
+++ b/packages/tokens/src/products/shared/card.json
@@ -1,17 +1,5 @@
 {
   "card": {
-    "padding": {
-      "$type": "dimension",
-      "$value": "0",
-      "unit": "px",
-      "$modes": {
-        "default": "0",
-        "cds-g0": "16",
-        "cds-g10": "16",
-        "cds-g90": "16",
-        "cds-g100": "16"
-      }
-    },
     "surface": {
       "color": {
         "primary": {

From 7ddb47b736888c0a73001190080ab2ca23d9d2e9 Mon Sep 17 00:00:00 2001
From: Dylan Hyun <dylan.hyun@hashicorp.com>
Date: Wed, 18 Mar 2026 11:11:18 -0600
Subject: [PATCH 4/5] Fix: Add note about card paddings

---
 .../components/page-carbonization/components/card/index.gts   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/showcase/app/components/page-carbonization/components/card/index.gts b/showcase/app/components/page-carbonization/components/card/index.gts
index d7087bfc5e8..40d94f15a6b 100644
--- a/showcase/app/components/page-carbonization/components/card/index.gts
+++ b/showcase/app/components/page-carbonization/components/card/index.gts
@@ -33,6 +33,10 @@ const CardCarbonizationIndex: TemplateOnlyComponent = <template>
 
     <ShwTextH2>Basic Content</ShwTextH2>
 
+    <ShwTextBody>Note: The Carbon Tile has padding, but the HDS component does
+      not. This difference is intentional to maintain existing layouts of card
+      content across themes.</ShwTextBody>
+
     <ShwCarbonizationComparisonGrid>
       <:theming>
         <HdsCardContainer>

From 9e146288ef9491815db20abf813ec43573e1ad07 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 18 Mar 2026 20:01:19 +0000
Subject: [PATCH 5/5] re-generated files in output

---
 packages/tokens/dist/devdot/css/tokens.css    |   2 +
 .../dist/docs/products/themed-tokens.json     | 340 ++++++++++++++++++
 .../docs/products/themed-tokens/cds-g0.json   |  68 ++++
 .../docs/products/themed-tokens/cds-g10.json  |  68 ++++
 .../docs/products/themed-tokens/cds-g100.json |  68 ++++
 .../docs/products/themed-tokens/cds-g90.json  |  68 ++++
 .../docs/products/themed-tokens/default.json  |  68 ++++
 .../tokens/dist/docs/products/tokens.json     |  68 ++++
 packages/tokens/dist/marketing/css/tokens.css |   2 +
 packages/tokens/dist/marketing/tokens.json    |  78 ++++
 .../with-css-selectors--advanced/tokens.css   |  14 +
 .../with-css-selectors--migration/tokens.css  |  10 +
 .../with-css-selectors/tokens.css             |  10 +
 .../cds-g0/themed-tokens.css                  |   2 +
 .../cds-g10/themed-tokens.css                 |   2 +
 .../cds-g100/themed-tokens.css                |   2 +
 .../cds-g90/themed-tokens.css                 |   2 +
 .../default/themed-tokens.css                 |   2 +
 .../themed-tokens/with-scss-mixins/tokens.css |  14 +
 packages/tokens/dist/products/css/tokens.css  |   2 +
 .../design-system-components-common.css       |   7 +-
 .../@hashicorp/design-system-components.css   |   9 +-
 .../with-css-selectors--advanced/tokens.css   |  14 +
 .../with-css-selectors--migration/tokens.css  |  10 +
 .../with-css-selectors/tokens.css             |  10 +
 25 files changed, 934 insertions(+), 6 deletions(-)

diff --git a/packages/tokens/dist/devdot/css/tokens.css b/packages/tokens/dist/devdot/css/tokens.css
index 9f66f634fb4..edd05629e89 100644
--- a/packages/tokens/dist/devdot/css/tokens.css
+++ b/packages/tokens/dist/devdot/css/tokens.css
@@ -362,6 +362,8 @@
   --token-button-icon-size-small: 12px;
   --token-button-icon-size-medium: 16px;
   --token-button-icon-size-large: 24px;
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #fafafa;
   --token-dismiss-button-size: 24px;
   --token-dismiss-button-foreground-color-default: #656a76;
   --token-dismiss-button-foreground-color-active: #0c0c0e;
diff --git a/packages/tokens/dist/docs/products/themed-tokens.json b/packages/tokens/dist/docs/products/themed-tokens.json
index 1dd257f3d2d..7d73fad56a0 100644
--- a/packages/tokens/dist/docs/products/themed-tokens.json
+++ b/packages/tokens/dist/docs/products/themed-tokens.json
@@ -10976,6 +10976,74 @@
         "large"
       ]
     },
+    "token-card-surface-color-primary": {
+      "key": "{card.surface.color.primary}",
+      "$type": "color",
+      "$value": "#ffffff",
+      "$modes": {
+        "default": "#ffffff",
+        "cds-g0": "#f4f4f4",
+        "cds-g10": "#ffffff",
+        "cds-g90": "#393939",
+        "cds-g100": "#262626"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{color.surface.primary}",
+        "$modes": {
+          "default": "{color.surface.primary}",
+          "cds-g0": "{carbon.color.gray.10}",
+          "cds-g10": "{carbon.color.white.0}",
+          "cds-g90": "{carbon.color.gray.80}",
+          "cds-g100": "{carbon.color.gray.90}"
+        },
+        "key": "{card.surface.color.primary}"
+      },
+      "name": "token-card-surface-color-primary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "primary"
+      ]
+    },
+    "token-card-surface-color-secondary": {
+      "key": "{card.surface.color.secondary}",
+      "$type": "color",
+      "$value": "#fafafa",
+      "$modes": {
+        "default": "#fafafa",
+        "cds-g0": "#ffffff",
+        "cds-g10": "#f4f4f4",
+        "cds-g90": "#525252",
+        "cds-g100": "#393939"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{color.surface.faint}",
+        "$modes": {
+          "default": "{color.surface.faint}",
+          "cds-g0": "{carbon.color.white.0}",
+          "cds-g10": "{carbon.color.gray.10}",
+          "cds-g90": "{carbon.color.gray.70}",
+          "cds-g100": "{carbon.color.gray.80}"
+        },
+        "key": "{card.surface.color.secondary}"
+      },
+      "name": "token-card-surface-color-secondary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "secondary"
+      ]
+    },
     "token-dismiss-button-size": {
       "key": "{dismiss-button.size}",
       "$type": "dimension",
@@ -26584,6 +26652,74 @@
         "large"
       ]
     },
+    "token-card-surface-color-primary": {
+      "key": "{card.surface.color.primary}",
+      "$type": "color",
+      "$value": "#f4f4f4",
+      "$modes": {
+        "default": "#f4f4f4",
+        "cds-g0": "#f4f4f4",
+        "cds-g10": "#ffffff",
+        "cds-g90": "#393939",
+        "cds-g100": "#262626"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.gray.10}",
+        "$modes": {
+          "default": "{color.surface.primary}",
+          "cds-g0": "{carbon.color.gray.10}",
+          "cds-g10": "{carbon.color.white.0}",
+          "cds-g90": "{carbon.color.gray.80}",
+          "cds-g100": "{carbon.color.gray.90}"
+        },
+        "key": "{card.surface.color.primary}"
+      },
+      "name": "token-card-surface-color-primary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "primary"
+      ]
+    },
+    "token-card-surface-color-secondary": {
+      "key": "{card.surface.color.secondary}",
+      "$type": "color",
+      "$value": "#ffffff",
+      "$modes": {
+        "default": "#f4f4f4",
+        "cds-g0": "#ffffff",
+        "cds-g10": "#f4f4f4",
+        "cds-g90": "#525252",
+        "cds-g100": "#393939"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.white.0}",
+        "$modes": {
+          "default": "{color.surface.faint}",
+          "cds-g0": "{carbon.color.white.0}",
+          "cds-g10": "{carbon.color.gray.10}",
+          "cds-g90": "{carbon.color.gray.70}",
+          "cds-g100": "{carbon.color.gray.80}"
+        },
+        "key": "{card.surface.color.secondary}"
+      },
+      "name": "token-card-surface-color-secondary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "secondary"
+      ]
+    },
     "token-dismiss-button-size": {
       "key": "{dismiss-button.size}",
       "$type": "dimension",
@@ -42192,6 +42328,74 @@
         "large"
       ]
     },
+    "token-card-surface-color-primary": {
+      "key": "{card.surface.color.primary}",
+      "$type": "color",
+      "$value": "#ffffff",
+      "$modes": {
+        "default": "#ffffff",
+        "cds-g0": "#f4f4f4",
+        "cds-g10": "#ffffff",
+        "cds-g90": "#393939",
+        "cds-g100": "#262626"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.white.0}",
+        "$modes": {
+          "default": "{color.surface.primary}",
+          "cds-g0": "{carbon.color.gray.10}",
+          "cds-g10": "{carbon.color.white.0}",
+          "cds-g90": "{carbon.color.gray.80}",
+          "cds-g100": "{carbon.color.gray.90}"
+        },
+        "key": "{card.surface.color.primary}"
+      },
+      "name": "token-card-surface-color-primary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "primary"
+      ]
+    },
+    "token-card-surface-color-secondary": {
+      "key": "{card.surface.color.secondary}",
+      "$type": "color",
+      "$value": "#f4f4f4",
+      "$modes": {
+        "default": "#ffffff",
+        "cds-g0": "#ffffff",
+        "cds-g10": "#f4f4f4",
+        "cds-g90": "#525252",
+        "cds-g100": "#393939"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.gray.10}",
+        "$modes": {
+          "default": "{color.surface.faint}",
+          "cds-g0": "{carbon.color.white.0}",
+          "cds-g10": "{carbon.color.gray.10}",
+          "cds-g90": "{carbon.color.gray.70}",
+          "cds-g100": "{carbon.color.gray.80}"
+        },
+        "key": "{card.surface.color.secondary}"
+      },
+      "name": "token-card-surface-color-secondary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "secondary"
+      ]
+    },
     "token-dismiss-button-size": {
       "key": "{dismiss-button.size}",
       "$type": "dimension",
@@ -57800,6 +58004,74 @@
         "large"
       ]
     },
+    "token-card-surface-color-primary": {
+      "key": "{card.surface.color.primary}",
+      "$type": "color",
+      "$value": "#393939",
+      "$modes": {
+        "default": "#393939",
+        "cds-g0": "#f4f4f4",
+        "cds-g10": "#ffffff",
+        "cds-g90": "#393939",
+        "cds-g100": "#262626"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.gray.80}",
+        "$modes": {
+          "default": "{color.surface.primary}",
+          "cds-g0": "{carbon.color.gray.10}",
+          "cds-g10": "{carbon.color.white.0}",
+          "cds-g90": "{carbon.color.gray.80}",
+          "cds-g100": "{carbon.color.gray.90}"
+        },
+        "key": "{card.surface.color.primary}"
+      },
+      "name": "token-card-surface-color-primary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "primary"
+      ]
+    },
+    "token-card-surface-color-secondary": {
+      "key": "{card.surface.color.secondary}",
+      "$type": "color",
+      "$value": "#525252",
+      "$modes": {
+        "default": "#393939",
+        "cds-g0": "#ffffff",
+        "cds-g10": "#f4f4f4",
+        "cds-g90": "#525252",
+        "cds-g100": "#393939"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.gray.70}",
+        "$modes": {
+          "default": "{color.surface.faint}",
+          "cds-g0": "{carbon.color.white.0}",
+          "cds-g10": "{carbon.color.gray.10}",
+          "cds-g90": "{carbon.color.gray.70}",
+          "cds-g100": "{carbon.color.gray.80}"
+        },
+        "key": "{card.surface.color.secondary}"
+      },
+      "name": "token-card-surface-color-secondary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "secondary"
+      ]
+    },
     "token-dismiss-button-size": {
       "key": "{dismiss-button.size}",
       "$type": "dimension",
@@ -73408,6 +73680,74 @@
         "large"
       ]
     },
+    "token-card-surface-color-primary": {
+      "key": "{card.surface.color.primary}",
+      "$type": "color",
+      "$value": "#262626",
+      "$modes": {
+        "default": "#262626",
+        "cds-g0": "#f4f4f4",
+        "cds-g10": "#ffffff",
+        "cds-g90": "#393939",
+        "cds-g100": "#262626"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.gray.90}",
+        "$modes": {
+          "default": "{color.surface.primary}",
+          "cds-g0": "{carbon.color.gray.10}",
+          "cds-g10": "{carbon.color.white.0}",
+          "cds-g90": "{carbon.color.gray.80}",
+          "cds-g100": "{carbon.color.gray.90}"
+        },
+        "key": "{card.surface.color.primary}"
+      },
+      "name": "token-card-surface-color-primary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "primary"
+      ]
+    },
+    "token-card-surface-color-secondary": {
+      "key": "{card.surface.color.secondary}",
+      "$type": "color",
+      "$value": "#393939",
+      "$modes": {
+        "default": "#262626",
+        "cds-g0": "#ffffff",
+        "cds-g10": "#f4f4f4",
+        "cds-g90": "#525252",
+        "cds-g100": "#393939"
+      },
+      "original": {
+        "$type": "color",
+        "$value": "{carbon.color.gray.80}",
+        "$modes": {
+          "default": "{color.surface.faint}",
+          "cds-g0": "{carbon.color.white.0}",
+          "cds-g10": "{carbon.color.gray.10}",
+          "cds-g90": "{carbon.color.gray.70}",
+          "cds-g100": "{carbon.color.gray.80}"
+        },
+        "key": "{card.surface.color.secondary}"
+      },
+      "name": "token-card-surface-color-secondary",
+      "attributes": {
+        "category": "card"
+      },
+      "path": [
+        "card",
+        "surface",
+        "color",
+        "secondary"
+      ]
+    },
     "token-dismiss-button-size": {
       "key": "{dismiss-button.size}",
       "$type": "dimension",
diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json
index bbca917d338..c72d42ba015 100644
--- a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json
+++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json
@@ -10969,6 +10969,74 @@
       "large"
     ]
   },
+  {
+    "key": "{card.surface.color.primary}",
+    "$type": "color",
+    "$value": "#f4f4f4",
+    "$modes": {
+      "default": "#f4f4f4",
+      "cds-g0": "#f4f4f4",
+      "cds-g10": "#ffffff",
+      "cds-g90": "#393939",
+      "cds-g100": "#262626"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.gray.10}",
+      "$modes": {
+        "default": "{color.surface.primary}",
+        "cds-g0": "{carbon.color.gray.10}",
+        "cds-g10": "{carbon.color.white.0}",
+        "cds-g90": "{carbon.color.gray.80}",
+        "cds-g100": "{carbon.color.gray.90}"
+      },
+      "key": "{card.surface.color.primary}"
+    },
+    "name": "token-card-surface-color-primary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "primary"
+    ]
+  },
+  {
+    "key": "{card.surface.color.secondary}",
+    "$type": "color",
+    "$value": "#ffffff",
+    "$modes": {
+      "default": "#f4f4f4",
+      "cds-g0": "#ffffff",
+      "cds-g10": "#f4f4f4",
+      "cds-g90": "#525252",
+      "cds-g100": "#393939"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.white.0}",
+      "$modes": {
+        "default": "{color.surface.faint}",
+        "cds-g0": "{carbon.color.white.0}",
+        "cds-g10": "{carbon.color.gray.10}",
+        "cds-g90": "{carbon.color.gray.70}",
+        "cds-g100": "{carbon.color.gray.80}"
+      },
+      "key": "{card.surface.color.secondary}"
+    },
+    "name": "token-card-surface-color-secondary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "secondary"
+    ]
+  },
   {
     "key": "{dismiss-button.size}",
     "$type": "dimension",
diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json
index 12ca1387b29..b746c40c4b3 100644
--- a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json
+++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json
@@ -10969,6 +10969,74 @@
       "large"
     ]
   },
+  {
+    "key": "{card.surface.color.primary}",
+    "$type": "color",
+    "$value": "#ffffff",
+    "$modes": {
+      "default": "#ffffff",
+      "cds-g0": "#f4f4f4",
+      "cds-g10": "#ffffff",
+      "cds-g90": "#393939",
+      "cds-g100": "#262626"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.white.0}",
+      "$modes": {
+        "default": "{color.surface.primary}",
+        "cds-g0": "{carbon.color.gray.10}",
+        "cds-g10": "{carbon.color.white.0}",
+        "cds-g90": "{carbon.color.gray.80}",
+        "cds-g100": "{carbon.color.gray.90}"
+      },
+      "key": "{card.surface.color.primary}"
+    },
+    "name": "token-card-surface-color-primary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "primary"
+    ]
+  },
+  {
+    "key": "{card.surface.color.secondary}",
+    "$type": "color",
+    "$value": "#f4f4f4",
+    "$modes": {
+      "default": "#ffffff",
+      "cds-g0": "#ffffff",
+      "cds-g10": "#f4f4f4",
+      "cds-g90": "#525252",
+      "cds-g100": "#393939"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.gray.10}",
+      "$modes": {
+        "default": "{color.surface.faint}",
+        "cds-g0": "{carbon.color.white.0}",
+        "cds-g10": "{carbon.color.gray.10}",
+        "cds-g90": "{carbon.color.gray.70}",
+        "cds-g100": "{carbon.color.gray.80}"
+      },
+      "key": "{card.surface.color.secondary}"
+    },
+    "name": "token-card-surface-color-secondary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "secondary"
+    ]
+  },
   {
     "key": "{dismiss-button.size}",
     "$type": "dimension",
diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json
index 4c7e6ba5207..1a2df7e5ec3 100644
--- a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json
+++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json
@@ -10969,6 +10969,74 @@
       "large"
     ]
   },
+  {
+    "key": "{card.surface.color.primary}",
+    "$type": "color",
+    "$value": "#262626",
+    "$modes": {
+      "default": "#262626",
+      "cds-g0": "#f4f4f4",
+      "cds-g10": "#ffffff",
+      "cds-g90": "#393939",
+      "cds-g100": "#262626"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.gray.90}",
+      "$modes": {
+        "default": "{color.surface.primary}",
+        "cds-g0": "{carbon.color.gray.10}",
+        "cds-g10": "{carbon.color.white.0}",
+        "cds-g90": "{carbon.color.gray.80}",
+        "cds-g100": "{carbon.color.gray.90}"
+      },
+      "key": "{card.surface.color.primary}"
+    },
+    "name": "token-card-surface-color-primary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "primary"
+    ]
+  },
+  {
+    "key": "{card.surface.color.secondary}",
+    "$type": "color",
+    "$value": "#393939",
+    "$modes": {
+      "default": "#262626",
+      "cds-g0": "#ffffff",
+      "cds-g10": "#f4f4f4",
+      "cds-g90": "#525252",
+      "cds-g100": "#393939"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.gray.80}",
+      "$modes": {
+        "default": "{color.surface.faint}",
+        "cds-g0": "{carbon.color.white.0}",
+        "cds-g10": "{carbon.color.gray.10}",
+        "cds-g90": "{carbon.color.gray.70}",
+        "cds-g100": "{carbon.color.gray.80}"
+      },
+      "key": "{card.surface.color.secondary}"
+    },
+    "name": "token-card-surface-color-secondary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "secondary"
+    ]
+  },
   {
     "key": "{dismiss-button.size}",
     "$type": "dimension",
diff --git a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json
index 491c93ecb68..455cdcfb0c9 100644
--- a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json
+++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json
@@ -10969,6 +10969,74 @@
       "large"
     ]
   },
+  {
+    "key": "{card.surface.color.primary}",
+    "$type": "color",
+    "$value": "#393939",
+    "$modes": {
+      "default": "#393939",
+      "cds-g0": "#f4f4f4",
+      "cds-g10": "#ffffff",
+      "cds-g90": "#393939",
+      "cds-g100": "#262626"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.gray.80}",
+      "$modes": {
+        "default": "{color.surface.primary}",
+        "cds-g0": "{carbon.color.gray.10}",
+        "cds-g10": "{carbon.color.white.0}",
+        "cds-g90": "{carbon.color.gray.80}",
+        "cds-g100": "{carbon.color.gray.90}"
+      },
+      "key": "{card.surface.color.primary}"
+    },
+    "name": "token-card-surface-color-primary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "primary"
+    ]
+  },
+  {
+    "key": "{card.surface.color.secondary}",
+    "$type": "color",
+    "$value": "#525252",
+    "$modes": {
+      "default": "#393939",
+      "cds-g0": "#ffffff",
+      "cds-g10": "#f4f4f4",
+      "cds-g90": "#525252",
+      "cds-g100": "#393939"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{carbon.color.gray.70}",
+      "$modes": {
+        "default": "{color.surface.faint}",
+        "cds-g0": "{carbon.color.white.0}",
+        "cds-g10": "{carbon.color.gray.10}",
+        "cds-g90": "{carbon.color.gray.70}",
+        "cds-g100": "{carbon.color.gray.80}"
+      },
+      "key": "{card.surface.color.secondary}"
+    },
+    "name": "token-card-surface-color-secondary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "secondary"
+    ]
+  },
   {
     "key": "{dismiss-button.size}",
     "$type": "dimension",
diff --git a/packages/tokens/dist/docs/products/themed-tokens/default.json b/packages/tokens/dist/docs/products/themed-tokens/default.json
index 7997ebd2714..d11e59d9c80 100644
--- a/packages/tokens/dist/docs/products/themed-tokens/default.json
+++ b/packages/tokens/dist/docs/products/themed-tokens/default.json
@@ -10975,6 +10975,74 @@
       "large"
     ]
   },
+  {
+    "key": "{card.surface.color.primary}",
+    "$type": "color",
+    "$value": "#ffffff",
+    "$modes": {
+      "default": "#ffffff",
+      "cds-g0": "#f4f4f4",
+      "cds-g10": "#ffffff",
+      "cds-g90": "#393939",
+      "cds-g100": "#262626"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{color.surface.primary}",
+      "$modes": {
+        "default": "{color.surface.primary}",
+        "cds-g0": "{carbon.color.gray.10}",
+        "cds-g10": "{carbon.color.white.0}",
+        "cds-g90": "{carbon.color.gray.80}",
+        "cds-g100": "{carbon.color.gray.90}"
+      },
+      "key": "{card.surface.color.primary}"
+    },
+    "name": "token-card-surface-color-primary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "primary"
+    ]
+  },
+  {
+    "key": "{card.surface.color.secondary}",
+    "$type": "color",
+    "$value": "#fafafa",
+    "$modes": {
+      "default": "#fafafa",
+      "cds-g0": "#ffffff",
+      "cds-g10": "#f4f4f4",
+      "cds-g90": "#525252",
+      "cds-g100": "#393939"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{color.surface.faint}",
+      "$modes": {
+        "default": "{color.surface.faint}",
+        "cds-g0": "{carbon.color.white.0}",
+        "cds-g10": "{carbon.color.gray.10}",
+        "cds-g90": "{carbon.color.gray.70}",
+        "cds-g100": "{carbon.color.gray.80}"
+      },
+      "key": "{card.surface.color.secondary}"
+    },
+    "name": "token-card-surface-color-secondary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "secondary"
+    ]
+  },
   {
     "key": "{dismiss-button.size}",
     "$type": "dimension",
diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json
index 7997ebd2714..d11e59d9c80 100644
--- a/packages/tokens/dist/docs/products/tokens.json
+++ b/packages/tokens/dist/docs/products/tokens.json
@@ -10975,6 +10975,74 @@
       "large"
     ]
   },
+  {
+    "key": "{card.surface.color.primary}",
+    "$type": "color",
+    "$value": "#ffffff",
+    "$modes": {
+      "default": "#ffffff",
+      "cds-g0": "#f4f4f4",
+      "cds-g10": "#ffffff",
+      "cds-g90": "#393939",
+      "cds-g100": "#262626"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{color.surface.primary}",
+      "$modes": {
+        "default": "{color.surface.primary}",
+        "cds-g0": "{carbon.color.gray.10}",
+        "cds-g10": "{carbon.color.white.0}",
+        "cds-g90": "{carbon.color.gray.80}",
+        "cds-g100": "{carbon.color.gray.90}"
+      },
+      "key": "{card.surface.color.primary}"
+    },
+    "name": "token-card-surface-color-primary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "primary"
+    ]
+  },
+  {
+    "key": "{card.surface.color.secondary}",
+    "$type": "color",
+    "$value": "#fafafa",
+    "$modes": {
+      "default": "#fafafa",
+      "cds-g0": "#ffffff",
+      "cds-g10": "#f4f4f4",
+      "cds-g90": "#525252",
+      "cds-g100": "#393939"
+    },
+    "original": {
+      "$type": "color",
+      "$value": "{color.surface.faint}",
+      "$modes": {
+        "default": "{color.surface.faint}",
+        "cds-g0": "{carbon.color.white.0}",
+        "cds-g10": "{carbon.color.gray.10}",
+        "cds-g90": "{carbon.color.gray.70}",
+        "cds-g100": "{carbon.color.gray.80}"
+      },
+      "key": "{card.surface.color.secondary}"
+    },
+    "name": "token-card-surface-color-secondary",
+    "attributes": {
+      "category": "card"
+    },
+    "path": [
+      "card",
+      "surface",
+      "color",
+      "secondary"
+    ]
+  },
   {
     "key": "{dismiss-button.size}",
     "$type": "dimension",
diff --git a/packages/tokens/dist/marketing/css/tokens.css b/packages/tokens/dist/marketing/css/tokens.css
index 73161d316a1..ce5e0de4a59 100644
--- a/packages/tokens/dist/marketing/css/tokens.css
+++ b/packages/tokens/dist/marketing/css/tokens.css
@@ -360,6 +360,8 @@
   --token-button-icon-size-small: 12px;
   --token-button-icon-size-medium: 16px;
   --token-button-icon-size-large: 24px;
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #fafafa;
   --token-dismiss-button-size: 24px;
   --token-dismiss-button-foreground-color-default: #656a76;
   --token-dismiss-button-foreground-color-active: #0c0c0e;
diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json
index 6dafcedb1c2..37a27cbd9c5 100644
--- a/packages/tokens/dist/marketing/tokens.json
+++ b/packages/tokens/dist/marketing/tokens.json
@@ -12007,6 +12007,84 @@
       }
     }
   },
+  "card": {
+    "surface": {
+      "color": {
+        "primary": {
+          "key": "{card.surface.color.primary}",
+          "$type": "color",
+          "$value": "#ffffff",
+          "$modes": {
+            "default": "#ffffff",
+            "cds-g0": "#f4f4f4",
+            "cds-g10": "#ffffff",
+            "cds-g90": "#393939",
+            "cds-g100": "#262626"
+          },
+          "filePath": "src/products/shared/card.json",
+          "isSource": true,
+          "original": {
+            "$type": "color",
+            "$value": "{color.surface.primary}",
+            "$modes": {
+              "default": "{color.surface.primary}",
+              "cds-g0": "{carbon.color.gray.10}",
+              "cds-g10": "{carbon.color.white.0}",
+              "cds-g90": "{carbon.color.gray.80}",
+              "cds-g100": "{carbon.color.gray.90}"
+            },
+            "key": "{card.surface.color.primary}"
+          },
+          "name": "token-card-surface-color-primary",
+          "attributes": {
+            "category": "card"
+          },
+          "path": [
+            "card",
+            "surface",
+            "color",
+            "primary"
+          ]
+        },
+        "secondary": {
+          "key": "{card.surface.color.secondary}",
+          "$type": "color",
+          "$value": "#fafafa",
+          "$modes": {
+            "default": "#fafafa",
+            "cds-g0": "#ffffff",
+            "cds-g10": "#f4f4f4",
+            "cds-g90": "#525252",
+            "cds-g100": "#393939"
+          },
+          "filePath": "src/products/shared/card.json",
+          "isSource": true,
+          "original": {
+            "$type": "color",
+            "$value": "{color.surface.faint}",
+            "$modes": {
+              "default": "{color.surface.faint}",
+              "cds-g0": "{carbon.color.white.0}",
+              "cds-g10": "{carbon.color.gray.10}",
+              "cds-g90": "{carbon.color.gray.70}",
+              "cds-g100": "{carbon.color.gray.80}"
+            },
+            "key": "{card.surface.color.secondary}"
+          },
+          "name": "token-card-surface-color-secondary",
+          "attributes": {
+            "category": "card"
+          },
+          "path": [
+            "card",
+            "surface",
+            "color",
+            "secondary"
+          ]
+        }
+      }
+    }
+  },
   "dismiss-button": {
     "size": {
       "key": "{dismiss-button.size}",
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css
index 9ae2916a8cc..9fbaaf82141 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css
@@ -275,6 +275,8 @@
   --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: var(--token-color-surface-primary);
+  --token-card-surface-color-secondary: var(--token-color-surface-faint);
   --token-color-border-action: var(--token-color-palette-blue-100);
   --token-color-border-critical: var(--token-color-palette-red-100);
   --token-color-border-faint: var(--token-color-palette-alpha-100);
@@ -662,6 +664,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -1002,6 +1006,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1342,6 +1348,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -1681,6 +1689,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;
@@ -2019,6 +2029,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #f4f4f4;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #c6c6c6;
@@ -2357,6 +2369,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #393939;
+  --token-card-surface-color-secondary: #525252;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #525252;
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css
index 3c1c306e35d..c9eb368b020 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css
@@ -275,6 +275,8 @@
   --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: var(--token-color-surface-primary);
+  --token-card-surface-color-secondary: var(--token-color-surface-faint);
   --token-color-border-action: var(--token-color-palette-blue-100);
   --token-color-border-critical: var(--token-color-palette-red-100);
   --token-color-border-faint: var(--token-color-palette-alpha-100);
@@ -662,6 +664,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -1002,6 +1006,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1341,6 +1347,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -1679,6 +1687,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;
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
index 7617d5d2a96..e59c2bd2917 100644
--- 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
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -461,6 +463,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -801,6 +805,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1140,6 +1146,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -1478,6 +1486,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css
index 887cefa83d9..930d7a222e7 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g0/themed-tokens.css
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css
index d9c528520f5..0fabdf8d4fd 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g10/themed-tokens.css
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #f4f4f4;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #c6c6c6;
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css
index b299b8e00f2..3362ec8b45b 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g100/themed-tokens.css
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css
index 64d8f52c13f..bdc300bd18a 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/cds-g90/themed-tokens.css
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #393939;
+  --token-card-surface-color-secondary: #525252;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #525252;
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css
index d10144e9799..118e54d898b 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: var(--token-color-surface-primary);
+  --token-card-surface-color-secondary: var(--token-color-surface-faint);
   --token-color-border-action: var(--token-color-palette-blue-100);
   --token-color-border-critical: var(--token-color-palette-red-100);
   --token-color-border-faint: var(--token-color-palette-alpha-100);
diff --git a/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css
index da1a6918a05..e9f847304bd 100644
--- a/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css
+++ b/packages/tokens/dist/products/css/themed-tokens/with-scss-mixins/tokens.css
@@ -277,6 +277,8 @@
     --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: var(--token-color-surface-primary);
+    --token-card-surface-color-secondary: var(--token-color-surface-faint);
     --token-color-border-action: var(--token-color-palette-blue-100);
     --token-color-border-critical: var(--token-color-palette-red-100);
     --token-color-border-faint: var(--token-color-palette-alpha-100);
@@ -673,6 +675,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -1013,6 +1017,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1353,6 +1359,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -1693,6 +1701,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #ffffff;
+    --token-card-surface-color-secondary: #f4f4f4;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #c6c6c6;
@@ -2033,6 +2043,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #393939;
+    --token-card-surface-color-secondary: #525252;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #525252;
@@ -2373,6 +2385,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
diff --git a/packages/tokens/dist/products/css/tokens.css b/packages/tokens/dist/products/css/tokens.css
index 73161d316a1..ce5e0de4a59 100644
--- a/packages/tokens/dist/products/css/tokens.css
+++ b/packages/tokens/dist/products/css/tokens.css
@@ -360,6 +360,8 @@
   --token-button-icon-size-small: 12px;
   --token-button-icon-size-medium: 16px;
   --token-button-icon-size-large: 24px;
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #fafafa;
   --token-dismiss-button-size: 24px;
   --token-dismiss-button-foreground-color-default: #656a76;
   --token-dismiss-button-foreground-color-active: #0c0c0e;
diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css
index 3c48990ae52..74b028c2e69 100644
--- a/showcase/public/assets/styles/@hashicorp/design-system-components-common.css
+++ b/showcase/public/assets/styles/@hashicorp/design-system-components-common.css
@@ -3078,7 +3078,8 @@ button.hds-button[href]::after {
  */
 .hds-card__container {
   position: relative;
-  background-color: #fff;
+  padding: var(--token-card-padding);
+  background-color: var(--token-card-surface-color-primary);
   border-radius: var(--token-border-radius-medium);
 }
 
@@ -3167,11 +3168,11 @@ button.hds-button[href]::after {
 }
 
 .hds-card__container--background-neutral-primary {
-  background-color: var(--token-color-surface-primary);
+  background-color: var(--token-card-surface-color-primary);
 }
 
 .hds-card__container--background-neutral-secondary {
-  background-color: var(--token-color-surface-faint);
+  background-color: var(--token-card-surface-color-secondary);
 }
 
 .hds-card__container--overflow-hidden {
diff --git a/showcase/public/assets/styles/@hashicorp/design-system-components.css b/showcase/public/assets/styles/@hashicorp/design-system-components.css
index ab7639c9d7c..e83b8b81818 100644
--- a/showcase/public/assets/styles/@hashicorp/design-system-components.css
+++ b/showcase/public/assets/styles/@hashicorp/design-system-components.css
@@ -364,6 +364,8 @@
   --token-button-icon-size-small: 12px;
   --token-button-icon-size-medium: 16px;
   --token-button-icon-size-large: 24px;
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #fafafa;
   --token-dismiss-button-size: 24px;
   --token-dismiss-button-foreground-color-default: #656a76;
   --token-dismiss-button-foreground-color-active: #0c0c0e;
@@ -3612,7 +3614,8 @@ button.hds-button[href]::after {
  */
 .hds-card__container {
   position: relative;
-  background-color: #fff;
+  padding: var(--token-card-padding);
+  background-color: var(--token-card-surface-color-primary);
   border-radius: var(--token-border-radius-medium);
 }
 
@@ -3701,11 +3704,11 @@ button.hds-button[href]::after {
 }
 
 .hds-card__container--background-neutral-primary {
-  background-color: var(--token-color-surface-primary);
+  background-color: var(--token-card-surface-color-primary);
 }
 
 .hds-card__container--background-neutral-secondary {
-  background-color: var(--token-color-surface-faint);
+  background-color: var(--token-card-surface-color-secondary);
 }
 
 .hds-card__container--overflow-hidden {
diff --git a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--advanced/tokens.css b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--advanced/tokens.css
index 9ae2916a8cc..9fbaaf82141 100644
--- a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--advanced/tokens.css
+++ b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--advanced/tokens.css
@@ -275,6 +275,8 @@
   --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: var(--token-color-surface-primary);
+  --token-card-surface-color-secondary: var(--token-color-surface-faint);
   --token-color-border-action: var(--token-color-palette-blue-100);
   --token-color-border-critical: var(--token-color-palette-red-100);
   --token-color-border-faint: var(--token-color-palette-alpha-100);
@@ -662,6 +664,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -1002,6 +1006,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1342,6 +1348,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -1681,6 +1689,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;
@@ -2019,6 +2029,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #ffffff;
+  --token-card-surface-color-secondary: #f4f4f4;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #c6c6c6;
@@ -2357,6 +2369,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #393939;
+  --token-card-surface-color-secondary: #525252;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #525252;
diff --git a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--migration/tokens.css b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--migration/tokens.css
index 3c1c306e35d..c9eb368b020 100644
--- a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--migration/tokens.css
+++ b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors--migration/tokens.css
@@ -275,6 +275,8 @@
   --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: var(--token-color-surface-primary);
+  --token-card-surface-color-secondary: var(--token-color-surface-faint);
   --token-color-border-action: var(--token-color-palette-blue-100);
   --token-color-border-critical: var(--token-color-palette-red-100);
   --token-color-border-faint: var(--token-color-palette-alpha-100);
@@ -662,6 +664,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -1002,6 +1006,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1341,6 +1347,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -1679,6 +1687,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;
diff --git a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css
index 7617d5d2a96..e59c2bd2917 100644
--- a/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css
+++ b/showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css
@@ -122,6 +122,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -461,6 +463,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #f4f4f4;
+    --token-card-surface-color-secondary: #ffffff;
     --token-color-border-action: #0f62fe;
     --token-color-border-critical: #ff8389;
     --token-color-border-faint: #e0e0e0;
@@ -801,6 +805,8 @@
     --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
     --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
     --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+    --token-card-surface-color-primary: #262626;
+    --token-card-surface-color-secondary: #393939;
     --token-color-border-action: #4589ff;
     --token-color-border-critical: #fa4d56;
     --token-color-border-faint: #393939;
@@ -1140,6 +1146,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #f4f4f4;
+  --token-card-surface-color-secondary: #ffffff;
   --token-color-border-action: #0f62fe;
   --token-color-border-critical: #ff8389;
   --token-color-border-faint: #e0e0e0;
@@ -1478,6 +1486,8 @@
   --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
   --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
   --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
+  --token-card-surface-color-primary: #262626;
+  --token-card-surface-color-secondary: #393939;
   --token-color-border-action: #4589ff;
   --token-color-border-critical: #fa4d56;
   --token-color-border-faint: #393939;