Introduction

Purple3 is a CSS framework to build and style Heroku products. Purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience for our customers. This is a living document and is under constant iteration.

Usage

Purple3 can be included via our CDN. Place the following in the <head> of your application:

<link rel='stylesheet' href='https://www.herokucdn.com/purple3/latest/purple3.min.css'>

This site contains overview documentation for the most prominent features of Purple3. For complete documentation, please see the list of modules on Github.

Principles

Purple3 is built upon a functional CSS system called Tachyons and PostCSS. You may want to keep a link to the Tachyons documentation pages, probably either Table of Properties or Table of Styles.

The idea of functional CSS is that it exposes a vast amount of atomic classes which do one thing and one thing only. The combination of these classes allows us to build and maintain complex interfaces amid a constantly evolving technological landscape.

This is in stark contrast to CSS frameworks like Bootstrap (on which earlier Heroku libraries were based) which impart a lot of presumptions about how interfaces will behave into their classes.

When using functional CSS, instead of writing CSS within stylesheets you simply add classes to elements representing the styling you want. Let’s imagine the following example;

Alasdair Monk
Product designer at Heroku
Email Twitter

Previously, we might create an avatar-card.css file for this new element, and write a bunch of CSS to style this element as well as some HTML to render.

However with Purple3 there is no need to write any CSS whatsoever. We can markup the entire UI in HTML like so;

<div class='bg-white shadow-outer-1 br2 flex flex-column items-center pv3'>
  <img class='br-100 w3 h3' src='http://placehold.it/30x30.png' alt='' />
  <div class='f4 mt2 mb1'>Alasdair Monk</div>
  <div class='gray'>Product designer at Heroku</div>
  <div class='flex mt2'>
    <a href='#' class='link purple ph2 pv1 ba b--light-purple br1 mr2'>Email</a>
    <a href='#' class='link purple ph2 pv1 ba b--light-purple br1'>Twitter</a>
  </div>
</div>

All of the class names used above generally correspond to a single CSS property. For e,g, .flex corresponds to display: flex}, .b--light-purple would be {border-color: var(--light-purple)}.

Helper classes

Of course, there are times when we don’t wish to apply a handful of classes to an HTML element just to create a common and uniform component. For this case, Purple3 exposes a set of helper classes which wrap their underlying atomic classes for convenience.

For example, you can create a primary button with the .hk-button—primary class, which is merely a wrapper for the classes .tc .link .br1 .f5 .ph3 .fw6 .b--none .nowrap .hk-focus-ring .cursor-hand .bg-gradient-primary .white, phew!

Buttons, tabs, inputs and other basic HMTL elements are perfect contenders for helper classes because they don’t make many assumptions about how they are used in context. The beauty of the system is, if you want to create a button not supported by helper classes like a blue button or a large button you can take the underlying classes and build up the element in anyway you see fit.

Our helper classes are outlined in detail in the Helpers section.</p>

When to write CSS

Of course, using Purple3 & functional CSS doesn’t mean you’ll never have to write CSS again. Writing CSS should be done when you need very custom styling for an interface.

Reference

Background Colors

.bg-black
<div class="bg-black pv3 db mb2 mw5"></div>
.bg-near-black
<div class="bg-near-black pv3 db mb2 mw5"></div>
.bg-dark-gray
<div class="bg-dark-gray pv3 db mb2 mw5"></div>
.bg-mid-gray
<div class="bg-mid-gray pv3 db mb2 mw5"></div>
.bg-gray
<div class="bg-gray pv3 db mb2 mw5"></div>
.bg-light-gray
<div class="bg-light-gray pv3 db mb2 mw5"></div>
.bg-silver
<div class="bg-silver pv3 db mb2 mw5"></div>
.bg-light-silver
<div class="bg-light-silver pv3 db mb2 mw5"></div>
.bg-lightest-silver
<div class="bg-lightest-silver pv3 db mb2 mw5"></div>
.bg-near-white
<div class="bg-near-white pv3 db mb2 mw5"></div>
.bg-white
<div class="bg-white pv3 db mb2 mw5"></div>
.bg-none
<div class="bg-none pv3 db mb2 mw5"></div>
.bg-transparent
<div class="bg-transparent pv3 db mb2 mw5"></div>
.bg-dark-purple
<div class="bg-dark-purple pv3 db mb2 mw5"></div>
.bg-purple
<div class="bg-purple pv3 db mb2 mw5"></div>
.bg-light-purple
<div class="bg-light-purple pv3 db mb2 mw5"></div>
.bg-lightest-purple
<div class="bg-lightest-purple pv3 db mb2 mw5"></div>
.bg-dark-blue
<div class="bg-dark-blue pv3 db mb2 mw5"></div>
.bg-blue
<div class="bg-blue pv3 db mb2 mw5"></div>
.bg-light-blue
<div class="bg-light-blue pv3 db mb2 mw5"></div>
.bg-lightest-blue
<div class="bg-lightest-blue pv3 db mb2 mw5"></div>
.bg-dark-green
<div class="bg-dark-green pv3 db mb2 mw5"></div>
.bg-green
<div class="bg-green pv3 db mb2 mw5"></div>
.bg-light-green
<div class="bg-light-green pv3 db mb2 mw5"></div>
.bg-lightest-green
<div class="bg-lightest-green pv3 db mb2 mw5"></div>
.bg-dark-red
<div class="bg-dark-red pv3 db mb2 mw5"></div>
.bg-red
<div class="bg-red pv3 db mb2 mw5"></div>
.bg-light-red
<div class="bg-light-red pv3 db mb2 mw5"></div>
.bg-lightest-red
<div class="bg-lightest-red pv3 db mb2 mw5"></div>
.bg-dark-orange
<div class="bg-dark-orange pv3 db mb2 mw5"></div>
.bg-orange
<div class="bg-orange pv3 db mb2 mw5"></div>
.bg-light-orange
<div class="bg-light-orange pv3 db mb2 mw5"></div>
.bg-lightest-orange
<div class="bg-lightest-orange pv3 db mb2 mw5"></div>

Background gradients

.bg-gradient-primary
<div class="bg-gradient-primary pv3 db mb2 mw5"></div>
.bg-gradient-secondary
<div class="bg-gradient-secondary pv3 db mb2 mw5"></div>
.bg-gradient-light-gray
<div class="bg-gradient-light-gray pv3 db mb2 mw5"></div>
.bg-gradient-gray
<div class="bg-gradient-gray pv3 db mb2 mw5"></div>
.bg-gradient-dark-gray
<div class="bg-gradient-dark-gray pv3 db mb2 mw5"></div>
.bg-gradient-silver
<div class="bg-gradient-silver pv3 db mb2 mw5"></div>
.bg-gradient-blue
<div class="bg-gradient-blue pv3 db mb2 mw5"></div>
.bg-gradient-green
<div class="bg-gradient-green pv3 db mb2 mw5"></div>
.bg-gradient-red
<div class="bg-gradient-red pv3 db mb2 mw5"></div>
.bg-gradient-orange
<div class="bg-gradient-orange pv3 db mb2 mw5"></div>

Background - Black opacity

.bg-black-90
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-90 pv3 db mw5"></div>
</div>
.bg-black-80
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-80 pv3 db mw5"></div>
</div>
.bg-black-70
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-70 pv3 db mw5"></div>
</div>
.bg-black-60
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-60 pv3 db mw5"></div>
</div>
.bg-black-50
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-50 pv3 db mw5"></div>
</div>
.bg-black-40
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-40 pv3 db mw5"></div>
</div>
.bg-black-30
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-30 pv3 db mw5"></div>
</div>
.bg-black-20
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-20 pv3 db mw5"></div>
</div>
.bg-black-10
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-10 pv3 db mw5"></div>
</div>
.bg-black-05
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-05 pv3 db mw5"></div>
</div>
.bg-black-025
<div class="bg-light-gray w-100 pa2">
  <div class="bg-black-025 pv3 db mw5"></div>
</div>

Background - Gray opacities

.bg-gray-90
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-90 pv3 db mw5"></div>
</div>
.bg-gray-80
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-80 pv3 db mw5"></div>
</div>
.bg-gray-70
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-70 pv3 db mw5"></div>
</div>
.bg-gray-60
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-60 pv3 db mw5"></div>
</div>
.bg-gray-50
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-50 pv3 db mw5"></div>
</div>
.bg-gray-40
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-40 pv3 db mw5"></div>
</div>
.bg-gray-30
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-30 pv3 db mw5"></div>
</div>
.bg-gray-20
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-20 pv3 db mw5"></div>
</div>
.bg-gray-10
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-10 pv3 db mw5"></div>
</div>
.bg-gray-05
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-05 pv3 db mw5"></div>
</div>
.bg-gray-025
<div class="bg-light-gray w-100 pa2">
  <div class="bg-gray-025 pv3 db mw5"></div>
</div>
.bg-mid-gray-90
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-90 pv3 db mw5"></div>
</div>
.bg-mid-gray-80
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-80 pv3 db mw5"></div>
</div>
.bg-mid-gray-70
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-70 pv3 db mw5"></div>
</div>
.bg-mid-gray-60
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-60 pv3 db mw5"></div>
</div>
.bg-mid-gray-50
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-50 pv3 db mw5"></div>
</div>
.bg-mid-gray-40
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-40 pv3 db mw5"></div>
</div>
.bg-mid-gray-30
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-30 pv3 db mw5"></div>
</div>
.bg-mid-gray-20
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-20 pv3 db mw5"></div>
</div>
.bg-mid-gray-10
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-10 pv3 db mw5"></div>
</div>
.bg-mid-gray-05
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-05 pv3 db mw5"></div>
</div>
.bg-mid-gray-025
<div class="bg-light-gray w-100 pa2">
  <div class="bg-mid-gray-025 pv3 db mw5"></div>
</div>

Background - White opacity

.bg-white-90
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-90 pv3 db mw5"></div>
</div>
.bg-white-80
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-80 pv3 db mw5"></div>
</div>
.bg-white-70
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-70 pv3 db mw5"></div>
</div>
.bg-white-60
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-60 pv3 db mw5"></div>
</div>
.bg-white-50
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-50 pv3 db mw5"></div>
</div>
.bg-white-40
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-40 pv3 db mw5"></div>
</div>
.bg-white-30
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-30 pv3 db mw5"></div>
</div>
.bg-white-20
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-20 pv3 db mw5"></div>
</div>
.bg-white-10
<div class="bg-light-gray w-100 pa2">
  <div class="bg-white-10 pv3 db mw5"></div>
</div>

Helper gradients

.bg-transparent-squares
<div class="bg-transparent-squares pv3 db mw5"></div>

Background Position

.bg-center
<div class="h5 bg-silver bg-center" style="background-image: url(//placehold.it/50x50);"></div>
.bg-top
<div class="h5 bg-silver bg-top" style="background-image: url(//placehold.it/50x50);"></div>
.bg-right
<div class="h5 bg-silver bg-right" style="background-image: url(//placehold.it/50x50);"></div>
.bg-bottom
<div class="h5 bg-silver bg-bottom" style="background-image: url(//placehold.it/50x50);"></div>
.bg-left
<div class="h5 bg-silver bg-left" style="background-image: url(//placehold.it/50x50);"></div>

Background Size

.cover
<div class="h5 bg-silver bg-center cover" style="background-image: url(//placehold.it/300x300);"></div>
.contain
<div class="h5 bg-silver bg-center contain" style="background-image: url(//placehold.it/300x300);"></div>
.bg--clip
<div class="h5 bg-silver bg-center bg--clip" style="background-image: url(//placehold.it/300x300);"></div>

Badges

