Global Colors
Primary Color
$primary_color
Secondary Color
$secondary_color
Tertiary Color
$tertiary_color
Quaternary Color
$quaternary_color
Quinary Color
$quinary_color
Spacers
$spacer_0
$spacer_1
$spacer_2
$spacer_3
$spacer_4
$spacer_5
$spacer_6
$spacer_7
$spacer_8
$spacer_9
$spacer_10
Headings
<h1>It’s a bright idea to choose you. D-56, M-40</h1>
It’s a bright idea to choose you. D-56, M-40
<h2>It’s a bright idea to choose you. D-48, M-36</h2>
It’s a bright idea to choose you. D-48, M-36
<h3>It’s a bright idea to choose you. D-40, M-30</h3>
It’s a bright idea to choose you. D-40, M-30
<h4>It’s a bright idea to choose you. D-18, M-18</h4>
It’s a bright idea to choose you. D-18, M-18
<h5>It’s a bright idea to choose you. D-29, M-16</h5>
It’s a bright idea to choose you. D-29, M-16
<h6>It’s a bright idea to choose you. D-20, M-18</h6>
It’s a bright idea to choose you. D-20, M-18
Paragraphs
<p>It’s a bright idea to choose you. D-16, M-16</p>
It’s a bright idea to choose you. D-16, M-16
<div class="p_large">
<p>It’s a bright idea to choose you. D-20, M-18</p>
</div>
<p>It’s a bright idea to choose you. D-20, M-18</p>
</div>
It’s a bright idea to choose you. D-20, M-18
<div class="p_medium">
<p>It’s a bright idea to choose you. D-18, M-16</p>
</div>
<p>It’s a bright idea to choose you. D-18, M-16</p>
</div>
It’s a bright idea to choose you. D-18, M-16
<div class="p_small">
<p>It’s a bright idea to choose you. D-14, M-14</p>
</div>
<p>It’s a bright idea to choose you. D-14, M-14</p>
</div>
It’s a bright idea to choose you. D-14, M-14
Lists
Unordered List
<ul>
<li>It’s a bright idea to choose you. D-16, M-16</li>
</ul>
<li>It’s a bright idea to choose you. D-16, M-16</li>
</ul>
- List Item 1
- List Item 2
- List Item 3
<div class="li_large">
<ul>
<li>It’s a bright idea to choose you. D-20, M-18</li>
</ul>
</div>
<ul>
<li>It’s a bright idea to choose you. D-20, M-18</li>
</ul>
</div>
- List Item 1
- List Item 2
- List Item 3
<div class="li_medium">
<ul>
<li>It’s a bright idea to choose you. D-18, M-16</li>
</ul>
</div>
<ul>
<li>It’s a bright idea to choose you. D-18, M-16</li>
</ul>
</div>
- List Item 1
- List Item 2
- List Item 3
<div class="li_small">
<ul>
<li>It’s a bright idea to choose you. D-14, M-14</li>
</ul>
</div>
<ul>
<li>It’s a bright idea to choose you. D-14, M-14</li>
</ul>
</div>
- List Item 1
- List Item 2
- List Item 3
Ordered List
<ol>
<li>It’s a bright idea to choose you. D-16, M-16</li>
</ol>
<li>It’s a bright idea to choose you. D-16, M-16</li>
</ol>
- List Item 1
- List Item 2
- List Item 3
<div class="li_large">
<ol>
<li>It’s a bright idea to choose you. D-20, M-18</li>
</ol>
</div>
<ol>
<li>It’s a bright idea to choose you. D-20, M-18</li>
</ol>
</div>
- List Item 1
- List Item 2
- List Item 3
<div class="li_medium">
<ol>
<li>It’s a bright idea to choose you. D-18, M-16</li>
</ol>
</div>
<ol>
<li>It’s a bright idea to choose you. D-18, M-16</li>
</ol>
</div>
- List Item 1
- List Item 2
- List Item 3
<div class="li_small">
<ol>
<li>It’s a bright idea to choose you. D-14, M-14</li>
</ol>
</div>
<ol>
<li>It’s a bright idea to choose you. D-14, M-14</li>
</ol>
</div>
- List Item 1
- List Item 2
- List Item 3
Blockquote
<blockquote>It’s a bright idea to choose you. D-30, M-24</blockquote>
It’s a bright idea to choose you. D-30, M-24
Buttons
Large Buttons
<div class="large_button">
<div class="primary_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="primary_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="large_button">
<div class="secondary_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="secondary_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="large_button">
<div class="tertiary_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="tertiary_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="large_button"> div
<div class="blue_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
<div class="blue_button">
<a class="cta_button" href="#">
Button D-18, M-18
</a>
</div>
</div>
Medium Buttons
<div class="medium_button">
<div class="primary_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div class="primary_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div class="medium_button">
<div class="secondary_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div class="secondary_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div class="medium_button">
<div class="tertiary_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div class="tertiary_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div div class="medium_button"> div div
<div class="blue_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
<div class="blue_button">
<a class="cta_button" href="#">
Button D-16, M-16
</a>
</div>
</div>
Small Buttons
<div class="small_button">
<div class="primary_button">
<a class="cta_button" href="#">
Button D-14, M-14
</a>
</div>
</div>
<div class="primary_button">
<a class="cta_button" href="#">
Button D-14, M-14
</a>
</div>
</div>
<div class="small_button">
<div class="secondary_button">
<a class="cta_button" href="#">
Button D-14, M-14
</a>
</div>
</div>
<div class="secondary_button">
<a class="cta_button" href="#">
Button D-14, M-14
</a>
</div>
</div>
<div class="small_button">
<div class="tertiary_button">
<a class="cta_button" href="#">
Button D-14, M-14
</a>
</div>
</div>
<div class="tertiary_button">
<a class="cta_button" href="#">
Button D-14, M-14
</a>
</div>
</div>
<div class="small_button">
<div class="blue_button">
<a div div div div class="cta_button" href="#" div>
Button D-14, M-14
</a>
</div>
</div>
<div class="blue_button">
<a div div div div class="cta_button" href="#" div>
Button D-14, M-14
</a>
</div>
</div>