Utilities

Colors

Theme color utility classes for text color, background color, and svg fill.

+bg-blue +fg-blue +fill-blue

Use +bg-[color] classes for background colors on boxes, sections, etc.

<div class="box +bg-gray-dark"></div>

Use +fg-[color] classes on body copy markup or <h*> tags.

<h1 class="heading-secondary +heading-gamma +fg-white"></h1>

Use +fill-[color] classes on svg iconography.

<span class="icon --sm +fill-blue"></span>

blue lighter ($theme-blue-lighter)

#7ea9f2

blue light ($theme-blue-light)

#4d64ff

blue ($theme-blue)

#3139f2

blue dark ($theme-blue-dark)

#262cbf

blue darker ($theme-blue-darker)

#1d218c

blue midnight ($theme-blue-midnight)

#18243d

gray lightest ($theme-gray-lightest)

#f0f0f2

gray lighter ($theme-gray-lighter)

#e9e9ec

gray light ($theme-gray-light)

#cfcfd4

gray ($theme-gray)

#a7a8af

gray dark ($theme-gray-dark)

#6f707b

gray darker ($theme-gray-darker)

#50525a

gray darkest ($theme-gray-darkest)

#3f4148

charcoal ($theme-charcoal)

#202020

yellow light ($theme-yellow-light)

#fae193

yellow ($theme-yellow)

#ffce48

yellow dark ($theme-yellow-dark)

#ecb500

green light ($theme-green-light)

#7BD896

green ($theme-green)

#43C86A

green dark ($theme-green-dark)

#2C8245

red light ($theme-red-light)

#fd9a85

red ($theme-red)

#fa6e56

red dark ($theme-red-dark)

#cf4931
<div style="background-color: #7ea9f2; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">blue lighter ($theme-blue-lighter)</p>
	<code class="f-color-chip__color">#7ea9f2</code>
</div>
<div style="background-color: #4d64ff; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">blue light ($theme-blue-light)</p>
	<code class="f-color-chip__color">#4d64ff</code>
</div>
<div style="background-color: #3139f2; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">blue ($theme-blue)</p>
	<code class="f-color-chip__color">#3139f2</code>
</div>
<div style="background-color: #262cbf; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">blue dark ($theme-blue-dark)</p>
	<code class="f-color-chip__color">#262cbf</code>
</div>
<div style="background-color: #1d218c; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">blue darker ($theme-blue-darker)</p>
	<code class="f-color-chip__color">#1d218c</code>
</div>
<div style="background-color: #18243d; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">blue midnight ($theme-blue-midnight)</p>
	<code class="f-color-chip__color">#18243d</code>
</div>
<div style="background-color: #f0f0f2; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray lightest ($theme-gray-lightest)</p>
	<code class="f-color-chip__color">#f0f0f2</code>
</div>
<div style="background-color: #e9e9ec; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray lighter ($theme-gray-lighter)</p>
	<code class="f-color-chip__color">#e9e9ec</code>
</div>
<div style="background-color: #cfcfd4; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray light ($theme-gray-light)</p>
	<code class="f-color-chip__color">#cfcfd4</code>
</div>
<div style="background-color: #a7a8af; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray ($theme-gray)</p>
	<code class="f-color-chip__color">#a7a8af</code>
</div>
<div style="background-color: #6f707b; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray dark ($theme-gray-dark)</p>
	<code class="f-color-chip__color">#6f707b</code>
</div>
<div style="background-color: #50525a; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray darker ($theme-gray-darker)</p>
	<code class="f-color-chip__color">#50525a</code>
</div>
<div style="background-color: #3f4148; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">gray darkest ($theme-gray-darkest)</p>
	<code class="f-color-chip__color">#3f4148</code>
</div>
<div style="background-color: #202020; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">charcoal ($theme-charcoal)</p>
	<code class="f-color-chip__color">#202020</code>
</div>
<div style="background-color: #fae193; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">yellow light ($theme-yellow-light)</p>
	<code class="f-color-chip__color">#fae193</code>
</div>
<div style="background-color: #ffce48; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">yellow ($theme-yellow)</p>
	<code class="f-color-chip__color">#ffce48</code>
</div>
<div style="background-color: #ecb500; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">yellow dark ($theme-yellow-dark)</p>
	<code class="f-color-chip__color">#ecb500</code>
</div>
<div style="background-color: #7BD896; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">green light ($theme-green-light)</p>
	<code class="f-color-chip__color">#7BD896</code>
