logo

Design

Colors

Global

Primary
#F69C00
Secondary
#4D4D4D

Message

Blue
#1FB6FF
Positive
#13CE66
Red
#FF4949
Warning
#FFC82C
	
	<h2 class="uikit-font">Global</h2>
	<div class="f-color-chips uikit-font">
	
		<div class="f-color-chip">
			<div class="f-color-chip__name">Primary</div>
			<div class="f-color-chip__color">#F69C00</div>
		</div>
		<div class="f-color-chip">
			<div class="f-color-chip__name">Secondary</div>
			<div class="f-color-chip__color">#4D4D4D</div>
		</div>
	</div>
	<h2 class="uikit-font">Message</h2>
	<div class="f-color-chips uikit-font">
	
		<div class="f-color-chip">
			<div class="f-color-chip__name">Blue</div>
			<div class="f-color-chip__color">#1FB6FF</div>
		</div>
		<div class="f-color-chip">
			<div class="f-color-chip__name">Positive</div>
			<div class="f-color-chip__color">#13CE66</div>
		</div>
		<div class="f-color-chip">
			<div class="f-color-chip__name">Red</div>
			<div class="f-color-chip__color">#FF4949</div>
		</div>
		<div class="f-color-chip">
			<div class="f-color-chip__name">Warning</div>
			<div class="f-color-chip__color">#FFC82C</div>
		</div>
	</div>

Typography 

	ABCDEFGHIJKLMNOPQRSTUVWXYZ
	abcdefghijklmnopqrstuvwxyz
	0123456789

    Heading Level 1

     Heading Level 2

         Heading Level 3

        Heading Level 4

          Heading Level 5
            Heading Level 6
	
	<pre style="margin-top: 0!important;font-size:18px;letter-spacing: 20px;line-height: 51px; font-family:'Open Sans',sans-serif;">
	ABCDEFGHIJKLMNOPQRSTUVWXYZ
	abcdefghijklmnopqrstuvwxyz
	0123456789</pre>
	
	<h1>&nbsp;&nbsp;&nbsp; Heading Level 1</h1>
	<h2>&nbsp;&nbsp;&nbsp;&nbsp; Heading Level 2</h2>
	<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Heading Level 3</h3>
	<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Heading Level 4</h4>
	<h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Heading Level 5</h5>
	<h6>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Heading Level 6</h6>

Grid

Grid

one
two
three
four
two
three
three
three
three
two
five
five
six
six
two
two
	
	<div grid>
		<div one>one</div>
		<div two>two</div>
		<div three>three</div>
		<div four>four</div>
		<div two>two</div>
	</div>
	
	<div grid>
		<div three>three</div>
		<div three>three</div>
		<div three>three</div>
		<div three>three</div>
	</div>
	
	<div grid>
		<div two>two</div>
		<div five>five</div>
		<div five>five</div>
	</div>
	
	<div grid>
		<div six class="centered">six</div>
	</div>
	
	<div grid>
		<div six class="fr">six</div>
	</div>
	
	<div grid>
		<div two class="fl">two</div>
		<div two class="fr">two</div>
	</div>