diff --git a/addons/sale/views/variant_templates.xml b/addons/sale/views/variant_templates.xml
index 08ba630ca68..8b373949538 100644
--- a/addons/sale/views/variant_templates.xml
+++ b/addons/sale/views/variant_templates.xml
@@ -133,10 +133,10 @@
         </ul>
     </template>
     <template id="badge_extra_price" name="Badge Extra Price">
-        <span class="badge badge-pill badge-primary" t-if="ptav.price_extra">
+        <span class="badge badge-pill badge-light border" t-if="ptav.price_extra">
         <!-- see note above about price_extra -->
         <span class="sign_badge_price_extra" t-esc="ptav.price_extra > 0 and '+' or '-'"/>
-        <span t-esc="abs(ptav.price_extra)" class="variant_price_extra" style="white-space: nowrap;"
+        <span t-esc="abs(ptav.price_extra)" class="variant_price_extra text-muted font-italic" style="white-space: nowrap;"
             t-options='{
                 "widget": "monetary",
                 "from_currency": product.currency_id,
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index ea2c948a419..d6198befc61 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -800,9 +800,9 @@
                             <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="custom-control-label font-weight-normal">
                                 <span t-esc="combination_info['display_name']"/>
                                 <t t-set="diff_price" t-value="website.currency_id.compare_amounts(combination_info['price'], template_combination_info['price'])"/>
-                                <span class="badge badge-pill badge-primary" t-if="diff_price != 0">
+                                <span class="badge badge-pill badge-light border" t-if="diff_price != 0">
                                     <span class="sign_badge_price_extra" t-esc="diff_price > 0 and '+' or '-'"/>
-                                    <span t-esc="abs(combination_info['price'] - template_combination_info['price'])" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
+                                    <span t-esc="abs(combination_info['price'] - template_combination_info['price'])" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" class="text-muted font-italic" />
                                 </span>
                             </label>
                         </div>