diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
index 2993a37b7..4093e5e7d 100644
--- a/app/views/layouts/mailer.html.erb
+++ b/app/views/layouts/mailer.html.erb
@@ -5,19 +5,23 @@ body {
   font-family: sans-serif;
   font-size: 14px;
   line-height: 1.5;
-  color: #222;
+  color: #212529; /* oc-gray-9 */
 }
 h1, h2, h3 { font-family: sans-serif; margin: 0px; }
 h1 { font-size: 1.3em; }
 h2, h3 { font-size: 1.1em; }
-a, a:link, a:visited { color: #169;}
-a:hover, a:active { color: #c61a1a; }
+a, a:link, a:visited { color: #1864ab; /* oc-blue-9 */ }
+a:hover, a:active { color: #c92a2a; /* oc-red-9 */ }
 a.wiki-anchor { display: none; }
-fieldset.attachments {border-width: 1px 0 0 0;}
+fieldset.attachments {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: #ced4da; /* oc-gray-4 */
+}
 hr {
   width: 100%;
   height: 1px;
-  background: #ccc;
+  background: #ced4da; /* oc-gray-4 */
   border: 0;
   margin: 1.2em 0;
 }
@@ -25,26 +29,34 @@ span.footer {
   font-size: 0.8em;
   font-style: italic;
 }
-blockquote { font-style: italic; border-left: 3px solid #e0e0e0; padding-left: 0.6em; margin-left: 0;}
+blockquote {
+  font-style: italic;
+  border-left: 3px solid #dee2e6; /* oc-gray-3 */
+  padding-left: 0.6em;
+  margin-left: 0;
+}
 blockquote blockquote { margin-left: 0;}
 pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 pre {
   margin: 1em 1em 1em 1.6em;
   padding: 8px;
-  background-color: #fafafa;
-  border: 1px solid #e2e2e2;
+  background-color: #f8f9fa; /* oc-gray-0 */
+  border: 1px solid #ced4da; /* oc-gray-4 */
   border-radius: 3px;
   width:auto;
   overflow-x: auto;
   overflow-y: hidden;
 }
-ul.details {color:#959595; margin-bottom: 1.5em;}
+ul.details {
+  color:#868e96; /* oc-gray-6 */
+  margin-bottom: 1.5em;
+}
 table {
   border-collapse: collapse;
   margin-bottom: 1em;
 }
 table, td, th {
-  border: 1px solid #bbb;
+  border: 1px solid #adb5bd; /* oc-gray-5 */
   padding: 4px;
 }
 .badge {
@@ -60,12 +72,12 @@ table, td, th {
   text-decoration: none;
 }
 .badge-status-open {
-  color: #205D86;
-  border: 1px solid #205D86;
+  color: #1864ab; /* oc-blue-9 */
+  border: 1px solid #1864ab;
 }
 .badge-status-closed {
-  color: #1D781D;
-  border: 1px solid #1D781D;
+  color: #2b8a3e; /* oc-green-9 */
+  border: 1px solid #2b8a3e;
 }
 </style>
 </head>