.hk-badge
Badge 
<span class="hk-badge">Badge</span>
.hk-badge--square
Badge 
<span class="hk-badge--square">Badge</span>
.hk-badge--outline
Badge 
<span class="hk-badge--outline">Badge</span>
.hk-badge--alpha
Alpha 
<span class="hk-badge--alpha">Alpha</span>
.hk-badge--beta
Beta 
<span class="hk-badge--beta">Beta</span>
.hk-badge--new
New! 
<span class="hk-badge--new">New!</span>
.hk-badge--code
12dd0f2a 
<span class="hk-badge--code">12dd0f2a</span>

Banners

.hk-banner--generic
Banner title
Additional text to give context
<div class="hk-banner--generic flex">
  <div class="flex-auto">
    <div class="b">Banner title</div>
    <div>Additional text to give context</div>
  </div>
</div>
.hk-banner--info
Banner title
Additional text to give context
<div class="hk-banner--info flex">
  <div class="flex-auto">
    <div class="b">Banner title</div>
    <div>Additional text to give context</div>
  </div>
</div>
.hk-banner--success
Banner title
Additional text to give context
<div class="hk-banner--success flex">
  <div class="flex-auto">
    <div class="b">Banner title</div>
    <div>Additional text to give context</div>
  </div>
</div>
.hk-banner--warning
Banner title
Additional text to give context
<div class="hk-banner--warning flex">
  <div class="flex-auto">
    <div class="b">Banner title</div>
    <div>Additional text to give context</div>
  </div>
</div>
.hk-banner--danger
Banner title
Additional text to give context
<div class="hk-banner--danger flex">
  <div class="flex-auto">
    <div class="b">Banner title</div>
    <div>Additional text to give context</div>
  </div>
</div>

Border Colors

Standard

.b--black
<div class="b--black ba pv3 db mb2 mw5"></div>
.b--near-black
<div class="b--near-black ba pv3 db mb2 mw5"></div>
.b--dark-gray
<div class="b--dark-gray ba pv3 db mb2 mw5"></div>
.b--mid-gray
<div class="b--mid-gray ba pv3 db mb2 mw5"></div>
.b--gray
<div class="b--gray ba pv3 db mb2 mw5"></div>
.b--light-gray
<div class="b--light-gray ba pv3 db mb2 mw5"></div>
.b--silver
<div class="b--silver ba pv3 db mb2 mw5"></div>
.b--light-silver
<div class="b--light-silver ba pv3 db mb2 mw5"></div>
.b--near-white
<div class="b--near-white ba pv3 db mb2 mw5"></div>
.b--white
<div class="b--white ba pv3 db mb2 mw5"></div>
.b--dark-purple
<div class="b--dark-purple ba pv3 db mb2 mw5"></div>
.b--purple
<div class="b--purple ba pv3 db mb2 mw5"></div>
.b--light-purple
<div class="b--light-purple ba pv3 db mb2 mw5"></div>
.b--lightest-purple
<div class="b--lightest-purple ba pv3 db mb2 mw5"></div>
.b--dark-blue
<div class="b--dark-blue ba pv3 db mb2 mw5"></div>
.b--blue
<div class="b--blue ba pv3 db mb2 mw5"></div>
.b--light-blue
<div class="b--light-blue ba pv3 db mb2 mw5"></div>
.b--lightest-blue
<div class="b--lightest-blue ba pv3 db mb2 mw5"></div>
.b--dark-green
<div class="b--dark-green ba pv3 db mb2 mw5"></div>
.b--green
<div class="b--green ba pv3 db mb2 mw5"></div>
.b--light-green
<div class="b--light-green ba pv3 db mb2 mw5"></div>
.b--lightest-green
<div class="b--lightest-green ba pv3 db mb2 mw5"></div>
.b--dark-red
<div class="b--dark-red ba pv3 db mb2 mw5"></div>
.b--red
<div class="b--red ba pv3 db mb2 mw5"></div>
.b--light-red
<div class="b--light-red ba pv3 db mb2 mw5"></div>
.b--lightest-red
<div class="b--lightest-red ba pv3 db mb2 mw5"></div>
.b--dark-orange
<div class="b--dark-orange ba pv3 db mb2 mw5"></div>
.b--orange
<div class="b--orange ba pv3 db mb2 mw5"></div>
.b--light-orange
<div class="b--light-orange ba pv3 db mb2 mw5"></div>
.b--lightest-orange
<div class="b--lightest-orange ba pv3 db mb2 mw5"></div>
.b--transparent
<div class="b--transparent ba pv3 db mb2 mw5"></div>

Black opacity

.b--black-90
<div class="b--black-90 ba pv3 db mb2 mw5"></div>
.b--black-80
<div class="b--black-80 ba pv3 db mb2 mw5"></div>
.b--black-70
<div class="b--black-70 ba pv3 db mb2 mw5"></div>
.b--black-60
<div class="b--black-60 ba pv3 db mb2 mw5"></div>
.b--black-50
<div class="b--black-50 ba pv3 db mb2 mw5"></div>
.b--black-40
<div class="b--black-40 ba pv3 db mb2 mw5"></div>
.b--black-30
<div class="b--black-30 ba pv3 db mb2 mw5"></div>
.b--black-20
<div class="b--black-20 ba pv3 db mb2 mw5"></div>
.b--black-10
<div class="b--black-10 ba pv3 db mb2 mw5"></div>
.b--black-05
<div class="b--black-05 ba pv3 db mb2 mw5"></div>
.b--black-025
<div class="b--black-025 ba pv3 db mb2 mw5"></div>
.b--black-0125
<div class="b--black-0125 ba pv3 db mb2 mw5"></div>

Gray opacity

.b--gray-90
<div class="b--gray-90 ba pv3 db mb2 mw5"></div>
.b--gray-80
<div class="b--gray-80 ba pv3 db mb2 mw5"></div>
.b--gray-70
<div class="b--gray-70 ba pv3 db mb2 mw5"></div>
.b--gray-60
<div class="b--gray-60 ba pv3 db mb2 mw5"></div>
.b--gray-50
<div class="b--gray-50 ba pv3 db mb2 mw5"></div>
.b--gray-40
<div class="b--gray-40 ba pv3 db mb2 mw5"></div>
.b--gray-30
<div class="b--gray-30 ba pv3 db mb2 mw5"></div>
.b--gray-20
<div class="b--gray-20 ba pv3 db mb2 mw5"></div>
.b--gray-10
<div class="b--gray-10 ba pv3 db mb2 mw5"></div>
.b--gray-05
<div class="b--gray-05 ba pv3 db mb2 mw5"></div>
.b--gray-025
<div class="b--gray-025 ba pv3 db mb2 mw5"></div>
.b--gray-0125
<div class="b--gray-0125 ba pv3 db mb2 mw5"></div>

White opacity

.b--white-90
<div class="bg-black w-100 pa2">
  <div class="b--white-90 ba pv3 db mw5"></div>
</div>
.b--white-80
<div class="bg-black w-100 pa2">
  <div class="b--white-80 ba pv3 db mw5"></div>
</div>
.b--white-70
<div class="bg-black w-100 pa2">
  <div class="b--white-70 ba pv3 db mw5"></div>
</div>
.b--white-60
<div class="bg-black w-100 pa2">
  <div class="b--white-60 ba pv3 db mw5"></div>
</div>
.b--white-50
<div class="bg-black w-100 pa2">
  <div class="b--white-50 ba pv3 db mw5"></div>
</div>
.b--white-40
<div class="bg-black w-100 pa2">
  <div class="b--white-40 ba pv3 db mw5"></div>
</div>
.b--white-30
<div class="bg-black w-100 pa2">
  <div class="b--white-30 ba pv3 db mw5"></div>
</div>
.b--white-20
<div class="bg-black w-100 pa2">
  <div class="b--white-20 ba pv3 db mw5"></div>
</div>
.b--white-10
<div class="bg-black w-100 pa2">
  <div class="b--white-10 ba pv3 db mw5"></div>
</div>

Border Radius

Standard

.br0
<div class="br0 ba h3 w3 db mb2"></div>
.br1
<div class="br1 ba h3 w3 db mb2"></div>
.br2
<div class="br2 ba h3 w3 db mb2"></div>
.br3
<div class="br3 ba h3 w3 db mb2"></div>
.br4
<div class="br4 ba h3 w3 db mb2"></div>

Circular

.br-100
<div class="br-100 ba h3 w3 db mb2"></div>

Pill

.br-pill
<div class="br-pill ba h3 w5 db mb2"></div>

Asymetric radii

.br--bottom
<div class="br--bottom ba br2 h3 w5 db mb2"></div>
.br--top
<div class="br--top ba br2 h3 w5 db mb2"></div>
.br--right
<div class="br--right ba br2 h3 w5 db mb2"></div>
.br--left
<div class="br--left ba br2 h3 w5 db mb2"></div>
.br--reset
<div class="br--reset ba br2 h3 w5 db mb2"></div>

Border Style

Standard

.b--dotted
<div class="b--dotted ba pv3 db mb2 mw5"></div>
.b--dashed
<div class="b--dashed ba pv3 db mb2 mw5"></div>
.b--solid
<div class="b--solid ba pv3 db mb2 mw5"></div>
.b--none
<div class="b--none ba pv3 db mb2 mw5"></div>

Border Widths

Standard

.bw0
<div class="bw0 ba pv3 db mb2 mw5"></div>
.bw1
<div class="bw1 ba pv3 db mb2 mw5"></div>
.bw2
<div class="bw2 ba pv3 db mb2 mw5"></div>
.bw3
<div class="bw3 ba pv3 db mb2 mw5"></div>
.bw4
<div class="bw4 ba pv3 db mb2 mw5"></div>
.bw5
<div class="bw5 ba pv3 db mb2 mw5"></div>

Borders

All

.ba
<div class="ba pv3 db mb2 mw5 bg-lightest-silver"></div>

Border top

.bt
<div class="bt pv3 db mb2 mw5 bg-lightest-silver"></div>

Border right

.br
<div class="br pv3 db mb2 mw5 bg-lightest-silver"></div>

Border bottom

.bb
<div class="bb pv3 db mb2 mw5 bg-lightest-silver"></div>

Border left

.bl
<div class="bl pv3 db mb2 mw5 bg-lightest-silver"></div>

None

.bn
<div class="bn pv3 db mb2 mw5 bg-lightest-silver"></div>

Buttons

Buttons

.hk-button--primary
<div class="flex"><button class="hk-button--primary">Lorem ipsum</button></div>
.hk-button--secondary
<div class="flex"><button class="hk-button--secondary">Lorem ipsum</button></div>
.hk-button--tertiary
<div class="flex"><button class="hk-button--tertiary">Lorem ipsum</button></div>
.hk-button--danger-primary
<div class="flex"><button class="hk-button--danger-primary">Lorem ipsum</button></div>
.hk-button--danger
<div class="flex"><button class="hk-button--danger">Lorem ipsum</button></div>
.hk-button--warning
<div class="flex"><button class="hk-button--warning">Lorem ipsum</button></div>
.hk-button--info
<div class="flex"><button class="hk-button--info">Lorem ipsum</button></div>
.hk-button--success
<div class="flex"><button class="hk-button--success">Lorem ipsum</button></div>

Small buttons

