Elements - Ones

.bg-dark

.bg-dark-gray

.bg-gray

.bg-light-gray

.bg-black

.bg-black-09

.bg-black-08

.bg-black-07

.bg-black-06

.bg-black-05

.bg-black-04

.bg-black-03

.bg-black-02

.bg-black-01

.bg-dark-09

.bg-dark-08

.bg-dark-07

.bg-dark-06

.bg-dark-05

.bg-dark-04

.bg-dark-03

.bg-dark-02

.bg-dark-01


<div class="padding-x-30 padding-y-20 bg-dark">
  <p>.bg-dark</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-gray">
  <p>.bg-dark-gray</p>
</div>
<div class="padding-x-30 padding-y-20 bg-gray">
  <p>.bg-gray</p>
</div>
<div class="padding-x-30 padding-y-20 bg-light-gray">
  <p>.bg-light-gray</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black">
  <p>.bg-black</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-09">
  <p>.bg-black-09</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-08">
  <p>.bg-black-08</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-07">
  <p>.bg-black-07</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-06">
  <p>.bg-black-06</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-05">
  <p>.bg-black-05</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-04">
  <p>.bg-black-04</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-03">
  <p>.bg-black-03</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-02">
  <p>.bg-black-02</p>
</div>
<div class="padding-x-30 padding-y-20 bg-black-01">
  <p>.bg-black-01</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-09">
  <p>.bg-dark-09</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-08">
  <p>.bg-dark-08</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-07">
  <p>.bg-dark-07</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-06">
  <p>.bg-dark-06</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-05">
  <p>.bg-dark-05</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-04">
  <p>.bg-dark-04</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-03">
  <p>.bg-dark-03</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-02">
  <p>.bg-dark-02</p>
</div>
<div class="padding-x-30 padding-y-20 bg-dark-01">
  <p>.bg-dark-01</p>
</div>

.bg-white

.bg-white-09

.bg-white-08

.bg-white-07

.bg-white-06

.bg-white-05

.bg-white-04

.bg-white-03

.bg-white-02

.bg-white-01


<div class="padding-x-30 padding-y-20 bg-white">
  <p>.bg-white</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-09">
  <p>.bg-white-09</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-08">
  <p>.bg-white-08</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-07">
  <p>.bg-white-07</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-06">
  <p>.bg-white-06</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-05">
  <p>.bg-white-05</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-04">
  <p>.bg-white-04</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-03">
  <p>.bg-white-03</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-02">
  <p>.bg-white-02</p>
</div>
<div class="padding-x-30 padding-y-20 bg-white-01">
  <p>.bg-white-01</p>
</div>

.bg-green

.bg-yellow

.bg-red


<div class="padding-x-30 padding-y-20 bg-green">
  <p>.bg-green</p>
</div>
<div class="padding-x-30 padding-y-20 bg-yellow">
  <p>.bg-yellow</p>
</div>
<div class="padding-x-30 padding-y-20 bg-red">
  <p>.bg-red</p>
</div>

Ones

Background Colors