diff --git a/theme_artists/static/src/scss/primary_variables.scss b/theme_artists/static/src/scss/primary_variables.scss
index e9aa68e29..a7ffccbf9 100644
--- a/theme_artists/static/src/scss/primary_variables.scss
+++ b/theme_artists/static/src/scss/primary_variables.scss
@@ -119,3 +119,11 @@ $o-color-palettes-compatibility-indexes: (
     22: 'generic-16',
     23: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/12', (3: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/04', (5: 4));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Airy/12', (3: 'footer'));
diff --git a/theme_artists/views/snippets/s_call_to_action.xml b/theme_artists/views/snippets/s_call_to_action.xml
index 9f3e9a175..90ec9855a 100644
--- a/theme_artists/views/snippets/s_call_to_action.xml
+++ b/theme_artists/views/snippets/s_call_to_action.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pb152 pt64" remove="pb24 pt48" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-5"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%23000000');"/>
+            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//h3" position="replace">
diff --git a/theme_artists/views/snippets/s_parallax.xml b/theme_artists/views/snippets/s_parallax.xml
index 9a679fbd9..20098e128 100644
--- a/theme_artists/views/snippets/s_parallax.xml
+++ b/theme_artists/views/snippets/s_parallax.xml
@@ -3,7 +3,7 @@
     <template id="s_parallax" inherit_id="website.s_parallax">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-2"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","flip":["y"]}</attribute>
         </xpath>
         <!-- Bg Image -->
         <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace">
@@ -11,7 +11,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//section/*[last()]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%233A3A3A');"/>
+            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_artists/views/snippets/s_text_image.xml b/theme_artists/views/snippets/s_text_image.xml
index 454dd5c80..0eb6511e3 100644
--- a/theme_artists/views/snippets/s_text_image.xml
+++ b/theme_artists/views/snippets/s_text_image.xml
@@ -3,12 +3,12 @@
     <template id="s_text_image" inherit_id="website.s_text_image">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_cc o_cc3" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-1"},"flip":["y"]}</attribute>
+            <attribute name="class" add="o_cc o_cc3 pb128" separator=" "/>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/04"}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%23AB44FF');"/>
+            <div class="o_we_shape o_web_editor_Wavy_04" />
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
diff --git a/theme_artists/views/snippets/s_three_columns.xml b/theme_artists/views/snippets/s_three_columns.xml
index 756a52b62..f1ea8bf15 100644
--- a/theme_artists/views/snippets/s_three_columns.xml
+++ b/theme_artists/views/snippets/s_three_columns.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4" remove="bg-200" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","colors":{"c1":"#ab44ff","c3":"o-color-2"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Airy/12.svg?c1=%23ab44ff&amp;c3=%233A3A3A');"/>
+            <div class="o_we_shape o_web_editor_Airy_12 o_we_flip_y"/>
         </xpath>
         <!-- Column 1 -->
         <xpath expr="//div[hasclass('card')]" position="attributes">
diff --git a/theme_avantgarde/static/src/scss/primary_variables.scss b/theme_avantgarde/static/src/scss/primary_variables.scss
index c78e6d8a8..e24711e84 100644
--- a/theme_avantgarde/static/src/scss/primary_variables.scss
+++ b/theme_avantgarde/static/src/scss/primary_variables.scss
@@ -215,3 +215,9 @@ $o-color-palettes-compatibility-indexes: (
     24: 'generic-16',
     25: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 2));
diff --git a/theme_avantgarde/views/customizations.xml b/theme_avantgarde/views/customizations.xml
index 974467b5e..ae1fdcdf4 100644
--- a/theme_avantgarde/views/customizations.xml
+++ b/theme_avantgarde/views/customizations.xml
@@ -79,10 +79,10 @@
 <!-- ======== REFERENCES ======== -->
  <template id="s_references" inherit_id="website.s_references" name="Avantgarde s_references">
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","colors":{"c2":"o-color-3"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","flip":[]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_01" style="background-image: url(&quot;/web_editor/shape/web_editor/Blobs/01.svg?c2=%23F7F7F7&quot;);"/>
+        <div class="o_we_shape o_web_editor_Blobs_01"/>
     </xpath>
 </template>
 