.hk-button-sm--primary
<div class="flex"><button class="hk-button-sm--primary">Lorem ipsum</button></div>
.hk-button-sm--secondary
<div class="flex"><button class="hk-button-sm--secondary">Lorem ipsum</button></div>
.hk-button-sm--tertiary
<div class="flex"><button class="hk-button-sm--tertiary">Lorem ipsum</button></div>
.hk-button-sm--danger-primary
<div class="flex"><button class="hk-button-sm--danger-primary">Lorem ipsum</button></div>
.hk-button-sm--danger
<div class="flex"><button class="hk-button-sm--danger">Lorem ipsum</button></div>
.hk-button-sm--warning
<div class="flex"><button class="hk-button-sm--warning">Lorem ipsum</button></div>
.hk-button-sm--info
<div class="flex"><button class="hk-button-sm--info">Lorem ipsum</button></div>
.hk-button-sm--success
<div class="flex"><button class="hk-button-sm--success">Lorem ipsum</button></div>

Button group

.hk-button-group
<div class="hk-button-group"><button type="button" class="hk-button--secondary">Left</button><button type="button" class="hk-button--secondary">Middle</button><button type="button" class="hk-button--secondary">Right</button></div>

Clearfix

Clearfix

.cf
<div class="cf"></div>

Clear left

.cl
<div class="cl"></div>

Clear right

.cr
<div class="cr"></div>

Clear both

.cb
<div class="cb"></div>

Clear none

.cn
<div class="cn"></div>

Code

Pre

.pre
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="pre bg-lightest-silver ba b--silver pa4 br3 code">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Coordinates

.top-0
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="top-0 h1 w1 bg-gray absolute br5"></div>
</div>
.right-0
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="right-0 h1 w1 bg-gray absolute br5"></div>
</div>
.bottom-0
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="bottom-0 h1 w1 bg-gray absolute br5"></div>
</div>
.left-0
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="left-0 h1 w1 bg-gray absolute br5"></div>
</div>
.top-1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="top-1 h1 w1 bg-gray absolute br5"></div>
</div>
.right-1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="right-1 h1 w1 bg-gray absolute br5"></div>
</div>
.bottom-1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="bottom-1 h1 w1 bg-gray absolute br5"></div>
</div>
.left-1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="left-1 h1 w1 bg-gray absolute br5"></div>
</div>
.top-2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="top-2 h1 w1 bg-gray absolute br5"></div>
</div>
.right-2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="right-2 h1 w1 bg-gray absolute br5"></div>
</div>
.bottom-2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="bottom-2 h1 w1 bg-gray absolute br5"></div>
</div>
.left-2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="left-2 h1 w1 bg-gray absolute br5"></div>
</div>
.top--1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="top--1 h1 w1 bg-gray absolute br5"></div>
</div>
.right--1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="right--1 h1 w1 bg-gray absolute br5"></div>
</div>
.bottom--1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="bottom--1 h1 w1 bg-gray absolute br5"></div>
</div>
.left--1
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="left--1 h1 w1 bg-gray absolute br5"></div>
</div>
.top--2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="top--2 h1 w1 bg-gray absolute br5"></div>
</div>
.right--2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="right--2 h1 w1 bg-gray absolute br5"></div>
</div>
.bottom--2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="bottom--2 h1 w1 bg-gray absolute br5"></div>
</div>
.left--2
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="left--2 h1 w1 bg-gray absolute br5"></div>
</div>
.absolute--fill
<div class="bg-lightest-silver ba b--silver h5 w5 relative mb4 ma4">
  <div class="absolute--fill h1 w1 bg-gray absolute br5"></div>
</div>

Cursor

.cursor-alias
<div class="cursor-alias bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-all-scroll
<div class="cursor-all-scroll bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-auto
<div class="cursor-auto bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-cell
<div class="cursor-cell bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-context-menu
<div class="cursor-context-menu bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-col-resize
<div class="cursor-col-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-copy
<div class="cursor-copy bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-crosshair
<div class="cursor-crosshair bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-default
<div class="cursor-default bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-e-resize
<div class="cursor-e-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-ew-resize
<div class="cursor-ew-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-grab
<div class="cursor-grab bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-grabbing
<div class="cursor-grabbing bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-help
<div class="cursor-help bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-move
<div class="cursor-move bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-n-resize
<div class="cursor-n-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-ne-resize
<div class="cursor-ne-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-nesw-resize
<div class="cursor-nesw-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-ns-resize
<div class="cursor-ns-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-nw-resize
<div class="cursor-nw-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-nwse-resize
<div class="cursor-nwse-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-no-drop
<div class="cursor-no-drop bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-none
<div class="cursor-none bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-not-allowed
<div class="cursor-not-allowed bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-pointer
<div class="cursor-pointer bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-hand
<div class="cursor-hand bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-progress
<div class="cursor-progress bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-row-resize
<div class="cursor-row-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-s-resize
<div class="cursor-s-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-se-resize
<div class="cursor-se-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-sw-resize
<div class="cursor-sw-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-text
<div class="cursor-text bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-URL
<div class="cursor-URL bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-vertical-text
<div class="cursor-vertical-text bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-w-resize
<div class="cursor-w-resize bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-wait
<div class="cursor-wait bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-zoom-in
<div class="cursor-zoom-in bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-zoom-out
<div class="cursor-zoom-out bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-initial
<div class="cursor-initial bg-lightest-silver ba b--silver h2 w2"></div>
.cursor-inherit
<div class="cursor-inherit bg-lightest-silver ba b--silver h2 w2"></div>

Display

Display none

.dn
<div class="dn bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display inline

.di
<div class="di bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display block

.db
<div class="db bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display inline-block

.dib
<div class="dib bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display inline-table

.dit
<div class="dit bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display table

.dt
<div class="dt bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display table-cell

.dtc
<div class="dtc bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Display table-row

.dt-row
<div class="dt-row bg-lightest-silver ba b--silver h5 w5" style="min-width: 50px;"></div>

Display table-row-group

.dt-row-group
<div class="dt-row-group bg-lightest-silver ba b--silver h5 w5" style="min-width: 50px;"></div>

Display table-column

.dt-column
<div class="dt-column bg-lightest-silver ba b--silver h5 w5" style="min-width: 50px;"></div>

Display table-column-group

.dt-column-group
<div class="dt-column-group bg-lightest-silver ba b--silver h5 w5" style="min-width: 50px;"></div>

Full width table-layout fixed

This will set table to full width and then all cells will be equal width.

.dt--fixed
<div class="dt--fixed bg-lightest-silver ba b--silver h5" style="min-width: 50px;"></div>

Flexbox

Flex container

Make a container display as flex to begin using Flexbox

.flex
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>

Flex direction

By default, flex items go in the row direction but they can also be columnular. These classes are applied to the flex container

.flex-column
<div class="bg-gray w-100 flex flex-column">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>
.flex-row
<div class="bg-gray w-100 flex flex-row">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>

Align items

Using the .items-... classes, you can change how flex items are laid out along the cross axis (as opposed to the main axis)

.items-start
<div class="bg-gray w-100 flex items-start">
  <div class="h4 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h1 w2 ma2 bg-white"></div>
</div>
.items-end
<div class="bg-gray w-100 flex items-end">
  <div class="h4 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h1 w2 ma2 bg-white"></div>
</div>
.items-center
<div class="bg-gray w-100 flex items-center">
  <div class="h4 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h1 w2 ma2 bg-white"></div>
</div>

Align items - baseline

Align baseline of children

.items-baseline
Lorem ipsum
Lorem ipsum
Lorem ipsum
<div class="bg-gray w-100 flex items-baseline">
  <div class="h4 ma2 pa2 bg-white">Lorem ipsum</div>
  <div class="h2 ma2 pa2 bg-white">Lorem ipsum</div>
  <div class="h1 ma2 pa2 bg-white">Lorem ipsum</div>
</div>

Align items - stretch

Stretch items on the cross axis

.items-stretch
<div class="bg-gray w-100 h4 flex items-stretch">
  <div class="w2 ma2 bg-white"></div>
  <div class="w2 ma2 bg-white"></div>
  <div class="w2 ma2 bg-white"></div>
</div>

Justify items

Using the .justify-... classes, you can change how flex items are laid out along the main axis

.justify-start
<div class="bg-gray w-100 flex justify-start">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>
.justify-end
<div class="bg-gray w-100 flex justify-end">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>
.justify-center
<div class="bg-gray w-100 flex justify-center">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>
.justify-between
<div class="bg-gray w-100 flex justify-between">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>
.justify-around
<div class="bg-gray w-100 flex justify-around">
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
  <div class="h2 w2 ma2 bg-white"></div>
</div>

Flex value

Setting a flex value makes the child element a set width of a parent, relative to its siblings. The flex property is a shorthand for the following properties: flex-grow, flex-shrink and flex-basis

.flex-1
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-1"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-2
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-2"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-3
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-3"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-4
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-4"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-5
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-5"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-6
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-6"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-7
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-7"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-8
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-8"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>
.flex-9
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue flex-9"></div>
  <div class="h2 w2 ma2 bg-white flex-1"></div>
</div>

Flex auto

Using the flex auto class on a child of a flex container will cause it to fill available space in the main axis, relative to its siblings

.flex-auto
<div class="bg-gray w-100 flex">
  <div class="h2 ma2 bg-blue flex-auto"></div>
  <div class="h2 w5 ma2 bg-white"></div>
  <div class="h2 ma2 bg-blue flex-auto"></div>
</div>

Ordering items

Change the order of children in the flex container. This can be useful for reordering on different viewport sizes. Goes up to .order-8

.order-0
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-0"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-1
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-1"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-2
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-2"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-3
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-3"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-4
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-4"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-5
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-5"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-6
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-6"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-7
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-7"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-8
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-8"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>
.order-last
<div class="bg-gray w-100 flex">
  <div class="h2 w2 ma2 bg-blue order-last"></div>
  <div class="h2 w2 ma2 bg-white order-1"></div>
  <div class="h2 w2 ma2 bg-white order-2"></div>
  <div class="h2 w2 ma2 bg-white order-3"></div>
  <div class="h2 w2 ma2 bg-white order-4"></div>
  <div class="h2 w2 ma2 bg-white order-5"></div>
  <div class="h2 w2 ma2 bg-white order-6"></div>
  <div class="h2 w2 ma2 bg-white order-7"></div>
  <div class="h2 w2 ma2 bg-white order-8"></div>
</div>

Floats

Float left

.fl
<div class="cf bg-lightest-silver">
  <div class="fl h2 w2 bg-dark-gray"></div>
</div>

Float right

.fr
<div class="cf bg-lightest-silver">
  <div class="fr h2 w2 bg-dark-gray"></div>
</div>

Float none

.fn
<div class="cf bg-lightest-silver">
  <div class="fn h2 w2 bg-dark-gray"></div>
</div>

Font Family

.sans-serif
Lorem ipsum 
<span class="sans-serif f2 mw5 dark-gray">Lorem ipsum</span>
.serif
Lorem ipsum 
<span class="serif f2 mw5 dark-gray">Lorem ipsum</span>
.system-sans-serif
Lorem ipsum 
<span class="system-sans-serif f2 mw5 dark-gray">Lorem ipsum</span>
.system-serif
Lorem ipsum 
<span class="system-serif f2 mw5 dark-gray">Lorem ipsum</span>
.code
Lorem ipsum 
<span class="code f2 mw5 dark-gray">Lorem ipsum</span>
.courier
Lorem ipsum 
<span class="courier f2 mw5 dark-gray">Lorem ipsum</span>

Font Style

.i
Lorem ipsum 
<span class="i f2 mw5">Lorem ipsum</span>
.fs-normal
Lorem ipsum 
<span class="fs-normal f2 mw5">Lorem ipsum</span>

Font Weight

