Bold Headings - Desktop ( Normal Tags)
H1

Medium
64/100% px
Uppercase
<h1></h1>

It’s a bright idea to choose you.

H2

Medium
54/120% px
Uppercase
<h2></h2>

It’s a bright idea to choose you.

H3

Medium
48/120% px
Uppercase
<h3></h3>

It’s a bright idea to choose you.

H4

Medium
40/120% px
Uppercase
<h4></h4>

It’s a bright idea to choose you.

H5

Medium
32/120% px
Uppercase
<h5></h5>

It’s a bright idea to choose you.
Bold Headings - Mobile
H1

Medium
44/100% px
Uppercase

It’s a bright idea to choose you.

H2

Medium
32/120% px
Uppercase

It’s a bright idea to choose you.

H3

Medium
24/120% px
Uppercase

It’s a bright idea to choose you.

H4

Medium
20/120% px
Uppercase

It’s a bright idea to choose you.

H5

Medium
16/120% px
Uppercase

It’s a bright idea to choose you.

Bold Headings - Desktop ( Normal Tags )

<h1>It’s a bright idea to choose you. D-64, M-44</h1>

It’s a bright idea to choose you. D-64, M-44

<h2>It’s a bright idea to choose you. D-54, M-35</h2>

It’s a bright idea to choose you. D-54, M-35

<h3>It’s a bright idea to choose you. D-48, M-29</h3>

It’s a bright idea to choose you. D-48, M-29

<h4>It’s a bright idea to choose you. D-40, M-24</h4>

It’s a bright idea to choose you. D-40, M-24

<h5>It’s a bright idea to choose you. D-32, M-24</h5>
It’s a bright idea to choose you. D-32, M-24
Regular Headings - Desktop ( with ".regular" Class)
H1

Regular
64/100% px
Uppercase
<div class="regular">
<h1></h1>
</div>

It’s a bright idea to choose you.

H2

Regular
54/120% px
Uppercase
<div class="regular">
<h2></h2>
</div>

It’s a bright idea to choose you.

H3

Regular
48/120% px
Uppercase
<div class="regular">
<h3></h3>
</div>

It’s a bright idea to choose you.

H4

Regular
40/120% px
Uppercase
<div class="regular">
<h4></h4>
</div>

It’s a bright idea to choose you.

H5

Regular
32/120% px
Uppercase
<div class="regular">
<h5></h5>
</div>

It’s a bright idea to choose you.
Regular Headings - Mobile
H1

Regular
44/100% px
Uppercase

It’s a bright idea to choose you.

H2

Regular
32/120% px
Uppercase

It’s a bright idea to choose you.

H3

Regular
24/120% px
Uppercase

It’s a bright idea to choose you.

H4

Regular
20/120% px
Uppercase

It’s a bright idea to choose you.

H5

Regular
16/120% px
Uppercase

It’s a bright idea to choose you.

Regular Headings - Desktop ( with ".regular" Class)

<div class="regular">
<h1>It’s a bright idea to choose you. D-64, M-44</h1>
</div>

It’s a bright idea to choose you. D-64, M-44

<div class="regular">
<h2>It’s a bright idea to choose you. D-54, M-35</h2>
</div>

It’s a bright idea to choose you. D-54, M-35

<div class="regular">
<h3>It’s a bright idea to choose you. D-48, M-29</h3>
</div>

It’s a bright idea to choose you. D-48, M-29

<div class="regular">
<h4>It’s a bright idea to choose you. D-40, M-24</h4>
</div>

It’s a bright idea to choose you. D-40, M-24

<div class="regular">
<h5>It’s a bright idea to choose you. D-32, M-24</h5>
</div>
It’s a bright idea to choose you. D-32, M-24

Body Paragraphs Regular

<div class="p_extra_large">
<p>Large Light 32/130% px Uppercase</p>
</div>

Large Light 32/130% px Uppercase

<div class="p_large_regular">
<p>Large Light 24/130% px Uppercase</p>
</div>

Large Light 24/130% px Uppercase

<div class="p_medium_regular">
<p>Medium Light 20/130% px Uppercase</p>
</div>

Medium Light 20/130% px Uppercase

<div class="p_small_regular">
<p>Small Light 16/130% px Uppercase</p>
</div>

Small Light 16/130% px Uppercase

<div class="p_extra_small_regular">
<p>Extra Small Light 12/130% px Uppercase</p>
</div>

Extra Small Light 12/130% px Uppercase

Body Paragraphs Semibold

<div class="p_large_semibold">
<p>Large Semibold 24/130% px Uppercase</p>
</div>

Large Semibold 24/130% px Uppercase

<div class="p_medium_semibold">
<p>Medium Semibold 20/130% px Uppercase</p>
</div>

Medium Semibold 20/130% px Uppercase

<div class="p_small_semibold">
<p>Small Semibold 16/130% px Uppercase</p>
</div>

Small Semibold 16/130% px Uppercase

<div class="p_extra_small_semibold">
<p>Extra Small Semibold 12/130% px Uppercase</p>
</div>

Extra Small Semibold 12/130% px Uppercase

Display

<div class="display">
<p>It’s a bright idea to choose you. D-72, M-48</p>
</div>

It’s a bright idea to choose you. D-72, M-48

<div class="display_xm">
<p>It’s a bright idea to choose you. D-56, M-32</p>
</div>

It’s a bright idea to choose you. D-56, M-32

<div class="display_xs">
<p>It’s a bright idea to choose you. D-44, M-24</p>
</div>

It’s a bright idea to choose you. D-44, M-24

Display
Large

Regular
72/100% px
Uppercase
<div class="display">
<p></p>
</div>

It’s a bright idea to choose you.

Medium

Regular
56/120% px
Uppercase
<div class="display_xm">
<p></p>
</div>