diff --git a/theme_bewise/static/src/scss/primary_variables.scss b/theme_bewise/static/src/scss/primary_variables.scss
index 816f7ba54..12a102585 100644
--- a/theme_bewise/static/src/scss/primary_variables.scss
+++ b/theme_bewise/static/src/scss/primary_variables.scss
@@ -150,3 +150,9 @@ $o-theme-color-palettes-compatibility-indexes: (
     3: 'bewise-3',
     4: 'bewise-4',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/11', (1: 5));
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index 6961df9e0..72e555a3a 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -183,10 +183,10 @@
 <!-- ======== TEAM ======== -->
  <template id="s_company_team" inherit_id="website.s_company_team" name="Bewise s_company_team">
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","colors":{"c2":"o-color-3"},"flip":["y"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/09","flip":[]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_01 o_we_flip_y" style="background-image: url(&quot;/web_editor/shape/web_editor/Blobs/01.svg?c2=%23F0F4F4&quot;);"/>
+        <div class="o_we_shape o_web_editor_Blobs_09"/>
     </xpath>
 
     <xpath expr="//div[hasclass('s_nb_column_fixed')]/div//h4" position="replace">
diff --git a/theme_clean/static/src/scss/primary_variables.scss b/theme_clean/static/src/scss/primary_variables.scss
index 599e961d1..f88e480e8 100644
--- a/theme_clean/static/src/scss/primary_variables.scss
+++ b/theme_clean/static/src/scss/primary_variables.scss
@@ -239,3 +239,10 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'clean-5',
     6: 'clean-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14', (4: 4));
