diff --git a/site/layouts/_default/term.html b/site/layouts/_default/term.html
index 4bd4b4c7..a9d73ad1 100644
--- a/site/layouts/_default/term.html
+++ b/site/layouts/_default/term.html
@@ -6,7 +6,7 @@
                 <span class="">{{ .Params.title | markdownify }}</span>
                 {{- with .Params.required -}}
                 <div class="badge-required">
-                  <span class="badge bg-primary align-middle">Required</span>
+                  <span class="badge align-middle">Required</span>
                 </div>
                 {{- end -}}
               </th>
diff --git a/site/source/scss/main.scss b/site/source/scss/main.scss
index 6d2c02d6..2186072b 100644
--- a/site/source/scss/main.scss
+++ b/site/source/scss/main.scss
@@ -8,6 +8,12 @@ $iseal-dark-blue: #0e304a;
 // another light blue
 $iseal-light-blue: #328cd1;
 
+// Secondary colors
+$iseal-secondary-orange: rgb(223, 155, 24);
+$iseal-secondary-green: rgb(137, 168, 52);
+$iseal-secondary-red: rgb(196, 41, 55);
+$iseal-secondary-purple: rgb(116, 68, 129);
+
 /*
    Some styles inspired from the Dublin Core DCTERMS website, see:
    https://www.dublincore.org/specifications/dublin-core/dcmi-terms/
@@ -16,13 +22,23 @@ $iseal-light-blue: #328cd1;
 body {
     /* for the "scroll spy" navbar feature */
     position: relative;
-    color: $primary;
+    color: $black;
     background-color: $white;
-    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
+    font-family: Arial,sans-serif;
+}
+
+// The ISEAL Branding Guidelines Version 3.0 say that sub-headings should be
+// normal weight and secondary blue color.
+p.lead {
+    color: $secondary;
 }
 
 div.badge-required {
     float: right;
+
+    span {
+        background-color: $iseal-secondary-red;
+    }
 }
 
 td.field-name {
@@ -30,17 +46,16 @@ td.field-name {
     font-weight: 700;
 }
 
-.table {
-    color: $primary;
-}
-
 /* Override Bootstrap's top border on tbody */
 .table>:not(:first-child) {
     border-top: 2px solid $iseal-light-blue;
 }
 
+// The ISEAL Branding Guidelines Version 3.0 say that headings should be bold
+// weight and primary blue color.
 h1, h2, h3 {
     color: $primary;
+    font-weight: 700;
 }
 
 .footer {
diff --git a/site/source/scss/style.scss b/site/source/scss/style.scss
index d327c39c..1a75abdd 100644
--- a/site/source/scss/style.scss
+++ b/site/source/scss/style.scss
@@ -1,10 +1,10 @@
 // override some Bootstrap colors. Apparently we need to do this *before* we
 // process Bootstrap.
 
-// ISEAL dark blue
-$primary: #072439;
-// ISEAL light blue
-$secondary: #2A7AB7;
+// ISEAL primary (dark) blue
+$primary: rgb(0, 82, 142);
+// ISEAL secondary (light) blue
+$secondary: rgb(27, 118, 188);
 
 // selectively import components we need from bootstrap
 // see: node_modules/bootstrap/scss/bootstrap.scss