diff --git a/aio/content/examples/toh-pt0/src/styles.1.css b/aio/content/examples/toh-pt0/src/styles.1.css
index 264b345eba..1821a5fc8d 100644
--- a/aio/content/examples/toh-pt0/src/styles.1.css
+++ b/aio/content/examples/toh-pt0/src/styles.1.css
@@ -13,7 +13,7 @@ body {
   margin: 2em;
 }
 body, input[type="text"], button {
-  color: #888;
+  color: #333;
   font-family: Cambria, Georgia;
 }
 /* everywhere else */
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
index e956eab987..9121bec918 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@@ -37,7 +37,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color:#405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
index e956eab987..9121bec918 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
@@ -37,7 +37,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color:#405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
index 4bef1bb3c4..1d73d53659 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
@@ -37,7 +37,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color:#405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.css b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
index d08d9be581..de06809856 100644
--- a/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
@@ -30,6 +30,6 @@ button:disabled {
   cursor: auto;
 }
 button.clear {
-  color: #888;
+  color: #333;
   margin-bottom: 12px;
 }
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.css b/aio/content/examples/toh-pt5/src/app/app.component.css
index 7cf19e6ede..c62f266159 100644
--- a/aio/content/examples/toh-pt5/src/app/app.component.css
+++ b/aio/content/examples/toh-pt5/src/app/app.component.css
@@ -1,7 +1,6 @@
 /* AppComponent's private CSS styles */
 h1 {
   font-size: 1.2em;
-  color: #999;
   margin-bottom: 0;
 }
 h2 {
@@ -18,7 +17,7 @@ nav a {
   border-radius: 4px;
 }
 nav a:visited, a:link {
-  color: #607d8b;
+  color: #334953;
 }
 nav a:hover {
   color: #039be5;
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
index 68e65dda00..4b7ec1c3ee 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
@@ -34,7 +34,7 @@ h4 {
   color: #eee;
   max-height: 120px;
   min-width: 120px;
-  background-color: #607d8b;
+  background-color: #3f525c;
   border-radius: 2px;
 }
 .module:hover {
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
index 91e0badceb..2ad3fefb31 100644
--- a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
@@ -22,7 +22,7 @@
 }
 
 .heroes a {
-  color: #888;
+  color: #333;
   text-decoration: none;
   position: relative;
   display: block;
@@ -38,7 +38,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color:#405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.css b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
index d08d9be581..de06809856 100644
--- a/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
@@ -30,6 +30,6 @@ button:disabled {
   cursor: auto;
 }
 button.clear {
-  color: #888;
+  color: #333;
   margin-bottom: 12px;
 }
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css
index bf741e4575..c1d8721226 100644
--- a/aio/content/examples/toh-pt6/src/app/app.component.css
+++ b/aio/content/examples/toh-pt6/src/app/app.component.css
@@ -1,7 +1,6 @@
 /* AppComponent's private CSS styles */
 h1 {
   font-size: 1.2em;
-  color: #999;
   margin-bottom: 0;
 }
 h2 {
@@ -18,7 +17,7 @@ nav a {
   border-radius: 4px;
 }
 nav a:visited, a:link {
-  color: #607D8B;
+  color: #334953;
 }
 nav a:hover {
   color: #039be5;
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
index 6222c23bb7..938b84b2b0 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
@@ -34,7 +34,7 @@ h4 {
   color: #eee;
   max-height: 120px;
   min-width: 120px;
-  background-color: #607D8B;
+  background-color: #3f525c;
   border-radius: 2px;
 }
 .module:hover {
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
index 52f3e958e3..de72fd791f 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
@@ -1,5 +1,5 @@
 <div id="search-component">
-  <h4>Hero Search</h4>
+  <h4><label for="search-box">Hero Search</label></h4>
 
   <!-- #docregion input -->
   <input #searchBox id="search-box" (input)="search(searchBox.value)" />
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index c345d1d970..0b13f0fe4c 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -22,7 +22,7 @@
 }
 
 .heroes a {
-  color: #888;
+  color: #333;
   text-decoration: none;
   position: relative;
   display: block;
@@ -38,7 +38,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color:#405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
index d08d9be581..de06809856 100644
--- a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
@@ -30,6 +30,6 @@ button:disabled {
   cursor: auto;
 }
 button.clear {
-  color: #888;
+  color: #333;
   margin-bottom: 12px;
 }
diff --git a/aio/tools/examples/shared/boilerplate/common/src/styles.css b/aio/tools/examples/shared/boilerplate/common/src/styles.css
index aa756e7d70..d4e07e4175 100644
--- a/aio/tools/examples/shared/boilerplate/common/src/styles.css
+++ b/aio/tools/examples/shared/boilerplate/common/src/styles.css
@@ -13,7 +13,7 @@ body {
   margin: 2em;
 }
 body, input[text], button {
-  color: #888;
+  color: #333;
   font-family: Cambria, Georgia;
 }
 a {