+$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_001', (3: 'menu', 5: 2));
diff --git a/theme_clean/views/snippets/s_call_to_action.xml b/theme_clean/views/snippets/s_call_to_action.xml
index 403074f2a..de64ebe5c 100644
--- a/theme_clean/views/snippets/s_call_to_action.xml
+++ b/theme_clean/views/snippets/s_call_to_action.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pt80 o_cc2" remove="pt48 o_cc3" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-1"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14", "flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%233498DB');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-9')]" position="attributes">
diff --git a/theme_clean/views/snippets/s_cover.xml b/theme_clean/views/snippets/s_cover.xml
index b8a2ebcbb..244fbe488 100644
--- a/theme_clean/views/snippets/s_cover.xml
+++ b/theme_clean/views/snippets/s_cover.xml
@@ -4,7 +4,7 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_full_screen_height" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/12","colors":{"c3":"#e5edf2","c5":"#E5EDF2"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_001","flip":[]}</attribute>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="//div[hasclass('container')]" position="replace">
@@ -20,7 +20,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_07"/>
+            <div class="o_we_shape o_web_editor_Origins_07_001"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_clean/views/snippets/s_text_image.xml b/theme_clean/views/snippets/s_text_image.xml
index e750d3657..4fce2e9c9 100644
--- a/theme_clean/views/snippets/s_text_image.xml
+++ b/theme_clean/views/snippets/s_text_image.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc2" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%233498DB');"/>
+            <div class="o_we_shape o_web_editor_Origins_14"/>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
diff --git a/theme_cobalt/static/src/scss/primary_variables.scss b/theme_cobalt/static/src/scss/primary_variables.scss
index a6bce0e63..d795e4767 100644
--- a/theme_cobalt/static/src/scss/primary_variables.scss
+++ b/theme_cobalt/static/src/scss/primary_variables.scss
@@ -74,3 +74,11 @@ $o-color-palettes-compatibility-indexes: (
     17: 'generic-16',
     18: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/03', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Bold/01', (2: 2));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Bold/01', (2: 'footer'));
diff --git a/theme_cobalt/views/customizations.xml b/theme_cobalt/views/customizations.xml
index 40c80c742..14242e6a5 100644
--- a/theme_cobalt/views/customizations.xml
+++ b/theme_cobalt/views/customizations.xml
@@ -45,11 +45,11 @@
 <template id="s_image_text" inherit_id="website.s_image_text" name="Cobalt s_image_text">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt152 pb128" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/03","colors":{"c2":"o-color-3"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/03","flip":[]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blobs_03" style="background-image: url(&quot;/web_editor/shape/web_editor/Blobs/03.svg?c2=%23F6F4F2&quot;);"/>
+        <div class="o_we_shape o_web_editor_Blobs_03"/>
     </xpath>
 
     <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
@@ -137,10 +137,10 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns" name="Cobalt s_three_columns">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="bg-200 pt32 pb32" add="pt72 pb120" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","colors":{"c2":"o-color-3"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_x" style="background-image: url(&quot;/web_editor/shape/web_editor/Bold/01.svg?c2=%23F6F4F2&quot;);"/>
+        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_x"/>
     </xpath>
     <xpath expr="//div[hasclass('row')]" position="before">
         <h2 style="text-align: center;">Latest projects</h2>
diff --git a/theme_kea/static/src/scss/primary_variables.scss b/theme_kea/static/src/scss/primary_variables.scss
index b181c536a..ac8c90a49 100644
--- a/theme_kea/static/src/scss/primary_variables.scss
+++ b/theme_kea/static/src/scss/primary_variables.scss
@@ -161,3 +161,11 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'kea-5',
     6: 'kea-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/03', (3: 5));
+$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_001', (3: 'menu'));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Origins/14', (4: 'footer'));
diff --git a/theme_kea/views/snippets/s_cover.xml b/theme_kea/views/snippets/s_cover.xml
index 30243db40..0233e7605 100644
--- a/theme_kea/views/snippets/s_cover.xml
+++ b/theme_kea/views/snippets/s_cover.xml
@@ -4,7 +4,7 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_full_screen_height" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07","colors":{"c3":"o-color-5"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_001","flip":[]}</attribute>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="//div[hasclass('container')]" position="replace">
@@ -19,7 +19,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_07" style="background-image: url('/web_editor/shape/web_editor/Origins/07.svg?c3=%23333333');"/>
+            <div class="o_we_shape o_web_editor_Origins_07_001"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_kea/views/snippets/s_image_text.xml b/theme_kea/views/snippets/s_image_text.xml
index 0c43ccfc0..3f374d083 100644
--- a/theme_kea/views/snippets/s_image_text.xml
+++ b/theme_kea/views/snippets/s_image_text.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pt144" remove="pt32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","colors":{"c3":"o-color-5"},"flip":["x"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x" style="background-image: url('/web_editor/shape/web_editor/Origins/03.svg?c3=%23333333');"/>
+            <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x"/>
         </xpath>
         <!-- Title & Paragraph -->
         <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
diff --git a/theme_kea/views/snippets/s_references.xml b/theme_kea/views/snippets/s_references.xml
index a0b4a06fc..3a75c9700 100644
--- a/theme_kea/views/snippets/s_references.xml
+++ b/theme_kea/views/snippets/s_references.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pb64" remove="pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-5"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23333333');"/>
+            <div class="o_we_shape o_web_editor_Origins_14"/>
         </xpath>
     </template>
 </odoo>
diff --git a/theme_kiddo/static/src/scss/primary_variables.scss b/theme_kiddo/static/src/scss/primary_variables.scss
index 0eec76a24..ff8acacf0 100644
--- a/theme_kiddo/static/src/scss/primary_variables.scss
+++ b/theme_kiddo/static/src/scss/primary_variables.scss
@@ -171,3 +171,12 @@ $o-gray-color-palettes-compatibility-indexes: (
     5: 'kiddo-5',
     6: 'kiddo-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/13', (4: 4));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Wavy/13', 'second', (4: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/19', (5: 4));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Wavy/22', (3: 'footer'));
diff --git a/theme_kiddo/views/snippets/s_banner.xml b/theme_kiddo/views/snippets/s_banner.xml
index b5cebbae3..e0de18b7d 100644
--- a/theme_kiddo/views/snippets/s_banner.xml
+++ b/theme_kiddo/views/snippets/s_banner.xml
@@ -3,11 +3,11 @@
     <template id="s_banner" inherit_id="website.s_banner">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","colors":{"c4":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//section/*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Wavy_13" style="background-image: url('/web_editor/shape/web_editor/Wavy/13.svg?c4=%23F3997B');"/>
+            <div class="o_we_shape o_web_editor_Wavy_13"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
diff --git a/theme_kiddo/views/snippets/s_call_to_action.xml b/theme_kiddo/views/snippets/s_call_to_action.xml
index f4bfe29f8..d1899d2d6 100644
--- a/theme_kiddo/views/snippets/s_call_to_action.xml
+++ b/theme_kiddo/views/snippets/s_call_to_action.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_half_screen_height" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","colors":{"c3":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_22" style='background-image: url("/web_editor/shape/web_editor/Wavy/22.svg?c3=%23F3997B");'/>
+            <div class="o_we_shape o_web_editor_Wavy_22"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="//div[hasclass('col-lg-9')]" position="replace">
diff --git a/theme_kiddo/views/snippets/s_image_text.xml b/theme_kiddo/views/snippets/s_image_text.xml
index 806369b0b..bbe6e9be0 100644
--- a/theme_kiddo/views/snippets/s_image_text.xml
+++ b/theme_kiddo/views/snippets/s_image_text.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pb72" remove="pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","colors":{"c4":"o-color-2"},"flip":["x"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/13","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_13 o_we_flip_x" style='background-image: url("/web_editor/shape/web_editor/Wavy/13.svg?c4=%2399869E");'/>
+            <div class="o_we_shape o_web_editor_Wavy_13 o_we_flip_x o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Image -->
         <xpath expr="//img" position="attributes">
diff --git a/theme_kiddo/views/snippets/s_three_columns.xml b/theme_kiddo/views/snippets/s_three_columns.xml
index 2305be4c3..c3fc1ac3d 100644
--- a/theme_kiddo/views/snippets/s_three_columns.xml
+++ b/theme_kiddo/views/snippets/s_three_columns.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc3 pb152" remove="bg-200 pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/19","colors":{"c5":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/19","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_19" style='background-image: url("/web_editor/shape/web_editor/Wavy/19.svg?c5=%23F3997B");'/>
+            <div class="o_we_shape o_web_editor_Wavy_19"/>
         </xpath>
         <!-- Column 1 -->
         <xpath expr="//div[hasclass('card')]" position="attributes">
diff --git a/theme_monglia/views/customizations.xml b/theme_monglia/views/customizations.xml
index d7d3d1f17..141cd4c39 100644
--- a/theme_monglia/views/customizations.xml
+++ b/theme_monglia/views/customizations.xml
@@ -81,10 +81,10 @@
  <template id="s_media_list" inherit_id="website.s_media_list" name="Monglia s_media_list">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc o_cc2" remove="bg-200" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/06","colors":{"c2":"o-color-1"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/06","flip":["x"]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_06 o_we_flip_x" style="background-image: url(&quot;/web_editor/shape/web_editor/Airy/06.svg?c2=%23ED145B&quot;);"/>
+        <div class="o_we_shape o_web_editor_Airy_06 o_we_flip_x"/>
     </xpath>
 
     <xpath expr="//div[hasclass('container')]/div/div[1]//h3" position="replace">
diff --git a/theme_notes/static/src/scss/primary_variables.scss b/theme_notes/static/src/scss/primary_variables.scss
index b957c1d80..994132023 100644
--- a/theme_notes/static/src/scss/primary_variables.scss
+++ b/theme_notes/static/src/scss/primary_variables.scss
@@ -163,3 +163,10 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'notes-5',
     6: 'notes-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/04', (5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/01', (2: 5));
diff --git a/theme_notes/views/snippets/s_carousel.xml b/theme_notes/views/snippets/s_carousel.xml
index ede09b0db..1f3136090 100644
--- a/theme_notes/views/snippets/s_carousel.xml
+++ b/theme_notes/views/snippets/s_carousel.xml
@@ -3,7 +3,7 @@
     <template id="s_carousel" inherit_id="website.s_carousel">
         <!-- Slide 1 -->
         <xpath expr="//div[hasclass('carousel-content')]" position="replace">
-            <div class="carousel-content col-lg-6 p-5 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(161, 192, 5) -20px 20px 0px 0px !important; border-color: rgb(161, 192, 5) !important;">
+            <div class="carousel-content col-lg-6 p-5 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) -20px 20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <h2><font style="font-size: 62px;">Miraillet Festival</font></h2>
                 <p class="lead">From the 12th to the 17th of August, come and enjoy the atmosphere at the Mirallet Festival. Discover the line up below.</p>
                 <p><br/></p>
@@ -12,7 +12,7 @@
         </xpath>
         <!-- Slide 2 -->
         <xpath expr="(//div[hasclass('carousel-content')])[2]" position="replace">
-            <div class="carousel-content col-lg-8 offset-lg-2 mt48 pt48 pb40 text-center o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(161, 192, 5) 0px 20px 0px 0px !important; border-color: rgb(161, 192, 5) !important;">
+            <div class="carousel-content col-lg-8 offset-lg-2 mt48 pt48 pb40 text-center o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) 0px 20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <h2><font style="font-size: 62px;">6 Days Pass</font></h2>
                 <p class="lead">Tickets will be on sale soon. Do not miss our 6 Days Pass. Free camping!</p>
                 <p><br/></p>
@@ -21,7 +21,7 @@
         </xpath>
         <!-- Slide 3 -->
         <xpath expr="(//div[hasclass('carousel-content')])[3]" position="replace">
-            <div class="carousel-content col-lg-6 offset-lg-6 p-5 pt48 pb40 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(161, 192, 5) 20px 20px 0px 0px !important; border-color: rgb(161, 192, 5) !important;">
+            <div class="carousel-content col-lg-6 offset-lg-6 p-5 pt48 pb40 o_cc o_cc5 shadow border" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) 20px 20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <h2><font style="font-size: 62px;">Recent Editions</font></h2>
                 <p class="lead">Discover what makes the reputation of the Miraillet festival through these after-movies.</p>
                 <p><br/></p>
diff --git a/theme_notes/views/snippets/s_company_team.xml b/theme_notes/views/snippets/s_company_team.xml
index e976dafb6..607f785a4 100644
--- a/theme_notes/views/snippets/s_company_team.xml
+++ b/theme_notes/views/snippets/s_company_team.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pt144 o_cc o_cc5" remove="pt48" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/08","colors":{"c1":"o-color-1"},"flip":["x","y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/08","flip":["x","y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Blobs_08 o_we_flip_x o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Blobs/08.svg?c1=%23A1C005');"/>
+            <div class="o_we_shape o_web_editor_Blobs_08 o_we_flip_x o_we_flip_y"/>
         </xpath>
         <!-- Title -->
         <xpath expr="//div[hasclass('row')]" position="before">
diff --git a/theme_notes/views/snippets/s_image_text.xml b/theme_notes/views/snippets/s_image_text.xml
index d8a8a9af2..d2fca0784 100644
--- a/theme_notes/views/snippets/s_image_text.xml
+++ b/theme_notes/views/snippets/s_image_text.xml
@@ -4,15 +4,15 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc5" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/04","colors":{"c5":"o-color-1"},"flip":["x"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/04","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Blobs_04 o_we_flip_x" style="background-image: url('/web_editor/shape/web_editor/Blobs/04.svg?c5=%23A1C005');"/>
+            <div class="o_we_shape o_web_editor_Blobs_04 o_we_flip_x"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
-            <div class="pb16 p-5 border pt32 offset-lg-2 col-lg-6 shadow o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(33, 33, 33) !important; box-shadow: rgb(33, 33, 33) 20px -20px 0px 0px !important;">
+            <div class="pb16 p-5 border pt32 offset-lg-2 col-lg-6 shadow o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(44, 41, 39) !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important;">
               <h2>History</h2>
               <p>The Miraillet Festival was born in 2002 from a common will of cultural, touristic and institutional actors of the region to propose a major cultural event in the very heart of the region during the summer period.</p>
               <p><a href="#" class="btn btn-dark mb-2">Discover more</a></p>
diff --git a/theme_notes/views/snippets/s_media_list.xml b/theme_notes/views/snippets/s_media_list.xml
index ffef90edc..a85869571 100644
--- a/theme_notes/views/snippets/s_media_list.xml
+++ b/theme_notes/views/snippets/s_media_list.xml
@@ -4,15 +4,15 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4" remove="bg-200" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","colors":{"c2":"o-color-5"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/01","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Blobs_01 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Blobs/01.svg?c2=%23212121');"/>
+            <div class="o_we_shape o_web_editor_Blobs_01 o_we_flip_y"/>
         </xpath>
         <!-- Row 1 -->
         <xpath expr="(//div[hasclass('col-lg-12')])[1]/div" position="replace">
-            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters border shadow align-items-center flex-row-reverse o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(33, 33, 33) !important; box-shadow: rgb(33, 33, 33) 20px -20px 0px 0px !important;">
+            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters border shadow align-items-center flex-row-reverse o_cc o_cc4" style="border-width: 2.5px !important; border-color: rgb(44, 41, 39) !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important;">
                 <div class="align-self-stretch s_media_list_img_wrapper col-lg-4">
                     <img src="/web/image/website.s_media_list_default_image_1" alt="" class="s_media_list_img h-100 w-100"/>
                 </div>
@@ -25,7 +25,7 @@
         </xpath>
         <!-- Row 2 -->
         <xpath expr="(//div[hasclass('col-lg-12')])[2]/div" position="replace">
-            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters shadow border align-items-center o_cc o_cc4" style="border-width: 2.5px !important; box-shadow: rgb(33, 33, 33) 20px -20px 0px 0px !important; border-color: rgb(33, 33, 33) !important;">
+            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters shadow border align-items-center o_cc o_cc4" style="border-width: 2.5px !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important; border-color: rgb(44, 41, 39) !important;">
                 <div class="align-self-stretch s_media_list_img_wrapper col-lg-4">
                     <img src="/web/image/website.s_media_list_default_image_2" alt="" class="s_media_list_img h-100 w-100"/>
                 </div>
@@ -37,7 +37,7 @@
         </xpath>
         <!-- Row 3 -->
         <xpath expr="(//div[hasclass('col-lg-12')])[3]/div" position="replace">
-            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters o_cc o_cc5 border shadow align-items-center flex-row-reverse" style="border-width: 2.5px !important; border-color: rgb(161, 192, 5) !important; box-shadow: rgb(161, 192, 5) 20px -20px 0px 0px !important;">
+            <div class="row s_col_no_resize s_col_no_bgcolor no-gutters o_cc o_cc5 border shadow align-items-center flex-row-reverse" style="border-width: 2.5px !important; border-color: rgb(44, 41, 39) !important; box-shadow: rgb(44, 41, 39) 20px -20px 0px 0px !important;">
                 <div class="align-self-stretch s_media_list_img_wrapper col-lg-4">
                     <img src="/web/image/website.s_media_list_default_image_3" alt="" class="s_media_list_img h-100 w-100"/>
                 </div>
diff --git a/theme_odoo_experts/views/snippets/s_banner.xml b/theme_odoo_experts/views/snippets/s_banner.xml
index 28901d62b..1016db179 100644
--- a/theme_odoo_experts/views/snippets/s_banner.xml
+++ b/theme_odoo_experts/views/snippets/s_banner.xml
@@ -8,7 +8,7 @@
         <!-- Shadow -->
         <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
             <attribute name="class" add="rounded" separator=" "/>
-            <attribute name="style" add="box-shadow: rgb(39, 143, 132) 25px 25px 0px 0px !important; border-radius: 25px !important;" separator=" "/>
+            <attribute name="style" add="box-shadow: rgb(92, 92, 92) 25px 25px 0px 0px !important; border-radius: 25px !important;" separator=" "/>
         </xpath>
         <!-- Title -->
         <xpath expr="//h1" position="replace">
diff --git a/theme_orchid/static/src/scss/primary_variables.scss b/theme_orchid/static/src/scss/primary_variables.scss
index 634ddc877..985493d26 100644
--- a/theme_orchid/static/src/scss/primary_variables.scss
+++ b/theme_orchid/static/src/scss/primary_variables.scss
@@ -91,3 +91,11 @@ $o-color-palettes-compatibility-indexes: (
     22: 'generic-16',
     23: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/05', (1: 4, 5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/07', (3: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/23', (3: 1));
diff --git a/theme_orchid/views/snippets/s_image_text.xml b/theme_orchid/views/snippets/s_image_text.xml
index 0c8014e7e..6cac1da86 100644
--- a/theme_orchid/views/snippets/s_image_text.xml
+++ b/theme_orchid/views/snippets/s_image_text.xml
@@ -3,11 +3,11 @@
     <template id="s_image_text" inherit_id="website.s_image_text">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/07","colors":{"c3":"o-color-1"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/07","flip":["y"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_07 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Wavy/07.svg?c3=%23A1A52F');"/>
+            <div class="o_we_shape o_web_editor_Wavy_07 o_we_flip_y"/>
         </xpath>
         <!-- Title -->
         <xpath expr="//h2" position="replace">
diff --git a/theme_orchid/views/snippets/s_text_image.xml b/theme_orchid/views/snippets/s_text_image.xml
index ccb4e2cfa..6cccd8a93 100644
--- a/theme_orchid/views/snippets/s_text_image.xml
+++ b/theme_orchid/views/snippets/s_text_image.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="pt64" remove="pt32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/06","colors":{"c1":"o-color-1","c3":"o-color-1","c4":"o-color-1","c5":"o-color-4"},"flip":["x","y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/05","flip":["x"]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_06 o_we_flip_x o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Wavy/06.svg?c1=%23a1a52f&amp;c3=%23A1A52F&amp;c4=%23A1A52F&amp;c5=%23FFFFFF');"/>
+            <div class="o_we_shape o_web_editor_Wavy_05 o_we_flip_x"/>
         </xpath>
         <!-- Row -->
         <xpath expr="//div[hasclass('row')]" position="attributes">
diff --git a/theme_orchid/views/snippets/s_three_columns.xml b/theme_orchid/views/snippets/s_three_columns.xml
index 1901a54e8..e0bd94314 100644
--- a/theme_orchid/views/snippets/s_three_columns.xml
+++ b/theme_orchid/views/snippets/s_three_columns.xml
@@ -8,7 +8,7 @@
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Wavy_23" style="background-image: url('/web_editor/shape/web_editor/Wavy/23.svg?c3=%23FFFFFF');"/>
+            <div class="o_we_shape o_web_editor_Wavy_23"/>
         </xpath>
         <!-- Container -->
         <xpath expr="//div[hasclass('container')]" position="attributes">
diff --git a/theme_paptic/static/src/scss/primary_variables.scss b/theme_paptic/static/src/scss/primary_variables.scss
index 4415cf643..9af7d15cd 100644
--- a/theme_paptic/static/src/scss/primary_variables.scss
+++ b/theme_paptic/static/src/scss/primary_variables.scss
@@ -79,3 +79,11 @@ $o-color-palettes-compatibility-indexes: (
     17: 'generic-16',
     18: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blocks/04', (3: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/03', (3: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/01', (2: 3, 5: 3));
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index a9b32fba8..6db495fb1 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -23,11 +23,11 @@
 <template id="s_cover" inherit_id="website.s_cover" name="Paptic s_cover">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pb0 pt192" remove="pt96 pb96 bg-black-50 s_parallax_is_fixed s_parallax" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/04","colors":{"c1":"#40FFFB","c2":"o-color-1","c3":"#FFFFFF","c5":"#9BA9BB"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blocks/04","flip":["x"]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Blocks_04 o_we_flip_x" style="background-image: url('/web_editor/shape/web_editor/Blocks/04.svg?c1=%2340FFFB&amp;c2=%236772E5&amp;c3=%23FFFFFF&amp;c5=%239BA9BB');"/>
+        <div class="o_we_shape o_web_editor_Blocks_04 o_we_flip_x"/>
     </xpath>
 
     <!-- Enable SVG dynamic color functionality -->
@@ -43,7 +43,7 @@
 
 
     <xpath expr="//h1" position="replace">
-        <h1 class="text-o-color-4">Grow your Business.
<br/>Optimize your time.</h1>
+        <h1 class="text-o-color-4">Grow your Business.<br/>Optimize your time.</h1>
     </xpath>
     <xpath expr="//p" position="replace">
         <p class="text-o-color-3">&#160;</p>
@@ -74,11 +74,11 @@
 <template id="s_image_text" inherit_id="website.s_image_text" name="Paptic s_image_text">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt96 pb16 o_cc o_cc3" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","colors":{"c3":"o-color-4"},"flip":["x"]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/03","flip":["x"]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x" style="background-image: url(&quot;/web_editor/shape/web_editor/Origins/03.svg?c3=%23FFFFFF&quot;);"></div>
+        <div class="o_we_shape o_web_editor_Origins_03 o_we_flip_x"></div>
     </xpath>
 
     <xpath expr="//img" position="attributes">
@@ -207,10 +207,10 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns" name="Paptic s_three_columns">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="bg-200 pt32 pb32 o_cc o_cc3" add="pt120 pb120" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/01","colors":{"c2":"o-color-3","c5":"o-color-3"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/01","flip":[]}</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_01" style="background-image: url(&quot;/web_editor/shape/web_editor/Origins/01.svg?c2=%23F6F9FC&amp;c5=%23F6F9FC&quot;);"></div>
+        <div class="o_we_shape o_web_editor_Origins_01"></div>
     </xpath>
     <xpath expr="//div[hasclass('row')]" position="before">
         <h3 style="text-align: center;">SUCCESS STORIES</h3>
@@ -243,11 +243,11 @@
 <template id="s_picture" inherit_id="website.s_picture" name="Paptic s_picture">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt72 o_cc o_cc1" remove="bg-200 pt48" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/08","colors":{"c1":"#F5F9F9"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/08","flip":[]}</attribute>
     </xpath>
 
     <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Bold_08" style="background-image: url('/web_editor/shape/web_editor/Bold/08.svg?c1=%23F5F9F9');"></div>
+        <div class="o_we_shape o_web_editor_Bold_08"/>
     </xpath>
 
     <xpath expr="//img" position="attributes">
diff --git a/theme_real_estate/static/src/scss/primary_variables.scss b/theme_real_estate/static/src/scss/primary_variables.scss
index 4e4016634..97f10b258 100644
--- a/theme_real_estate/static/src/scss/primary_variables.scss
+++ b/theme_real_estate/static/src/scss/primary_variables.scss
@@ -113,3 +113,10 @@ $o-color-palettes-compatibility-indexes: (
     20: 'generic-16',
     21: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14', (4: 4));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Origins/14', 'second', (4: 2));
diff --git a/theme_real_estate/views/snippets/s_banner.xml b/theme_real_estate/views/snippets/s_banner.xml
index 06100d313..c27a96b58 100644
--- a/theme_real_estate/views/snippets/s_banner.xml
+++ b/theme_real_estate/views/snippets/s_banner.xml
@@ -3,11 +3,11 @@
     <template id="s_banner" inherit_id="website.s_banner">
         <!-- Section -->
         <xpath expr="//section" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-1"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23539B80');"/>
+            <div class="o_we_shape o_web_editor_Origins_14"/>
         </xpath>
         <!-- Title -->
         <xpath expr="//h1" position="replace">
diff --git a/theme_real_estate/views/snippets/s_image_text.xml b/theme_real_estate/views/snippets/s_image_text.xml
index 85a0dcf3e..792a56e9f 100644
--- a/theme_real_estate/views/snippets/s_image_text.xml
+++ b/theme_real_estate/views/snippets/s_image_text.xml
@@ -4,11 +4,11 @@
         <!-- Section -->
         <xpath expr="//section" position="attributes">
             <attribute name="class" add="o_cc o_cc4 pb128" remove="pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":[]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":[]}</attribute>
         </xpath>
         <!-- Shape -->
         <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Paragraph -->
         <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
diff --git a/theme_real_estate/views/snippets/s_quotes_carousel.xml b/theme_real_estate/views/snippets/s_quotes_carousel.xml
index ffa960f9d..b3b27b764 100644
--- a/theme_real_estate/views/snippets/s_quotes_carousel.xml
+++ b/theme_real_estate/views/snippets/s_quotes_carousel.xml
@@ -3,24 +3,24 @@
     <template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel">
         <!-- Shape 1 -->
         <xpath expr="(//div[hasclass('carousel-item')])[1]" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":["y"]}</attribute>
         </xpath>
         <xpath expr="(//div[hasclass('carousel-item')])[1]/div" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Shape 2 -->
         <xpath expr="(//div[hasclass('carousel-item')])[2]" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":["y"]}</attribute>
         </xpath>
         <xpath expr="(//div[hasclass('carousel-item')])[2]/div" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Shape 3 -->
         <xpath expr="(//div[hasclass('carousel-item')])[3]" position="attributes">
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","colors":{"c4":"o-color-3"},"flip":["y"]}</attribute>
+            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14","flip":["y"]}</attribute>
         </xpath>
         <xpath expr="(//div[hasclass('carousel-item')])[3]/div" position="before">
-            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y" style="background-image: url('/web_editor/shape/web_editor/Origins/14.svg?c4=%23F4F4F4');"/>
+            <div class="o_we_shape o_web_editor_Origins_14 o_we_flip_y o_second_extra_shape_mapping"/>
         </xpath>
         <!-- Quote 1 -->
         <xpath expr="(//div[hasclass('s_blockquote_content')])[1]/p" position="replace">
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index 2e48c6d19..94070bad4 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -121,10 +121,10 @@
 <template id="s_table_of_content" inherit_id="website.s_table_of_content" name="Vehicle s_table_of_content">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt88 pb128" remove="pt24 pb24" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/10","colors":{"c5":"400"},"flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/10","flip":[]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_10" style='background-image: url("/web_editor/shape/web_editor/Airy/10.svg?c5=%23CED4DA");'/>
+        <div class="o_we_shape o_web_editor_Airy_10"/>
     </xpath>
 
     <xpath expr="//div[hasclass('s_table_of_content_main')]/section" position="replace">