more balanced visual hierarchy of section title, description, content

_src/_assets/styles/bigchain/_buttons.scss

@@ -5,6 +5,7 @@
 //
 
 .btn {
+    @extend .transition;
     display: inline-block;
     font-family: $btn-font-family;
     font-weight: $btn-font-weight;
@@ -15,8 +16,8 @@
     cursor: pointer;
     user-select: none;
     border: 1px solid transparent;
-    @include button-size($btn-padding-y, $btn-padding-x, $font-size-sm, $line-height, $btn-border-radius);
+    @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
-    transition: all .2s ease-in-out;
+    min-width: 10rem;
 
     &,
     &:active,

_src/_assets/styles/bigchain/_grid.scss

@@ -38,8 +38,8 @@
 .row {
     max-width: 50em;
     margin: auto;
-    padding-left: $gutter-space;
+    padding-left: ($gutter-space / 2);
-    padding-right: $gutter-space;
+    padding-right: ($gutter-space / 2);
 }
 
 

_src/_assets/styles/bigchain/_sections.scss

@@ -40,24 +40,29 @@
     margin-top: 0;
     margin-bottom: ($spacer * 2);
 
+    @media ($screen-sm) {
+        font-size: $font-size-h2;
+    }
+
+    // the bottom line
     &:after {
         content: "";
         height: 2px;
         width: 5rem;
         display: block;
         margin: ($spacer * 2) auto 0 auto;
-        background: lighten($brand-main-gray, 30%);
+        background: $gray-lighter;
-    }
-
-    @media ($screen-sm) {
-        font-size: $font-size-h2;
     }
 }
 
 .section-description {
-    color: $text-color;
+    color: $headings-color;
     margin-bottom: 0;
 
+    @media ($screen-sm) {
+        font-size: $font-size-lg;
+    }
+
     + .section-description {
         margin-top: $spacer;
     }

_src/_assets/styles/bigchain/_variables.scss

@@ -16,11 +16,11 @@ $brand-main-gray:         #70859B !default;
 $brand-main-brown:        #B56D00 !default;
 $brand-main-light:        #FFFFFF !default;
 
-$gray-dark:               #373a3c !default;
+$gray-dark:               darken($brand-main-gray, 20%) !default;
 $gray:                    $brand-main-gray !default;
-$gray-light:              #818a91 !default;
+$gray-light:              lighten($brand-main-gray, 20%) !default;
-$gray-lighter:            #eceeef !default;
+$gray-lighter:            lighten($brand-main-gray, 30%) !default;
-$gray-lightest:           #f7f7f9 !default;
+$gray-lightest:           lighten($brand-main-gray, 40%) !default;
 
 $brand-primary:           $brand-main-blue !default;
 $brand-success:           #388250 !default;
@@ -68,7 +68,7 @@ $headings-color:            $brand-main-gray !default;
 // Scaffolding
 //
 $body-bg:                   #fff !default;
-$text-color:                $brand-main-blue-dark !default;
+$text-color:                $gray-dark !default;
 
 $link-color:                $brand-main-brown !default;
 $link-hover-color:          darken($link-color, 15%) !default;
@@ -166,7 +166,7 @@ $input-bg:                       rgba(255,255,255,.1) !default;
 $input-bg-disabled:              $gray-lighter !default;
 
 $input-color:                    $gray !default;
-$input-border-color:             #ccc !default;
+$input-border-color:             $gray-lighter !default;
 
 $input-border-focus:             #66afe9 !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;

_src/index.html

@@ -26,28 +26,28 @@ front_page: true
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Key Features</h1>
+            <p class="section-description">Something like a value proposition also would fit here, just something to explain what exactly Bigchain is, what I can do with it and so on.</p>
         </header>
-        <div class="section-description">
+
-            <div class="grid grid--full grid-small--fit grid--gutters">
+        <div class="grid grid--full grid-small--fit grid--gutters">
-                <p class="grid__col">
+            <p class="grid__col">
-                    <svg class="icon">
+                <svg class="icon">
-                        <use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
+                    <use xlink:href="/assets/img/sprite.svg#icon-graph"></use>
-                    </svg>
+                </svg>
-                    100,000 transactions per second and climbing
+                100,000 transactions per second and climbing
-                </p>
+            </p>
-                <p class="grid__col">
+            <p class="grid__col">
-                    <svg class="icon">
+                <svg class="icon">
-                        <use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
+                    <use xlink:href="/assets/img/sprite.svg#icon-servers"></use>
-                    </svg>
+                </svg>
-                    Petabyte Capacity
+                Petabyte Capacity
-                </p>
+            </p>
-                <p class="grid__col">
+            <p class="grid__col">
-                    <svg class="icon">
+                <svg class="icon">
-                        <use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
+                    <use xlink:href="/assets/img/sprite.svg#icon-tree"></use>
-                    </svg>
+                </svg>
-                    Open Source
+                Open Source
-                </p>
+            </p>
-            </div>
         </div>
     </div>
 </section>
@@ -56,12 +56,13 @@ front_page: true
     <div class="row">
         <header class="section-header">
             <h1 class="section-title">Whitepaper</h1>
-            <p class="section-description">Coming soon</p>
+            <p class="section-description">Create excitement by saying here what the whitepaper will contain and why visitors would want it.<p>
         </header>
 
         <svg class="icon">
             <use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
         </svg>
+        <p class="text-center">Coming soon</p>
     </div>
 </section>