use violet as Services main branding color

_src/_assets/styles/_page-services.scss

@@ -23,15 +23,13 @@
         }
     }
 
-    .feature__text {
-        opacity: .75;
-    }
-
     .feature__icon {
         margin-top: 0;
         margin-bottom: $spacer / 6;
         width: 2.2rem;
         height: 2.2rem;
+        stroke: darken($brand-main-violet, 30%);
+        color: $brand-main-blue-light;
     }
 }
 
@@ -56,13 +54,7 @@
     }
 
     .btn {
-        @extend .btn-secondary;
         min-width: 220px;
-
-        &:first-of-type {
-            @extend .btn-primary;
-            margin-right: $spacer;
-        }
     }
 }
 
@@ -71,7 +63,7 @@
         text-align: center;
         margin-top: $spacer * 2;
         padding-top: $spacer * 2;
-        border-top: 1px solid darken($brand-main-green, 5%);
+        border-top: 1px solid darken($brand-main-violet, 5%);
     }
 }
 

_src/_assets/styles/_sections/_section-cta-services.scss

@@ -9,12 +9,8 @@
         margin-bottom: $spacer;
         transform: scale(.8);
         transform-origin: left;
-    }
+        color: darken($brand-main-violet, 25%);
-
+        fill: darken($brand-main-violet, 25%);
-    .logo-services--text,
-    .logo-services .logo {
-        color: $brand-main-blue-light;
-        fill: $brand-main-blue-light;
     }
 
     .section-header {
@@ -23,9 +19,14 @@
 
     .section-title {
         text-align: left;
+        margin-bottom: $spacer * 2.5;
 
         &:after {
             display: none;
         }
     }
+
+    .btn {
+        color: #fff !important; // stylelint-disable-line
+    }
 }

_src/_assets/styles/bigchain/_logo.scss

@@ -45,3 +45,7 @@
     width: 100%;
     height: auto;
 }
+
+.logo--services {
+    color: $brand-main-violet;
+}

_src/_assets/styles/bigchain/_mixins/_backgrounds.scss

@@ -64,6 +64,26 @@
     }
 }
 
+.background--violet {
+    background: $brand-main-violet;
+
+    &,
+    .section-description,
+    p {
+        color: darken($brand-main-violet, 35%);
+    }
+
+    .feature__title,
+    .section-title {
+        color: darken($brand-main-violet, 50%);
+
+        // the bottom line
+        &:after {
+            background: $brand-main-blue-light;
+        }
+    }
+}
+
 
 //
 // Photo background

_src/_includes/sections/section-cta-services.html

@@ -1,8 +1,8 @@
-<section class="section section-cta section-cta--services background--green">
+<section class="section section-cta section-cta--services background--violet">
     <div class="row">
         <header class="section-header">
 
-            <svg class="logo logo--services" aria-labelledby="title">
+            <svg class="logo logo--services logo--white" aria-labelledby="title">
                 <title>Logo BigchainDB Services</title>
                 <use xlink:href="/assets/img/sprite.svg#logo-services"></use>
             </svg>

_src/services.html

@@ -91,14 +91,14 @@ contact:
             <h2 class="hero__subtitle">{{ page.hero.description }}</h2>
 
             {% for cta in page.hero.cta %}
-                <a class="btn hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
+                <a class="btn btn-violet hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
             {% endfor %}
         </hgroup>
     </div>
 
 </header>
 
-<section class="section section--servicesdetail background--green">
+<section class="section section--servicesdetail background--violet">
     <div class="row row--wide">
 
         <div class="grid grid--full grid-small--third grid--gutters">