Style Guide

Colors

Brand 1
#002455

Variables: ${colors.brand1}, ${colors.brand1Darkest}, ${colors.brand1Darker}, ${colors.brand1Dark}, ${colors.brand1Light}, ${colors.brand1Lighter}, ${colors.brand1Lightest}

Brand 2
#E6251D

Variables: ${colors.brand2}, ${colors.brand2Darkest}, ${colors.brand2Darker}, ${colors.brand2Dark}, ${colors.brand2Light}, ${colors.brand2Lighter}, ${colors.brand2Lightest}

Brand 3
#004A8E

Variables: ${colors.brand3}, ${colors.brand3Darkest}, ${colors.brand3Darker}, ${colors.brand3Dark}, ${colors.brand3Light}, ${colors.brand3Lighter}, ${colors.brand3Lightest}

Brand 4
#002455

Variables: ${colors.brand4}, ${colors.brand4Darkest}, ${colors.brand4Darker}, ${colors.brand4Dark}, ${colors.brand4Light}, ${colors.brand4Lighter}, ${colors.brand4Lightest}

Black
#000000

Variables: ${colors.black}, ${colors.blackDarkest}, ${colors.blackDarker}, ${colors.blackDark}, ${colors.blackLight}, ${colors.blackLighter}, ${colors.blackLightest}

Neutral
#F7F7F7

Variables: ${colors.neutral}, ${colors.neutralDarkest}, ${colors.neutralDarker}, ${colors.neutralDark}, ${colors.neutralLight}, ${colors.neutralLighter}, ${colors.neutralLightest}

White
#FFFFFF

Variables: ${colors.white}, ${colors.whiteDarkest}, ${colors.whiteDarker}, ${colors.whiteDark}, ${colors.whiteLight}, ${colors.whiteLighter}, ${colors.whiteLightest}

Body
#2C2C2C

Variables: ${colors.body}, ${colors.bodyDarkest}, ${colors.bodyDarker}, ${colors.bodyDark}, ${colors.bodyLight}, ${colors.bodyLighter}, ${colors.bodyLightest}

Typography

Sans Serif

Value: muli, sans-serif

Variable: ${typography.SansSerif}

Helper Class: className="text-sans-serif"

Serif

Value: baskerville-display-pt, serif

Variable: ${typography.Serif}

Helper Class: className="text-serif"

Condensed

Value: muli, sans-serif

Variable: ${typography.Condensed}

Helper Class: className="text-condensed"

Display

Value: Sheila, serif

Variable: ${typography.Display}

Helper Class: className="text-display"

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec.

Buttons

Standard Button

className="btn"

Button Brand 1

className="btn btn-brand1"

Button Brand 2

className="btn btn-brand2"

Button Brand 3

className="btn btn-brand3"

Button Brand 4

className="btn btn-brand4"

Button Hollow

className="btn btn-hollow"

Hollow White

className="btn btn-hollow-white"

Hollow Brand 1

className="btn btn-hollow-brand1"

Hollow Brand 2

className="btn btn-hollow-brand2"

Hollow Brand 3

className="btn btn-hollow-brand3"

Hollow Brand 4

className="btn btn-hollow-brand4"

Icon Buttons

Arrow White

className="btn btn-arrow-white"

Arrow Black

className="btn btn-hollow btn-arrow-black"

Phone White

className="btn btn-phone-white"

Phone Black

className="btn btn-hollow btn-phone-black"

Chat White

className="btn btn-chat-white"

Chat Black

className="btn btn-hollow btn-chat-black"

Let's Talk!