Brand Styles

The fonts used are 'Titling Gothic FB Normal' for headings and 'Helvetica Neue' for body text. You can download the webfonts here. Please use the WOFF format for better performance.

Color
Black
#030F15
Element Class
.
bg-color-
black
Text Class
.
block_
text-color-
black
Blue
#030F15
Element Class
.
bg-color-
dark-green
Text Class
.
block_
text-color-
blue
Sand
#FEF7E8
Element Class
.
bg-color-
sand
Text Class
.
block_
text-color-
sand
White
#545454
Element Class
.
bg-color-
white
Text Class
.
block_
text-color-
white
Orange
#E98006
Element Class
.
bg-color-
orange
Text Class
.
block_
text-color-
orange
Grey
#E98006
Element Class
.
bg-color-
grey
Text Class
.
block_
text-color-
grey
Headings

Heading

.
heading-style-
384px
Heading Size
384
px
Line Height
120
%

Heading

.
heading-style-
320px
Heading Size
320
px
Line Height
120
%

Heading

.
heading-style-
256px
Heading Size
256
px
Line Height
120
%

Heading

.
heading-style-
224px
Heading Size
224
px
Line Height
120
%

Heading

.
heading-style-
192px
Heading Size
192
px
Line Height
120
%

Heading

.
heading-style-
160px
Heading Size
160
px
Line Height
120
%

Heading

.
heading-style-
128px
Heading Size
128
px
Line Height
120
%

Heading

.
heading-style-
96px
Heading Size
96
px
Line Height
120
%

Heading

.
heading-style-
88px
Heading Size
88
px
Line Height
120
%

Heading

.
heading-style-
80px
Heading Size
80
px
Line Height
120
%

Heading

.
heading-style-
72px
Heading Size
72
px
Line Height
120
%

Heading

.
heading-style-
64px
Heading Size
64
px
Line Height
120
%

Heading

.
heading-style-
56px
Heading Size
56
px
Line Height
120
%

Heading

.
heading-style-
160px
Heading Size
160
px
Line Height
120
%

Heading

.
heading-style-
48px
Heading Size
48
px
Line Height
120
%

Heading

.
heading-style-
40px
Heading Size
40
px
Line Height
120
%

Heading

.
heading-style-
32px
Heading Size
32
px
Line Height
120
%
Text Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.
text-size-
48
px
Text Size
48
px
Line Height
110
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.

.
text-size-
40
px
Text Size
40
px
Line Height
120
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

.
text-size-
32
px
Text Size
32
px
Line Height
120
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.
text-size-
24
px
Text Size
24
px
Line Height
120
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor. Interdum nulla, ut commodo diam libero vitae erat.

.
text-size-
20
px
Text Size
20
px
Line Height
120
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor. Interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

.
text-size-
16
px
Text Size
16
px
Line Height
120
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor. Interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-size-
14
px
Text Size
14
px
Line Height
120
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor. Interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-size-
12
px
Text Size
12
px
Line Height
140
%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor. Interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-size-
10
px
Text Size
10
px
Line Height
150
%
Buttons
Button Text
Button Component
.
button-
orange
Button Text
Button Component
.
button-
orange
Button Text
Button Component
.
button-
outline-dark-green
Button Text
Button Component
.
button-
outline-dark-green
Button Text
Button Component
.
button-
outline-dark-green
Button Text
Button Component
.
button-
outline-dark-green
Text Strokes

Text

Text Class
.
text-stroke-
black

Text

Text Class
.
text-stroke-
dark-grey

Text

Text Class
.
text-stroke-
grey

Text

Text Class
.
text-stroke-
light-grey

Text

Text Class
.
text-stroke-
white

Text

Text Class
.
text-stroke-
outrageous-orange

Text

Text Class
.
text-stroke-
dun
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.