Pattern Lab

Colors

#054056
5,64,86
main focus
#C6DDEA
198,221,234
light focus
#313131
49,49,49
dark background
dark text
#FFFFFF
#FFF
white text
light background

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #054056;"></span>
		<span class="sg-label">#054056<br>5,64,86<br>main focus</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #C6DDEA;"></span>
		<span class="sg-label">#C6DDEA<br>198,221,234<br>light focus</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #313131;"></span>
		<span class="sg-label">#313131<br>49,49,49<br>dark background<br>dark text</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #ffffff;"></span>
		<span class="sg-label">#FFFFFF<br>#FFF<br>white text<br>light background<br></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>