diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.ttf
deleted file mode 100755
index e71279d238..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.woff
deleted file mode 100755
index 21288dfc65..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.woff2
deleted file mode 100755
index c80b2d2afb..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Bold-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf
deleted file mode 100755
index 0796612ed7..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff
deleted file mode 100755
index f8a6914002..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2
deleted file mode 100755
index 60d8de4f64..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.ttf
deleted file mode 100755
index 88a72b3eb9..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.woff
deleted file mode 100755
index 0fc3e44536..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.woff2
deleted file mode 100755
index 440b74c391..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Italic-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.ttf
deleted file mode 100755
index d4fb721755..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.woff
deleted file mode 100755
index 8dd610ceea..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.woff2
deleted file mode 100755
index d0b43e0adf..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Light-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf
deleted file mode 100755
index 913b0f5371..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.woff
deleted file mode 100755
index f0204140da..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2
deleted file mode 100755
index 21a92a7e8d..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.ttf
deleted file mode 100755
index 1638039b37..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.woff
deleted file mode 100755
index 0ad69fb5d4..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.woff2
deleted file mode 100755
index f778f9c845..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Regular-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.ttf
deleted file mode 100755
index 0e5dfbe884..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.woff
deleted file mode 100755
index 22544e6a96..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.woff2
deleted file mode 100755
index 852f7106ce..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-Semibold-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf b/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf
deleted file mode 100755
index 96240a6e21..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff b/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff
deleted file mode 100755
index 8956812edc..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff and /dev/null differ
diff --git a/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2 b/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2
deleted file mode 100755
index b0c2a26b40..0000000000
Binary files a/lms/static/certificates/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2 and /dev/null differ
diff --git a/lms/static/certificates/sass/_base.scss b/lms/static/certificates/sass/_base.scss
index b6f11c7ee2..bf2b0aa4e2 100644
--- a/lms/static/certificates/sass/_base.scss
+++ b/lms/static/certificates/sass/_base.scss
@@ -16,51 +16,8 @@ body {
   margin: 0;
   padding: 0;
   background: $white;
-  font-family: $font-family-sans;
 }
 
 // ------------------------------
 // #TYPOGRAPHY
 // ------------------------------
-// Level one heading
-.hd-1 {
-  margin-bottom: map-get($spacing-vertical, small);
-  font-size: rem(38);
-  line-height: 1.4;
-}
-
-// Level two heading
-.hd-2 {
-  margin-bottom: map-get($spacing-vertical, small);
-  font-size: rem(28);
-  line-height: 1.4;
-}
-
-// Level three heading
-.hd-3 {
-  margin-bottom: map-get($spacing-vertical, x-small);
-  font-size: rem(24);
-  line-height: 1.5;
-}
-
-// Level four heading
-.hd-4 {
-  margin-bottom: map-get($spacing-vertical, x-small);
-  font-size: rem(21);
-  line-height: 1.6;
-}
-
-// Level five heading
-.hd-5 {
-  margin-bottom: map-get($spacing-vertical, x-small);
-  font-size: rem(18);
-  line-height: 1.6;
-}
-
-// Level six heading
-.hd-6 {
-  margin-bottom: map-get($spacing-vertical, xx-small);
-  font-size: rem(16);
-  font-weight: 600;
-  line-height: 1.6;
-}
diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss
index 7784a52c4a..f87ec55722 100644
--- a/lms/static/certificates/sass/_components.scss
+++ b/lms/static/certificates/sass/_components.scss
@@ -21,9 +21,9 @@
 // #HEADINGS
 // ------------------------------
 %hd-subsection {
-  margin-bottom: map-get($spacing-vertical, mid-small);
-  border-bottom: rem(2) solid $gray-x-back;
-  padding-bottom: map-get($spacing-vertical, x-small);
+  margin-bottom: spacing-vertical(mid-small);
+  border-bottom: rem(2) solid palette(grayscale, x-back);
+  padding-bottom: spacing-vertical(x-small);
 }
 
 // ------------------------------
@@ -31,18 +31,18 @@
 // ------------------------------
 %depth-base-focus {
   background: $white;
-  padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, base);
+  padding: spacing-vertical(small) spacing-horizontal(base);
 }
 
 %depth-well {
-  box-shadow: 0 rem(1) rem(3) 0 $gray-back inset;
-  padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, base);
-  background: $gray-x-back;
+  box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
+  padding: spacing-vertical(small) spacing-horizontal(base);
+  background: palette(grayscale, x-back);
 }
 
 %depth-card {
-  box-shadow: 0 rem(1) rem(2) 0 $gray-back;
-  padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, base);
+  box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
+  padding: spacing-vertical(small) spacing-horizontal(base);
   background: $white;
 }
 
@@ -76,7 +76,7 @@
 .wrapper-header {
   @extend %divider-2;
 
-  border-bottom-color: $gray-x-back;
+  border-bottom-color: palette(grayscale, x-back);
   background: $white;
 }
 
