<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=389154109794416&amp;ev=PageView&amp;noscript=1">

CLIENT NOTICES  |  For the latest client updates, including new Florida E-Verify obligations and client ERC claim information, please visit www.spli.com/clientnotices

CLIENT NOTICES  | The updated deadline for clients to submit documentation/information supporting an ERC claim is 03/22/2024. For more information, please visit www.spli.com/clientnotices

SPLI STYLE GUIDE

Welcome to the hero banner. Time to clearly state what your customer wants and how your product or service helps them get it.

 

Heading Styles: (Oswald)


HEADING 1

HEADING 2

HEADING 3

HEADING 4

HEADING 5
HEADING 6

Button Styles:


BTN-PRIMARY

BTN-SECONDARY

BTN-TERTIARY

Link Styles:


Normal Link 

Hover Link 

Link Testing

 

 

 

Body Style: (Lato)


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

H1 Heading Style


HEADING 1

The H1 heading should always be capitalized and is used in white over dark. This is used for page titles like "SPLI STYLE GUIDE" at the top of this page.  

H2 Heading Style + Accent:

Accent-line

HEADING 2

The H2 heading tag should always be capitalized and is the primary headline style in the body of web pages. In some executions it will also include the yellow accent line above. The line can be copied and pasted into the content editor or be found by searching in HubSpot images "Accent".

Heading Font Used:


Oswald

Use Oswald for headlines only. Avoid using weights heavier than bold.

Download Font

Body Font Used:


Lato

Use Lato for sub-headlines and body copy. Use different weights to create hierarchy. When Lato is used for headlines it should also be in all caps.

Download Font

Primary Color Palette:


   Maroon: #7C2128
   Dark Blue: #223254
   Yellow: #FCA311
   Brown: #633A11

 

Neutral Color Palette:


   Charcoal: #000000
   Dark Gray: #404040
   Light Gray: #f7f7f7

Block Quote Style for Clients:


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea."

Accent-line
Client Name, Company

Arrow

 

Block Quote Style for Team Members:


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea."

Accent-line
Team Member Name, Company

blue-arrow

 

Benefits3

Accent-line

IMAGE STYLE

Larger images should be styled with a frame as shown on the left. The top-right blue angle rounded corner is ⬢ Dark Blue: #223254 and the bottom-left yellow angle is Yellow: #FCA311.

You can find the framed PSD to download here:

DOWNLOAD

Accent-line

BACKGROUND ELEMENTS

You can find the background elements within HubSpot Image Search by searching the word "Lines". The background elements should only be used with the "Background Decorator" module and positioned accordingly. (Advanced Users) 


Maroon-lines

Blue-Sidelines

Left-sidelines

Lines-BG

swoop-lines

Accent-line

ICONS

workers-compensation-icon

Workers' Compensation

 

payroll-administration-icon

Payroll Administration

 

claim-risk-management-icon

Safety and Risk Management

 

benefits

Benefits

 

3 STEPS STYLE

1

TITLE HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat

2

TITLE HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat

3

TITLE HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat

Accent-line

BOTTOM CTA SECTION STYLE

All call-to-action sections at the bottom of pages should be styled like this. 1 column centered with a width of 900px. Button should use the "Btn-secondary" Style

REQUEST A QUOTE

Accent-line

PHOTOGRAPHY STYLE

Benefits3

Services

Workers-five

 

Vested-interest

Vested

Handling

You can find the Newsletter Art to download here:

DOWNLOAD

Accent-line

FORM STYLE