diff --git a/public/index.html b/public/index.html
index 90d1bea..cc922b0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,13 +12,13 @@
       <h1>intelly</h1>
       <nav>
         <ul class="site-nav">
-          <li>HOME</li>
-          <li>PAGES</li>
-          <li>BLOG</li>
-          <li>PORTFOLIO</li>
-          <li>SHORTCODES</li>
-          <li>FEATURES</li>
-          <li>CONTACT</li>
+          <li>Home</li>
+          <li>Pages</li>
+          <li>Blog</li>
+          <li>Portfolio</li>
+          <li>Shortcodes</li>
+          <li>Features</li>
+          <li>Contact</li>
         </ul>
       </nav>
     </header>
@@ -27,23 +27,23 @@ <h1>intelly</h1>
       <header>
         <h1>Blog</h1>
         <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam, ligula ut lacinia sollicitudin, orci ex mollis ante, eget fringilla tellus nisi non justo. Aenean egestas sollicitudin magna, vitae tincidunt risus gravida blandit. Proin ultricies elit sapien, commodo efficitur tortor fermentum at.</h2>
-      </header>
 
-      <div>
         <div>
-          <ul>
-            <li>HOME</li>
-            <li>BLOG</li>
+          <div>
+            <ul>
+              <li>Home</li>
+              <li>Blog</li>
+            </ul>
+          </div>
+          <ul class="l-social-media-share">
+            <li>share</li>
+            <li><a class="social-media-share icon-twitter"></a></li>
+            <li><a class="social-media-share icon-facebook"></a></li>
+            <li><a class="social-media-share icon-google-plus"></a></li>
+            <li><a class="social-media-share icon-pinterest"></a></li>
           </ul>
         </div>
-        <ul class="social-media-share">
-          <li>share</li>
-          <li class="icon-a"><span class="social-media-share-backing"></span></li>
-          <li class="icon-b"><span class="social-media-share-backing"></span></li>
-          <li class="icon-c"><span class="social-media-share-backing"></span></li>
-          <li class="icon-d"><span class="social-media-share-backing"></span></li>
-        </ul>
-      </div>
+      </header>
 
       <div class="posts">
         <article> <!-- dynamically repeated articles exampled-->
@@ -55,7 +55,7 @@ <h1>Blog post</h1>
               <li>date</li>
               <li>comments</li>
             </ul>
-            <button>READ MORE</button>
+            <a class="button">Read More</a>
           </div>
         </article> <!-- dynamically repeated articles -->
 
@@ -67,8 +67,8 @@ <h1>Serene in their assurance of their empire over matter</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam, ligula ut lacinia sollicitudin, orci ex mollis ante, eget fringilla tellus nisi non justo. Aenean egestas sollicitudin magna, vitae tincidunt risus gravida blandit. Proin ultricies elit sapien, commodo efficitur tortor fermentum at.</p>
         </header>
         <div>
-          <button>contact</button>
-          <button>learn more</button>
+          <a class="button">Contact</a>
+          <a class="button">Learn More</a>
         </div>
       </footer> <!-- contact -->
 
@@ -81,16 +81,16 @@ <h1>Serene in their assurance of their empire over matter</h1>
         <span>email</span>
       </div>
       <div class="social-media-contact">
-        <span>icon one</span>
-        <span>icon two</span>
-        <span>icon three</span>
+        <div><p class="">icon one</div>
+        <div>icon two</div>
+        <div>icon three</div>
       </div>
       <small>
-        <span>copyright</span>
-        <span>TERMS OF USE</span>
-        <span>PRIVACY POLICY</span>
-        <span>CONTACT</span>
-        <span>SUPPORT</span>
+        <span>© 2014 Intelly, LLC</span>
+        <span>Terms of Use</span>
+        <span>Privacy Policy</span>
+        <span>Contact</span>
+        <span>Support</span>
       </small>
     </footer>
 
diff --git a/sass/utils/_variables.scss b/sass/utils/_variables.scss
index 5e8f241..503576d 100644
--- a/sass/utils/_variables.scss
+++ b/sass/utils/_variables.scss
@@ -5,3 +5,9 @@ $icons:
 (linkedin2 "\e603")
 (pinterest "\e604")
 (pinterest2 "\e605");
+
+$color-background: #ffffff;            // white
+$color-high-contrast: #1e1d24;         // off black
+$color-low-contrast: #b4b3b5;          // light grey
+$color-highlight: #97f1e7;             // aqua
+$color-highlight-contrast: #5a8785     // dark grey