<div class="container">
<header>
<hgroup>
<h1 class="page-title">Flattastic Pro Color Palette</h1>
<h2 class="page-description">design by <a href="https://dribbble.com/erigon">Erigon</a></h2>
</hgroup>
</header>
<ul class="list-palete">
<li class="palete">
<div class="palete-color palete-color--grapefruit">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Grapefruit</h1>
<span class="palete-color__code">#ed5565</span>,
<span class="palete-color__code">#da4453</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--bittersweet">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Bittersweet</h1>
<span class="palete-color__code">#fc6e51</span>,
<span class="palete-color__code">#e9573f</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--sunflower">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Sunflower</h1>
<span class="palete-color__code">#ffce54</span>,
<span class="palete-color__code">#fcbb42</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--grass">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Grass</h1>
<span class="palete-color__code">#a0d468</span>,
<span class="palete-color__code">#8cc152</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--mint">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Mint</h1>
<span class="palete-color__code">#48cfad</span>,
<span class="palete-color__code">#37bc9b</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--aqua">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Aqua</h1>
<span class="palete-color__code">#4fc1e9</span>,
<span class="palete-color__code">#3bafda</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--blue-jeans">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Blue Jeans</h1>
<span class="palete-color__code">#5d9cec</span>,
<span class="palete-color__code">#4a89dc</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--lavender">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Lavender</h1>
<span class="palete-color__code">#ac92ec</span>,
<span class="palete-color__code">#967adc</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--pink-rose">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Pink Rose</h1>
<span class="palete-color__code">#ec87c0</span>,
<span class="palete-color__code">#d770ad</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--light-gray">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Light Gray</h1>
<span class="palete-color__code">#f5f7fa</span>,
<span class="palete-color__code">#e6e9ed</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--medium-gray">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Medium Gray</h1>
<span class="palete-color__code">#ccd1d9</span>,
<span class="palete-color__code">#aab2bd</span>
</div>
</li>
<li class="palete">
<div class="palete-color palete-color--dark-gray">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Dark Gray</h1>
<span class="palete-color__code">#656d78</span>,
<span class="palete-color__code">#434a54</span>
</div>
</li>
<!-- Round -->
<li class="palete palete--round">
<div class="palete-color palete-color--sunflower">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Sunflower</h1>
<span class="palete-color__code">#ffce54</span>,
<span class="palete-color__code">#fcbb42</span>
</div>
</li>
<li class="palete palete--round">
<div class="palete-color palete-color--grass">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Grass</h1>
<span class="palete-color__code">#a0d468</span>,
<span class="palete-color__code">#8cc152</span>
</div>
</li>
<!-- Square -->
<li class="palete palete--square">
<div class="palete-color palete-color--mint">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Mint</h1>
<span class="palete-color__code">#48cfad</span>,
<span class="palete-color__code">#37bc9b</span>
</div>
</li>
<li class="palete palete--square">
<div class="palete-color palete-color--aqua">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Aqua</h1>
<span class="palete-color__code">#4fc1e9</span>,
<span class="palete-color__code">#3bafda</span>
</div>
</li>
</ul>
<ul class="list-palete">
<!-- Round -->
<li class="palete palete--round">
<div class="palete-color palete-color--sunflower">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Sunflower</h1>
<span class="palete-color__code">#ffce54</span>,
<span class="palete-color__code">#fcbb42</span>
</div>
</li>
<li class="palete palete--round">
<div class="palete-color palete-color--grass">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Grass</h1>
<span class="palete-color__code">#a0d468</span>,
<span class="palete-color__code">#8cc152</span>
</div>
</li>
<!-- Square -->
<li class="palete palete--square">
<div class="palete-color palete-color--mint">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Mint</h1>
<span class="palete-color__code">#48cfad</span>,
<span class="palete-color__code">#37bc9b</span>
</div>
</li>
<li class="palete palete--square">
<div class="palete-color palete-color--aqua">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Aqua</h1>
<span class="palete-color__code">#4fc1e9</span>,
<span class="palete-color__code">#3bafda</span>
</div>
</li>
</ul>
<div class="examples">
<div class="palete example example--rectangle">
<div class="palete-color palete-color--sunflower">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Sunflower</h1>
<span class="palete-color__code">#ffce54</span>,
<span class="palete-color__code">#fcbb42</span>
</div>
</div>
<div class="palete palete--round example example--round">
<div class="palete-color palete-color--sunflower">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Sunflower</h1>
<span class="palete-color__code">#ffce54</span>,
<span class="palete-color__code">#fcbb42</span>
</div>
</div>
<div class="palete palete--square example example--square">
<div class="palete-color palete-color--sunflower">
<div class="palete-color__square palete-color__lighten"></div>
<div class="palete-color__square palete-color__darken"></div>
</div>
<div class="palete-color__content">
<h1 class="palete-color__name">Sunflower</h1>
<span class="palete-color__code">#ffce54</span>,
<span class="palete-color__code">#fcbb42</span>
</div>
</div>
</div> <!-- /.examples -->
</div>