diff --git a/packages/uswds-utilities/src/styles/rules/add-aspect.scss b/packages/uswds-utilities/src/styles/rules/add-aspect.scss
index 215ae41626..c4b9095b05 100644
--- a/packages/uswds-utilities/src/styles/rules/add-aspect.scss
+++ b/packages/uswds-utilities/src/styles/rules/add-aspect.scss
@@ -3,16 +3,18 @@
 ASPECT
 ----------------------------------------
 usage:
-  .aspect-[value]
+  .add-aspect-[key]
 ----------------------------------------
 output:
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 100%;
+  aspect-ratio: [value];
 ----------------------------------------
 example:
-  .aspect-16x9
+  .add-aspect-16x9 {
+    height: inherit;
+    padding: inherit;
+    aspect-ratio: 1.7777777778;
+    max-width: 100%;
+  }
 ----------------------------------------
 */
 @use "sass:map";
diff --git a/packages/uswds-utilities/src/styles/rules/add-list-reset.scss b/packages/uswds-utilities/src/styles/rules/add-list-reset.scss
index c935541a1a..d93aac92bd 100644
--- a/packages/uswds-utilities/src/styles/rules/add-list-reset.scss
+++ b/packages/uswds-utilities/src/styles/rules/add-list-reset.scss
@@ -3,16 +3,21 @@
 LIST RESET
 ----------------------------------------
 usage:
-  .list-reset
+  .add-list-reset
 ----------------------------------------
 output:
-  list-style: none;
+  margin-bottom: 0;
+  margin-top: 0;
   padding-left: 0;
+  list-style: none;
 ----------------------------------------
 example:
