a green tone as main accent color

_src/_assets/styles/bigchain/_icons.scss

@@ -1,7 +1,7 @@
 
 .icon {
     fill: none;
-    stroke: $brand-main-violet;
+    stroke: $brand-main-green;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

_src/_assets/styles/bigchain/_logo.scss

@@ -6,7 +6,8 @@
 
 // default logo
 .logo {
-    fill: #fff;
+    fill: $brand-main-blue;
+    color: $brand-main-green; // the fill="currentColor" trick
     width: 300px;
     height: 30px;
 }
@@ -20,6 +21,11 @@
     color: #fff;
 }
 
+.logo--white--green {
+    fill: #fff;
+    color: $brand-main-green;
+}
+
 
 //
 // size modifiers

_src/_assets/styles/bigchain/_menus.scss

@@ -59,7 +59,6 @@
 
     svg {
         @extend .transition;
-        fill: #fff;
         opacity: .8;
     }
 

_src/_assets/styles/bigchain/_mixins/_color-overlay.scss

@@ -1,5 +1,5 @@
 
-@mixin color-overlay($color-from: $brand-main-blue, $color-to: $brand-main-violet) {
+@mixin color-overlay($color-from: $brand-main-blue, $color-to: $brand-main-green) {
     position: relative;
 
     // color overlay

_src/_assets/styles/bigchain/_variables.scss

@@ -10,7 +10,7 @@
 $brand-main-blue:         #074354 !default;
 $brand-main-blue-light:   #BFE6EC !default;
 $brand-main-blue-dark:    #101A25 !default;
-$brand-main-violet:       #d37cd3 !default;
+$brand-main-green:        #54C695 !default;
 $brand-main-gray:         #70859B !default;
 
 $gray-darker:             darken($brand-main-gray, 25%) !default;
@@ -20,7 +20,7 @@ $gray-light:              lighten($brand-main-gray, 20%) !default;
 $gray-lighter:            lighten($brand-main-gray, 30%) !default;
 $gray-lightest:           lighten($brand-main-gray, 40%) !default;
 
-$brand-primary:           $brand-main-violet !default;
+$brand-primary:           $brand-main-green !default;
 $brand-success:           #388250 !default;
 $brand-info:              #3E91CE !default;
 $brand-warning:           #8E8E24 !default;

_src/_assets/styles/page-styleguide.scss

@@ -44,7 +44,7 @@
 .brand-main-blue-light  { background: $brand-main-blue-light }
 .brand-main-blue-dark   { background: $brand-main-blue-dark }
 .brand-main-gray        { background: $brand-main-gray }
-.brand-main-violet      { background: $brand-main-violet }
+.brand-main-green       { background: $brand-main-green }
 
 .gray-darker            { background: $gray-darker }
 .gray-dark              { background: $gray-dark }

_src/_data/colors.yml

@@ -3,16 +3,18 @@
 # Primary
 #
 primary:
+    - name: brand-main-green
+      hex: 54C695
+    - name: gray-dark
+      hex: 445261
+    - name: brand-main-gray
+      hex: 70859B
     - name: brand-main-blue
-      hex: 275B82
-    - name: brand-main-violet
-      hex: d37cd3
+      hex: 074354
     - name: brand-main-blue-dark
       hex: 101A25
     - name: brand-main-blue-light
       hex: BFE6EC
-    - name: brand-main-gray
-      hex: 70859B
 
 
 #

_src/_includes/hero-video.html

@@ -5,7 +5,7 @@
     <div class="hero__content hero-video__content row">
 
         <hgroup>
-            <svg class="logo logo--full" aria-labelledby="title">
+            <svg class="logo logo--full logo--white--green" aria-labelledby="title">
                 <title>Logo</title>
                 <use xlink:href="/assets/img/sprite.svg#logo"></use>
             </svg>

_src/_includes/menu-main.html

@@ -4,7 +4,7 @@
         <div class="grid grid--full grid-medium--columns grid--center">
             <div class="grid__col grid__col--1">
                 <a class="menu__logo" href="/">
-                    <svg class="logo logo--sm" aria-labelledby="title">
+                    <svg class="logo logo--sm logo--white--green" aria-labelledby="title">
                         <title>Logo</title>
                         <use xlink:href="/assets/img/sprite.svg#logo"></use>
                     </svg>