A Pen by Jason Calleiro.

index.html

<script type="text/javascript" src="//use.typekit.net/phd6kdh.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<section class="text">
  <h1>h1 Pop Brand & Site Colors</h1>
  <h2 class="subtitle">h2 Brand colors</h2>
  <h3>h3 Brand colors</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis molestias dicta incidunt eum exercitationem ab nihil culpa inventore accusantium suscipit laborum quaerat nisi dolorum cupiditate quibusdam blanditiis ad! Libero in.</p>
  
  <small class="subtitle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente numquam iste nihil laborum omnis vero placeat sed possimus voluptatibus id? Quas illo nesciunt beatae nam deleniti voluptatum provident blanditiis natus.
  </small>
</section>


<div class="color color-red">
    
</div>
<div class="color color-blue">
    
</div>
<div class="color color-primary">
    
</div>
<div class="color color-secondary">
    
</div>

POP-Brand.markdown

POP Brand

A Pen by Jason Calleiro on CodePen.

License.

style.less

@pop-background: #F2F2F4;
@pop-red: #E5454A;
@pop-blue: #2C8C91;
@pop-primary: #2E2E2E;
@pop-secondary: #949494;



.subtitle { color: @pop-secondary }

.color {
  height: 100px;
  width: 100%;
  
  &.color-red {
    background: @pop-red;
  }
  
  &.color-blue {
    background: @pop-blue;
  }
  
  &.color-primary {
    background: @pop-primary;
  }
  
  &.color-secondary {
    background: @pop-secondary;
  }
}

/* Type */
body { 
  font-family: proxima-nova, sans-serif;
  background: #F2F2F4;
  color: #333;
  margin: 20px;
}

/* 12px */
small {
    font-size: 0.8571em;
    line-height: 1.5000em;
    margin-top: 1.5000em;
    margin-bottom: 0.0000em;
}

/* 14px */
p {
    font-size: 1em;
    line-height: 1.2857em;
    margin: 0 0 1.2857em 0;
}

/* 32px */
h1 {
    font-size: 2.2857em;
    line-height: 1.1250em;
    margin-top: 0.5625em;
    margin-bottom: 0.0000em;
    text-transform: uppercase;
}

/* 18 */
h2 {
    font-size: 1.2857em;
    line-height: 1.0000em;
    margin-top: 1.0000em;
    margin-bottom: 0.0000em;
  
}

/* 16 */
h3 {
    font-size: 1.1429em;
    line-height: 1.1250em;
    margin-top: 1.1250em;
    margin-bottom: 0.0000em;
    text-transform: uppercase;
}