</div>
<div style="background-color: #43C86A; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">green ($theme-green)</p>
	<code class="f-color-chip__color">#43C86A</code>
</div>
<div style="background-color: #2C8245; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">green dark ($theme-green-dark)</p>
	<code class="f-color-chip__color">#2C8245</code>
</div>
<div style="background-color: #fd9a85; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">red light ($theme-red-light)</p>
	<code class="f-color-chip__color">#fd9a85</code>
</div>
<div style="background-color: #fa6e56; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">red ($theme-red)</p>
	<code class="f-color-chip__color">#fa6e56</code>
</div>
<div style="background-color: #cf4931; width: 100%; padding: 14px; color: #fff;">
	<p class="f-color-chip__name +mg-bottom-xs">red dark ($theme-red-dark)</p>
	<code class="f-color-chip__color">#cf4931</code>
</div>

Headings

Heading size utility classes for to override basic <h*> tag sizes

+heading-{ alpha | beta | gamma | delta | epsilon | zeta }

<h1 class="+heading-gamma"></h1>

The above will give <h3> stying to an <h1> tag

Heading alpha

Heading beta

Heading gamma

Heading delta

Heading epsilon
Heading zeta
<h1 class="+heading-alpha">Heading alpha</h1>
<h2 class="+heading-beta">Heading beta</h2>
<h3 class="+heading-gamma">Heading gamma</h3>
<h4 class="+heading-delta">Heading delta</h4>
<h5 class="+heading-epsilon">Heading epsilon</h5>
<h6 class="+heading-zeta">Heading zeta</h6>

Leading

Leading sizes

Used for overriding line-heights.

+leading-{ none | tight | normal | loose | huge }

Give a line-height of 1 to a heading.

<h1 class="+leading-none"></h1>

leading none

leading tight

leading normal

leading loose

leading huge

<h2 class="+leading-none">leading none</h2>
<h2 class="+leading-tight">leading tight</h2>
<h2 class="+leading-normal">leading normal</h2>
<h2 class="+leading-loose">leading loose</h2>
<h2 class="+leading-huge">leading huge</h2>

Spacing

Spacing utility classes for margin and padding.

.+mg-{ top | right | bottom | left | all | vertical | horizontal | none }-{ xl | lg | md | | sm | xs | xxs }

.+pd-{ top | right | bottom | left | all | vertical | horizontal | none }-{ xl | lg | md | | sm | xs | xxs }

.+mg-top-md .+pd-bottom-lg

Use to override spacing on components/object or to add spacing where needed.

<div class="box +bg-gray-dark +mg-bottom"></div>

-xl
54px
-lg
41px
-md
34px
 
27px
-sm
19.999px
-xs
14px
-xxs
7px
-none
0
<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 54px; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-xl</pre>54px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 41px; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-lg</pre>41px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 34px; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-md</pre>34px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 27px; width: 100px; display:inline-block;"></div>
	<span>
		<pre> </pre>27px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 19.999px; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-sm</pre>19.999px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 14px; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-xs</pre>14px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: blue; color: black; height: 7px; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-xxs</pre>7px</span>
</div>

<div style="display: inline-flex; flex-direction: column; text-align: center;">
	<div style="background-color: gray; color: black; height: 0; ; width: 100px; display:inline-block;"></div>
	<span>
		<pre>-none</pre>0</span>
</div>

Text Align

Text alignment utility classes

Used for aligning copy.

+text-{ left | center | right }

<p class="+text-center"></p>

Left aligned paragraph copy.


Center aligned paragraph copy.


Right aligned paragraph copy.

<div class="+text-left">
	<p>Left aligned paragraph copy.</p>
</div>

<br />

<div class="+text-center">
	<p>Center aligned paragraph copy.</p>
</div>

<br />

<div class="+text-right">
	<p>Right aligned paragraph copy.</p>
</div>

Text Size

Text sizes

Used for sizing body copy that isn't the default px/rem value

+text-size-{ xxs | xs | sm | nm | md | lg | xl }

Style <p> tag to have a large font-size

<p class="+text-size-lg"></p>

Extra large body copy

Large body copy

Medium body copy

Normal body copy

Small body copy

Extra small body copy

Extra extra small body copy

<p class="+text-size-xl">Extra large body copy</p>
<p class="+text-size-lg">Large body copy</p>
<p class="+text-size-md">Medium body copy</p>
<p class="+text-size-nm">Normal body copy</p>
<p class="+text-size-sm">Small body copy</p>
<p class="+text-size-xs">Extra small body copy</p>
<p class="+text-size-xxs">Extra extra small body copy</p>