Elements

Primary Color Palette

Coral Orange: #F28C64
Indian Red: #D95857
Lime Green: #76C058
Dodger Blue: #0192d0
Dark Orange: #e3691f
Royal Blue: #184fc2

Secondary Color Palette

Black: #0e1212
Mid Black: #171c1c
Light Black: #1c2121
Black Grey: #313131
Dark Grey: #494949
Slate Grey: #656565
Steel grey: #6F6F6F
Dull Grey: #797979
Just Grey: #808080
Stay Grey: #919191
Mid Grey: #8F8F8F
Dim Grey: #979797
Light grey: #D3D3D3
Smoke Grey: #F7F7F7
White Smoke: #FAFAFA

HEADINGS & TEXT

H1 Heading

Raleway 100 Thin. Font Size: 64, Line Height: 44, Letter Spacing: -3

H2 HEADING - SECTION HEADING

Raleway 700 Bold, Font Size: 20, Line Height: 36, Letter Spacing: 5, All Caps.

H2 HEADING - CATEGORY HEADING

Raleway 500 Medium, Font Size: 18, Line Height: 44, Letter Spacing: 5, All Caps.

H2 Welcome Text

Raleway 200 Extra Light, Font Size: 48, Line Height: 44, 

H2 Sub Text

PT Serif 700 Bold, Font Size: 15, Line Height: 44, Letter Spacing 5

Paragraph Text. 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.

Raleway 400 Normal, Font Size: 13, Line Height: 26, #979797

Paragraph Text. 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.

Raleway 400 Normal, Font Size: 13, Line Height: 26, #494949

LOGO VARIATIONS

White - 160px x 69
Black - 160px x 69
Platform - 160px x 69
Marketing - 160px x 69
Business - 160px x 69

BUTTONS

PRIMARY BUTTON Orange

Orange Button
Normal State
Background: #f8973c
Font-color: #FFFFFF
ORANGE Button
Hover State
Background: #FFFFFF, Border: ##f8973c
Font-color: #f8973c
ORANGE Button
Pressed State
Background: ##f8973c 70% Opacity
Font-color: #FFFFFF
Raleway 600 semi bold, Font Size: 12, Letter-spacing 2, Line Height 20px, Uppercase. Padding: 11px 50px 11px 50px, corner radius 3px

PRIMARY BUTTON Orange Taller

ORANGE Button
Normal State
ORANGE Button
Hover State
ORANGE Button
Pressed State
Raleway 600 semi bold, Font Size: 12, Letter-spacing 2, Line Height 20px, Uppercase. Padding: 14px 50px 14px 50px, corner radius 3px

Primary Button Smaller

ORANGE Button
Normal State
ORANGE Button
Hover State
ORANGE Button
Pressed State
Raleway 600 semi bold, Font Size: 12, Letter-spacing 2, Line Height 20px, Uppercase. Padding: 11px 15px 11px 15px, corner radius 3px

Secondary BUTTON Outline

Outline Button
Normal State
Background: #313131, Border #313131
Font-color: #313131
Outline Button
Hover State
Background: #313131
Font-color: #FFFFFF
Outline Button
Pressed State
Background: #313131 70% Opacity,
Font-color: #FFFFFF
Raleway 600 semi bold, Font Size: 12, Letter-spacing 2, Line Height 20px, Uppercase. Padding: 11px 50px 11px 50px, corner radius 3px

Secondary BUTTON OUTLINE Taller

Outline Button
Normal State
Outline Button
Hover State
Outline Button
Pressed State
Raleway 600 semi bold, Font Size: 12, Letter-spacing 2, Line Height 20px, Uppercase. Padding: 14px 50px 14px 50px, corner radius 3px

Secondary BUTTON OUTLINE SMALLER

Outline Button
Normal State
Outline Button
Hover State
Outline Button
Pressed State
Raleway 600 semi bold, Font Size: 12, Letter-spacing 2, Line Height 20px, Uppercase. Padding: 14px 50px 14px 50px, corner radius 3px

Loading Button State ORange

Orange Button
Replace text with loading spinner from Icon-set. Keep width and height of button the same size.

Inactive Button State Outline

OUTLINE Button
Replace text with loading spinner from Icon-set. Keep width and height of button the same size.

INACTIVE BUTTON STATE

Button INactive
Background Color: #D3D3D3, Font-color: #FFFFFF

Small Green Button

