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