update styles for pro pages

app/styles/app/pages/home-pro.sass

@@ -1,8 +1,3 @@
-$teal: #40A3AD
-$green: #39A85B
-$red: #DB4242
-$yellow: #E5C025
-$grey: #858585
 
 .landing-pro
 
@@ -44,10 +39,10 @@ $grey: #858585
     border-radius: 2px
     font-size: 27px
     text-decoration: none
-    background-color: $green
+    background-color: $turf-green
     &:hover
       color: white
-      background-color: #73c78d
+      background-color: lighten($turf-green, .2)
 
   .hero-button
     @extend .landing-button
@@ -199,22 +194,22 @@ $grey: #858585
 .h1--grey
   @extend %h1
   @include linkStyle
-  color: $grey !important
+  color: $asphalt-grey !important
   a
-    color: $grey
+    color: $asphalt-grey
 
 .h1--teal
   @extend %h1
   font-size: 64px
-  color: #408692 !important
+  color: $oxide-blue !important
 
 .h1--green
   @extend %h1
-  color: $green !important
+  color: $turf-green !important
 
 .h1--red
   @extend %h1
-  color: $red !important
+  color: $brick-red !important
 
 %h2
   margin: 0 0 .5em
@@ -224,19 +219,19 @@ $grey: #858585
 
 .h2--grey
   @extend %h2
-  color: $grey
+  color: $asphalt-grey
 
 .h2--green
   @extend %h2
-  color: $green
+  color: $turf-green
 
 .h2--red
   @extend %h2
-  color: $red
+  color: $brick-red
 
 .h2--teal
   @extend %h2
-  color: $teal
+  color: $oxide-blue
 
 %h3
   margin: .5em 0
@@ -254,19 +249,19 @@ $grey: #858585
 
 .h3--teal
   @extend %h3
-  color: $teal
+  color: $oxide-blue
 
 .h3--red
   @extend %h3
-  color: $red
+  color: $brick-red
 
 .h3--green
   @extend %h3
-  color: $green
+  color: $turf-green
 
 .h3--yellow
   @extend %h3
-  color: $yellow
+  color: $dozer-yellow
 
 .text-big
   @include linkStyle

app/styles/app/pages/logo.sass

@@ -19,13 +19,13 @@
       margin: .5em 0 0
     .font-light
       font-weight: 300
-      color: $teal
+      color: $oxide-blue
     .font-regular
       font-weight: 400
-      color: #D3B01E
+      color: $dozer-yellow
     .font-semibold
       font-weight: 600
-      color: $grey
+      color: $asphalt-grey
 
   .list--colors
     @extend %list
@@ -39,15 +39,15 @@
       height: 3em
       margin-bottom: .5em
     .colors-sample--teal
-      background-color: $teal
+      background-color: $oxide-blue
     .colors-sample--green
-      background-color: $green
+      background-color: $turf-green
     .colors-sample--yellow
-      background-color: $yellow
+      background-color: $canary-yellow
     .colors-sample--red
-      background-color: $red
+      background-color: $brick-red
     .colors-sample--grey
-      background-color: #666
+      background-color: $asphalt-grey
 
   .list--mascot
     @extend %list
@@ -91,3 +91,6 @@
       margin-bottom: 3em
       @media #{$medium-up}
         margin-bottom: 0
+
+  .text-logo
+    margin: 0 auto 3em

app/styles/app/pages/plans.sass

@@ -12,7 +12,7 @@
     margin-bottom: 2em
     border:
       width: 2px
-      color: #E8E8E8
+      color: rgba($cement-grey, .2)
       style: solid
 
     @media #{$medium-up}
@@ -52,19 +52,19 @@
       color: $color
 
   .plan--red
-    +colorPlans($red, #FCF0F0, false)
+    +colorPlans($brick-red, lighten($brick-red, 40), false)
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjREI0MjQyIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
   .plan--green
-    +colorPlans($green, #73c78d)
+    +colorPlans($turf-green, lighten($turf-green, 10))
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
   .plan--teal
-    +colorPlans($teal, #8CC8CE)
+    +colorPlans($oxide-blue, lighten($oxide-blue, 10))
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjNDBBM0FEIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
   .plan--yellow
-    +colorPlans($yellow, #EFD97C)
+    +colorPlans($dozer-yellow, lighten($dozer-yellow, 10))
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRTVDMDI1IiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
 
@@ -129,7 +129,7 @@
       flex: 0 0 100%
       padding: 1em 1.5em 1.7em
       margin-bottom: 2em
-      border: solid 1px #E8E8E8
+      border: solid 1px rgba($cement-grey, .2)
       @media #{$medium-up}
         flex: 0 0 48%
 

app/templates/logo.hbs

@@ -46,19 +46,19 @@
       <ul class="list--colors">
         <li>
           <div class="colors-sample--teal" aria-hidden="true"></div>
-          <p class="text-small"><strong>Turbo Teal</strong> #40A3AD</p>
+          <p class="text-small"><strong>Oxide blue</strong> #3EAAAF</p>
         </li>
         <li>
           <div class="colors-sample--green" aria-hidden="true"></div>
-          <p class="text-small"><strong>Passing green</strong> #44A662</p>
+          <p class="text-small"><strong>Turf green</strong> #39AA56</p>
         </li>
         <li>
           <div class="colors-sample--yellow" aria-hidden="true"></div>
-          <p class="text-small"><strong>Building yellow</strong> #E5DA3F</p>
+          <p class="text-small"><strong>Canary yellow</strong> #EDDE3F</p>
         </li>
         <li>
           <div class="colors-sample--red" aria-hidden="true"></div>
-          <p class="text-small"><strong>Failing red</strong> #D94341</p>
+          <p class="text-small"><strong>Brick red</strong> #DB4545</p>
         </li>
         <li>
           <div class="colors-sample--grey" aria-hidden="true"></div>