diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 54cf561d1..85b754aae 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -123,3 +123,23 @@ $pagination-radius: $global-radius;
 $show-header-for-stacked: true;
 
 $tooltip-background-color: $brand;
+
+$sdg-colors: (
+  1: #e5243b,
+  2: #dda63a,
+  3: #4c9f38,
+  4: #c5192d,
+  5: #ff3a21,
+  6: #26bde2,
+  7: #fcc30b,
+  8: #a21942,
+  9: #fd6925,
+  10: #dd1367,
+  11: #fd9d24,
+  12: #bf8b2e,
+  13: #3f7e44,
+  14: #0a97d9,
+  15: #56c02b,
+  16: #00689d,
+  17: #19486a
+);
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index a8ba7ec9e..8e1d6cf9f 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -4,4 +4,22 @@
   > * {
     @include grid-column-gutter;
   }
+
+  .sdg-goal {
+
+    > header {
+      color: #fff;
+      margin-top: $line-height / 2;
+      padding-left: rem-calc(24);
+      text-shadow: 0 0 1px $black;
+    }
+
+    @each $code, $color in $sdg-colors {
+      &.sdg-goal-#{$code} {
+        > header {
+          background-color: $color;
+        }
+      }
+    }
+  }
 }