RPbmvE

index.html

<div class="ui-container">
  <h1 class="bold">
    <span class="light">IBM</span> Bluemix
  </h1>
  <h2 class="bold">
    <span class="light">IBM</span> Bluemix
  </h2>
  <h3 class="bold">
    <span class="light">IBM</span> Bluemix
  </h3>
  <h4 class="bold">
    <span class="light">IBM</span> Bluemix
  </h4>
  <h5 class="bold">
    <span class="light">IBM</span> Bluemix
  </h5>
  <h6 class="bold">
    <span class="light">IBM</span> Bluemix
  </h6>
  <p class="bold">
    <span class="light">IBM</span> Bluemix
  </p>
</div>

RPbmvE.markdown

RPbmvE

A Pen by Brian Han on CodePen.

License.

style.scss

%helvetica {
  font-family: HelveticaNeue, Helvetica Neue, Helvetica, sans-serif;
}

%helvetica-light {
  @extend %helvetica;
  font-weight: 200;
}

%helvetica-bold {
  @extend %helvetica;
  font-weight: 700;
}

%font-smoothing {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* letter-spacing: .01em; */
  letter-spacing: 1px;
}

$modified-blue-70: #2d3f4a;
$ibm-cool-grey-4: #ecf0f2;
$dark-interface: $modified-blue-70;
$text-on-dark-interface: $ibm-cool-grey-4;
.ui-container {
  background-color: $dark-interface;
}
.bold {
  color: $text-on-dark-interface;
  @extend %helvetica-bold;
  @extend %font-smoothing;
  .light {
    @extend %helvetica-light;
  }
}