.normal
Lorem ipsum 
<span class="normal f2 mw5 dark-gray">Lorem ipsum</span>
.b
Lorem ipsum 
<span class="b f2 mw5 dark-gray">Lorem ipsum</span>
.fw1
Lorem ipsum 
<span class="fw1 f2 mw5 dark-gray">Lorem ipsum</span>
.fw2
Lorem ipsum 
<span class="fw2 f2 mw5 dark-gray">Lorem ipsum</span>
.fw3
Lorem ipsum 
<span class="fw3 f2 mw5 dark-gray">Lorem ipsum</span>
.fw4
Lorem ipsum 
<span class="fw4 f2 mw5 dark-gray">Lorem ipsum</span>
.fw5
Lorem ipsum 
<span class="fw5 f2 mw5 dark-gray">Lorem ipsum</span>
.fw6
Lorem ipsum 
<span class="fw6 f2 mw5 dark-gray">Lorem ipsum</span>
.fw7
Lorem ipsum 
<span class="fw7 f2 mw5 dark-gray">Lorem ipsum</span>
.fw8
Lorem ipsum 
<span class="fw8 f2 mw5 dark-gray">Lorem ipsum</span>
.fw9
Lorem ipsum 
<span class="fw9 f2 mw5 dark-gray">Lorem ipsum</span>

Heights

Absolute Heights

.h1
<div class="h1 ph3 bg-black"></div>
.h2
<div class="h2 ph3 bg-black"></div>
.h3
<div class="h3 ph3 bg-black"></div>
.h4
<div class="h4 ph3 bg-black"></div>
.h5
<div class="h5 ph3 bg-black"></div>
.h6
<div class="h6 ph3 bg-black"></div>

Custom heights

.h--16
<div class="h--16 ph3 bg-black"></div>
.h--20
<div class="h--20 ph3 bg-black"></div>
.h--28
<div class="h--28 ph3 bg-black"></div>
.h--32
<div class="h--32 ph3 bg-black"></div>
.h--48
<div class="h--48 ph3 bg-black"></div>

Hover Effects

Dim

Dim element on hover by adding the dim class.

.dim
<div class="dim bg-dark-gray w5 h5"></div>

Hide Child

Hide child & reveal on hover.

Put the hide-child class on a parent element and any nested element with the child class will be hidden and displayed on hover or focus.

.hide-child
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus 
<div class="hide-child dark-gray lh-copy pa4 ba b--silver bg-lightest-silver">
  <div class="child"> Hidden until hover or focus </div>
  <div class="child"> Hidden until hover or focus </div>
  <div class="child"> Hidden until hover or focus </div>
  <div class="child"> Hidden until hover or focus </div>
</div>

Underline on hover / focus

.underline-hover
Underline on hover 
<a class="dib pa4 bg-lightest-silver br2 link underline-hover">Underline on hover</a>

Grow

Can combine this with overflow-hidden to make background images grow on hover even if you are using background-size: cover.

.grow
<div class="grow bg-gradient-primary dark-gray lh-copy h4 br2 mb4 pointer"></div>
<div class="h4 w-100 overflow-hidden br2">
  <div class="grow bg-purple dark-gray lh-copy h4 pointer bg-center" style="background-image: url(/assets/images/hero-2e5ed6bb.svg);"></div>
</div>

Grow large

.grow-large
<div class="grow-large bg-gradient-secondary dark-gray lh-copy h4 br2 mb4 pointer"></div>

Identicons

.hk-identicon
Dx
<div class="hk-identicon">Dx</div>
.hk-identicon--circle
Dx
<div class="hk-identicon--circle">Dx</div>

Inputs

Input

.hk-input
<input class="hk-input" placeholder="Email address">

Read only input

.hk-input--read-only
<input class="hk-input--read-only" placeholder="Email address" readonly>

Disabled input

.hk-input--disabled
<input class="hk-input--read-only" placeholder="Email address" disabled>

Select

.hk-select
<select class="hk-select">
  <option>Lorem ipsum</option>
  <option>Dolor ist</option>
</select>

Disabled select

.hk-select--disabled
<select class="hk-select--disabled" disabled>
  <option>Lorem ipsum</option>
  <option>Dolor ist</option>
</select>

Labels

.hk-label
Lorem ipsum
<div class="hk-label">Lorem ipsum</div>

Letter Spacing

.tracked
Lorem ipsum dolor ist 
<span class="f5 tracked">Lorem ipsum dolor ist</span>
.tracked-tight
Lorem ipsum dolor ist 
<span class="f5 tracked-tight">Lorem ipsum dolor ist</span>
.tracked-mega
Lorem ipsum dolor ist 
<span class="f5 tracked-mega">Lorem ipsum dolor ist</span>

Line Height

.lh-solid

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="lh-solid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
.lh-title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="lh-title">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
.lh-copy

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="lh-copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
.lh-12

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="lh-12">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

Lists

.list
  • One
  • Two
  • Three
<ul class="list lh-copy">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Malibu Fills

.malibu-fill-gradient-purple
<svg class="w2 h2 malibu-fill-gradient-purple">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.malibu-fill-gradient-gray
<svg class="w2 h2 malibu-fill-gradient-gray">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.malibu-fill-gradient-dark-gray
<svg class="w2 h2 malibu-fill-gradient-dark-gray">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.malibu-fill-gradient-red
<svg class="w2 h2 malibu-fill-gradient-red">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.malibu-fill-gradient-orange
<svg class="w2 h2 malibu-fill-gradient-orange">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.malibu-fill-gradient-green
<svg class="w2 h2 malibu-fill-gradient-green">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.malibu-fill-gradient-blue
<svg class="w2 h2 malibu-fill-gradient-blue">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>

Max Width

100%

.mw-100
<div class="mw-100 h4 bg-light-silver"></div>

Absolute widths

.mw1
<div class="mw1 h4 bg-light-silver"></div>
.mw2
<div class="mw2 h4 bg-light-silver"></div>
.mw3
<div class="mw3 h4 bg-light-silver"></div>
.mw4
<div class="mw4 h4 bg-light-silver"></div>
.mw5
<div class="mw5 h4 bg-light-silver"></div>
.mw6
<div class="mw6 h4 bg-light-silver"></div>
.mw7
<div class="mw7 h4 bg-light-silver"></div>
.mw8
<div class="mw8 h4 bg-light-silver"></div>
.mw9
<div class="mw9 h4 bg-light-silver"></div>

No max width

.mw-none
<div class="mw-none h4 bg-light-silver"></div>

Messages

.hk-message--generic
Message title
Additional text to give context. hk-link action
<div class="flex items-center hk-message--generic">
  <div class="mr2"><svg class="w2 h2 v-mid">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pipelines-28" />
    </svg></div>
  <div class="flex-auto">
    <div class="f4 b lh-title">Message title</div>
    <div class="lh-copy">Additional text to give context. <a href="#" class="hk-link">hk-link action</a></div>
  </div>
</div>
.hk-message--info
Message title
Additional text to give context. hk-link action
<div class="flex items-center hk-message--info">
  <div class="mr2"><svg class="w2 h2 v-mid">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pipelines-28" />
    </svg></div>
  <div class="flex-auto">
    <div class="f4 b lh-title">Message title</div>
    <div class="lh-copy">Additional text to give context. <a href="#" class="hk-link">hk-link action</a></div>
  </div>
</div>
.hk-message--success
Message title
Additional text to give context. hk-link action
<div class="flex items-center hk-message--success">
  <div class="mr2"><svg class="w2 h2 v-mid">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pipelines-28" />
    </svg></div>
  <div class="flex-auto">
    <div class="f4 b lh-title">Message title</div>
    <div class="lh-copy">Additional text to give context. <a href="#" class="hk-link">hk-link action</a></div>
  </div>
</div>
.hk-message--warning
Message title
Additional text to give context. hk-link action
<div class="flex items-center hk-message--warning">
  <div class="mr2"><svg class="w2 h2 v-mid">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pipelines-28" />
    </svg></div>
  <div class="flex-auto">
    <div class="f4 b lh-title">Message title</div>
    <div class="lh-copy">Additional text to give context. <a href="#" class="hk-link">hk-link action</a></div>
  </div>
</div>
.hk-message--danger
Message title
Additional text to give context. hk-link action
<div class="flex items-center hk-message--danger">
  <div class="mr2"><svg class="w2 h2 v-mid">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pipelines-28" />
    </svg></div>
  <div class="flex-auto">
    <div class="f4 b lh-title">Message title</div>
    <div class="lh-copy">Additional text to give context. <a href="#" class="hk-link">hk-link action</a></div>
  </div>
</div>

Negative Margins

.na1
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na1"></div>
  </div>
</div>
.na2
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na2"></div>
  </div>
</div>
.na3
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na3"></div>
  </div>
</div>
.na4
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na4"></div>
  </div>
</div>
.na5
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na5"></div>
  </div>
</div>
.na6
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na6"></div>
  </div>
</div>
.na7
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na7"></div>
  </div>
</div>
.nv1
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv1"></div>
  </div>
</div>
.nv2
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv2"></div>
  </div>
</div>
.nv3
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv3"></div>
  </div>
</div>
.nv4
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv4"></div>
  </div>
</div>
.nv5
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv5"></div>
  </div>
</div>
.nv6
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv6"></div>
  </div>
</div>
.nv7
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv7"></div>
  </div>
</div>
.nh1
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh1"></div>
  </div>
</div>
.nh2
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh2"></div>
  </div>
</div>
.nh3
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh3"></div>
  </div>
</div>
.nh4
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh4"></div>
  </div>
</div>
.nh5
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh5"></div>
  </div>
</div>
.nh6
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh6"></div>
  </div>
</div>
.nh7
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh7"></div>
  </div>
</div>

Precision negative-margin - All

.na--1
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na--1"></div>
  </div>
</div>
.na--2
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na--2"></div>
  </div>
</div>
.na--3
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na--3"></div>
  </div>
</div>
.na--4
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na--4"></div>
  </div>
</div>
.na--5
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue na--5"></div>
  </div>
</div>
.nv--1
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv--1"></div>
  </div>
</div>
.nv--2
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv--2"></div>
  </div>
</div>
.nv--3
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv--3"></div>
  </div>
</div>
.nv--4
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv--4"></div>
  </div>
</div>
.nv--5
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nv--5"></div>
  </div>
</div>
.nh--1
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh--1"></div>
  </div>
</div>
.nh--2
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh--2"></div>
  </div>
</div>
.nh--3
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh--3"></div>
  </div>
</div>
.nh--4
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh--4"></div>
  </div>
</div>
.nh--5
<div class="ma5">
  <div class="w2 h2 bg-blue relative flex">
    <div class="flex-auto bg-light-blue o-50 ba b--blue nh--5"></div>
  </div>
</div>

Nudges

Fix mistakes computers make.

