A CodePen by Lenny Sirivong.

index.haml

.row
  %h2 Utility Links
.row.example
  %ul.utility-links.nav
    %li
      %a(href="#public-info") Public Information
    %li
      %a(href="#client-gateway") Client Gateway
    %li
      %a(href="#member-gateway") Member Gateway
    %li
      %form.search-form
        %input(type="text" placeholder="Search")
        %button(value="submit") Search
.row
  %h2 Primary Nav
.row.example
  .header
    %ul.primary.nav
      %li
        %h1
          %a(href="home") Foth
      %li
        %a.active(href="#project-profiles") Project Profiles
      %li
        %a(href="#infrastructure-environment") Infrastructure & Environment
      %li
        %a(href="#production-solutions") Production Solutions
      %li
        %a(href="#about") About Foth
      %li
        %a(href="#careers") Careers
.row
  %h2 Buttons
.row.example
  %a.btn(href="#") Submit
.row
  %h2 Spotlight Box
.row.example
  .spotlight-box(style="padding: 20px; margin: 20px")
    Hello World!
.row
  %h2 Footer
.row.example
  .footer
    %ul.nav
      %li
        %a(href="#contact-us") Contact Us
      %li
        %a(href="#site-map") Site Map
      %li
        %a(href="#privacy-policy-terms-conditions") Privacy Policy/Terms & Conditions
      %li
        %a.social.linkedin(href="#linked-in") LinkedIn
      %li
        %a.social.facebook(href="#facebook") Facebook
      %li
        %a.social.twitter(href="#twitter") Twitter
      %li
        %a.social.youtube(href="#you-tube") YouTube
.row
  %h2 Mini Spotlight
.row.example
  .mini-spotlight
    .mini-spotlight-title Infrastructure & Environment
    .mini-spotlight-copy Mauris hendrerit, nisi vitae sodales pellentesque, ipsum elit consequat ipsum, vitae viverra eros elit a tortor. Donec ac tortor.
    %a.button(href="mini-spotlightlink") Learn More

style.scss

@import "compass";
$accent: #008a79;
$accent-alt: #00678f;
$utility-link-hover-color: #fff;
$utility-link-hover-bg: #00678f;

$spotlight-box-bg: #fbfcfc;
$spotlight-box-inner-shadow-color: #bcbcbc;
$spotlight-box-border-color: #bcbcbc;

.nav {
  padding: 0;
  li {
    display: inline-block;
    list-style: none;
  }
}

.btn {
  display: inline-block;
  padding: .3em .4em;
  background: #083;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  &:after {
    content: ' »';
  }
}

.utility-links {
  a {
    color: $accent;
    text-decoration: none;
    text-transform: uppercase;
    padding: .7em .5em;
    &:hover {
      color: $utility-link-hover-color;
      background: $utility-link-hover-bg;
    }
  }
}

.search-form {
  background: $accent;
  input[type="text"] {
    margin: 4px 3px 2px;
    border: none;
    padding: 1px 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 0 2px rgba(0, 0, 0, .3);
    border-radius: 0;
  }
  button {
    border: none;
    background: transparent;
    text-indent: -9999px;
    overflow: hidden;
    width: 20px;
  }
}


.spotlight-box {
  background: $spotlight-box-bg;
  box-shadow: inset -2px 0 20px #BCBCBC,
    1px 1px 2px #C9C9C9;
  border: 1px solid $spotlight-box-border-color;
  border-radius: 2px;
}

.primary.nav {
  border: 6px solid $accent-alt;
  border-left: none;
  border-right: none;
  box-shadow: inset 0 14px 8px -8px rgba(0, 0, 0, .17), inset 0 -14px 8px -8px rgba(0, 0, 0, .17);
  h1 {
    display: inline-block;
    margin: 0;
    margin-left: -30px;
    // reset font size so sizing is same as <a>s
    font-size: 1em;
    font-weight: normal;
    //background: url(logo.png);
  }
  // fix inline-block spacing
  font-size: 0;
  a {
    font-size: 16px;
  }
  a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    padding: 60px 10px 20px;
    &:hover, &.active {
      background: #ffd400;
    }
  }
}

.footer {
  a {
    color: #636363;
  }
}

.social {
  display: inline-block;
  background: #aaa;
  text-indent: -9999px;
  width: 1.2em;
  height: 1.2em;
  &.twitter {
    background: #a00;
    &:hover {
      background: #f00;
    }
  }
  &.facebook {
    background: #0a0;
    &:hover {
      background: #0f0;
    }
  }
  &.linkedin {
    background: #aa0;
    &:hover {
      background: #ff0;
    }
  }
  &.youtube {
    background: #0aa;
    &:hover {
      background: #0ff;
    }
  }
}