ACCEPT ANSWER
Normal State
ACCEPT ANSWER
Hover State
ACCEPT ANSWER
Pressed State
Raleway 500 medium, Font Size: 11, Line Height 20px, Uppercase. Padding: 3px 10px 0px 10px, corner radius 3px

FOOTERS

Footer Option 1, in combination black.
Footer Option 2, in combination grey.

Horizontal Rules

Height 1px, full width, background color #d5d5d5, margin top & bottom 20px
Height 2px, width 50px, centered, background color #494949, margin top & bottom 30px
Height 2px, width 50px, centered, background color #F28C64, margin top & bottom 30px

Form Elements

Single line inputs

Height 51px, background color #F7f7f7, border color #d5d5d5, radius 3px, padding top & bottom 20px, padding right & left 12px, margin top 20px margin bottom 20px. Font-size 18pt Raleway 400, line height 20px
Green outline #76C058 on active state.
This is  instructional text for the field above.
Instructional text;  Font size 12,Raleway 300 light, italic, #979797
Active state: 1px solid border #76C058
110
Number count  Font size 12,Raleway 600 lsemi bold, #494949
This is an error message positioned beneath the field.
Red outline #76C058 on error notification state.
Error message - margin top 7px, margin-left 5px, Raleway Font 600 semi bold #E05858. Font size 14
min-height 200px, background color #F7f7f7, border color #d5d5d5, radius 3px, padding top & bottom 20px, padding right & left 12px, margin top 20px margin bottom 20px. Font-size 18pt Raleway 400, line height 20px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

IN-lIne Error messages

Inline Message Prompt

Prompting message displayed in inline message. Allow for one message to appear without pushing buttons down.
CancelAction
Background #494949, Corner-radius 3px, Font: #FFFFFF, Raleway 400 Normal 12pt, Padding 10px, margin -top 10px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Inline Message Error

Prompting message displayed in inline message. Text can be normal or bold
CancelAction
Background #d95857, Corner-radius 3px, Font: #FFFFFF, Raleway 400 Normal 12pt, Padding 10px, margin -top 10px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Inline Message SuCCESS

Prompting message displayed in inline message. Allow for one message to appear without pushing buttons down.
CancelAction
Background #d95857, Corner-radius 3px, Font: #FFFFFF, Raleway 400 Normal 12pt, Padding 10px, margin -top 10px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Modal Popups

Green - Success Modal (help)
This is some text to prompt you. Some of this text can be bold.

We recommend having no more than two lines of text,
Okay, Got It!
Background overlay: #494949 transparency 30%
Modal: width 375px, border 2px solid #76C058, corner- radius 5px. float centre 
Modal heading: background #76C058, padding 10px, font size 14, Raleway 700 bold #FFFFFF
Modal text: padding 10px, font size 14, Raleway 500 Medium #494949
Modal close link: float right,margin-right 10px, margin-bottom 10px, font size 14 , Raleway 700 bold
Orange - Help Modal (nudge)
This is some text to prompt you. Some of this text can be bold.

We recommend having no more than two lines of text,
Okay, Got It!
Background overlay: #494949 transparency 30%
Modal: width 375px, border 2px solid #F28C64, corner- radius 5px. float centre 
Modal heading: background #F28C64, padding 10px, font size 14, Raleway 700 bold #FFFFFF
Modal text: padding 10px, font size 14, Raleway 500 Medium #494949
Modal close link: float right,margin-right 10px, margin-bottom 10px, font size 14 , Raleway 700 bold
Red - Error Modal (error)
This is some text to prompt you. Some of this text can be bold.

We recommend having no more than two lines of text,
Okay, Got It!
Background overlay: #494949 transparency 30%
Modal: width 375px, border 2px solid #D95857, corner- radius 5px. float centre 
Modal heading: background #D95857, padding 10px, font size 14, Raleway 700 bold #FFFFFF
Modal text: padding 10px, font size 14, Raleway 500 Medium #494949
Modal close link: float right,margin-right 10px, margin-bottom 10px, font size 14 , Raleway 700 bold

Category Tags & hashtags

Category Tag
#camelCaseHashtag

TOOLTIPS

FIXED Width TOOLTIPS

This is my tooltip text on two lines.
Fixed width - 120px, Background-color: #494949, Corner -Radius 3px, padding: 7px 10px 7px 10px, font: #FFF Raleway 12pt Normal

Full Width TOOLTIPS

This is my tooltip text at full width depending on the length of text