.nudge-right--1
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-right--1 w2 h2 bg-dark-gray"></div>
</div>
.nudge-right--2
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-right--2 w2 h2 bg-dark-gray"></div>
</div>
.nudge-right--3
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-right--3 w2 h2 bg-dark-gray"></div>
</div>
.nudge-right--4
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-right--4 w2 h2 bg-dark-gray"></div>
</div>
.nudge-right--5
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-right--5 w2 h2 bg-dark-gray"></div>
</div>
.nudge-left--1
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-left--1 w2 h2 bg-dark-gray"></div>
</div>
.nudge-left--2
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-left--2 w2 h2 bg-dark-gray"></div>
</div>
.nudge-left--3
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-left--3 w2 h2 bg-dark-gray"></div>
</div>
.nudge-left--4
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-left--4 w2 h2 bg-dark-gray"></div>
</div>
.nudge-left--5
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-left--5 w2 h2 bg-dark-gray"></div>
</div>
.nudge-down--1
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-down--1 w2 h2 bg-dark-gray"></div>
</div>
.nudge-down--2
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-down--2 w2 h2 bg-dark-gray"></div>
</div>
.nudge-down--3
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-down--3 w2 h2 bg-dark-gray"></div>
</div>
.nudge-down--4
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-down--4 w2 h2 bg-dark-gray"></div>
</div>
.nudge-down--5
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-down--5 w2 h2 bg-dark-gray"></div>
</div>
.nudge-up--1
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-up--1 w2 h2 bg-dark-gray"></div>
</div>
.nudge-up--2
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-up--2 w2 h2 bg-dark-gray"></div>
</div>
.nudge-up--3
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-up--3 w2 h2 bg-dark-gray"></div>
</div>
.nudge-up--4
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-up--4 w2 h2 bg-dark-gray"></div>
</div>
.nudge-up--5
<div class="bg-lightest-silver br2 flex justify-center items-center pa4">
  <div class="ba b--gray w2 h2"></div>
  <div class="nudge-up--5 w2 h2 bg-dark-gray"></div>
</div>

Opacity

.o-100
<div class="o-100 bg-black pv3 db mw5"></div>
.o-90
<div class="o-90 bg-black pv3 db mw5"></div>
.o-80
<div class="o-80 bg-black pv3 db mw5"></div>
.o-70
<div class="o-70 bg-black pv3 db mw5"></div>
.o-60
<div class="o-60 bg-black pv3 db mw5"></div>
.o-50
<div class="o-50 bg-black pv3 db mw5"></div>
.o-40
<div class="o-40 bg-black pv3 db mw5"></div>
.o-30
<div class="o-30 bg-black pv3 db mw5"></div>
.o-20
<div class="o-20 bg-black pv3 db mw5"></div>
.o-10
<div class="o-10 bg-black pv3 db mw5"></div>
.o-05
<div class="o-05 bg-black pv3 db mw5"></div>
.o-025
<div class="o-025 bg-black pv3 db mw5"></div>
.o-0
<div class="o-0 bg-black pv3 db mw5"></div>

Overflow

Standard

.overflow-visible

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-visible ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>
.overflow-hidden

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-hidden ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>
.overflow-scroll

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-scroll ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>
.overflow-auto

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-auto ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>

X-Axis

.overflow-x-visible

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-x-visible ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>
.overflow-x-hidden

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-x-hidden ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>
.overflow-x-scroll

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-x-scroll ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>
.overflow-x-auto

Pellentesque habitant morbi tristique senectus et netus et

<div class="overflow-x-auto ba b--black pa3 db mb2 mw5 bg-lightest-silver">
  <p class="nowrap">Pellentesque habitant morbi tristique senectus et netus et</p>
</div>

Y-Axis

.overflow-y-visible

Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist

<div class="overflow-y-visible ba b--black pa3 db mb2 mw5 h4 bg-lightest-silver">
  <p>Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist</p>
</div>
.overflow-y-hidden

Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist

<div class="overflow-y-hidden ba b--black pa3 db mb2 mw5 h4 bg-lightest-silver">
  <p>Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist</p>
</div>
.overflow-y-scroll

Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist

<div class="overflow-y-scroll ba b--black pa3 db mb2 mw5 h4 bg-lightest-silver">
  <p>Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist</p>
</div>
.overflow-y-auto

Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist

<div class="overflow-y-auto ba b--black pa3 db mb2 mw5 h4 bg-lightest-silver">
  <p>Pellentesque habitant morbi tristique senectus et netus et lorem dolor ist</p>
</div>

Pointer Events

Ignore a layer, for click and touch events.

.pe-auto
<div class="relative w6 h5">
  <div class="pe-auto bg-black-20 w6 h5 absolute z-5"></div>
  <div class="flex w6 h5 justify-center items-center"><button class="hk-button--primary">Click me</button></div>
</div>
.pe-none
<div class="relative w6 h5">
  <div class="pe-none bg-black-20 w6 h5 absolute z-5"></div>
  <div class="flex w6 h5 justify-center items-center"><button class="hk-button--primary">Click me</button></div>
</div>

Position

These properties are available, but won't display as expected in this style guide.

.static
<div class="relative w4 h4 bg-light-silver br2">
  <div class="static w2 h2 bg-dark-gray"></div>
</div>
.relative
<div class="relative w4 h4 bg-light-silver br2">
  <div class="relative w2 h2 bg-dark-gray"></div>
</div>
.absolute
<div class="relative w4 h4 bg-light-silver br2">
  <div class="absolute w2 h2 bg-dark-gray"></div>
</div>
.fixed
<div class="relative w4 h4 bg-light-silver br2">
  <div class="fixed w2 h2 bg-dark-gray"></div>
</div>
.sticky
<div class="relative w4 h4 bg-light-silver br2">
  <div class="sticky w2 h2 bg-dark-gray"></div>
</div>

SVG Fill

.fill-black
<svg class="w2 h2 fill-black">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-near-black
<svg class="w2 h2 fill-near-black">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-dark-gray
<svg class="w2 h2 fill-dark-gray">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-mid-gray
<svg class="w2 h2 fill-mid-gray">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-gray
<svg class="w2 h2 fill-gray">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-silver
<svg class="w2 h2 fill-silver">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-silver
<svg class="w2 h2 fill-light-silver">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-lightest-silver
<svg class="w2 h2 fill-lightest-silver">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-gray
<svg class="w2 h2 fill-light-gray">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-near-white
<svg class="w2 h2 fill-near-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-white
<svg class="w2 h2 fill-white">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-transparent
<svg class="w2 h2 fill-transparent">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-dark-red
<svg class="w2 h2 fill-dark-red">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-red
<svg class="w2 h2 fill-red">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-red
<svg class="w2 h2 fill-light-red">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-orange
<svg class="w2 h2 fill-orange">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-gold
<svg class="w2 h2 fill-gold">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-yellow
<svg class="w2 h2 fill-yellow">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-yellow
<svg class="w2 h2 fill-light-yellow">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-purple
<svg class="w2 h2 fill-purple">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-purple
<svg class="w2 h2 fill-light-purple">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-dark-pink
<svg class="w2 h2 fill-dark-pink">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-hot-pink
<svg class="w2 h2 fill-hot-pink">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-pink
<svg class="w2 h2 fill-pink">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-pink
<svg class="w2 h2 fill-light-pink">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-dark-green
<svg class="w2 h2 fill-dark-green">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-green
<svg class="w2 h2 fill-green">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-green
<svg class="w2 h2 fill-light-green">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-navy
<svg class="w2 h2 fill-navy">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-dark-blue
<svg class="w2 h2 fill-dark-blue">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-blue
<svg class="w2 h2 fill-blue">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-light-blue
<svg class="w2 h2 fill-light-blue">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-lightest-blue
<svg class="w2 h2 fill-lightest-blue">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-washed-blue
<svg class="w2 h2 fill-washed-blue">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-washed-green
<svg class="w2 h2 fill-washed-green">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-washed-yellow
<svg class="w2 h2 fill-washed-yellow">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-washed-red
<svg class="w2 h2 fill-washed-red">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>

SVG Fill Opacity

.fill-o-05
<svg class="w2 h2 fill-purple fill-o-05">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-10
<svg class="w2 h2 fill-purple fill-o-10">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-20
<svg class="w2 h2 fill-purple fill-o-20">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-25
<svg class="w2 h2 fill-purple fill-o-25">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-30
<svg class="w2 h2 fill-purple fill-o-30">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-40
<svg class="w2 h2 fill-purple fill-o-40">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-50
<svg class="w2 h2 fill-purple fill-o-50">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-60
<svg class="w2 h2 fill-purple fill-o-60">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-75
<svg class="w2 h2 fill-purple fill-o-75">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-80
<svg class="w2 h2 fill-purple fill-o-80">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>
.fill-o-90
<svg class="w2 h2 fill-purple fill-o-90">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#app-28" />
</svg>

SVG Fill Rule

.fill-nonzero
<svg class="w5 h5 malibu-fill-gradient-purple fill-nonzero" viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,0 21,90 98,35 2,35 79,90" />
</svg>
.fill-evenodd
<svg class="w5 h5 malibu-fill-gradient-purple fill-evenodd" viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,0 21,90 98,35 2,35 79,90" />
</svg>

Shadows

Box Shadows

.shadow-1
<div class="shadow-1 w5 h5"></div>
.shadow-2
<div class="shadow-2 w5 h5"></div>
.shadow-3
<div class="shadow-3 w5 h5"></div>
.shadow-4
<div class="shadow-4 w5 h5"></div>
.shadow-5
<div class="shadow-5 w5 h5"></div>

Inner Shadows

.shadow-inner-1
<div class="shadow-inner-1 h5 w5 bg-lightest-silver"></div>
.shadow-inner-2
<div class="shadow-inner-2 h5 w5 bg-lightest-silver"></div>
.shadow-inner-3
<div class="shadow-inner-3 h5 w5 bg-lightest-silver"></div>

Outer Shadows

.shadow-outer-1
<div class="h5 w5 bg-white shadow-outer-1"></div>
.shadow-outer-2
<div class="h5 w5 bg-white shadow-outer-2"></div>
.shadow-outer-3
<div class="h5 w5 bg-white shadow-outer-3"></div>

Spacing

Padding - All

.pa0
pa0
<div class="pa0 mb2 dib bg-gray white code">pa0</div>
.pa1
pa1
<div class="pa1 mb2 dib bg-gray white code">pa1</div>
.pa2
pa2
<div class="pa2 mb2 dib bg-gray white code">pa2</div>
.pa3
pa3
<div class="pa3 mb2 dib bg-gray white code">pa3</div>
.pa4
pa4
<div class="pa4 mb2 dib bg-gray white code">pa4</div>
.pa5
pa5
<div class="pa5 mb2 dib bg-gray white code">pa5</div>
.pa6
pa6
<div class="pa6 mb2 dib bg-gray white code">pa6</div>
.pa7
pa7
<div class="pa7 mb2 dib bg-gray white code">pa7</div>

Padding - Left

.pl0
pl0
<div class="pl0 mb2 dib bg-gray white code">pl0</div>
.pl1
pl1
<div class="pl1 mb2 dib bg-gray white code">pl1</div>
.pl2
pl2
<div class="pl2 mb2 dib bg-gray white code">pl2</div>
.pl3
pl3
<div class="pl3 mb2 dib bg-gray white code">pl3</div>
.pl4
pl4
<div class="pl4 mb2 dib bg-gray white code">pl4</div>
.pl5
pl5
<div class="pl5 mb2 dib bg-gray white code">pl5</div>
.pl6
pl6
<div class="pl6 mb2 dib bg-gray white code">pl6</div>
.pl7
pl7
<div class="pl7 mb2 dib bg-gray white code">pl7</div>

Padding - Right

.pr0
pr0
<div class="pr0 mb2 dib bg-gray white code">pr0</div>
.pr1
pr1
<div class="pr1 mb2 dib bg-gray white code">pr1</div>
.pr2
pr2
<div class="pr2 mb2 dib bg-gray white code">pr2</div>
.pr3
pr3
<div class="pr3 mb2 dib bg-gray white code">pr3</div>
.pr4
pr4
<div class="pr4 mb2 dib bg-gray white code">pr4</div>
.pr5
pr5
<div class="pr5 mb2 dib bg-gray white code">pr5</div>
.pr6
pr6
<div class="pr6 mb2 dib bg-gray white code">pr6</div>
.pr7
pr7
<div class="pr7 mb2 dib bg-gray white code">pr7</div>

Padding - Bottom

