diff --git a/change/@fluentui-web-components-a72ef440-3364-4e9a-ac54-ead7689aa485.json b/change/@fluentui-web-components-a72ef440-3364-4e9a-ac54-ead7689aa485.json
new file mode 100644
index 00000000000000..7770e50842abf2
--- /dev/null
+++ b/change/@fluentui-web-components-a72ef440-3364-4e9a-ac54-ead7689aa485.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "remove hard coded background color in favor of default design system behavior",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index e1a0b239a48fe5..f59791aca66972 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -11,7 +11,6 @@ export const CardStyles = css`
     height: var(--card-height, 100%);
     width: var(--card-width, 100%);
     box-sizing: border-box;
-    background: var(--background-color);
     border-radius: calc(var(--elevated-corner-radius) * 1px);
     ${elevation}
   }