-  .list-reset {
+  .add-list-reset {
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
     list-style: none;
-    padding-left: 0; }
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/align-items.scss b/packages/uswds-utilities/src/styles/rules/align-items.scss
index 3ef09d792a..a23a4fb4b1 100644
--- a/packages/uswds-utilities/src/styles/rules/align-items.scss
+++ b/packages/uswds-utilities/src/styles/rules/align-items.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .flex-align-start {
-    align-items: flex-start; }
+    align-items: flex-start;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/align-self.scss b/packages/uswds-utilities/src/styles/rules/align-self.scss
index 3119c6b833..d590eb8646 100644
--- a/packages/uswds-utilities/src/styles/rules/align-self.scss
+++ b/packages/uswds-utilities/src/styles/rules/align-self.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .flex-align-self-start {
-    align-self: flex-start; }
+    align-self: flex-start;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/background-color.scss b/packages/uswds-utilities/src/styles/rules/background-color.scss
index b9ac1f5d81..3bafff7811 100644
--- a/packages/uswds-utilities/src/styles/rules/background-color.scss
+++ b/packages/uswds-utilities/src/styles/rules/background-color.scss
@@ -9,8 +9,9 @@ output:
   background-color: [value];
 ----------------------------------------
 example:
-  .bg-red-50v {
-    background-color: #be4900; }
+  .bg-red {
+    background-color: #e52207;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/border-color.scss b/packages/uswds-utilities/src/styles/rules/border-color.scss
index 70f59cd56e..b933553752 100644
--- a/packages/uswds-utilities/src/styles/rules/border-color.scss
+++ b/packages/uswds-utilities/src/styles/rules/border-color.scss
@@ -1,16 +1,17 @@
 /*
 ========================================
-background-color
+border-color
 ----------------------------------------
 usage:
-  .border-[color]
+  .border-[key]
 ----------------------------------------
 output:
-  border[-color]: [color];
+  border-color: [value];
 ----------------------------------------
 example:
   .border-red {
-    border-color: #be4900; }
+    border-color: #e52207;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/border-radius.scss b/packages/uswds-utilities/src/styles/rules/border-radius.scss
index d6fd322bd6..2aaf97ec08 100644
--- a/packages/uswds-utilities/src/styles/rules/border-radius.scss
+++ b/packages/uswds-utilities/src/styles/rules/border-radius.scss
@@ -3,17 +3,19 @@
 border-radius
 ----------------------------------------
 usage:
-  .border-radius-[key]
+  .radius-[key]
 ----------------------------------------
 output:
   border-radius: [value];
 ----------------------------------------
 example:
-  .border-radius-0 {
-    border-radius: 0; }
+  .radius-0 {
+    border-radius: 0;
+  }
 
-  .border-radius-pill {
-    border-radius: 10em; }
+  .radius-pill {
+    border-radius: 99rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/border-style.scss b/packages/uswds-utilities/src/styles/rules/border-style.scss
index 4375b93d3e..6e05acf979 100644
--- a/packages/uswds-utilities/src/styles/rules/border-style.scss
+++ b/packages/uswds-utilities/src/styles/rules/border-style.scss
@@ -3,14 +3,15 @@
 border-style
 ----------------------------------------
 usage:
-  .border[-modifier]*-[key]
+  .border-[key]
 ----------------------------------------
 output:
   border-style: [value];
 ----------------------------------------
 example:
   .border-dotted {
-    border-style: dotted; }
+    border-style: dotted;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/border-width.scss b/packages/uswds-utilities/src/styles/rules/border-width.scss
index b4ff43f7dd..a0a15e8414 100644
--- a/packages/uswds-utilities/src/styles/rules/border-width.scss
+++ b/packages/uswds-utilities/src/styles/rules/border-width.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .border-top-width-1px {
-    border-top-width: 1px; }
+    border-top-width: 1px;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/border.scss b/packages/uswds-utilities/src/styles/rules/border.scss
index a7488d4918..cd8bc1ab09 100644
--- a/packages/uswds-utilities/src/styles/rules/border.scss
+++ b/packages/uswds-utilities/src/styles/rules/border.scss
@@ -12,11 +12,13 @@ output:
   border-[modifier]: [value];
 ----------------------------------------
 example:
-  .border-t-1px {
-    border-top: 1px solid; }
+  .border-top-1px {
+    border-top: 1px solid;
+  }
 
   .border-0 {
-    border: none; }
+    border: 0 solid;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/bottom.scss b/packages/uswds-utilities/src/styles/rules/bottom.scss
index d500311082..74505a705a 100644
--- a/packages/uswds-utilities/src/styles/rules/bottom.scss
+++ b/packages/uswds-utilities/src/styles/rules/bottom.scss
@@ -1,8 +1,6 @@
 /*
 ========================================
-.bottom
-----------------------------------------
-property: bottom
+bottom
 ----------------------------------------
 usage:
   .bottom-[key]
@@ -11,8 +9,13 @@ output:
   bottom: [value];
 ----------------------------------------
 example:
-  .bottom-n2px {
-    bottom: -2px; }
+  .bottom-3 {
+    bottom: 1.5rem;
+  }
+
+  .bottom-neg-2px {
+    bottom: -2px;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/box-shadow.scss b/packages/uswds-utilities/src/styles/rules/box-shadow.scss
index 6419f27698..0f83cf52e7 100644
--- a/packages/uswds-utilities/src/styles/rules/box-shadow.scss
+++ b/packages/uswds-utilities/src/styles/rules/box-shadow.scss
@@ -3,14 +3,15 @@
 box-shadow
 ----------------------------------------
 usage:
-  .box-shadow-[value]
+  .shadow-[key]
 ----------------------------------------
 output:
   box-shadow: [value];
 ----------------------------------------
 example:
-  .box-shadow-1 {
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10); }
+  .shadow-1 {
+    box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.1);
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/circle.scss b/packages/uswds-utilities/src/styles/rules/circle.scss
index c9dd8599d7..7603500a72 100644
--- a/packages/uswds-utilities/src/styles/rules/circle.scss
+++ b/packages/uswds-utilities/src/styles/rules/circle.scss
@@ -13,7 +13,9 @@ output:
 example:
   .circle-6 {
     height: 3rem;
-    width: 3rem; }
+    width: 3rem;
+    border-radius: 50%;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/clearfix.scss b/packages/uswds-utilities/src/styles/rules/clearfix.scss
index 195ce23817..c29e6ed205 100644
--- a/packages/uswds-utilities/src/styles/rules/clearfix.scss
+++ b/packages/uswds-utilities/src/styles/rules/clearfix.scss
@@ -9,7 +9,8 @@ example:
   .clearfix::after {
     clear: both;
     content: "";
-    display: block; }
+    display: block;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/color.scss b/packages/uswds-utilities/src/styles/rules/color.scss
index 4503fdf72b..6f0c7a9c4f 100644
--- a/packages/uswds-utilities/src/styles/rules/color.scss
+++ b/packages/uswds-utilities/src/styles/rules/color.scss
@@ -3,14 +3,15 @@
 color
 ----------------------------------------
 usage:
-  .color-[key]
+  .text-[key]
 ----------------------------------------
 output:
   color: [value];
 ----------------------------------------
 example:
-  .color-black-100 {
-    color: #000; }
+  .text-black {
+    color: black;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/cursor.scss b/packages/uswds-utilities/src/styles/rules/cursor.scss
index 9f5fceecff..6ad9f9ca9d 100644
--- a/packages/uswds-utilities/src/styles/rules/cursor.scss
+++ b/packages/uswds-utilities/src/styles/rules/cursor.scss
@@ -1,6 +1,6 @@
 /*
 ========================================
-color
+cursor
 ----------------------------------------
 usage:
   .cursor-[key]
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .cursor-pointer {
-    cursor: pointer; }
+    cursor: pointer;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/display.scss b/packages/uswds-utilities/src/styles/rules/display.scss
index 78f2cba51e..46995144d1 100644
--- a/packages/uswds-utilities/src/styles/rules/display.scss
+++ b/packages/uswds-utilities/src/styles/rules/display.scss
@@ -6,11 +6,12 @@ usage:
   .display-[key]
 ----------------------------------------
 output:
-  display: [value]
+  display: [value];
 ----------------------------------------
 example:
   .display-none {
-    display: none; }
+    display: none;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/flex-direction.scss b/packages/uswds-utilities/src/styles/rules/flex-direction.scss
index 7a5e5fdaba..b0d286c9f0 100644
--- a/packages/uswds-utilities/src/styles/rules/flex-direction.scss
+++ b/packages/uswds-utilities/src/styles/rules/flex-direction.scss
@@ -3,14 +3,19 @@
 flex-direction
 ----------------------------------------
 usage:
-  .flex-direction-[value]
+  .flex-[key]
 ----------------------------------------
 output:
-  flex-direction: [value]
+  flex-direction: [value];
 ----------------------------------------
 example:
-  .flex-direction-row {
-    flex-direction: row; }
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-column {
+    flex-direction: column;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/flex-wrap.scss b/packages/uswds-utilities/src/styles/rules/flex-wrap.scss
index 20aa2e764d..a2da50dba9 100644
--- a/packages/uswds-utilities/src/styles/rules/flex-wrap.scss
+++ b/packages/uswds-utilities/src/styles/rules/flex-wrap.scss
@@ -3,14 +3,19 @@
 flex-wrap
 ----------------------------------------
 usage:
-  .flex-wrap-[key]
+  .flex-[key]
 ----------------------------------------
 output:
   flex-wrap: [value];
 ----------------------------------------
 example:
   .flex-wrap {
-    flex-wrap: wrap; }
+    flex-wrap: wrap;
+  }
+
+  .flex-no-wrap {
+    flex-wrap: nowrap;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/flex.scss b/packages/uswds-utilities/src/styles/rules/flex.scss
index e5773a394f..3561d0c7ac 100644
--- a/packages/uswds-utilities/src/styles/rules/flex.scss
+++ b/packages/uswds-utilities/src/styles/rules/flex.scss
@@ -10,13 +10,16 @@ output:
 ----------------------------------------
 example:
   .flex-1 {
-    flex: 1 0 0; }
+    flex: 1 0 0;
+  }
 
   .flex-fill {
-    flex: 1 0 0; }
+    flex: 1 0 0;
+  }
 
   .flex-auto {
-    flex: none; }
+    flex: 0 1 auto;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/float.scss b/packages/uswds-utilities/src/styles/rules/float.scss
index a8739febf1..7fb9e8f154 100644
--- a/packages/uswds-utilities/src/styles/rules/float.scss
+++ b/packages/uswds-utilities/src/styles/rules/float.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .float-left {
-    float: left; }
+    float: left;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/font-family.scss b/packages/uswds-utilities/src/styles/rules/font-family.scss
index 35593bc03a..edc09b1a69 100644
--- a/packages/uswds-utilities/src/styles/rules/font-family.scss
+++ b/packages/uswds-utilities/src/styles/rules/font-family.scss
@@ -3,22 +3,21 @@
 font-family
 ----------------------------------------
 usage:
-  .family-[key]
+  .font-family-[key]
 ----------------------------------------
 output:
-  font-family: [value]
+  font-family: [value];
 ----------------------------------------
 example:
-  .family-sans {
-    font-family: 'United Sans webfont',
-                system,
-                -apple-system,
-                BlinkMacSystemFont,
-                'Roboto',
-                'Helvetica Neue',
-                'Helvetica',
-                'Arial',
-                sans-serif; }
+  .font-family-sans {
+    font-family:
+      Source Sans Pro Web,
+      Helvetica Neue,
+      Helvetica,
+      Roboto,
+      Arial,
+      sans-serif;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/font-feature.scss b/packages/uswds-utilities/src/styles/rules/font-feature.scss
index c163a52c3a..d4f1b7569b 100644
--- a/packages/uswds-utilities/src/styles/rules/font-feature.scss
+++ b/packages/uswds-utilities/src/styles/rules/font-feature.scss
@@ -11,7 +11,8 @@ output:
 example:
   .text-tabular {
     font-feature-settings:
-      'tnum' 1, 'kern' 1; }
+      'tnum' 1, 'kern' 1;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/font-style.scss b/packages/uswds-utilities/src/styles/rules/font-style.scss
index e55ec3cf4e..7b31a59a86 100644
--- a/packages/uswds-utilities/src/styles/rules/font-style.scss
+++ b/packages/uswds-utilities/src/styles/rules/font-style.scss
@@ -3,16 +3,19 @@
 font-style
 ----------------------------------------
 usage:
-  .text-italic
+  .text-[key]
 ----------------------------------------
 output:
-  font-style: italic;
+  font-style: [value];
 ----------------------------------------
 example:
   .text-italic {
-    font-style: italic; }
+    font-style: italic;
+  }
+
   .text-no-italic {
-    font-style: normal; }
+    font-style: normal;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/font-weight.scss b/packages/uswds-utilities/src/styles/rules/font-weight.scss
index afa0769869..f7bb1e6c38 100644
--- a/packages/uswds-utilities/src/styles/rules/font-weight.scss
+++ b/packages/uswds-utilities/src/styles/rules/font-weight.scss
@@ -9,8 +9,13 @@ output:
   font-weight: [value];
 ----------------------------------------
 example:
-  .text-300 {
-    font-weight: 300; }
+  .text-bold {
+    font-weight: 700;
+  }
+
+  .text-light{
+    font-weight: 300;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/font.scss b/packages/uswds-utilities/src/styles/rules/font.scss
index e3b9256634..34d746d16c 100644
--- a/packages/uswds-utilities/src/styles/rules/font.scss
+++ b/packages/uswds-utilities/src/styles/rules/font.scss
@@ -1,28 +1,17 @@
 /*
 ========================================
-font
-----------------------------------------
-sets font-size and font-family
+font-size
 ----------------------------------------
 usage:
-  .size-[key]-[key]
+  .font-[key]-[key]
 ----------------------------------------
 output:
-  font-family: [value];
   font-size: [value];
 ----------------------------------------
 example:
-  .size-sans-s3 {
-    font-face: '18Franklin-webfont',
-                system,
-                -apple-system,
-                BlinkMacSystemFont,
-                'Roboto',
-                'Helvetica Neue',
-                'Helvetica',
-                'Arial',
-                sans-serif;
-    font-size: 1rem; }
+  .font-sans-md {
+    font-size: 1.13rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/height.scss b/packages/uswds-utilities/src/styles/rules/height.scss
index b59439dbff..30fdc677b9 100644
--- a/packages/uswds-utilities/src/styles/rules/height.scss
+++ b/packages/uswds-utilities/src/styles/rules/height.scss
@@ -3,14 +3,15 @@
 height
 ----------------------------------------
 usage:
-  .height-[value]
+  .height-[key]
 ----------------------------------------
 output:
   height: [value];
 ----------------------------------------
 example:
-  .height-33ct {
-    height: 33.33333333%; }
+  .height-6 {
+    height: 3rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/justify-content.scss b/packages/uswds-utilities/src/styles/rules/justify-content.scss
index 94dd6d41c7..16e27d4eda 100644
--- a/packages/uswds-utilities/src/styles/rules/justify-content.scss
+++ b/packages/uswds-utilities/src/styles/rules/justify-content.scss
@@ -1,8 +1,6 @@
 /*
 ========================================
-.justify-content
-----------------------------------------
-property: justify-content
+justify-content
 ----------------------------------------
 usage:
   .flex-justify-[key]
@@ -12,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .flex-justify-start {
-    justify-content: flex-start; }
+    justify-content: flex-start;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/left.scss b/packages/uswds-utilities/src/styles/rules/left.scss
index f3826dd56e..852221f489 100644
--- a/packages/uswds-utilities/src/styles/rules/left.scss
+++ b/packages/uswds-utilities/src/styles/rules/left.scss
@@ -1,8 +1,6 @@
 /*
 ========================================
-.left
-----------------------------------------
-property: left
+left
 ----------------------------------------
 usage:
   .left-[key]
@@ -11,8 +9,9 @@ output:
   left: [value];
 ----------------------------------------
 example:
-  .left-n2px {
-    left: -2px; }
+  .left-neg-2px {
+    left: -2px;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/letter-spacing.scss b/packages/uswds-utilities/src/styles/rules/letter-spacing.scss
index 8ce41d1382..7898ea624d 100644
--- a/packages/uswds-utilities/src/styles/rules/letter-spacing.scss
+++ b/packages/uswds-utilities/src/styles/rules/letter-spacing.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .text-ls-2 {
-    letter-spacing: .1em; }
+    letter-spacing: .1em;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/line-height.scss b/packages/uswds-utilities/src/styles/rules/line-height.scss
index 20f9d94bdc..f55b118d82 100644
--- a/packages/uswds-utilities/src/styles/rules/line-height.scss
+++ b/packages/uswds-utilities/src/styles/rules/line-height.scss
@@ -3,14 +3,15 @@
 line-height
 ----------------------------------------
 usage:
-  .line-height-[value]
+  .line-height-[modifier]-[key]
 ----------------------------------------
 output:
   line-height: [value];
 ----------------------------------------
 example:
   .line-height-sans-2 {
-    line-height: 1.15; }
+    line-height: 1.1;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/margin.scss b/packages/uswds-utilities/src/styles/rules/margin.scss
index 071737e9c0..e8dacefb93 100644
--- a/packages/uswds-utilities/src/styles/rules/margin.scss
+++ b/packages/uswds-utilities/src/styles/rules/margin.scss
@@ -6,15 +6,17 @@ usage:
   .margin-[modifier]*-[key]
 ----------------------------------------
 output:
-  margin: [value]
+  margin: [value];
 ----------------------------------------
 example:
   .margin-x-auto {
     margin-left: auto;
-    margin-right: auto; }
+    margin-right: auto;
+  }
 
-  .margin-g105 {
-    margin: .75rem; }
+  .margin-105 {
+    margin: .75rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/max-height.scss b/packages/uswds-utilities/src/styles/rules/max-height.scss
index 30aaf393ce..c7807202be 100644
--- a/packages/uswds-utilities/src/styles/rules/max-height.scss
+++ b/packages/uswds-utilities/src/styles/rules/max-height.scss
@@ -3,14 +3,15 @@
 max-height
 ----------------------------------------
 usage:
-  .maxh[key]
+  .maxh-[key]
 ----------------------------------------
 output:
   max-height: [value];
 ----------------------------------------
 example:
   .maxh-viewport {
-    max-height: 100vh; }
+    max-height: 100vh;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/max-width.scss b/packages/uswds-utilities/src/styles/rules/max-width.scss
index 2be702cc60..bff7366a7e 100644
--- a/packages/uswds-utilities/src/styles/rules/max-width.scss
+++ b/packages/uswds-utilities/src/styles/rules/max-width.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .maxw-desktop {
-    max-width: 960px; }
+    max-width: 64rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/measure.scss b/packages/uswds-utilities/src/styles/rules/measure.scss
index 17fb54ba53..75209d9ea0 100644
--- a/packages/uswds-utilities/src/styles/rules/measure.scss
+++ b/packages/uswds-utilities/src/styles/rules/measure.scss
@@ -12,7 +12,8 @@ output:
 ----------------------------------------
 example:
   .measure-4 {
-    max-width: 68ex; }
+    max-width: 68ex;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/min-height.scss b/packages/uswds-utilities/src/styles/rules/min-height.scss
index 041447039b..4600ec5ae5 100644
--- a/packages/uswds-utilities/src/styles/rules/min-height.scss
+++ b/packages/uswds-utilities/src/styles/rules/min-height.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .minh-card {
-    min-height: 200px; }
+    min-height: 10rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/min-width.scss b/packages/uswds-utilities/src/styles/rules/min-width.scss
index 29804d20c8..5f50702fca 100644
--- a/packages/uswds-utilities/src/styles/rules/min-width.scss
+++ b/packages/uswds-utilities/src/styles/rules/min-width.scss
@@ -9,8 +9,9 @@ output:
   min-width: [value];
 ----------------------------------------
 example:
-  .minw-desktop {
-    min-width: 960px; }
+  .minw-15 {
+    min-width: 7.5rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/opacity.scss b/packages/uswds-utilities/src/styles/rules/opacity.scss
index b331b261e8..88718cb3c4 100644
--- a/packages/uswds-utilities/src/styles/rules/opacity.scss
+++ b/packages/uswds-utilities/src/styles/rules/opacity.scss
@@ -10,7 +10,12 @@ output:
 ----------------------------------------
 example:
   .opacity-0 {
-    opacity: 0; }
+    opacity: 0;
+  }
+
+  .opacity-30 {
+    opacity: 0.3;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/order.scss b/packages/uswds-utilities/src/styles/rules/order.scss
index b902631fa6..f5249fdc48 100644
--- a/packages/uswds-utilities/src/styles/rules/order.scss
+++ b/packages/uswds-utilities/src/styles/rules/order.scss
@@ -6,14 +6,16 @@ usage:
   .order-[key]
 ----------------------------------------
 output:
-  order: [value]
+  order: [value];
 ----------------------------------------
 example:
   .order-first {
-    order: -1; }
+    order: -1;
+  }
 
   .order-2 {
-    order: 2; }
+    order: 2;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/outline-color.scss b/packages/uswds-utilities/src/styles/rules/outline-color.scss
index 740aee5633..45fe7b867e 100644
--- a/packages/uswds-utilities/src/styles/rules/outline-color.scss
+++ b/packages/uswds-utilities/src/styles/rules/outline-color.scss
@@ -3,14 +3,15 @@
 outline-color
 ----------------------------------------
 usage:
-  .outline-color-[key]
+  .outline-[key]
 ----------------------------------------
 output:
   outline-color: [value];
 ----------------------------------------
 example:
-  .outline-color-yellow-50 {
-    outline-color: #91721f; }
+  .outline-yellow {
+    outline-color: #fee685;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/outline.scss b/packages/uswds-utilities/src/styles/rules/outline.scss
index 23bde46c0a..b838733852 100644
--- a/packages/uswds-utilities/src/styles/rules/outline.scss
+++ b/packages/uswds-utilities/src/styles/rules/outline.scss
@@ -11,8 +11,9 @@ output:
   outline: [modifier] solid;
 ----------------------------------------
 example:
-  .outline-g05 {
-    outline: 4px solid }
+  .outline-2px {
+    outline: 2px solid;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/overflow.scss b/packages/uswds-utilities/src/styles/rules/overflow.scss
index a365c7dbc1..94c6a80554 100644
--- a/packages/uswds-utilities/src/styles/rules/overflow.scss
+++ b/packages/uswds-utilities/src/styles/rules/overflow.scss
@@ -3,14 +3,15 @@
 overflow
 ----------------------------------------
 usage:
-  .overflow-[modifier]
+  .overflow-[modifier]*-[key]
 ----------------------------------------
 output:
-  overflow[-modifier]: [value] solid;
+  overflow[-modifier]: [value];
 ----------------------------------------
 example:
   .overflow-y-hidden {
-    overflow-y: hidden; }
+    overflow-y: hidden;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/padding.scss b/packages/uswds-utilities/src/styles/rules/padding.scss
index 059f2d5cf1..5ea60bff95 100644
--- a/packages/uswds-utilities/src/styles/rules/padding.scss
+++ b/packages/uswds-utilities/src/styles/rules/padding.scss
@@ -3,17 +3,19 @@
 padding
 ----------------------------------------
 usage:
-  .padding-[modifier]*-[value]
+  .padding-[modifier]*-[key]
 ----------------------------------------
 output:
-  padding: [value]
+  padding[-modifier]: [value];
 ----------------------------------------
 example:
   .padding-0 {
-    padding: none; }
+    padding: 0;
+  }
 
   .padding-bottom-1px {
-    padding-bottom: 1px; }
+    padding-bottom: 1px;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/pin.scss b/packages/uswds-utilities/src/styles/rules/pin.scss
index f4b7f9ac04..8c077d541b 100644
--- a/packages/uswds-utilities/src/styles/rules/pin.scss
+++ b/packages/uswds-utilities/src/styles/rules/pin.scss
@@ -3,16 +3,21 @@
 PIN
 ----------------------------------------
 usage:
-  .pin-all
-----------------------------------------
-output:
-  bottom: 0
-  left:0
-  right: 0
-  top: 0
+  .pin-[key]
 ----------------------------------------
 example:
-  .pin-all
+  .pin-all {
+    bottom:0;
+    left:0;
+    right:0;
+    top:0;
+    position:absolute;
+  }
+
+  .pin-left {
+    left:0;
+    position:absolute;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/position.scss b/packages/uswds-utilities/src/styles/rules/position.scss
index 900f934eca..abecefb21f 100644
--- a/packages/uswds-utilities/src/styles/rules/position.scss
+++ b/packages/uswds-utilities/src/styles/rules/position.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .position-absolute {
-    position: absolute; }
+    position: absolute;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/right.scss b/packages/uswds-utilities/src/styles/rules/right.scss
index 87127f445a..6183e372fd 100644
--- a/packages/uswds-utilities/src/styles/rules/right.scss
+++ b/packages/uswds-utilities/src/styles/rules/right.scss
@@ -1,8 +1,6 @@
 /*
 ========================================
-.right
-----------------------------------------
-property: right
+right
 ----------------------------------------
 usage:
   .right-[key]
@@ -11,8 +9,9 @@ output:
   right: [value];
 ----------------------------------------
 example:
-  .right-n2px {
-    right: -2px; }
+  .right-neg-2px {
+    right: -2px;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/square.scss b/packages/uswds-utilities/src/styles/rules/square.scss
index 53340f11ce..2a09a75244 100644
--- a/packages/uswds-utilities/src/styles/rules/square.scss
+++ b/packages/uswds-utilities/src/styles/rules/square.scss
@@ -10,9 +10,10 @@ output:
   width: [value];
 ----------------------------------------
 example:
-  .square-g6 {
+  .square-6 {
     height: 3rem;
-    width: 3rem; }
+    width: 3rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/text-align.scss b/packages/uswds-utilities/src/styles/rules/text-align.scss
index 66bfd003fe..19d21ff166 100644
--- a/packages/uswds-utilities/src/styles/rules/text-align.scss
+++ b/packages/uswds-utilities/src/styles/rules/text-align.scss
@@ -6,11 +6,12 @@ usage:
   .text-[key]
 ----------------------------------------
 output:
-  align: [value];
+  text-align: [value];
 ----------------------------------------
 example:
   .text-left {
-    align: left; }
+    text-align: left;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/text-decoration-color.scss b/packages/uswds-utilities/src/styles/rules/text-decoration-color.scss
index f9991d2ffd..f7c50623a3 100644
--- a/packages/uswds-utilities/src/styles/rules/text-decoration-color.scss
+++ b/packages/uswds-utilities/src/styles/rules/text-decoration-color.scss
@@ -3,14 +3,15 @@
 text-decoration-color
 ----------------------------------------
 usage:
-  .text-decoration-color-[key]
+  .underline-[key]
 ----------------------------------------
 output:
-  text-decoration-color: [value]
+  text-decoration-color: [value];
 ----------------------------------------
 example:
-  .text-decoration-color-black {
-    text-decoration-color: #000; }
+  .underline-red {
+    text-decoration-color: #e52207;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/text-decoration.scss b/packages/uswds-utilities/src/styles/rules/text-decoration.scss
index 2e540b5e87..63b732ef6a 100644
--- a/packages/uswds-utilities/src/styles/rules/text-decoration.scss
+++ b/packages/uswds-utilities/src/styles/rules/text-decoration.scss
@@ -6,11 +6,12 @@ usage:
   .text-[key]
 ----------------------------------------
 output:
-  text-decoration: [value]
+  text-decoration: [value];
 ----------------------------------------
 example:
   .text-no-underline {
-    text-decoration: none; }
+    text-decoration: none;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/text-indent.scss b/packages/uswds-utilities/src/styles/rules/text-indent.scss
index cf4997cf81..46cfecc60a 100644
--- a/packages/uswds-utilities/src/styles/rules/text-indent.scss
+++ b/packages/uswds-utilities/src/styles/rules/text-indent.scss
@@ -6,11 +6,12 @@ usage:
   .text-indent-[key]
 ----------------------------------------
 output:
-  align: [value];
+  text-indent: [value];
 ----------------------------------------
 example:
   .text-indent-0 {
-    text-ident: 0; }
+    text-ident: 0;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/text-transform.scss b/packages/uswds-utilities/src/styles/rules/text-transform.scss
index cd8db8450a..794b65e9fb 100644
--- a/packages/uswds-utilities/src/styles/rules/text-transform.scss
+++ b/packages/uswds-utilities/src/styles/rules/text-transform.scss
@@ -3,14 +3,15 @@
 text-transform
 ----------------------------------------
 usage:
-  .text-[value]
+  .text-[key]
 ----------------------------------------
 output:
-  text-transform: value;
+  text-transform: [value];
 ----------------------------------------
 example:
   .text-uppercase {
-    text-transform: uppercase; }
+    text-transform: uppercase;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/top.scss b/packages/uswds-utilities/src/styles/rules/top.scss
index 8ad1f852bd..32036d29d4 100644
--- a/packages/uswds-utilities/src/styles/rules/top.scss
+++ b/packages/uswds-utilities/src/styles/rules/top.scss
@@ -1,8 +1,6 @@
 /*
 ========================================
-.top
-----------------------------------------
-property: top
+top
 ----------------------------------------
 usage:
   .top-[key]
@@ -11,8 +9,9 @@ output:
   top: [value];
 ----------------------------------------
 example:
-  .top-n2px {
-    top: -2px; }
+  .top-neg-2px {
+    top: -2px;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/vertical-align.scss b/packages/uswds-utilities/src/styles/rules/vertical-align.scss
index 53f5e97dc9..e244f41353 100644
--- a/packages/uswds-utilities/src/styles/rules/vertical-align.scss
+++ b/packages/uswds-utilities/src/styles/rules/vertical-align.scss
@@ -3,14 +3,15 @@
 vertical-align
 ----------------------------------------
 usage:
-  .vertical-align-[value]
+  .text-[key]
 ----------------------------------------
 output:
-  vertical-align: [value]
+  vertical-align: [value];
 ----------------------------------------
 example:
-  .vertical-align-top {
-    vertical-align: top; }
+  .text-top {
+    vertical-align: top;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/whitespace.scss b/packages/uswds-utilities/src/styles/rules/whitespace.scss
index fa40d053b0..763dd76aa1 100644
--- a/packages/uswds-utilities/src/styles/rules/whitespace.scss
+++ b/packages/uswds-utilities/src/styles/rules/whitespace.scss
@@ -10,7 +10,8 @@ output:
 ----------------------------------------
 example:
   .text-pre-wrap {
-    white-space: pre-wrap; }
+    white-space: pre-wrap;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/width.scss b/packages/uswds-utilities/src/styles/rules/width.scss
index ff4e372e06..e7b64c6581 100644
--- a/packages/uswds-utilities/src/styles/rules/width.scss
+++ b/packages/uswds-utilities/src/styles/rules/width.scss
@@ -9,8 +9,9 @@ output:
   width: [value];
 ----------------------------------------
 example:
-  .width-75ct {
-    width: 75%; }
+  .width-2 {
+    width: 1rem;
+  }
 ----------------------------------------
 */
 
diff --git a/packages/uswds-utilities/src/styles/rules/z-index.scss b/packages/uswds-utilities/src/styles/rules/z-index.scss
index 85884fd80c..358ca87a80 100644
--- a/packages/uswds-utilities/src/styles/rules/z-index.scss
+++ b/packages/uswds-utilities/src/styles/rules/z-index.scss
@@ -10,9 +10,12 @@ output:
 ----------------------------------------
 example:
   .z-100 {
-    z-index: 100; }
+    z-index: 100;
+  }
+
   .z-top {
-    z-index: 9999; }
+    z-index: 99999;
+  }
 ----------------------------------------
 */