.pb0
pb0
<div class="pb0 mb2 dib bg-gray white code">pb0</div>
.pb1
pb1
<div class="pb1 mb2 dib bg-gray white code">pb1</div>
.pb2
pb2
<div class="pb2 mb2 dib bg-gray white code">pb2</div>
.pb3
pb3
<div class="pb3 mb2 dib bg-gray white code">pb3</div>
.pb4
pb4
<div class="pb4 mb2 dib bg-gray white code">pb4</div>
.pb5
pb5
<div class="pb5 mb2 dib bg-gray white code">pb5</div>
.pb6
pb6
<div class="pb6 mb2 dib bg-gray white code">pb6</div>
.pb7
pb7
<div class="pb7 mb2 dib bg-gray white code">pb7</div>

Padding - Top

.pt0
pt0
<div class="pt0 mb2 dib bg-gray white code">pt0</div>
.pt1
pt1
<div class="pt1 mb2 dib bg-gray white code">pt1</div>
.pt2
pt2
<div class="pt2 mb2 dib bg-gray white code">pt2</div>
.pt3
pt3
<div class="pt3 mb2 dib bg-gray white code">pt3</div>
.pt4
pt4
<div class="pt4 mb2 dib bg-gray white code">pt4</div>
.pt5
pt5
<div class="pt5 mb2 dib bg-gray white code">pt5</div>
.pt6
pt6
<div class="pt6 mb2 dib bg-gray white code">pt6</div>
.pt7
pt7
<div class="pt7 mb2 dib bg-gray white code">pt7</div>

Padding - Vertical

.pv0
pv0
<div class="pv0 mb2 dib bg-gray white code">pv0</div>
.pv1
pv1
<div class="pv1 mb2 dib bg-gray white code">pv1</div>
.pv2
pv2
<div class="pv2 mb2 dib bg-gray white code">pv2</div>
.pv3
pv3
<div class="pv3 mb2 dib bg-gray white code">pv3</div>
.pv4
pv4
<div class="pv4 mb2 dib bg-gray white code">pv4</div>
.pv5
pv5
<div class="pv5 mb2 dib bg-gray white code">pv5</div>
.pv6
pv6
<div class="pv6 mb2 dib bg-gray white code">pv6</div>
.pv7
pv7
<div class="pv7 mb2 dib bg-gray white code">pv7</div>

Padding - Horizontal

.ph0
ph0
<div class="ph0 mb2 dib bg-gray white code">ph0</div>
.ph1
ph1
<div class="ph1 mb2 dib bg-gray white code">ph1</div>
.ph2
ph2
<div class="ph2 mb2 dib bg-gray white code">ph2</div>
.ph3
ph3
<div class="ph3 mb2 dib bg-gray white code">ph3</div>
.ph4
ph4
<div class="ph4 mb2 dib bg-gray white code">ph4</div>
.ph5
ph5
<div class="ph5 mb2 dib bg-gray white code">ph5</div>
.ph6
ph6
<div class="ph6 mb2 dib bg-gray white code">ph6</div>
.ph7
ph7
<div class="ph7 mb2 dib bg-gray white code">ph7</div>

Precision padding - All

.pa--1
pa--1
<div class="pa--1 mb2 dib bg-gray white code">pa--1</div>
.pa--2
pa--2
<div class="pa--2 mb2 dib bg-gray white code">pa--2</div>
.pa--3
pa--3
<div class="pa--3 mb2 dib bg-gray white code">pa--3</div>
.pa--4
pa--4
<div class="pa--4 mb2 dib bg-gray white code">pa--4</div>
.pa--5
pa--5
<div class="pa--5 mb2 dib bg-gray white code">pa--5</div>

Precision padding - Left

.pl--1
pl--1
<div class="pl--1 mb2 dib bg-gray white code">pl--1</div>
.pl--2
pl--2
<div class="pl--2 mb2 dib bg-gray white code">pl--2</div>
.pl--3
pl--3
<div class="pl--3 mb2 dib bg-gray white code">pl--3</div>
.pl--4
pl--4
<div class="pl--4 mb2 dib bg-gray white code">pl--4</div>
.pl--5
pl--5
<div class="pl--5 mb2 dib bg-gray white code">pl--5</div>

Precision padding - Right

.pr--1
pr--1
<div class="pr--1 mb2 dib bg-gray white code">pr--1</div>
.pr--2
pr--2
<div class="pr--2 mb2 dib bg-gray white code">pr--2</div>
.pr--3
pr--3
<div class="pr--3 mb2 dib bg-gray white code">pr--3</div>
.pr--4
pr--4
<div class="pr--4 mb2 dib bg-gray white code">pr--4</div>
.pr--5
pr--5
<div class="pr--5 mb2 dib bg-gray white code">pr--5</div>

Precision padding - Bottom

.pb--1
pb--1
<div class="pb--1 mb2 dib bg-gray white code">pb--1</div>
.pb--2
pb--2
<div class="pb--2 mb2 dib bg-gray white code">pb--2</div>
.pb--3
pb--3
<div class="pb--3 mb2 dib bg-gray white code">pb--3</div>
.pb--4
pb--4
<div class="pb--4 mb2 dib bg-gray white code">pb--4</div>
.pb--5
pb--5
<div class="pb--5 mb2 dib bg-gray white code">pb--5</div>

Precision padding - Top

.pt--1
pt--1
<div class="pt--1 mb2 dib bg-gray white code">pt--1</div>
.pt--2
pt--2
<div class="pt--2 mb2 dib bg-gray white code">pt--2</div>
.pt--3
pt--3
<div class="pt--3 mb2 dib bg-gray white code">pt--3</div>
.pt--4
pt--4
<div class="pt--4 mb2 dib bg-gray white code">pt--4</div>
.pt--5
pt--5
<div class="pt--5 mb2 dib bg-gray white code">pt--5</div>

Precision padding - Vertical

.pv--1
pv--1
<div class="pv--1 mb2 dib bg-gray white code">pv--1</div>
.pv--2
pv--2
<div class="pv--2 mb2 dib bg-gray white code">pv--2</div>
.pv--3
pv--3
<div class="pv--3 mb2 dib bg-gray white code">pv--3</div>
.pv--4
pv--4
<div class="pv--4 mb2 dib bg-gray white code">pv--4</div>
.pv--5
pv--5
<div class="pv--5 mb2 dib bg-gray white code">pv--5</div>

Precision padding - Horizontal

.ph--1
ph--1
<div class="ph--1 mb2 dib bg-gray white code">ph--1</div>
.ph--2
ph--2
<div class="ph--2 mb2 dib bg-gray white code">ph--2</div>
.ph--3
ph--3
<div class="ph--3 mb2 dib bg-gray white code">ph--3</div>
.ph--4
ph--4
<div class="ph--4 mb2 dib bg-gray white code">ph--4</div>
.ph--5
ph--5
<div class="ph--5 mb2 dib bg-gray white code">ph--5</div>

Margin - All

.ma0
ma0
<div class="inline-flex bg-light-silver">
  <div class="ma0 bg-gray white code">ma0</div>
</div>
.ma1
ma1
<div class="inline-flex bg-light-silver">
  <div class="ma1 bg-gray white code">ma1</div>
</div>
.ma2
ma2
<div class="inline-flex bg-light-silver">
  <div class="ma2 bg-gray white code">ma2</div>
</div>
.ma3
ma3
<div class="inline-flex bg-light-silver">
  <div class="ma3 bg-gray white code">ma3</div>
</div>
.ma4
ma4
<div class="inline-flex bg-light-silver">
  <div class="ma4 bg-gray white code">ma4</div>
</div>
.ma5
ma5
<div class="inline-flex bg-light-silver">
  <div class="ma5 bg-gray white code">ma5</div>
</div>
.ma6
ma6
<div class="inline-flex bg-light-silver">
  <div class="ma6 bg-gray white code">ma6</div>
</div>
.ma7
ma7
<div class="inline-flex bg-light-silver">
  <div class="ma7 bg-gray white code">ma7</div>
</div>

Margin - Left

.ml0
ml0
<div class="inline-flex bg-light-silver">
  <div class="ml0 bg-gray white code">ml0</div>
</div>
.ml1
ml1
<div class="inline-flex bg-light-silver">
  <div class="ml1 bg-gray white code">ml1</div>
</div>
.ml2
ml2
<div class="inline-flex bg-light-silver">
  <div class="ml2 bg-gray white code">ml2</div>
</div>
.ml3
ml3
<div class="inline-flex bg-light-silver">
  <div class="ml3 bg-gray white code">ml3</div>
</div>
.ml4
ml4
<div class="inline-flex bg-light-silver">
  <div class="ml4 bg-gray white code">ml4</div>
</div>
.ml5
ml5
<div class="inline-flex bg-light-silver">
  <div class="ml5 bg-gray white code">ml5</div>
</div>
.ml6
ml6
<div class="inline-flex bg-light-silver">
  <div class="ml6 bg-gray white code">ml6</div>
</div>
.ml7
ml7
<div class="inline-flex bg-light-silver">
  <div class="ml7 bg-gray white code">ml7</div>
</div>

Margin - Right

.mr0
mr0
<div class="inline-flex bg-light-silver">
  <div class="mr0 bg-gray white code">mr0</div>
</div>
.mr1
mr1
<div class="inline-flex bg-light-silver">
  <div class="mr1 bg-gray white code">mr1</div>
</div>
.mr2
mr2
<div class="inline-flex bg-light-silver">
  <div class="mr2 bg-gray white code">mr2</div>
</div>
.mr3
mr3
<div class="inline-flex bg-light-silver">
  <div class="mr3 bg-gray white code">mr3</div>
</div>
.mr4
mr4
<div class="inline-flex bg-light-silver">
  <div class="mr4 bg-gray white code">mr4</div>
</div>
.mr5
mr5
<div class="inline-flex bg-light-silver">
  <div class="mr5 bg-gray white code">mr5</div>
</div>
.mr6
mr6
<div class="inline-flex bg-light-silver">
  <div class="mr6 bg-gray white code">mr6</div>
</div>
.mr7
mr7
<div class="inline-flex bg-light-silver">
  <div class="mr7 bg-gray white code">mr7</div>
</div>

Margin - Bottom

.mb0
mb0
<div class="inline-flex bg-light-silver">
  <div class="mb0 bg-gray white code">mb0</div>
</div>
.mb1
mb1
<div class="inline-flex bg-light-silver">
  <div class="mb1 bg-gray white code">mb1</div>
</div>
.mb2
mb2
<div class="inline-flex bg-light-silver">
  <div class="mb2 bg-gray white code">mb2</div>
</div>
.mb3
mb3
<div class="inline-flex bg-light-silver">
  <div class="mb3 bg-gray white code">mb3</div>
</div>
.mb4
mb4
<div class="inline-flex bg-light-silver">
  <div class="mb4 bg-gray white code">mb4</div>
</div>
.mb5
mb5
<div class="inline-flex bg-light-silver">
  <div class="mb5 bg-gray white code">mb5</div>
</div>
.mb6
mb6
<div class="inline-flex bg-light-silver">
  <div class="mb6 bg-gray white code">mb6</div>
</div>
.mb7
mb7
<div class="inline-flex bg-light-silver">
  <div class="mb7 bg-gray white code">mb7</div>
</div>

Margin - Top

.mt0
mt0
<div class="inline-flex bg-light-silver">
  <div class="mt0 bg-gray white code">mt0</div>
</div>
.mt1
mt1
<div class="inline-flex bg-light-silver">
  <div class="mt1 bg-gray white code">mt1</div>
</div>
.mt2
mt2
<div class="inline-flex bg-light-silver">
  <div class="mt2 bg-gray white code">mt2</div>