It’s a bright idea to choose you.

Small

Regular
44/120% px
Uppercase
<div class="display_xs">
<p></p>
</div>

It’s a bright idea to choose you.

Numbers
Large

24/120% px
Uppercase
<div class="number-text-large">
<p></p>
</div>

123456789

Medium

20/120% px
Uppercase
<div class="number-text-medium">
<p></p>
</div>

123456789

Small

16/120% px
Uppercase
<div class="number-text-small">
<p></p>
</div>

123456789

Numbers

<div class="number-text-large">
<p>123456789 D-48, M-24</p>
</div>

123456789 D-48, M-24

<div class="number-text-medium">
<p>123456789 D-24, M-20</p>
</div>

123456789 D-24, M-20

<div class="number-text-small">
<p>123456789 D-20, M-16</p>
</div>

123456789 D-20, M-16

Interactive (Links)
Large

Regular
24/120% px
Uppercase
<div class="interactive_large">
<p></p>
</div>

Interactive Large

Medium

Regular
16/120% px
Uppercase
<div class="interactive_medium">
<p></p>
</div>

Interactive Medium

Small

Regular
12/120% px
Uppercase
<div class="interactive_small">
<p></p>
</div>

Interactive Small

Interactive (Links)

<div class="interactive_large">
<a>Interactive Large D-48, M-24</a>
</div>
Interactive Large D-24
<div class="interactive_medium">
<a>Interactive Medium D-24, M-20</a>
</div>
Interactive Medium D-16
<div class="interactive_small">
<a>Interactive Small D-20, M-16</a>
</div>
Interactive Small D-12
Display - Mobile
Large

Light
48/120% px
Uppercase

It’s a bright idea to choose you.

Medium

Light
32/120% px
Uppercase

It’s a bright idea to choose you.

Small

Light
24/120% px
Uppercase

It’s a bright idea to choose you.

Numbers - Mobile
Large

Light
24/120% px
Uppercase

123456789
Medium

Light
20/120% px
Uppercase

123456789
Small

Light
16/120% px
Uppercase

123456789

Example of SEO reformatting



It’s a bright. D-54 ,M-32

It’s a bright idea. D-54 ,M-32

It’s a bright idea. D-54 ,M-32

It’s a bright idea. D-54 ,M-32

It’s a bright idea. D-54 ,M-32
It’s a bright idea. D-54 ,M-32
<div class="h2">
<h1>It’s a bright idea. D-54 ,M-32</h1>
<h2>It’s a bright idea. D-54 ,M-32</h2>
<h3>It’s a bright idea. D-54 ,M-32</h3>
<h4>It’s a bright idea. D-54 ,M-32</h4>
<h5>It’s a bright idea. D-54 ,M-32</h5>
<h6>It’s a bright idea. D-54 ,M-32</h6>
</div>

Example of SEO reformatting



It’s a bright. D-54 ,M-32

It’s a bright idea. D-54 ,M-32

It’s a bright idea. D-54 ,M-32

It’s a bright idea. D-54 ,M-32

It’s a bright idea. D-54 ,M-32
It’s a bright idea. D-54 ,M-32
<div class="h4">
<h1>It’s a bright idea. D-54 ,M-32</h1>
<h2>It’s a bright idea. D-54 ,M-32</h2>
<h3>It’s a bright idea. D-54 ,M-32</h3>
<h4>It’s a bright idea. D-54 ,M-32</h4>
<h5>It’s a bright idea. D-54 ,M-32</h5>
<h6>It’s a bright idea. D-54 ,M-32</h6>
</div>

Primary Dark

Ocean Breeze 100%

.ocean_breeze
Ocean Breeze 60%
.ocean_breeze60
Ocean Breeze 20%
.ocean_breeze20
Electric Blush 100%

.electric_blush
Electric Blush 60%
.electric_blush60
Electric Blush 20%
.electric_blush20
Sunset Delight 100%

.sunset_delight
Sunset Delight 60%
.sunset_delight60
Sunset Delight 20%
.sunset_delight20

Primary Light

Ocean Breeze 100%
.ocean_breeze
Ocean Breeze 60%
.ocean_breeze60
Ocean Breeze 20%
.ocean_breeze20
Electric Blush 100%
.electric_blush
Electric Blush 60%
.electric_blush60
Electric Blush 20%
.electric_blush20
Sunset Delight 100%
.sunset_delight
Sunset Delight 60%
.sunset_delight60
Sunset Delight 20%
.sunset_delight20

Colors

Orange
#fe8639
variable:
orange_color
Yellow
#FED339
variable:
yellow_color
Pink
#FA3F7F
variable:
pink_color
Light Pink
#F6AACE
variable:
light_pink_color
Blue
#0071FD
variable:
blue_color
Light Blue
#75D5FA
variable:
light_blue_color
<div class="cta-module" >
<a class="cta_button" >
Primary Button
</a>
</div>
Primary Button
<div class="simple-black-cta" >
<a class="cta_button" >
Secondary Button
</a>
</div>
Secondary Button
<div class="normal-cta" >
<a class="cta_button" >
Tertiary Button
</a>
</div>
Tertiary Button

<div class="form_title p_medium_regular">
<h2>Partner with us</h2>
<p>Offer your customers something no other brand can. Collaborate with our world-class design team to bring your vision to life.</p>
</div>
For Form Above Text
<div class="form_title p_medium_regular">
<h2>Curious what’s on our mind?</h2>
<p>Offer your customers something no other brand can. Collaborate with our world-class design team to bring your vision to life.</p>
</div>
For Form Below Text
<div class="submittion_text">
<p>We only send emails when we have something to say. We’ll never share your information. By submitting, you agree to our Privacy Policy and Terms. You can unsubscribe at any time.</p>
</div>