Pattern Lab

Colors

#040707
#433f3e
#747874
#c9332b
#f7ea0c
#e2e7e1

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #040707;"></span>
		<span class="sg-label">#040707</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #433f3e;"></span>
		<span class="sg-label">#433f3e</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #747874;"></span>
		<span class="sg-label">#747874</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #c9332b;"></span>
		<span class="sg-label">#c9332b</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #f7ea0c;"></span>
		<span class="sg-label">#f7ea0c</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #e2e7e1;"></span>
		<span class="sg-label">#e2e7e1</span>
	</li>
</ul>

Fonts

Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Secondary font: Georgia, Times, "Times New Roman", serif;

Secondary font italic: Georgia, Times, "Times New Roman", serif;

Secondary font bold; Georgia, Times, "Times New Roman", serif;

HTML

									
										<p>Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</p>
<p><em>Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</strong></p>
<p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold; Georgia, Times, "Times New Roman", serif;</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>

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

HTML

									
										<p class="hide-small">This text is hidden on smaller screens</p>

<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>

<p class="hide-med">This text is hidden on medium screens only</p>

<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>

<p class="hide-large">This text is hidden on large screens</p>

<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>