</div>
.mt3
mt3
<div class="inline-flex bg-light-silver">
  <div class="mt3 bg-gray white code">mt3</div>
</div>
.mt4
mt4
<div class="inline-flex bg-light-silver">
  <div class="mt4 bg-gray white code">mt4</div>
</div>
.mt5
mt5
<div class="inline-flex bg-light-silver">
  <div class="mt5 bg-gray white code">mt5</div>
</div>
.mt6
mt6
<div class="inline-flex bg-light-silver">
  <div class="mt6 bg-gray white code">mt6</div>
</div>
.mt7
mt7
<div class="inline-flex bg-light-silver">
  <div class="mt7 bg-gray white code">mt7</div>
</div>

Margin - Vertical

.mv0
mv0
<div class="inline-flex bg-light-silver">
  <div class="mv0 bg-gray white code">mv0</div>
</div>
.mv1
mv1
<div class="inline-flex bg-light-silver">
  <div class="mv1 bg-gray white code">mv1</div>
</div>
.mv2
mv2
<div class="inline-flex bg-light-silver">
  <div class="mv2 bg-gray white code">mv2</div>
</div>
.mv3
mv3
<div class="inline-flex bg-light-silver">
  <div class="mv3 bg-gray white code">mv3</div>
</div>
.mv4
mv4
<div class="inline-flex bg-light-silver">
  <div class="mv4 bg-gray white code">mv4</div>
</div>
.mv5
mv5
<div class="inline-flex bg-light-silver">
  <div class="mv5 bg-gray white code">mv5</div>
</div>
.mv6
mv6
<div class="inline-flex bg-light-silver">
  <div class="mv6 bg-gray white code">mv6</div>
</div>
.mv7
mv7
<div class="inline-flex bg-light-silver">
  <div class="mv7 bg-gray white code">mv7</div>
</div>

Margin - Horizontal

.mh0
mh0
<div class="inline-flex bg-light-silver">
  <div class="mh0 bg-gray white code">mh0</div>
</div>
.mh1
mh1
<div class="inline-flex bg-light-silver">
  <div class="mh1 bg-gray white code">mh1</div>
</div>
.mh2
mh2
<div class="inline-flex bg-light-silver">
  <div class="mh2 bg-gray white code">mh2</div>
</div>
.mh3
mh3
<div class="inline-flex bg-light-silver">
  <div class="mh3 bg-gray white code">mh3</div>
</div>
.mh4
mh4
<div class="inline-flex bg-light-silver">
  <div class="mh4 bg-gray white code">mh4</div>
</div>
.mh5
mh5
<div class="inline-flex bg-light-silver">
  <div class="mh5 bg-gray white code">mh5</div>
</div>
.mh6
mh6
<div class="inline-flex bg-light-silver">
  <div class="mh6 bg-gray white code">mh6</div>
</div>
.mh7
mh7
<div class="inline-flex bg-light-silver">
  <div class="mh7 bg-gray white code">mh7</div>
</div>

Precision margin - All

.ma--1
ma--1
<div class="inline-flex bg-light-silver">
  <div class="ma--1 bg-gray white code">ma--1</div>
</div>
.ma--2
ma--2
<div class="inline-flex bg-light-silver">
  <div class="ma--2 bg-gray white code">ma--2</div>
</div>
.ma--3
ma--3
<div class="inline-flex bg-light-silver">
  <div class="ma--3 bg-gray white code">ma--3</div>
</div>
.ma--4
ma--4
<div class="inline-flex bg-light-silver">
  <div class="ma--4 bg-gray white code">ma--4</div>
</div>
.ma--5
ma--5
<div class="inline-flex bg-light-silver">
  <div class="ma--5 bg-gray white code">ma--5</div>
</div>

Precision margin - Left

.ml--1
ml--1
<div class="inline-flex bg-light-silver">
  <div class="ml--1 bg-gray white code">ml--1</div>
</div>
.ml--2
ml--2
<div class="inline-flex bg-light-silver">
  <div class="ml--2 bg-gray white code">ml--2</div>
</div>
.ml--3
ml--3
<div class="inline-flex bg-light-silver">
  <div class="ml--3 bg-gray white code">ml--3</div>
</div>
.ml--4
ml--4
<div class="inline-flex bg-light-silver">
  <div class="ml--4 bg-gray white code">ml--4</div>
</div>
.ml--5
ml--5
<div class="inline-flex bg-light-silver">
  <div class="ml--5 bg-gray white code">ml--5</div>
</div>

Precision margin - Right

.mr--1
mr--1
<div class="inline-flex bg-light-silver">
  <div class="mr--1 bg-gray white code">mr--1</div>
</div>
.mr--2
mr--2
<div class="inline-flex bg-light-silver">
  <div class="mr--2 bg-gray white code">mr--2</div>
</div>
.mr--3
mr--3
<div class="inline-flex bg-light-silver">
  <div class="mr--3 bg-gray white code">mr--3</div>
</div>
.mr--4
mr--4
<div class="inline-flex bg-light-silver">
  <div class="mr--4 bg-gray white code">mr--4</div>
</div>
.mr--5
mr--5
<div class="inline-flex bg-light-silver">
  <div class="mr--5 bg-gray white code">mr--5</div>
</div>

Precision margin - Bottom

.mb--1
mb--1
<div class="inline-flex bg-light-silver">
  <div class="mb--1 bg-gray white code">mb--1</div>
</div>
.mb--2
mb--2
<div class="inline-flex bg-light-silver">
  <div class="mb--2 bg-gray white code">mb--2</div>
</div>
.mb--3
mb--3
<div class="inline-flex bg-light-silver">
  <div class="mb--3 bg-gray white code">mb--3</div>
</div>
.mb--4
mb--4
<div class="inline-flex bg-light-silver">
  <div class="mb--4 bg-gray white code">mb--4</div>
</div>
.mb--5
mb--5
<div class="inline-flex bg-light-silver">
  <div class="mb--5 bg-gray white code">mb--5</div>
</div>

Precision margin - Top

.mt--1
mt--1
<div class="inline-flex bg-light-silver">
  <div class="mt--1 bg-gray white code">mt--1</div>
</div>
.mt--2
mt--2
<div class="inline-flex bg-light-silver">
  <div class="mt--2 bg-gray white code">mt--2</div>
</div>
.mt--3
mt--3
<div class="inline-flex bg-light-silver">
  <div class="mt--3 bg-gray white code">mt--3</div>
</div>
.mt--4
mt--4
<div class="inline-flex bg-light-silver">
  <div class="mt--4 bg-gray white code">mt--4</div>
</div>
.mt--5
mt--5
<div class="inline-flex bg-light-silver">
  <div class="mt--5 bg-gray white code">mt--5</div>
</div>

Precision margin - Vertical

.mv--1
mv--1
<div class="inline-flex bg-light-silver">
  <div class="mv--1 bg-gray white code">mv--1</div>
</div>
.mv--2
mv--2
<div class="inline-flex bg-light-silver">
  <div class="mv--2 bg-gray white code">mv--2</div>
</div>
.mv--3
mv--3
<div class="inline-flex bg-light-silver">
  <div class="mv--3 bg-gray white code">mv--3</div>
</div>
.mv--4
mv--4
<div class="inline-flex bg-light-silver">
  <div class="mv--4 bg-gray white code">mv--4</div>
</div>
.mv--5
mv--5
<div class="inline-flex bg-light-silver">
  <div class="mv--5 bg-gray white code">mv--5</div>
</div>

Precision margin - Horizontal

.mh--1
mh--1
<div class="inline-flex bg-light-silver">
  <div class="mh--1 bg-gray white code">mh--1</div>
</div>
.mh--2
mh--2
<div class="inline-flex bg-light-silver">
  <div class="mh--2 bg-gray white code">mh--2</div>
</div>
.mh--3
mh--3
<div class="inline-flex bg-light-silver">
  <div class="mh--3 bg-gray white code">mh--3</div>
</div>
.mh--4
mh--4
<div class="inline-flex bg-light-silver">
  <div class="mh--4 bg-gray white code">mh--4</div>
</div>
.mh--5
mh--5
<div class="inline-flex bg-light-silver">
  <div class="mh--5 bg-gray white code">mh--5</div>
</div>

Stencil

.hk-stencil
-
-
-
<div class="hk-stencil mb2">-</div>
<div class="hk-stencil mb2">-</div>
<div class="hk-stencil">-</div>

Tabs

.hk-tabs
Tab 1Tab 2Tab 3 
<div class="hk-tabs"><a href="#" class="f5 hk-tabs__tab--active">Tab 1</a><a href="#" class="f5 hk-tabs__tab">Tab 2</a><a href="#" class="f5 hk-tabs__tab">Tab 3</a>
  <div class="spacer flex-auto bb b--light-silver"></div>
</div>

Text Align

Text left

.tl
Lorem ipsum 
<div class="tl mw5 pa3 ba b--black">
  Lorem ipsum
</div>

Text right

.tr
Lorem ipsum 
<div class="tr mw5 pa3 ba b--black">
  Lorem ipsum
</div>

Text center

.tc
Lorem ipsum 
<div class="tc mw5 pa3 ba b--black">
  Lorem ipsum
</div>

Text Colors

Text - Black opacity

.black-90
Lorem ipsum 
<span class="black-90 f2 mw5">Lorem ipsum</span>
.black-80
Lorem ipsum 
<span class="black-80 f2 mw5">Lorem ipsum</span>
.black-70
Lorem ipsum 
<span class="black-70 f2 mw5">Lorem ipsum</span>
.black-60
Lorem ipsum 
<span class="black-60 f2 mw5">Lorem ipsum</span>
.black-50
Lorem ipsum 
<span class="black-50 f2 mw5">Lorem ipsum</span>
.black-40
Lorem ipsum 
<span class="black-40 f2 mw5">Lorem ipsum</span>
.black-30
Lorem ipsum 
<span class="black-30 f2 mw5">Lorem ipsum</span>
.black-20
Lorem ipsum 
<span class="black-20 f2 mw5">Lorem ipsum</span>
.black-10
Lorem ipsum 
<span class="black-10 f2 mw5">Lorem ipsum</span>
.black-05
Lorem ipsum 
<span class="black-05 f2 mw5">Lorem ipsum</span>

Text - Gray opacity

.gray-90
Lorem ipsum 
<span class="gray-90 f2 mw5">Lorem ipsum</span>
.gray-80
Lorem ipsum 
<span class="gray-80 f2 mw5">Lorem ipsum</span>
.gray-70
Lorem ipsum 
<span class="gray-70 f2 mw5">Lorem ipsum</span>
.gray-60
Lorem ipsum 
<span class="gray-60 f2 mw5">Lorem ipsum</span>
.gray-50
Lorem ipsum 
<span class="gray-50 f2 mw5">Lorem ipsum</span>
.gray-40
Lorem ipsum 
<span class="gray-40 f2 mw5">Lorem ipsum</span>
.gray-30
Lorem ipsum 
<span class="gray-30 f2 mw5">Lorem ipsum</span>
.gray-20
Lorem ipsum 
<span class="gray-20 f2 mw5">Lorem ipsum</span>
.gray-10
Lorem ipsum 
<span class="gray-10 f2 mw5">Lorem ipsum</span>
.gray-05
Lorem ipsum 
<span class="gray-05 f2 mw5">Lorem ipsum</span>

Text - White opacity

