diff --git a/modules/primer-progress-bar/README.md b/modules/primer-progress-bar/README.md
index 5ea180e0..06570378 100644
--- a/modules/primer-progress-bar/README.md
+++ b/modules/primer-progress-bar/README.md
@@ -41,16 +41,17 @@ status: Experimental
 -->
 
 ```html
-<div class="progress-bar my-4">
-  <div class="progress" style="width: 50%">
-  </div>
-</div>
-
-<span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
+<span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden my-4">
   <span class="bg-green" style="width:50%"></span>
   <span class="bg-purple" style="width:25%"></span>
   <span class="bg-red" style="width:5%"></span>
 </span>
+
+<span class="Progress">
+  <span class="Progress-value bg-green" style="width: 50%;"></span>
+  <span class="Progress-value bg-purple" style="width: 25%;"></span>
+  <span class="Progress-value bg-red" style="width: 5%;"></span>
+</span>
 ```
 
 <!-- %enddocs -->
@@ -63,15 +64,17 @@ status: Experimental
 -->
 
 ```html
-<div class="progress-bar progress-bar-small my-4">
-  <div class="progress" style="width:50%"></div>
-</div>
-
-<span class="flex-progress-bar-small d-flex bg-gray rounded-1 overflow-hidden">
+<span class="flex-progress-bar-small d-flex bg-gray rounded-1 overflow-hidden  my-4">
   <span class="bg-green" style="width:50%"></span>
   <span class="bg-purple" style="width:25%"></span>
   <span class="bg-red" style="width:5%"></span>
 </span>
+
+<span class="Progress Progress--small">
+  <span class="Progress-value bg-green" style="width: 50%;"></span>
+  <span class="Progress-value bg-purple" style="width: 25%;"></span>
+  <span class="Progress-value bg-red" style="width: 5%;"></span>
+</span>
 ```
 
 ## Progress Bar With Tooltip
@@ -83,18 +86,16 @@ status: Experimental
 
 ```html
 <div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
-  <div class="progress-bar my-4">
-    <div class="progress" style="width: 50%">
-    </div>
-  </div>
-</div>
-
-<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
-  <span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
-    <span class="flex-progress to-do bg-green" style="width: 50%"></span>
+  <span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden my-4">
+    <span class="flex-progress bg-green" style="width: 50%"></span>
   </span>
 </div>
 
+<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
+  <span class="Progress">
+    <span class="Progress-value bg-green" style="width: 50%;"></span>
+  </span>
+</div>
 ```
 
 ## WIP Reverse Progress
diff --git a/modules/primer-progress-bar/lib/progress-bar.scss b/modules/primer-progress-bar/lib/progress-bar.scss
index e2afa5d5..23f2ea47 100644
--- a/modules/primer-progress-bar/lib/progress-bar.scss
+++ b/modules/primer-progress-bar/lib/progress-bar.scss
@@ -1,67 +1,32 @@
-// A green progress bar on a grey background.
-.progress-bar {
-  display: block;
-  height: 15px;
-  overflow: hidden; // Crop the progress bar within for rounded corners
-  background-color: lighten($gray-200, 3%);
-  border-radius: 3px;
-
-  .progress {
-    display: block;
-    height: 100%;
-    background-color: darken($green-400, 5%);
-  }
-}
-
-// Reverse progress bar shrinks revealing the bar color which is the container background
-.reverse-progress {
-  &-container {
-    position: relative;
-    height: 3px;
-    background-color: $gray-200;
-    background-image: linear-gradient(
-      to right,
-      $bg-green,
-      $blue-600,
-      $purple-800,
-      $red-600,
-      $orange-500
-    );
-    background-size: 100% 3px;
-  }
-
-  &-bar {
-    position: absolute;
-    right: 0;
-    height: 100%;
-    background-color: $gray-200;
-  }
-}
-
-// used new milestones show page for issue reordering
-.progress-bar-small {
-  height: 10px;
-}
-
-// Used with table-list header on new milestones show page
-// A more robust fix without nesting requires refactoring issue helper
-.progress-bar-inline {
-  .progress-bar {
-    width: 100%;
-    border-color: $gray-200;
-    border-style: solid;
-    border-width: 1px;
-    border-top: 0;
-    border-radius: 0;
-  }
-}
-
-// Flexbox Refactoring for Primer CSS Component //
+// Progress Bar
+// Intended to replace custom styled progress flex-progress-bar-small
 
+// Flex and Functional CSS Refactoring Approach
 .flex-progress-bar {
-  height: 15px;
+  height: 10px;
 }
 
 .flex-progress-bar-small {
-  height: 10px;
+  height: 8px;
+}
+
+// BEM/Semantic Approach
+
+.Progress {
+  height: 10px;
+  display: flex;
+  background-color: $gray-200;
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
+.Progress-value {
+}
+
+.Progress--small {
+  height: 8px;
+}
+
+.Progress--tiny {
+  height: 5px;
 }