diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
index 13f556b..76dd2c7 100644
--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -6,99 +6,107 @@
 
 ```
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #F15743;"></span>
+  <span class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></span>
 </div>
 
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></span>
 </div>
 
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #F15743;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #F15743;"></span>
 </div>
 
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #F15743;"></span>
+  <span class="CDB-ColorBar" style="background-color: #9DE0AD;"></span>
 </div>
 
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--long" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
-</div>
-
-<div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--med" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
 </div>
  ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
 @import '../../cdb-utilities/mixins';
 
 .CDB-ColorBarContainer {
   @include display-flex();
   @include flex-direction(row);
+  max-width: 215px;
 }
 .CDB-ColorBar {
+  position: relative;
   width: 100%;
-  height: $baseSize / 2;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  height: 6px;
   border-radius: 6px;
 
+  &::after {
+    content:"";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+  }
   &:last-child {
     margin-right: 0;
   }
 }
-.CDB-ColorBar.CDB-ColorBar--small {
-  width: $baseSize * 2;
-}
-.CDB-ColorBar.CDB-ColorBar--med {
-  width: 29px;
-}
-.CDB-ColorBar.CDB-ColorBar--long {
-  width: $baseSize * 12;
-}
 .CDB-ColorBar.CDB-ColorBar--compacted {
-  border-right: 0;
-  border-left: 0;
   border-radius: 0;
 
+  &::after {
+    border-width: 1px 0;
+    border-radius: 0;
+  }
   &:first-child {
-    border-left: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 6px 0 0 6px;
+    &::after {
+      border-width: 1px 0 1px 1px;
+      border-radius: 6px 0 0 6px;
+    }
   }
   &:last-child {
-    border-right: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0 6px 6px 0;
+    &::after {
+      border-width: 1px 1px 1px 0;
+      border-radius: 0 6px 6px 0;
+    }
   }
 }
 .CDB-ColorBar.CDB-ColorBar--uBorder {
   border-radius: 2px;
 
+  &::after {
+    border-radius: 2px;
+  }
   &:first-child {
     border-radius: 6px 2px 2px 6px;
+    &::after {
+      border-radius: 6px 2px 2px 6px;
+    }
   }
   &:last-child {
     border-radius: 2px 6px 6px 2px;
+    &:after {
+      border-radius: 2px 6px 6px 2px;
+    }
   }
 }
diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
index 47e34cd..ca2e43a 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -9,7 +9,7 @@
   <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
   <div class="u-iBlock">
     <div class="CDB-OptionInput">
-      <span class="CDB-ColorBar" style="background-color: #9DE0AD;"></span>
+      <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
     </div>
   </div>
 </fieldset>