.white-90
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-90 f2 mw5">Lorem ipsum</span></div>
.white-80
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-80 f2 mw5">Lorem ipsum</span></div>
.white-70
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-70 f2 mw5">Lorem ipsum</span></div>
.white-60
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-60 f2 mw5">Lorem ipsum</span></div>
.white-50
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-50 f2 mw5">Lorem ipsum</span></div>
.white-40
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-40 f2 mw5">Lorem ipsum</span></div>
.white-30
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-30 f2 mw5">Lorem ipsum</span></div>
.white-20
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-20 f2 mw5">Lorem ipsum</span></div>
.white-10
Lorem ipsum
<div class="bg-black w-100 pa2"><span class="white-10 f2 mw5">Lorem ipsum</span></div>

Colors

.black
Lorem ipsum 
<span class="black f2 mw5">Lorem ipsum</span>
.near-black
Lorem ipsum 
<span class="near-black f2 mw5">Lorem ipsum</span>
.dark-gray
Lorem ipsum 
<span class="dark-gray f2 mw5">Lorem ipsum</span>
.mid-gray
Lorem ipsum 
<span class="mid-gray f2 mw5">Lorem ipsum</span>
.gray
Lorem ipsum 
<span class="gray f2 mw5">Lorem ipsum</span>
.light-gray
Lorem ipsum 
<span class="light-gray f2 mw5">Lorem ipsum</span>
.silver
Lorem ipsum 
<span class="silver f2 mw5">Lorem ipsum</span>
.light-silver
Lorem ipsum 
<span class="light-silver f2 mw5">Lorem ipsum</span>
.lightest-silver
Lorem ipsum 
<span class="lightest-silver f2 mw5">Lorem ipsum</span>
.near-white
Lorem ipsum 
<span class="near-white f2 mw5">Lorem ipsum</span>
.white
Lorem ipsum 
<span class="white f2 mw5">Lorem ipsum</span>
.dark-purple
Lorem ipsum 
<span class="dark-purple f2 mw5">Lorem ipsum</span>
.purple
Lorem ipsum 
<span class="purple f2 mw5">Lorem ipsum</span>
.light-purple
Lorem ipsum 
<span class="light-purple f2 mw5">Lorem ipsum</span>
.lightest-purple
Lorem ipsum 
<span class="lightest-purple f2 mw5">Lorem ipsum</span>
.dark-blue
Lorem ipsum 
<span class="dark-blue f2 mw5">Lorem ipsum</span>
.blue
Lorem ipsum 
<span class="blue f2 mw5">Lorem ipsum</span>
.light-blue
Lorem ipsum 
<span class="light-blue f2 mw5">Lorem ipsum</span>
.lightest-blue
Lorem ipsum 
<span class="lightest-blue f2 mw5">Lorem ipsum</span>
.dark-green
Lorem ipsum 
<span class="dark-green f2 mw5">Lorem ipsum</span>
.green
Lorem ipsum 
<span class="green f2 mw5">Lorem ipsum</span>
.light-green
Lorem ipsum 
<span class="light-green f2 mw5">Lorem ipsum</span>
.lightest-green
Lorem ipsum 
<span class="lightest-green f2 mw5">Lorem ipsum</span>
.dark-red
Lorem ipsum 
<span class="dark-red f2 mw5">Lorem ipsum</span>
.red
Lorem ipsum 
<span class="red f2 mw5">Lorem ipsum</span>
.light-red
Lorem ipsum 
<span class="light-red f2 mw5">Lorem ipsum</span>
.lightest-red
Lorem ipsum 
<span class="lightest-red f2 mw5">Lorem ipsum</span>
.dark-orange
Lorem ipsum 
<span class="dark-orange f2 mw5">Lorem ipsum</span>
.orange
Lorem ipsum 
<span class="orange f2 mw5">Lorem ipsum</span>
.light-orange
Lorem ipsum 
<span class="light-orange f2 mw5">Lorem ipsum</span>
.lightest-orange
Lorem ipsum 
<span class="lightest-orange f2 mw5">Lorem ipsum</span>

Text Decoration

.strike
Lorem ipsum 
<div class="strike mw5 pa3 ba b--black">
  Lorem ipsum
</div>
.underline
Lorem ipsum 
<div class="underline mw5 pa3 ba b--black">
  Lorem ipsum
</div>
.no-underline
Lorem ipsum 
<div class="no-underline mw5 pa3 ba b--black">
  Lorem ipsum
</div>

Text Transform

.ttc
Lorem ipsum 
<div class="ttc mw5 pa3 ba b--black">
  Lorem ipsum
</div>
.ttl
Lorem ipsum 
<div class="ttl mw5 pa3 ba b--black">
  Lorem ipsum
</div>
.ttu
Lorem ipsum 
<div class="ttu mw5 pa3 ba b--black">
  Lorem ipsum
</div>
.ttn
Lorem ipsum 
<div class="ttn mw5 pa3 ba b--black">
  Lorem ipsum
</div>

Toasts

.hk-toast--success
Message title
Additional text to give context about the message.
<div class="hk-toast--success measure-narrow">
  <div class="flex-auto">
    <div class="b">Message title</div>
    <div class>Additional text to give context about the message.</div>
  </div>
</div>
.hk-toast--error
Message title
Additional text to give context about the message.
<div class="hk-toast--error measure-narrow">
  <div class="flex-auto">
    <div class="b">Message title</div>
    <div class>Additional text to give context about the message.</div>
  </div>
</div>

Type Scale

.f1
Lorem ipsum 
<span class="f1 mw5">Lorem ipsum</span>
.f2
Lorem ipsum 
<span class="f2 mw5">Lorem ipsum</span>
.f3
Lorem ipsum 
<span class="f3 mw5">Lorem ipsum</span>
.f4
Lorem ipsum 
<span class="f4 mw5">Lorem ipsum</span>
.f5
Lorem ipsum 
<span class="f5 mw5">Lorem ipsum</span>
.f6
Lorem ipsum 
<span class="f6 mw5">Lorem ipsum</span>
.f7
Lorem ipsum 
<span class="f7 mw5">Lorem ipsum</span>

Typography

Measure

Measure is limited to ~66 characters

.measure
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="measure lh-copy dark-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Measure wide

Measure is limited to ~80 characters

.measure-wide
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="measure-wide lh-copy dark-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Measure narrow

Measure is limited to ~45 characters

.measure-narrow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="measure-narrow lh-copy dark-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Indent

Book paragraph style - paragraphs are indented with no vertical spacing.

.indent
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="indent mw6 lh-copy dark-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Truncate

Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element.

.truncate
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="truncate mw6 lh-copy dark-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Small caps

.small-caps

Lorem ipsum

<p class="small-caps lh-copy dark-gray">Lorem ipsum</p>

Utilities

This is for fluid media that is embedded from third party sites like youtube, vimeo etc. Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e Make sure there are no height and width attributes on the embedded media.

.aspect-ratio--16x9
<div class="aspect-ratio aspect-ratio--16x9 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--9x16
<div class="aspect-ratio aspect-ratio--9x16 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--4x3
<div class="aspect-ratio aspect-ratio--4x3 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--3x4
<div class="aspect-ratio aspect-ratio--3x4 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--6x4
<div class="aspect-ratio aspect-ratio--6x4 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--4x6
<div class="aspect-ratio aspect-ratio--4x6 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--8x5
<div class="aspect-ratio aspect-ratio--8x5 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--5x8
<div class="aspect-ratio aspect-ratio--5x8 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--7x5
<div class="aspect-ratio aspect-ratio--7x5 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--5x7
<div class="aspect-ratio aspect-ratio--5x7 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>
.aspect-ratio--1x1
<div class="aspect-ratio aspect-ratio--1x1 bg-silver br2"><iframe frameborder="0" class="aspect-ratio--object"></iframe></div>

Vertical Align

.v-base
Lorem ipsum 
<span class="v-base">Lorem ipsum</span>
.v-mid
Lorem ipsum 
<span class="v-mid">Lorem ipsum</span>
.v-top
Lorem ipsum 
<span class="v-top">Lorem ipsum</span>
.v-btm
Lorem ipsum 
<span class="v-btm">Lorem ipsum</span>

Visibility

Text that is hidden but accessible

.clip
Lorem ipsum
<div class="clip">Lorem ipsum</div>

Well

.hk-well
Empty state title
Description for the empty state running across a couple of lines. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Learn More
<div class="hk-well">
  <div class="f4 mb2 lh-title">Empty state title</div>
  <div class="f5 mw7 center lh-copy">Description for the empty state running across a couple of lines. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. <a href="#" class="link hk-link blue">Learn More</a></div>
</div>

White Space

.ws-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="ws-normal dark-gray overflow-scroll lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
.nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="nowrap dark-gray overflow-scroll lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
.pre
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="pre dark-gray overflow-scroll lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Widths

Absolute widths

.w1
<div class="w1 pv3 bg-black"></div>
.w2
<div class="w2 pv3 bg-black"></div>
.w3
<div class="w3 pv3 bg-black"></div>
.w4
<div class="w4 pv3 bg-black"></div>
.w5
<div class="w5 pv3 bg-black"></div>
.w6
<div class="w6 pv3 bg-black"></div>

Custom widths

.w--16
<div class="w--16 pv3 bg-black"></div>
.w--20
<div class="w--20 pv3 bg-black"></div>
.w--28
<div class="w--28 pv3 bg-black"></div>
.w--32
<div class="w--32 pv3 bg-black"></div>
.w--48
<div class="w--48 pv3 bg-black"></div>

Percentage widths

.w-10
<div class="w-10 pv3 bg-black"></div>
.w-20
<div class="w-20 pv3 bg-black"></div>
.w-25
<div class="w-25 pv3 bg-black"></div>
.w-30
<div class="w-30 pv3 bg-black"></div>
.w-33
<div class="w-33 pv3 bg-black"></div>
.w-34
<div class="w-34 pv3 bg-black"></div>
.w-40
<div class="w-40 pv3 bg-black"></div>
.w-50
<div class="w-50 pv3 bg-black"></div>
.w-60
<div class="w-60 pv3 bg-black"></div>
.w-70
<div class="w-70 pv3 bg-black"></div>
.w-75
<div class="w-75 pv3 bg-black"></div>
.w-80
<div class="w-80 pv3 bg-black"></div>
.w-90
<div class="w-90 pv3 bg-black"></div>
.w-100
<div class="w-100 pv3 bg-black"></div>
.w-third
<div class="w-third pv3 bg-black"></div>
.w-two-thirds
<div class="w-two-thirds pv3 bg-black"></div>
.w-auto
<div class="w-auto pv3 bg-black"></div>

Word Break

.word-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="word-normal dark-gray overflow-scroll lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
.word-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="word-wrap dark-gray overflow-scroll lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
.word-nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="word-nowrap dark-gray overflow-scroll lh-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Z-Index

.z-0
<div class="z-0 w4 h4 bg-light-silver br2"></div>
.z-1
<div class="z-1 w4 h4 bg-light-silver br2"></div>
.z-2
<div class="z-2 w4 h4 bg-light-silver br2"></div>
.z-3
<div class="z-3 w4 h4 bg-light-silver br2"></div>
.z-4
<div class="z-4 w4 h4 bg-light-silver br2"></div>
.z-5
<div class="z-5 w4 h4 bg-light-silver br2"></div>
.z-999
<div class="z-999 w4 h4 bg-light-silver br2"></div>
.z-9999
<div class="z-9999 w4 h4 bg-light-silver br2"></div>
.z-max
<div class="z-max w4 h4 bg-light-silver br2"></div>
.z-inherit
<div class="z-inherit w4 h4 bg-light-silver br2"></div>
.z-initial
<div class="z-initial w4 h4 bg-light-silver br2"></div>
.z-unset
<div class="z-unset w4 h4 bg-light-silver br2"></div>