diff --git a/addons/web/static/src/less/bootstrap_overridden.less b/addons/web/static/src/less/bootstrap_overridden.less
index 7949971247a..85866add337 100644
--- a/addons/web/static/src/less/bootstrap_overridden.less
+++ b/addons/web/static/src/less/bootstrap_overridden.less
@@ -7,6 +7,12 @@
 
 //== Colors
 @brand-primary: @odoo-brand-primary;
+@gray-lighter: @odoo-color-silver;
+
+// Define @gray-lighter-dark as a minor @gray-lighter variation used for design
+// purposes only (e.g. cards' borders). We avoid to overwrite the default
+// @gray-light because it is deeply used by bootstrap to define muted elements.
+@gray-lighter-dark: @odoo-color-silver-dark;
 
 //== Titles
 @font-size-h1: @odoo-font-size-base + 13px;
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
index 3ba7f7d0e07..49123b31e30 100644
--- a/addons/web/static/src/less/variables.less
+++ b/addons/web/static/src/less/variables.less
@@ -11,6 +11,9 @@
 @odoo-brand-optional: #7c7bad;
 @odoo-brand-secondary: #f0eeee;
 @odoo-brand-lightsecondary: #e2e2e0;
+@odoo-color-silver: #F9F9F9;
+@odoo-color-silver-dark: #E5E5E5;
+@odoo-color-silver-darker: #E8E7E7;
 
 @odoo-color-pink: #875A7B;
 @odoo-main-color-muted: #a8a8a8;
@@ -19,7 +22,7 @@
 @odoo-view-background-color: white;
 @odoo-shadow-color: #303030;
 
-@odoo-webclient-background-color: @odoo-brand-secondary;
+@odoo-webclient-background-color: @odoo-color-silver;
 @odoo-control-panel-background-color: @odoo-webclient-background-color;
 @odoo-form-lightsecondary: #ccc;