diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 26a6afed2..01cfe6bfd 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -191,7 +191,7 @@ body.logged-in #top-menu {
   z-index: 200;
   color: var(--cmg-color-gray-001);
   background-color: var(--cmg-color-lightgray-002);
-  border: 1px solid var(--cmg-color-lightgray-006);
+  border: 1px solid var(--cmg-color-lightgray-005);
   padding: 1em;
   min-width: calc(100vw - 50px);
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
@@ -211,7 +211,7 @@ body.logged-in #top-menu {
   word-wrap:break-word;
 }
 #user-panel-user-info { /* mobile only styling */
-  border-top: 1px solid var(--cmg-color-lightgray-007);
+  border-top: 1px solid var(--cmg-color-lightgray-006);
   margin-top: 1em;
   padding-top: 1em;
 }
@@ -230,7 +230,7 @@ body.logged-in #top-menu {
   font-weight: normal;
 }
 #user-panel #co-profile-link:hover {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
 }
 #user-panel #co-profile-link .material-icons {
   vertical-align: middle;
@@ -352,7 +352,7 @@ body.logged-in #top-menu {
   top: 30px;
   z-index: 20;
   background-color: var(--cmg-color-lightgray-001);
-  border-right: 1px solid var(--cmg-color-lightgray-007);
+  border-right: 1px solid var(--cmg-color-lightgray-005);
   min-width: 160px;
 }
 /* show our custom navigation icon for shrinking and expanding the drawer
@@ -415,7 +415,7 @@ body.logged-in #top-menu {
 }
 #main-menu li li a.selected {
   color: var(--cmg-color-blue-001);
-  background-color: var(--cmg-color-lightgray-005);
+  background-color: var(--cmg-color-lightgray-003);
 }
 #main-menu .fa-fw {
   width: 2em;
@@ -434,7 +434,7 @@ body.logged-in #top-menu {
   font-size: 1.1em;
   position: relative;
   top: -2px;
-  color: var(--cmg-color-lightgray-009);
+  color: var(--cmg-color-lightgray-008);
 }
 /* CONTENT */
 #siteTitle {
@@ -509,6 +509,7 @@ body.logged-in #top-menu {
 .top-search {
   margin-top: 0.5em;
   padding: 0;
+  border: 1px solid var(--cmg-color-lightgray-005);
 }
 .top-search legend .material-icons {
   vertical-align: middle;
@@ -531,14 +532,14 @@ body.logged-in #top-menu {
   position: relative;
   padding: 0.5em 0.5em 0;
   margin: 0;
-  background-color: var(--cmg-color-lightgray-003);
+  background-color: var(--cmg-color-lightgray-001);
 }
 .top-search.open fieldset {
   padding-bottom: 0.5em;
 }
 .top-search legend {
   width: 100%;
-  background-color: var(--cmg-color-lightgray-003);
+  background-color: var(--cmg-color-lightgray-001);
   margin: 0 -0.5em;
   padding: 0.5em 0.5em 0;
   line-height: 1.8em;
@@ -564,7 +565,7 @@ body.logged-in #top-menu {
   margin: 0 0 0.5em 0;
   height: 28px;
   padding: 2px 4px;
-  border: 1px solid var(--cmg-color-lightgray-007);
+  border: 1px solid var(--cmg-color-lightgray-006);
   background-color: var(--cmg-color-white);
 }
 .top-search label {
@@ -631,7 +632,7 @@ body.logged-in #top-menu {
   background-color: var(--cmg-color-lightgray-003);
 }
 .top-search-active-filters-remove button:hover {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
 }
 /* RECONCILE TABLE */
 #reconcile-table {
@@ -641,7 +642,7 @@ body.logged-in #top-menu {
 }
 #reconcile-table td,
 #reconcile-table th {
-  border: 1px solid var(--cmg-color-lightgray-007);
+  border: 1px solid var(--cmg-color-lightgray-006);
 }
 #reconcile-table th {
   font-weight: normal;
@@ -675,14 +676,14 @@ body.logged-in #top-menu {
 }
 /* set the borders on the "new" reference id */
 #reconcile-table tbody td:nth-child(2) {