@@ -92,14 +92,13 @@
 // message to user-centric banner
 .wrapper-banner-user {
   box-shadow: inset 0 rem(2) rem(2) 0 $black;
-  background: $gray-dark;
+  background: palette(grayscale, dark);
 }
 
 .banner-user {
   .message-title {
     color: $white;
-    font-weight: 600;
-    margin-top: 0;
+    font-weight: font-weight(semi-bold);
   }
 
   .message-copy {
@@ -107,27 +106,25 @@
   }
 
   .message-actions .action {
-    @include button-outline-variant($gray-x-back, $gray-dark);
 
-    padding: 0.625rem;
-    font-size: rem(14);
-    transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
-    border: 1px solid;
-    border-radius: 3px;
-    cursor: pointer;
-    font-family: $font-family-sans;
-    font-weight: 600;
+    // STATE: hover, active, focus
+    &:hover,
+    &:active,
+    &:focus {
+      // customizations from UXPL
+      color: palette(grayscale, dark);
+    }
 
     .icon {
-      @include margin-right(map-get($spacing-horizontal, x-small));
+      @include margin-right(spacing-horizontal(x-small));
 
-      font-size: rem(18);
+      font-size: font-size(large);
     }
 
     // CASE: icon display only
     &.icon-only {
       .action-label {
-        @include sr-only;
+        @extend %a11y-hide;
       }
     }
 
@@ -142,14 +139,9 @@
 // #INTRODUCTION
 // ------------------------------
 .introduction {
-  margin-bottom: map-get($spacing-vertical, base);
+  margin-bottom: spacing-vertical(base);
 
   @include text-align(center);
-
-  .introduction-copy {
-    font-weight: 600;
-    margin-top: 0;
-  }
 }
 
 // ------------------------------
@@ -165,7 +157,7 @@
 
 // main accomplishment
 .accomplishment-main {
-  background: $gray-x-back;
+  background: palette(grayscale, x-back);
 }
 
 // brief accomplishment
@@ -202,15 +194,15 @@
 }
 
 %rendering-section {
-  margin-bottom: map-get($spacing-vertical, base);
-  border-bottom: rem(2) solid $gray-x-back;
-  padding-bottom: map-get($spacing-vertical, base);
+  margin-bottom: spacing-vertical(base);
+  border-bottom: rem(2) solid palette(grayscale, x-back);
+  padding-bottom: spacing-vertical(base);
 }
 
 %rendering-hd-section {
-  margin-bottom: map-get($spacing-vertical, mid-small);
-  border-bottom: rem(2) solid $gray-x-back;
-  padding-bottom: map-get($spacing-vertical, x-small);
+  margin-bottom: spacing-vertical(mid-small);
+  border-bottom: rem(2) solid palette(grayscale, x-back);
+  padding-bottom: spacing-vertical(x-small);
   color: $cert-base-color;
 
   @include text-align(center);
@@ -220,15 +212,15 @@
   @extend %depth-card;
 
   position: relative;
-  top: -(map-get($spacing-vertical, base));
+  top: -(spacing-vertical(base));
   border-top: rem(4) solid $cert-base-color;
 
   // type
   .accomplishment-type {
     @include text-align(center);
 
-    margin-top: -(map-get($spacing-vertical, large));
-    margin-bottom: map-get($spacing-vertical, base);
+    margin-top: -(spacing-vertical(large));
+    margin-bottom: spacing-vertical(base);
   }
 
   .accomplishment-type-label,
@@ -237,16 +229,16 @@
   }
 
   .accomplishment-type-label {
-    @include make-col(10);
+    @include span(10);
 
     margin: 0 auto;
-    font-weight: 600;
+    font-weight: font-weight(semi-bold);
   }
 
   .accomplishment-type-symbol {
     @include size(rem(100));
 
-    margin: 0 auto map-get($spacing-vertical, small) auto;
+    margin: 0 auto spacing-vertical(small) auto;
   }
 
   // statement
@@ -266,15 +258,12 @@
 
   .accomplishment-summary {
     @extend %rendering-accomplishment-line;
-    @extend %copy-lead;
 
-    margin-bottom: map-get($spacing-vertical, mid-small);
+    margin-bottom: spacing-vertical(mid-small);
   }
 
   .accomplishment-course {
     @extend %rendering-accomplishment-line;
-
-    font-weight: 600;
   }
 
   .accomplishment-course-description {
@@ -283,12 +272,15 @@
 
   .accomplishment-statement-detail {
     @extend %rendering-accomplishment-line;
-    @extend %copy-lead;
   }
 
   // organizations
   .accomplishment-orgs {
-    margin-bottom: map-get($spacing-vertical, base);
+    margin-bottom: spacing-vertical(base);
+
+    .list-orgs {
+      @extend %list-unstyled;
+    }
   }
 
   .accomplishment-orgs-title {
@@ -299,10 +291,13 @@
   .accomplishment-signatories {
     @extend %rendering-section;
 
+    .list-signatories {
+      @extend %list-unstyled;
+    }
+
     .signatory-signature {
       display: block;
-      margin: 0 auto map-get($spacing-vertical, x-small) auto;
-      box-sizing: border-box;
+      margin: 0 auto spacing-vertical(x-small) auto;
     }
 
     .signatory-name,
@@ -311,16 +306,10 @@
     }
 
     .signatory-name {
-      margin-bottom: map-get($spacing-vertical, xx-small);
-      margin-top: 0;
-      font-weight: 400;
+      margin-bottom: spacing-vertical(xx-small);
     }
 
     .signatory-credentials {
-      @extend %copy-micro;
-
-      margin-top: 0;
-
       .role,
       .organization {
         white-space: pre-line;
@@ -336,36 +325,35 @@
 
 // metadata
 .accomplishment-metadata {
-  margin-bottom: map-get($spacing-vertical, base);
+  margin-bottom: spacing-vertical(base);
 
   .metadata {
+    @extend %list-unstyled;
+
     .label {
       @extend %copy-meta;
 
-      margin-bottom: map-get($spacing-vertical, xx-small);
-      padding: 0 rem(8);
+      margin-bottom: spacing-vertical(xx-small);
     }
 
     .label-explanation {
       display: block;
-      font-weight: 400;
-      margin-top: map-get($spacing-vertical, xx-small);
+      font-weight: font-weight(normal);
+      margin-top: spacing-vertical(xx-small);
     }
 
     .value {
       @extend %copy-base;
 
-      font-weight: 600;
-      color: $gray-dark;
-      margin: 0;
-      padding: 0 rem(8);
+      font-weight: font-weight(semi-bold);
+      color: palette(grayscale, dark);
     }
   }
 
   .recipient-img,
   .recipient-details {
     display: inline-block;
-    vertical-align: top;
+    vertical-align: middle;
   }
 
   .recipient-img {
@@ -373,7 +361,7 @@
 
     width: rem(100);
 
-    @include margin-right(map-get($spacing-horizontal, small));
+    @include margin-right(spacing-horizontal(small));
 
     .src {
       max-height: 100%;
@@ -384,17 +372,16 @@
   .recipient-details {
     @extend %copy-base;
 
-    font-weight: 600;
-    max-width: calc(100% - (#{rem(100)} + #{map-get($spacing-horizontal, small)} + 5px));
+    font-weight: font-weight(semi-bold);
+    max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
   }
 
   .recipient-name {
-    margin-bottom: map-get($spacing-vertical, xx-small);
+    margin-bottom: spacing-vertical(xx-small);
   }
 
   .recipient-username {
     margin-bottom: 0;
-    margin-top: rem(28);
   }
 
   .accomplishment-id .value {
@@ -405,7 +392,7 @@
 .accomplishment-metadata-title {
   @extend %hd-subsection;
 
-  border-bottom-color: $gray-back;
+  border-bottom-color: palette(grayscale, back);
 }
 
 // ------------------------------
@@ -464,10 +451,6 @@
       color: $cert-decorative-color;
     }
 
-    .wrapper-statement-and-signatories {
-      width: 100%;
-    }
-
     // statement
     .accomplishment-statement,
     .accomplishment-statement-lead,
@@ -490,7 +473,7 @@
   }
 
   .accomplishment-main {
-    background: $gray-x-back;
+    background: palette(grayscale, x-back);
   }
 
   .accomplishment-rendering {
@@ -509,11 +492,11 @@
 // certificate - distinguished + verified
 .layout-accomplishment.certificate-verified {
   .introduction {
-    margin-bottom: map-get($spacing-vertical, base);
+    margin-bottom: spacing-vertical(base);
   }
 
   .accomplishment-main {
-    background: $primary-back;
+    background: palette(primary, back);
   }
 
   .accomplishment-rendering {
@@ -550,13 +533,13 @@
 // #FOOTER
 // ------------------------------
 .footer-app {
-  border-top: rem(4) solid $gray-x-back;
-  padding-top: map-get($spacing-vertical, base);
+  border-top: rem(4) solid palette(grayscale, x-back);
+  padding-top: spacing-vertical(base);
 }
 
 .footer-app-nav {
   .list {
-    padding: 0;
+    @extend %list-unstyled;
   }
 }
 
@@ -567,8 +550,8 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 100;
-  background-color: $gray-transparent; /* dim the background */
+  z-index: z-index(front);
+  background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
   width: 100%;
   height: 100%;
   vertical-align: middle;
@@ -578,34 +561,30 @@
 
     box-sizing: content-box;
     position: fixed;
-    top: map-get($spacing-vertical, large);
+    top: spacing-vertical(large);
     right: 0;
     left: 0;
-    z-index: 1000;
+    z-index: z-index(very-front);
     max-width: 50%;
     margin-right: auto;
     margin-left: auto;
-    border-top: rem(10) solid $primary-back;
-    background: $gray-x-back;
-    padding-right: map-get($spacing-horizontal, large);
-    padding-left: map-get($spacing-horizontal, large);
+    border-top: rem(10) solid palette(primary, back);
+    background: palette(grayscale, x-back);
+    padding-right: spacing-horizontal(large);
+    padding-left: spacing-horizontal(large);
     overflow-x: hidden;
-    color: $gray-dark;
+    color: palette(grayscale, dark);
 
     .close {
       position: absolute;
-      right: map-get($spacing-horizontal, mid-small);
-      top: map-get($spacing-vertical, small);
-      font-weight: 700;
+      right: spacing-horizontal(mid-small);
+      top: spacing-vertical(small);
+      font-weight: font-weight(bold);
       cursor: pointer;
     }
 
     .badges-steps {
       display: table;
-
-      a {
-        @extend %link;
-      }
     }
 
     .image-container {
@@ -623,7 +602,7 @@
 
     .backpack-logo {
       @include float(right);
-      @include margin-left(map-get($spacing-horizontal, small));
+      @include margin-left(spacing-horizontal(small));
     }
   }
 }
@@ -631,7 +610,7 @@
 .modal-hr {
   display: block;
   border: none;
-  background-color: $gray-back;
+  background-color: palette(grayscale, back);
   height: rem(2);
   width: 100%;
 }
diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss
index 8ca0c3cefb..886e49d78a 100644
--- a/lms/static/certificates/sass/_config.scss
+++ b/lms/static/certificates/sass/_config.scss
@@ -6,150 +6,27 @@
 // #VARIABLES
 // ------------------------------
 
-$gray-dark:              rgba(17, 17, 17, 100);
-$gray-base:              rgba(65, 65, 65, 100);
-$gray-accent:            rgba(160, 160, 160, 100);
-$gray-back:              rgba(217, 217, 217, 100);
-$gray-x-back:            rgba(245, 245, 245, 100);
-$gray-transparent:       rgba(65, 65, 65, 0.5);
-
-$primary-accent:         rgba(41, 145, 195, 100);
-$primary-back:           rgba(204, 227, 240, 100);
-
 // certificate characteristics
-$cert-base-color: $gray-dark;
-$cert-distinguished-color: $primary-accent;
+$cert-base-color: palette(grayscale, dark);
+$cert-distinguished-color: palette(primary, accent);
 
-$cert-decorative-color: $gray-back;
-$cert-decorative-color-de-emphasized: $gray-back;
-$cert-decorative-color-emphasized: $gray-accent;
+$cert-decorative-color: palette(grayscale, back);
+$cert-decorative-color-de-emphasized: palette(grayscale, back);
+$cert-decorative-color-emphasized: palette(grayscale, accent);
 
 // typography: config
-$font-path: '../../certificates/fonts';
-
-@font-face {
-  font-family: 'Domine';
-  font-weight: 400;
-  src: url('#{$font-path}/Domine/Domine-Regular-webfont.woff');
-  src:
-    url('#{$font-path}/Domine/Domine-Regular-webfont.woff2') format('woff2'),
-    url('#{$font-path}/Domine/Domine-Regular-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Domine';
-  font-weight: 700;
-  src: url('#{$font-path}/Domine/Domine-Bold-webfont.woff');
-  src:
-    url('#{$font-path}/Domine/Domine-Bold-webfont.woff2') format('woff2'),
-    url('#{$font-path}/Domine/Domine-Bold-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 300;
-  src: url('#{$font-path}/OpenSans/OpenSans-Light-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 300;
-  font-style: italic;
-  src: url('#{$font-path}/OpenSans/OpenSans-LightItalic-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 400;
-  src: url('#{$font-path}/OpenSans/OpenSans-Regular-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSansOpenSans-Regular-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 400;
-  font-style: italic;
-  src: url('#{$font-path}/OpenSans/OpenSans-Italic-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 600;
-  src: url('#{$font-path}/OpenSans/OpenSans-Semibold-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 600;
-  font-style: italic;
-  src: url('#{$font-path}/OpenSans/OpenSans-SemiboldItalic-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 700;
-  src: url('#{$font-path}/OpenSans/OpenSans-Bold-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-weight: 700;
-  font-style: italic;
-  src: url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.woff');
-  src:
-    url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
-    url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
-}
+@include font-face(
+  'Domine',
+  '../../certificates/fonts/Domine/Domine-Regular-webfont',
+  400,
+  $file-formats: woff woff2 ttf
+);
+@include font-face(
+  'Domine',
+  '../../certificates/fonts/Domine/Domine-Bold-webfont',
+  700,
+  $file-formats: woff woff2 ttf
+);
 
 // typography: config - stacks
 $font-family-serif: 'Domine', serif;
-$font-family-sans: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-
-// vertical spacing
-$baseline-vertical:         2.5rem !default;
-
-$spacing-vertical:          (
-  base:                   $baseline-vertical,
-  mid-small:              ($baseline-vertical*0.75),
-  small:                  ($baseline-vertical/2),
-  x-small:                ($baseline-vertical/4),
-  xx-small:               ($baseline-vertical/8),
-  xxx-small:              ($baseline-vertical/10),
-  mid-large:              ($baseline-vertical*1.5),
-  large:                  ($baseline-vertical*2),
-  x-large:                ($baseline-vertical*4)
-);
-
-// horizontal spacing
-$baseline-horizontal:       1.25rem !default;
-
-$spacing-horizontal:        (
-  base:                   $baseline-horizontal,
-  mid-small:              ($baseline-horizontal*0.75),
-  small:                  ($baseline-horizontal/2),
-  x-small:                ($baseline-horizontal/4),
-  xx-small:               ($baseline-horizontal/8),
-  mid-large:              ($baseline-horizontal*1.5),
-  large:                  ($baseline-horizontal*2),
-  x-large:                ($baseline-horizontal*4)
-);
diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss
index 35b2ab4521..7473b8aa94 100644
--- a/lms/static/certificates/sass/_layouts.scss
+++ b/lms/static/certificates/sass/_layouts.scss
@@ -10,10 +10,10 @@
 // #BASE
 // ------------------------------
 %layout-wrapper {
-  margin-bottom: map-get($spacing-vertical, base);
+  margin-bottom: spacing-vertical(base);
   padding: 0 5%;
 
-  @include media-breakpoint-up(md) {
+  @media (min-width: $bp-screen-md) {
     padding: 0 2.5%;
   }
 }
@@ -26,8 +26,8 @@
 .wrapper-header {
   @extend %layout-wrapper;
 
-  padding-top: map-get($spacing-vertical, small);
-  padding-bottom: map-get($spacing-vertical, small);
+  padding-top: spacing-vertical(small);
+  padding-bottom: spacing-vertical(small);
 }
 
 .header-app {
@@ -36,7 +36,7 @@
   .logo {
     display: block;
 
-    @include size(rem(100), auto);
+    @include size(rem(100) auto);
 
     margin: 0 auto;
   }
@@ -49,7 +49,7 @@
 
 .header-app-title {
   @include text-align(center);
-  @include make-col(12);
+  @include span(12);
 
   margin: 0;
 }
@@ -58,8 +58,8 @@
 .wrapper-banner {
   @extend %layout-wrapper;
 
-  padding-top: map-get($spacing-vertical, small);
-  padding-bottom: map-get($spacing-vertical, small);
+  padding-top: spacing-vertical(small);
+  padding-bottom: spacing-vertical(small);
 
   .banner {
     @extend %layout;
@@ -68,13 +68,13 @@
 
 // message to user-centric banner
 .wrapper-banner-user {
-  margin-top: -(map-get($spacing-vertical, base)); // abut the global header, plz
+  margin-top: -(spacing-vertical(base)); // abut the global header, plz
 }
 
 .banner-user {
   @include text-align(center);
 
-  @include media-breakpoint-up(lg) {
+  @media (min-width: $bp-screen-lg) {
     @include text-align(left);
   }
 
@@ -82,17 +82,16 @@
     @include grid-container();
 
     .message-copy {
-      margin-bottom: map-get($spacing-vertical, small);
-      margin-top: 0;
+      margin-bottom: spacing-vertical(small);
     }
 
     .message-actions {
-      @include make-col(12);
+      @include span(12);
 
       .action {
         display: block;
         width: 100%;
-        margin: 0 auto map-get($spacing-vertical, small) auto;
+        margin: 0 auto spacing-vertical(small) auto;
 
         &:last-child {
           margin-bottom: 0;
@@ -100,8 +99,8 @@
 
         // CASE: icon display only
         &.icon-only {
-          @include media-breakpoint-up(md) {
-            padding: map-get($spacing-vertical, x-small) map-get($spacing-horizontal, base);
+          @media (min-width: $bp-screen-md) {
+            padding: spacing-vertical(x-small) spacing-horizontal(base);
 
             .icon {
               @include margin-right(0);
@@ -109,13 +108,13 @@
           }
         }
 
-        @include media-breakpoint-up(md) {
+        @media (min-width: $bp-screen-md) {
           display: inline-block;
           vertical-align: middle;
           min-width: 130px;
           width: auto;
           margin-bottom: 0;
-          margin-right: map-get($spacing-horizontal, mid-small);
+          margin-right: spacing-horizontal(mid-small);
 
           &:last-child {
             margin-right: 0;
@@ -136,47 +135,36 @@
 }
 
 .footer-app-copyright {
-  @extend %copy-micro;
-
-  @include media-breakpoint-up(md) {
-    @include make-col(6);
-    @include margin-left(0);
+  @media (min-width: $bp-screen-md) {
+    @include span(6, after);
 
     margin-bottom: 0;
   }
 }
 
 .footer-app-nav {
-  @include media-breakpoint-up(md) {
-    @include make-col(6);
-    @include margin-right(0);
+  @media (min-width: $bp-screen-md) {
+    @include span(6, before);
   }
 
   .list {
     .nav-item {
-      @extend %copy-meta;
-
       display: block;
-      font-weight: 600;
-      margin-bottom: map-get($spacing-vertical, x-small);
+      margin-bottom: spacing-vertical(x-small);
 
-      @include media-breakpoint-up(md) {
+      @media (min-width: $bp-screen-md) {
         display: inline-block;
         vertical-align: middle;
 
-        @include margin-right(map-get($spacing-horizontal, base));
+        @include margin-right(spacing-horizontal(base));
 
         margin-bottom: 0;
       }
     }
-
-    .action {
-      @extend %link;
-    }
   }
 
   .list-legal {
-    @include media-breakpoint-up(md) {
+    @media (min-width: $bp-screen-md) {
       @include text-align(right);
     }
   }
@@ -189,7 +177,7 @@
   .wrapper-introduction {
     @extend %layout-wrapper;
 
-    margin-bottom: map-get($spacing-vertical, large);
+    margin-bottom: spacing-vertical(large);
 
     .introduction {
       @extend %layout;
@@ -199,59 +187,57 @@
   .wrapper-accomplishment-rendering {
     @extend %layout-wrapper;
 
-    margin-bottom: map-get($spacing-vertical, small);
+    margin-bottom: spacing-vertical(small);
   }
 
   .accomplishment-rendering {
     @extend %layout;
 
     position: relative;
-    top: -(map-get($spacing-vertical, base));
+    top: -(spacing-vertical(base));
 
     .accomplishment-course,
     .accomplishment-recipient,
     .accomplishment-type {
-      @include make-col(12);
+      @include span(12);
     }
 
     .accomplishment-summary,
     .accomplishment-statement-detail {
-      @include make-col(12);
+      @include span(12);
     }
   }
 
   .accomplishment-orgs {
-    @include make-container();
+    @include grid-row;
 
     .wrapper-orgs {
       @include text-align(center);
-
-      margin: 0;
-      padding: 0;
     }
 
     .wrapper-organization {
-      @include make-col(6);
+      @include span(6);
+      @include margin-right(spacing-horizontal(base));
 
       display: inline-block;
       vertical-align: middle;
       height: rem(100);
-      width: calc(50% - 1rem);
+      margin-bottom: spacing-vertical(small);
 
       &:last-child {
         @include margin-right(0);
       }
 
-      @include media-breakpoint-up(md) {
-        @include make-col(3);
+      @media (min-width: $bp-screen-md) {
+        @include span(3);
       }
 
-      @include media-breakpoint-up(lg) {
-        @include make-col(2);
+      @media (min-width: $bp-screen-lg) {
+        @include span(2);
       }
 
-      @include media-breakpoint-up(xl) {
-        @include make-col(2);
+      @media (min-width: $bp-screen-xl) {
+        @include span(2);
       }
     }
 
@@ -269,10 +255,6 @@
       @include left(50%);
 
       transform: translate(-50%, -50%);
-
-      @include rtl {
-        transform: translate(50%, -50%);
-      }
     }
   }
 
@@ -284,27 +266,26 @@
     .signatory {
       display: inline-block;
       vertical-align: middle;
-      width: calc(100% - 1rem);
 
-      @include make-col(12);
+      @include span(12);
 
-      @include media-breakpoint-up(md) {
-        @include make-col(4);
+      @media (min-width: $bp-screen-md) {
+        @include span(4);
       }
 
-      @include media-breakpoint-up(lg) {
-        @include make-col(3);
+      @media (min-width: $bp-screen-lg) {
+        @include span(3);
       }
 
-      @include media-breakpoint-up(xl) {
-        @include make-col(3);
+      @media (min-width: $bp-screen-xl) {
+        @include span(3);
       }
 
       .signatory-signature {
         display: block;
         max-width: 100%;
         max-height: rem(100);
-        padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, small);
+        padding: spacing-vertical(small) spacing-horizontal(small);
       }
     }
   }
@@ -316,33 +297,29 @@
       @extend %layout;
 
       .accomplishment-metadata-title {
-        @include make-col(12);
+        @include span(12);
       }
     }
 
     .wrapper-metadata {
       @extend %layout;
 
-      @include make-container();
-
-      padding: 0;
-
       .metadata {
         @extend %divider-2;
 
-        @include make-col(12);
+        @include span(12);
 
-        margin-bottom: map-get($spacing-vertical, small);
-        border-bottom-color: $gray-x-back;
-        padding-bottom: map-get($spacing-vertical, small);
+        margin-bottom: spacing-vertical(small);
+        border-bottom-color: palette(grayscale, x-back);
+        padding-bottom: spacing-vertical(small);
 
         &:last-child {
           border-bottom: none;
           padding-bottom: 0;
         }
 
-        @include media-breakpoint-up(md) {
-          @include make-col(4);
+        @media (min-width: $bp-screen-md) {
+          @include span(4);
 
           border-bottom: none;
           padding-bottom: 0;
@@ -359,15 +336,15 @@
     }
 
     .accomplishment-brief {
-      margin-bottom: map-get($spacing-vertical, small);
+      margin-bottom: spacing-vertical(small);
 
-      @include media-breakpoint-up(md) {
-        @include make-col(6);
+      @media (min-width: $bp-screen-md) {
+        @include span(6);
       }
 
       .accomplishment-type-symbol {
         @include size(rem(50));
-        @include margin-right(map-get($spacing-horizontal, base));
+        @include margin-right(spacing-horizontal(base));
       }
     }
   }
@@ -380,40 +357,17 @@
     }
 
     .about-item {
-      margin-bottom: map-get($spacing-vertical, base);
+      margin-bottom: spacing-vertical(base);
 
       &:last-child {
         margin-bottom: 0;
       }
 
-      @include media-breakpoint-up(md) {
-        @include make-col(6);
+      @media (min-width: $bp-screen-md) {
+        @include span(6);
 
         margin-bottom: 0;
       }
-
-      a {
-        @extend %link;
-      }
-
-      .about-edx-title,
-      .about-title {
-        font-weight: 400;
-        margin-top: 0;
-
-        @include margin(0, rem(8), rem(10), rem(8));
-      }
-
-      .about-copy,
-      .about-edx-copy {
-        @extend %copy-meta;
-
-        margin: 0 rem(8);
-
-        p {
-          margin-top: 0;
-        }
-      }
     }
   }
 }
diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss
index cec4e82a56..882d1678c9 100644
--- a/lms/static/certificates/sass/_print.scss
+++ b/lms/static/certificates/sass/_print.scss
@@ -39,7 +39,7 @@
   }
 
   %print-rendering-section {
-    margin-bottom: map-get($spacing-vertical, small);
+    margin-bottom: spacing-vertical(small);
     border-bottom: none !important;
     padding-bottom: 0 !important;
 
@@ -74,7 +74,7 @@
 
   body {
     height: auto;
-    margin: map-get($spacing-vertical, mid-large) map-get($spacing-vertical, mid-small) 0 map-get($spacing-vertical, mid-small) !important;
+    margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
     padding: 0;
   }
 
@@ -124,64 +124,64 @@
 
   // headings
   .hd-1 {
-    font-size: rem(21);
-    line-height: 1.5;
+    font-size: font-size(x-large);
+    line-height: line-height(x-large);
   }
 
   .hd-2 {
-    font-size: rem(18);
-    line-height: 1.6;
+    font-size: font-size(large);
+    line-height: line-height(large);
   }
 
   .hd-3 {
-    font-size: rem(18);
-    line-height: 1.6;
+    font-size: font-size(large);
+    line-height: line-height(large);
   }
 
   .hd-4 {
-    font-size: rem(16);
-    line-height: 1.5;
+    font-size: font-size(base);
+    line-height: line-height(base);
   }
 
   .hd-5 {
-    font-size: rem(14);
-    line-height: 1.6;
+    font-size: font-size(small);
+    line-height: line-height(small);
   }
 
   .hd-6 {
-    font-size: rem(12);
-    line-height: 1.5;
+    font-size: font-size(x-small);
+    line-height: line-height(x-small);
   }
 
   .hd-7 {
-    font-size: rem(11);
-    line-height: 1.5;
+    font-size: font-size(xx-small);
+    line-height: line-height(x-small);
   }
 
   // copy
-  .copy.copy-lead {
-    font-size: rem(16);
-    line-height: 1.5;
+  .copy-lead {
+    font-size: font-size(base);
+    line-height: line-height(base);
   }
 
-  .copy.copy-large {
-    font-size: rem(16);
-    line-height: 1.5;
+  .copy-large {
+    font-size: font-size(base);
+    line-height: line-height(base);
   }
 
-  .copy.copy-base {
-    font-size: rem(14);
-    line-height: 1.6;
+  .copy-base {
+    font-size: font-size(small);
+    line-height: line-height(small);
   }
 
-  .copy.copy-meta {
-    font-size: rem(12);
-    line-height: 1.6;
+  .copy-meta {
+    font-size: font-size(x-small);
+    line-height: line-height(small);
   }
 
-  .copy.copy-micro {
-    font-size: rem(11);
-    line-height: 1.5;
+  .copy-micro {
+    font-size: font-size(xx-small);
+    line-height: line-height(x-small);
   }
 
   // accomplishment
@@ -191,17 +191,14 @@
 
   .accomplishment-rendering {
     top: 0 !important;
-    border: rem(1) solid $gray-back;
+    border: rem(1) solid palette(grayscale, back);
     border-top: rem(2) solid $cert-base-color;
     box-shadow: none;
-    padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, mid-large);
+    padding: spacing-vertical(small) spacing-horizontal(mid-large);
 
-    @include rtl {
-      display: block !important;
-    }
 
     .accomplishment-type {
-      margin-top: -(map-get($spacing-vertical, mid-large));
+      margin-top: -(spacing-vertical(mid-large));
     }
 
     .accomplishment-type-symbol {
@@ -211,20 +208,20 @@
     }
 
     .wrapper-statement-and-signatories {
-      border-bottom: rem(2) solid $gray-x-back;
+      border-bottom: rem(2) solid palette(grayscale, x-back);
     }
 
     .accomplishment-statement {
       @extend %print-rendering-section;
 
-      @include make-col(8);
+      @include span(8);
 
       margin: 0 auto;
     }
 
     .accomplishment-summary,
     .accomplishment-statement-detail {
-      margin-bottom: map-get($spacing-vertical, mid-small);
+      margin-bottom: spacing-vertical(mid-small);
     }
 
     .wrapper-orgs::after {
@@ -238,8 +235,8 @@
 
       .wrapper-organization {
         height: rem(48);
-        margin-top: map-get($spacing-vertical, mid-small) !important;
-        margin-bottom: map-get($spacing-vertical, mid-small) !important;
+        margin-top: spacing-vertical(mid-small) !important;
+        margin-bottom: spacing-vertical(mid-small) !important;
       }
 
       .organization-logo {
@@ -251,8 +248,7 @@
     .accomplishment-signatories {
       @extend %print-rendering-section;
 
-      @include make-col(12);
-      @include margin-right(0);
+      @include span(12, before);
 
       .signatory-credentials {
         font-size: 8pt;
@@ -260,7 +256,7 @@
       }
 
       .signatory-signature {
-        height: map-get($spacing-vertical, small);
+        height: spacing-vertical(small);
         max-width: 100%;
         margin-top: 0;
         padding-top: 0 !important;
@@ -268,7 +264,7 @@
       }
 
       .signatory-name {
-        font-size: rem(12);
+        font-size: font-size(x-small);
       }
 
       .signatory-credentials {
@@ -278,7 +274,7 @@
       // CASE: > 4 signatures
       &.has-many {
         .signatory {
-          @include make-col(2);
+          @include span(2);
         }
       }
     }
@@ -305,12 +301,12 @@
         .value {
           display: inline-block;
           vertical-align: baseline;
-          font-size: rem(12);
-          line-height: 1.6;
+          font-size: font-size(x-small);
+          line-height: line-height(small);
         }
 
         .label {
-          @include margin-right(map-get($spacing-horizontal, small));
+          @include margin-right(spacing-horizontal(small));
         }
       }
     }
@@ -319,8 +315,6 @@
       float: left;
       width: 65% !important;
       margin: 0 !important;
-      flex: none !important;
-      max-width: 65% !important;
 
       @include text-align(left);
     }
@@ -329,8 +323,6 @@
       float: right;
       width: 35% !important;
       margin: 0 !important;
-      flex: none !important;
-      max-width: 35% !important;
 
       @include text-align(right);
     }
@@ -348,3 +340,4 @@
     }
   }
 }
+
diff --git a/lms/static/certificates/sass/_utilities.scss b/lms/static/certificates/sass/_utilities.scss
index f105e88ad0..9be3ff38f9 100644
--- a/lms/static/certificates/sass/_utilities.scss
+++ b/lms/static/certificates/sass/_utilities.scss
@@ -10,163 +10,21 @@
 // ------------------------------
 // #FUNCTIONS
 // ------------------------------
-@function rem($size) {
-  $remSize: $size / 16;
-
-  @return #{$remSize}rem;
-}
 
 // ------------------------------
 // #MIXINS
 // ------------------------------
-@mixin grid-container() {
-  display: flex;
-  max-width: 73.125rem;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  box-sizing: border-box;
-  margin: 0 auto;
-}
-
-@mixin triangle($size, $color, $direction) {
-  $width: nth($size, 1);
-  $height: nth($size, length($size));
-  $foreground-color: nth($color, 1);
-  $background-color: if(length($color) == 2, nth($color, 2), transparent);
-
-  height: 0;
-  width: 0;
-
-  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
-    $width: $width / 2;
-    $height: if(length($size) > 1, $height, $height/2);
-
-    @if $direction == up {
-      border-bottom: $height solid $foreground-color;
-      border-left: $width solid $background-color;
-      border-right: $width solid $background-color;
-    }
-
-    @else if $direction == right {
-      border-bottom: $width solid $background-color;
-      border-left: $height solid $foreground-color;
-      border-top: $width solid $background-color;
-    }
-
-    @else if $direction == down {
-      border-left: $width solid $background-color;
-      border-right: $width solid $background-color;
-      border-top: $height solid $foreground-color;
-    }
-
-    @else if $direction == left {
-      border-bottom: $width solid $background-color;
-      border-right: $height solid $foreground-color;
-      border-top: $width solid $background-color;
-    }
-  }
-
-  @else if ($direction == up-right) or ($direction == up-left) {
-    border-top: $height solid $foreground-color;
-
-    @if $direction == up-right {
-      border-left: $width solid $background-color;
-    }
-
-    @else if $direction == up-left {
-      border-right: $width solid $background-color;
-    }
-  }
-
-  @else if ($direction == down-right) or ($direction == down-left) {
-    border-bottom: $height solid $foreground-color;
-
-    @if $direction == down-right {
-      border-left: $width solid $background-color;
-    }
-
-    @else if $direction == down-left {
-      border-right: $width solid $background-color;
-    }
-  }
-
-  @else if ($direction == inset-up) {
-    border-color: $background-color $background-color $foreground-color;
-    border-style: solid;
-    border-width: $height $width;
-  }
-
-  @else if ($direction == inset-down) {
-    border-color: $foreground-color $background-color $background-color;
-    border-style: solid;
-    border-width: $height $width;
-  }
-
-  @else if ($direction == inset-right) {
-    border-color: $background-color $background-color $background-color $foreground-color;
-    border-style: solid;
-    border-width: $width $height;
-  }
-
-  @else if ($direction == inset-left) {
-    border-color: $background-color $foreground-color $background-color $background-color;
-    border-style: solid;
-    border-width: $width $height;
-  }
-}
 
 // ------------------------------
 // #HELPERS
 // ------------------------------
 // visual dividers
 %divider-1 {
-  border-bottom-width: map-get($spacing-vertical, xxx-small);
+  border-bottom-width: rem(4);
   border-bottom-style: solid;
 }
 
 %divider-2 {
-  border-bottom-width: 0.125rem;
+  border-bottom-width: rem(2);
   border-bottom-style: solid;
 }
-
-%copy-meta {
-  font-size: rem(14);
-  line-height: 1.6;
-}
-
-%copy-base {
-  font-size: rem(16);
-  line-height: 1.6;
-}
-
-%copy-large {
-  font-size: rem(18);
-  line-height: 1.6;
-}
-
-%copy-lead {
-  font-size: rem(21);
-  line-height: 1.5;
-}
-
-%copy-micro {
-  font-size: rem(12);
-  line-height: 1.5;
-}
-
-%copy-meta {
-  font-size: rem(14);
-  line-height: 1.6;
-}
-
-%link {
-  color: $primary-accent;
-  text-decoration: none;
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: underline;
-  }
-}
diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss
index 4fe83814a2..5c15b8b8c8 100644
--- a/lms/static/certificates/sass/_views.scss
+++ b/lms/static/certificates/sass/_views.scss
@@ -24,18 +24,16 @@
   }
 
   .content-main {
-    margin-bottom: map-get($spacing-vertical, base);
+    margin-bottom: spacing-vertical(base);
 
-    @include media-breakpoint-up(md) {
-      @include make-col(9);
-      @include margin-left(0);
+    @media (min-width: $bp-screen-md) {
+      @include span(9, after);
     }
   }
 
   .content-secondary {
-    @include media-breakpoint-up(md) {
-      @include make-col(3);
-      @include margin-right(0);
+    @media (min-width: $bp-screen-md) {
+      @include span(3, before);
     }
   }
 }
diff --git a/lms/static/certificates/sass/main-ltr.scss b/lms/static/certificates/sass/main-ltr.scss
index e8203db70d..294621e2c2 100644
--- a/lms/static/certificates/sass/main-ltr.scss
+++ b/lms/static/certificates/sass/main-ltr.scss
@@ -6,10 +6,11 @@
 // NOTE: This is the left to right (LTR) configured style compile.
 // It should mirror main-rtl w/ the exception of bi-app references.
 
-@import '../sass/vendor/bi-app/bi-app-ltr';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
 
 // Load the shared build
 @import 'build';
diff --git a/lms/static/certificates/sass/main-rtl.scss b/lms/static/certificates/sass/main-rtl.scss
index 43bda94226..39afa4592e 100644
--- a/lms/static/certificates/sass/main-rtl.scss
+++ b/lms/static/certificates/sass/main-rtl.scss
@@ -6,10 +6,11 @@
 // NOTE: This is the right to left (RTL) configured style compile.
 // It should mirror main-ltr w/ the exception of bi-app references.
 
-@import '../sass/vendor/bi-app/bi-app-rtl';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
 
 // Load the shared build
 @import 'build';