diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2c8a312f72..71e1c20041 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -863,7 +863,7 @@ $table-variant-hover-bg-factor:         .2 !default; // OUDS mod
 $table-border-factor:                   .4 !default; // OUDS mod
 // stylelint-disable-next-line function-disallowed-list
 $table-border-width:                    calc(var(--#{$prefix}border-width) * .5) !default;  // OUDS mod
-$table-border-color:                    var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
+$table-border-color:                    var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
 
 $table-striped-order:                   odd !default;
 $table-striped-columns-order:           even !default;
@@ -951,7 +951,7 @@ $btn-letter-spacing-lg:       calc(#{$letter-spacing-base} * 2) !default; // sty
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-default-hover-bg:        var(--#{$prefix}highlight-bg) !default; // OUDS mod
-$btn-default-hover-border:    var(--#{$prefix}border-color) !default; // OUDS mod
+$btn-default-hover-border:    var(--#{$prefix}color-border-emphasized) !default; // OUDS mod
 $btn-default-hover-color:     var(--#{$prefix}highlight-color) !default; // OUDS mod
 $btn-default-active-bg:       $ouds-button-color-bg-default-pressed !default; // OUDS mod
 $btn-default-active-border:   $ouds-button-color-border-default-pressed !default; // OUDS mod
@@ -1099,7 +1099,7 @@ $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
 $input-color:                           var(--#{$prefix}body-color) !default;
-$input-border-color:                    var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of var(--#{$prefix}border-color)
+$input-border-color:                    var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // OUDS mod
 
@@ -1297,7 +1297,7 @@ $form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
 $form-range-thumb-bg:                      var(--#{$prefix}body-bg) !default; // OUDS mod: instead of `$component-active-bg`
-$form-range-thumb-border:                  var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default; // OUDS mod: instead of `0`
+$form-range-thumb-border:                  var(--#{$prefix}border-width) solid var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `0`
 $form-range-thumb-border-radius:           50% !default;
 $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $form-range-thumb-focus-box-shadow:        null !default; // OUDS mod
@@ -1408,13 +1408,13 @@ $nav-link-transition:               null !default; // OUDS mod
 $nav-link-disabled-color:           var(--#{$prefix}color-content-disabled) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
 // OUDS mod: no `$nav-link-focus-box-shadow`
 
-$nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
+$nav-tabs-border-color:             var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
 $nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
 $nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-padding-x:           1.8125rem !default; // OUDS mod
 $nav-tabs-link-hover-color:         var(--#{$prefix}highlight-color) !default; // OUDS mod
 $nav-tabs-link-hover-bg:            var(--#{$prefix}highlight-bg) !default; // OUDS mod
-$nav-tabs-link-hover-border-color:  var(--#{$prefix}border-color) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
+$nav-tabs-link-hover-border-color:  var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color`
 $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; // OUDS mod: instead of `var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg`
@@ -1428,7 +1428,7 @@ $nav-underline-gap:                       0 !default; // OUDS mod: instead of 1r
 $nav-underline-gap-lg:                    $spacer * .5 !default; // OUDS mod
 // stylelint-disable-next-line function-disallowed-list
 $nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // OUDS mod: instead of `.125rem`
-$nav-underline-border-color:              var(--#{$prefix}color-border-emphasized) !default; // OUDS mod
+$nav-underline-border-color:              var(--#{$prefix}color-border-default) !default; // OUDS mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // OUDS mod
 $nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
 $nav-underline-link-padding-x:            1.8125rem !default; // OUDS mod
@@ -1489,7 +1489,7 @@ $navbar-brand-logo-transition:              width $navbar-transition-duration $n
 $navbar-active-transition:                  bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 
 $navbar-border-width:                       calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
-$navbar-border-color:                       var(--#{$prefix}color-border-emphasized) !default;
+$navbar-border-color:                       var(--#{$prefix}color-border-default) !default;
 
 $navbar-brand-margin-y-xs:                  $spacer * .5 !default;
 $navbar-brand-logo-size-xs:                 $spacer * 1.5 !default;
@@ -1554,7 +1554,7 @@ $dropdown-font-size:                $font-size-base !default;
 $dropdown-line-height:              $line-height-base !default; // OUDS mod
 $dropdown-color:                    var(--#{$prefix}body-color) !default;
 $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
-$dropdown-border-color:             var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
+$dropdown-border-color:             var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
 $dropdown-inner-border-radius:      0 !default; // OUDS mod: instead of `calc(#{$dropdown-border-radius} - #{$dropdown-border-width})`
@@ -1680,7 +1680,7 @@ $card-title-spacer-y:               $spacer * .5 !default;
 $card-title-color:                  null !default;
 $card-subtitle-color:               null !default;
 $card-border-width:                 var(--#{$prefix}border-width) !default;
-$card-border-color:                 var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
+$card-border-color:                 var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
 $card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
@@ -1706,7 +1706,7 @@ $accordion-color:                         null !default; // OUDS mod: instead of
 $accordion-bg:                            transparent !default; // OUDS mod: instead of `var(--#{$prefix}body-bg)`
 // stylelint-disable-next-line function-disallowed-list
 $accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // OUDS mod
-$accordion-border-color:                  var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
+$accordion-border-color:                  var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, #{$accordion-border-width}) !default;
 
@@ -1794,7 +1794,7 @@ $popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width:                 $spacer * 19 !default; // OUDS mod: instead of `276px`
 $popover-padding-y:                 $spacer !default; // OUDS mod
 $popover-border-width:              var(--#{$prefix}border-width) !default;
-$popover-border-color:              var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
+$popover-border-color:              var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
 $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
@@ -1834,7 +1834,7 @@ $toast-font-size:                   .875rem !default;
 $toast-color:                       var(--#{$prefix}emphasis-color) !default; // OUDS mod: instead of `null` due to some `bg-dark` issue
 $toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
 $toast-border-width:                var(--#{$prefix}border-width) !default;
-$toast-border-color:                var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
+$toast-border-color:                var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
 $toast-border-radius:               var(--#{$prefix}border-radius) !default;
 $toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
 $toast-spacing:                     $container-padding-x !default;
@@ -1873,7 +1873,7 @@ $modal-content-padding-x:           0 !default; // OUDS mod
 $modal-content-padding:             $modal-content-padding-y $modal-content-padding-x !default; // OUDS mod
 $modal-content-color:               null !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
-$modal-content-border-color:        var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
+$modal-content-border-color:        var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: var(--#{$prefix}border-radius) !default; // OUDS mod: instead of `subtract($modal-content-border-radius, $modal-content-border-width)`
@@ -1981,7 +1981,7 @@ $progress-height-xs:                $spacer * .25 !default;
 $list-group-font-weight:              $font-weight-bold !default; // OUDS mod
 $list-group-color:                    null !default; // OUDS mod: instead of `var(--#{$prefix}body-color)`
 $list-group-bg:                       transparent !default; // OUDS mod: instead of `var(--#{$prefix}body-bg)`
-$list-group-border-color:             var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
+$list-group-border-color:             var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:             var(--#{$prefix}border-width) !default;
 $list-group-border-radius:            var(--#{$prefix}border-radius) !default;
 
@@ -2025,7 +2025,7 @@ $list-group-icons: (
 $thumbnail-padding:                 0 !default; // OUDS mod
 $thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
 $thumbnail-border-width:            var(--#{$prefix}border-width) !default;
-$thumbnail-border-color:            var(--#{$prefix}color-border-emphasized) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
+$thumbnail-border-color:            var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color-translucent)`
 $thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
 $thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
 // scss-docs-end thumbnail-variables
@@ -2049,7 +2049,7 @@ $title-bar-font-size:               $h2-font-size !default;
 $title-bar-line-height:             $display-line-height !default;
 $title-bar-letter-spacing:          var(--#{$prefix}font-letter-spacing-heading-large) !default;
 $title-bar-border-width:            calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
-$title-bar-border-color:            var(--#{$prefix}color-border-emphasized) !default;
+$title-bar-border-color:            var(--#{$prefix}color-border-default) !default;
 // scss-docs-end title-bars-variables
 // End mod
 
@@ -2174,7 +2174,7 @@ $btn-close-focus-shadow:        $btn-focus-box-shadow !default;
 // OUDS mod
 $btn-close-hover-color:         $btn-close-color !default;
 $btn-close-active-color:        var(--#{$prefix}primary) !default;
-$btn-close-active-border-color: var(--#{$prefix}color-border-emphasized) !default;
+$btn-close-active-border-color: var(--#{$prefix}color-border-default) !default;
 $btn-close-disabled-color:      var(--#{$prefix}color-content-disabled) !default;
 
 $btn-close-icon-size:           1rem auto !default;
@@ -2254,7 +2254,7 @@ $step-item-padding:           7px !default;
 $step-item-margin-end:        var(--#{$prefix}border-width) !default;
 $step-item-bg:                var(--#{$prefix}secondary) !default;
 $step-item-active-bg:         $component-active-bg !default;
-$step-item-next-bg:           var(--#{$prefix}color-border-emphasized) !default;
+$step-item-next-bg:           var(--#{$prefix}color-border-default) !default;
 $step-item-shadow-size:       calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list
 $step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
 
@@ -2297,7 +2297,7 @@ $quantity-selector-sm-width:              5.625rem !default;
 $quantity-selector-btn-padding-x:         add($btn-icon-padding-x, 2px) !default;
 $quantity-selector-btn-padding-x-sm:      add($btn-icon-padding-x-sm, 2px) !default;
 $quantity-selector-btn-bg:                var(--#{$prefix}body-bg) !default;
-$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}color-border-emphasized) !default;
+$quantity-selector-btn-border:            var(--#{$prefix}border-width) solid var(--#{$prefix}color-border-default) !default;
 
 $quantity-selector-disabled-color:        var(--#{$prefix}color-content-disabled) !default;
 $quantity-selector-disabled-bg:           var(--#{$prefix}body-bg) !default;
@@ -2385,7 +2385,7 @@ $tag-font-size:                     $font-size-base !default;
 
 $tag-active-color:                  var(--#{$prefix}highlight-color) !default;
 $tag-disabled-color:                var(--#{$prefix}color-content-disabled) !default;
-$tag-border-color:                  var(--#{$prefix}color-border-emphasized) !default;
+$tag-border-color:                  var(--#{$prefix}color-border-default) !default;
 $tag-active-decoration-color:       var(--#{$prefix}highlight-bg) !default;
 // scss-docs-end tag-variables
 
@@ -2411,7 +2411,7 @@ $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
 $local-nav-active-color:        var(--#{$prefix}primary) !default;
 $local-nav-active-bg:           var(--#{$prefix}color-action-primary-pressed) !default;
 $local-nav-active-marker-width: $spacer * .2 !default;
-$local-nav-border-color:        var(--#{$prefix}color-border-emphasized) !default;
+$local-nav-border-color:        var(--#{$prefix}color-border-default) !default;
 $local-nav-border-width:        calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
 // scss-docs-end local-nav-variables
 // End mod
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 4ff0db5de8..8bec77ea41 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -6,7 +6,7 @@
   display: flex; // OUDS mod
   flex-direction: column; // OUDS mod
   margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-color-border-default); // OUDS mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
@@ -23,7 +23,7 @@
   position: relative;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-color-border-default); // OUDS mod: instead of `var(--bs-border-color)`
   border-width: 1px 0;
   @include clearfix();
 
@@ -208,7 +208,7 @@
     font-weight: $font-weight-bold; // OUDS mod
     color: var(--bs-secondary-color);
     background-color: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-tertiary-bg)`
-    border: var(--bs-border-width) solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
+    border: var(--bs-border-width) solid var(--bs-color-border-default); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`
 
     > div {
       display: flex;
@@ -473,7 +473,7 @@
 // scss-docs-end sticker-fs-xl
 
 .border-subtle {
-  --bs-border-color: var(--bs-color-border-emphasized);
+  --bs-border-color: var(--bs-color-border-default);
 }
 
 .color-copy:hover > svg {
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 5960d4c67f..ec83f4ead1 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -55,7 +55,7 @@
     @include get-font-size("label-large");
     padding: 0 10px; // static even when zoomed
     line-height: 1.5;
-    border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
+    border: var(--bs-color-border-emphasized) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
   }
   // End mod
 }
@@ -79,13 +79,13 @@
   }
 
   .border-top-thin {
-    border-top: 1px solid var(--bs-color-border-emphasized);
+    border-top: 1px solid var(--bs-color-border-default);
   }
 
   .border-color {
     width: 60px;
     height: 60px;
-    border: 1px solid var(--bs-color-border-emphasized);
+    border: 1px solid var(--bs-color-border-default);
   }
 
   td:last-child:not(:first-child) {
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 8146d1785b..163cb2e267 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -16,7 +16,7 @@
 
   .bd-code-snippet {
     margin: 0;
-    border-color: var(--bs-color-border-emphasized);
+    border-color: var(--bs-color-border-default);
     border-width: 1px;
     @include border-radius(calc(.5rem - 1px));
   }
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 719ad47cb5..ef6506b892 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -29,7 +29,7 @@
   --docsearch-key-shadow: null;
   // --docsearch-footer-height;
   --docsearch-footer-background: transparent;
-  --docsearch-footer-shadow: 0 -1px var(--bs-border-color);
+  --docsearch-footer-shadow: 0 -1px var(--bs-color-border-emphasized);
 }
 
 .bd-search {
@@ -50,7 +50,7 @@
 }
 
 .DocSearch-Modal {
-  border: var(--bs-border-width) solid var(--bs-color-border-emphasized);
+  border: var(--bs-border-width) solid var(--bs-color-border-default);
   @include border-radius(0, 0);
 }
 
@@ -98,7 +98,7 @@
 }
 
 .DocSearch-Form {
-  box-shadow: var(--bs-color-border-emphasized) 0 0 0 .125rem inset;
+  box-shadow: var(--bs-color-border-default) 0 0 0 .125rem inset;
   @include border-radius(0, 0);
 
   &:focus-within {
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index ebc6c522d2..24dae18e3a 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -38,7 +38,7 @@
   font-weight: $font-weight-bold;
   color: $white;
   background: $black;
-  border-top: var(--bs-border-width) solid var(--bs-color-border-emphasized);
+  border-top: var(--bs-border-width) solid var(--bs-color-border-default);
 
   &[style*="display: block"] {
     display: flex !important; // stylelint-disable-line declaration-no-important
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 0d7460c6c2..3adc5a7260 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -66,7 +66,7 @@
     nav {
       padding: $ouds-space-fixed-medium; // OUDS mod: instead of `1.25rem 1.25rem 1.25rem 1rem`
       background-color: var(--bs-tertiary-bg);
-      border: 1px solid var(--bs-border-color);
+      border: 1px solid var(--bs-color-border-emphasized);
       @include border-radius(var(--bs-border-radius));
     }
   }
diff --git a/site/content/docs/0.0/customize/color-palette.md b/site/content/docs/0.0/customize/color-palette.md
index 766f81ecef..17f73ef8cd 100644
--- a/site/content/docs/0.0/customize/color-palette.md
+++ b/site/content/docs/0.0/customize/color-palette.md
@@ -61,8 +61,8 @@ Bootstrap defines a color palette on its own. We worked on a mapping between Ora
 
 {{< callout danger >}}
 Some of the colors below do not belong to the Orange Unified Design System specifications.
-<!-- TODO LM: Decide how to link to the new DSM -->
-Please refer to our [color palette section](#palette)<!-- and to the [Color guidelines](https://unified-design-system.orange.com/472794e18/p/217ac6-colour/b/4705d3) on the Orange Unified Design System website-->.
+
+Please refer to our [color palette section](#palette) and to the [Color guidelines](https://unified-design-system.orange.com/472794e18/p/217ac6-color) on the Orange Unified Design System website.
 {{< /callout >}}
 
 {{< callout warning >}}
@@ -118,13 +118,13 @@ Sass cannot programmatically generate variables, so we manually created variable
 
 <h3>Example</h3>
 
-Here's how you should not use these in your Sass:
+Here's how you should use these in your Sass:
 
 ```scss
-.alpha { color: $purple; }
+.alpha { color: var(--bs-color-action-visited); } // And not `$ouds-color-decorative-amethyst-600` or `$ouds-color-action-visited-light` directly
 .beta {
-  color: $ouds-color-decorative-sun-100;
-  background-color: $indigo-900;
+  color: $ouds-color-decorative-sun-100; // Because we don't have any CSS variable but prefer avoid the decorative
+  background-color: var(--bs-color-bg-primary); // No hex code, no Sass variable
 }
 ```