-  border-left: 2px solid var(--cmg-color-lightgray-008);
-  border-right: 2px solid var(--cmg-color-lightgray-008);
+  border-left: 2px solid var(--cmg-color-lightgray-007);
+  border-right: 2px solid var(--cmg-color-lightgray-007);
 }
 #reconcile-table tbody tr:first-child td:nth-child(2) {
-  border-top: 2px solid var(--cmg-color-lightgray-008);
+  border-top: 2px solid var(--cmg-color-lightgray-007);
 }
 #reconcile-table tbody tr:last-child td:nth-child(2) {
-  border-bottom: 2px solid var(--cmg-color-lightgray-008);
+  border-bottom: 2px solid var(--cmg-color-lightgray-007);
 }
 /* no zebra for this table */
 #reconcile-table tr:nth-child(2n+1) td {
@@ -852,7 +853,7 @@ ul.data-list li {
   background-color: var(--cmg-color-lightgray-003);
 }
 ul.data-list li:nth-child(2n) {
-  background-color: var(--cmg-color-lightgray-010); /* note that this is slightly lighter than the .form-list zebra */
+  background-color: var(--cmg-color-lightgray-009); /* note that this is slightly lighter than the .form-list zebra */
 }
 ul.data-table li {
   background-color: unset;
@@ -878,13 +879,13 @@ ul.fields li {
 ul.form-list {
   clear: both;
   padding: 0;
-  border-top: 1px solid var(--cmg-color-lightgray-006);
+  border-top: 1px solid var(--cmg-color-lightgray-005);
 }
 ul.form-list li {
   background-color: var(--cmg-color-lightgray-001);
-  border-left: 1px solid var(--cmg-color-lightgray-006);
-  border-bottom: 1px solid var(--cmg-color-lightgray-006);
-  border-right: 1px solid var(--cmg-color-lightgray-006);
+  border-left: 1px solid var(--cmg-color-lightgray-005);
+  border-bottom: 1px solid var(--cmg-color-lightgray-005);
+  border-right: 1px solid var(--cmg-color-lightgray-005);
   margin: 0;
   padding: 0.5em;
   list-style: none;
@@ -940,18 +941,18 @@ ul.field-children {
 }
 ul.field-children li {
   margin: 0;
-  border-left: 1px solid var(--cmg-color-lightgray-008);
-  border-right: 1px solid var(--cmg-color-lightgray-008);
-  border-bottom: 1px solid var(--cmg-color-lightgray-008);
+  border-left: 1px solid var(--cmg-color-lightgray-007);
+  border-right: 1px solid var(--cmg-color-lightgray-007);
+  border-bottom: 1px solid var(--cmg-color-lightgray-007);
 }
 ul.field-children li:nth-child(1) {
-  border-top: 1px solid var(--cmg-color-lightgray-008);
+  border-top: 1px solid var(--cmg-color-lightgray-007);
 }
 ul.field-children li:nth-child(odd) {
   background-color: var(--cmg-color-lightgray-002);
 }
 ul.field-children li:nth-child(even) {
-  background-color: var(--cmg-color-lightgray-007);
+  background-color: var(--cmg-color-lightgray-006);
 }
 ul.form-list li.field-stack .field-name,
 ul.form-list li.field-stack .field-info {
@@ -1092,17 +1093,17 @@ a.desc::before {
   padding: 1em;
 }
 .co-grid .co-grid-header {
-  background-color: var(--cmg-color-lightgray-011) !important;
+  background-color: var(--cmg-color-lightgray-010) !important;
   font-weight: bold;
 }
 .co-grid .co-row {
-  border-top: 1px solid var(--cmg-color-lightgray-006);
+  border-top: 1px solid var(--cmg-color-lightgray-005);
 }
 .co-grid .co-row:nth-child(even) {
   background-color: var(--cmg-color-lightgray-002);
 }
 .co-grid > div:nth-child(2) {
-  border-top: 1px solid var(--cmg-color-lightgray-011);
+  border-top: 1px solid var(--cmg-color-lightgray-010);
 }
 code,
 .fixed-width * {
@@ -1112,8 +1113,8 @@ code,
 table {
   width: 100%;
   border-collapse: collapse;
-  border-left: 1px solid var(--cmg-color-lightgray-006);
-  border-right: 1px solid var(--cmg-color-lightgray-006);
+  border-left: 1px solid var(--cmg-color-lightgray-005);
+  border-right: 1px solid var(--cmg-color-lightgray-005);
 }
 .table-container {
   overflow: auto;
@@ -1125,9 +1126,8 @@ th, td {
   font-weight: normal;
 }
 th {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
   color: var(--cmg-color-black);
-  font-weight: 600;
 }
 th a {
   color: var(--cmg-color-black);
@@ -1138,7 +1138,7 @@ th a:hover {
   text-decoration: none !important;
 }
 td {
-  border-bottom: 1px solid var(--cmg-color-lightgray-006);
+  border-bottom: 1px solid var(--cmg-color-lightgray-005);
 }
 tr th:first-child,
 tr td:first-child {
@@ -1152,7 +1152,7 @@ tr.noborder td {
   border: none;
 }
 tr:nth-child(odd) td {
-  background-color: var(--cmg-color-lightgray-002);
+  background-color: var(--cmg-color-lightgray-001);
 }
 tr:nth-child(even) td {
   background-color: var(--cmg-color-white);
@@ -1165,7 +1165,7 @@ td.indented {
 }
 .linked-row:hover,
 .linked-row:hover td {
-  background-color: var(--cmg-color-lightgray-006) !important;
+  background-color: var(--cmg-color-lightgray-002) !important;
 }
 .menuitembutton {
   width: 250px;
@@ -1191,7 +1191,7 @@ td.indented {
   line-height: 0;
   text-align: center;
   background-color: var(--cmg-color-white);
-  border: 1px solid var(--cmg-color-lightgray-007);
+  border: 1px solid var(--cmg-color-lightgray-006);
   border-radius: 60px;
 }
 #co-loading-redirect {
@@ -1272,6 +1272,7 @@ td.indented {
 .btn-primary:hover {
   background-color: var(--cmg-color-black);
   color: var(--cmg-color-white) !important;
+  border-color: var(--cmg-color-black);
   text-decoration: none !important;
 }
 .btn-primary.disabled,
@@ -1283,7 +1284,7 @@ td.indented {
 }
 .btn-default,
 .btn-default:active {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 .btn-default:hover {
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index b5028a919..1e513d28d 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -24,7 +24,9 @@
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  *
  * Colors use the convention --cmg-color-hue-number with optional comments to describe
- * how they are used. "number" does not imply color value.
+ * how they are used. Colors are mostly listed in order of prominence: the most pronounced colors
+ * are represented by the lowest numbers. The order is otherwise arbitrary and new colors can
+ * be added by appending to the list and incrementing the number.
  */
 
 :root {
@@ -42,12 +44,11 @@
   --cmg-color-lightgray-002: #f8f8f8; /* background color */
   --cmg-color-lightgray-003: #f5f5f5; /* background color, hamburger */
   --cmg-color-lightgray-004: #f2f2f2; /* background color */
-  --cmg-color-lightgray-005: #fafafa; /* background color */
-  --cmg-color-lightgray-006: #eee;    /* background color */
-  --cmg-color-lightgray-007: #ddd;    /* border color */
-  --cmg-color-lightgray-008: #ccc;    /* border color */
-  --cmg-color-lightgray-009: #bbb;    /* icon color */
-  --cmg-color-lightgray-010: #ededed; /* data-list background color */
+  --cmg-color-lightgray-005: #eee;    /* background color */
+  --cmg-color-lightgray-006: #ddd;    /* border color */
+  --cmg-color-lightgray-007: #ccc;    /* border color */
+  --cmg-color-lightgray-008: #bbb;    /* icon color */
+  --cmg-color-lightgray-009: #ededed; /* data-list background color */
   --cmg-color-lightgray-011: #e8e8e8; /* co-grid background color */
 
   --cmg-color-green-001: #2a2;       /* banner */