diff --git a/addons/web/static/src/less/enterprise_compatibility.less b/addons/web/static/src/less/enterprise_compatibility.less
index b1cabee1a0c..7dc4238f684 100644
--- a/addons/web/static/src/less/enterprise_compatibility.less
+++ b/addons/web/static/src/less/enterprise_compatibility.less
@@ -8,27 +8,8 @@
 // The problem is that we have two web clients in parallel, and every
 // addons should behave properly with both.
 
-@odoo-brand-primary: #337ab7;
-@odoo-brand-optional: @odoo-brand-primary;
-@odoo-brand-secondary: #8f8f8f;
-@odoo-brand-lightsecondary: #e2e2e0;
-@odoo-list-grey: @odoo-brand-lightsecondary; // FIXME: listview thead background color
-@odoo-webclient-background-color: #F0EEEE;
-@odoo-view-background-color: white;
-@odoo-shadow-color: #303030;
 @brand-primary: @odoo-brand-primary;
 
-@odoo-font-size-base: 13px;
-@odoo-font-size-base-touch: 15px;
-@odoo-main-text-color: #555555;
-@odoo-main-color-muted: #a8a8a8;
-
-@odoo-form-group-cols: 12;
-@odoo-horizontal-padding: 16px;
-
-@screen-xs-min: 475px;
-@screen-xxs-max: (@screen-xs-min - 1);
-
 .oe-view-manager {
     background-color: @odoo-webclient-background-color !important;
 }
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
new file mode 100644
index 00000000000..1984696aafb
--- /dev/null
+++ b/addons/web/static/src/less/variables.less
@@ -0,0 +1,19 @@
+@odoo-brand-primary: #337ab7;
+@odoo-brand-optional: @odoo-brand-primary;
+@odoo-brand-secondary: #8f8f8f;
+@odoo-brand-lightsecondary: #e2e2e0;
+@odoo-list-grey: @odoo-brand-lightsecondary; // FIXME: listview thead background color
+@odoo-webclient-background-color: #F0EEEE;
+@odoo-view-background-color: white;
+@odoo-shadow-color: #303030;
+
+@odoo-font-size-base: 13px;
+@odoo-font-size-base-touch: 15px;
+@odoo-main-text-color: #555555;
+@odoo-main-color-muted: #a8a8a8;
+
+@odoo-form-group-cols: 12;
+@odoo-horizontal-padding: 16px;
+
+@screen-xs-min: 475px;
+@screen-xxs-max: (@screen-xs-min - 1);
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 03723cf9a24..2f066dc7c30 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -101,6 +101,7 @@
             <link rel="stylesheet" href="/base/static/src/css/modules.css"/>
 
             <link rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
+            <link rel="stylesheet" href="/web/static/src/less/variables.less"/>
             <link rel="stylesheet" href="/web/static/src/less/enterprise_compatibility.less"/>
             <link rel="stylesheet" href="/web/static/src/less/utils.less"/>
             <link rel="stylesheet" href="/web/static/src/less/modal.less"/>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index b56d76e8e53..969b6f8a8ca 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -22,6 +22,9 @@
     <script type="text/javascript" src="/website/static/src/js/website.snippets.animation.js"></script>
 
     <t t-call="web.bootstrap"/>
+
+    <link rel="stylesheet" href="/web/static/src/less/variables.less"/>
+    <link rel="stylesheet" href="/web/static/src/less/utils.less"/>
 </template>
 
 <template id="assets_backend" name="website assets for backend" inherit_id="web.assets_backend">