JOY 94.9 Pattern Library

Colors

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch sg-swatch--pink"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--pink-light"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--blue"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--green"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--black"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--white"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--off-white"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--grey3"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--grey7"></span>
		<span class="sg-label"></span>
	</li>
	<li>
		<span class="sg-swatch sg-swatch--greya"></span>
		<span class="sg-label"></span>
	</li>
</ul>

Fonts

Primary font: "Open Sans", sans-serif;

Primary font italic: "Open Sans", sans-serif;

Primary font bold: "Open Sans", sans-serif;

Secondary font: "Oswald", sans-serif;

Secondary font italic: "Oswald", sans-serif;

Secondary font bold: "Oswald", sans-serif;

HTML

									
										<p class="util-Font-Primary">Primary font: <span class="sg-js-font">"Open Sans", sans-serif;</span></p>
<p class="util-Font-Primary"><em>Primary font italic: <span class="sg-js-font">"Open Sans", sans-serif;</span></em></p>
<p class="util-Font-Primary"><strong>Primary font bold: <span class="sg-js-font">"Open Sans", sans-serif;</span></strong></p>
<p class="util-Font-Secondary">Secondary font: <span class="sg-js-font">"Oswald", sans-serif;</span></p>
<p class="util-Font-Secondary"><em>Secondary font italic: <span class="sg-js-font">"Oswald", sans-serif;</span></em></p>
<p class="util-Font-Secondary"><strong>Secondary font bold: <span class="sg-js-font">"Oswald", sans-serif;</span></strong></p>

Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)

Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

HTML

									
										<div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>

<div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s  Easing: ease-in-out; (Hover to see effect)</div>