Colors

brand 1#799a05  SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL

Variables: ${colors.brand1} ${colors.brand1Alt} ${colors.brand1AltDark} ${colors.brand1AltDarker} ${colors.brand1AltDarkest} ${colors.brand1AltLight} ${colors.brand1AltLighter} ${colors.brand1AltLightest} ${colors.brand1Dark} ${colors.brand1Darker} ${colors.brand1Darkest} ${colors.brand1Light} ${colors.brand1Lighter} ${colors.brand1Lightest}

brand 1Alt#4F5B31  SL
SL
SL
SL
SL
SL
SL

Variables: ${colors.brand1Alt} ${colors.brand1AltDark} ${colors.brand1AltDarker} ${colors.brand1AltDarkest} ${colors.brand1AltLight} ${colors.brand1AltLighter} ${colors.brand1AltLightest}

brand 2#f28b00  SL
SL
SL
SL
SL
SL
SL

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

brand 3#4D5A31  SL
SL
SL
SL
SL
SL
SL

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

brand 4#58585B  SL
SL
SL
SL
SL
SL
SL

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

brand 5#F1F1F2  SL
SL
SL
SL
SL
SL
SL

Variables: ${colors.brand5} ${colors.brand5Dark} ${colors.brand5Darker} ${colors.brand5Darkest} ${colors.brand5Light} ${colors.brand5Lighter} ${colors.brand5Lightest}

brand 6#633511  SL
SL
SL
SL
SL
SL
SL

Variables: ${colors.brand6} ${colors.brand6Dark} ${colors.brand6Darker} ${colors.brand6Darkest} ${colors.brand6Light} ${colors.brand6Lighter} ${colors.brand6Lightest}

black#000000  SL
SL
SL
SL
SL
SL
SL

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

neutral#EEEEEE  SL
SL
SL
SL
SL
SL
SL

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

white#FFFFFF  SL
SL
SL
SL
SL
SL
SL

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

body#4B4C49  SL
SL
SL
SL
SL
SL
SL

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

border#EEEDED  SL
SL
SL
SL
SL
SL
SL

Variables: ${colors.border} ${colors.borderDark} ${colors.borderDarker} ${colors.borderDarkest} ${colors.borderLight} ${colors.borderLighter} ${colors.borderLightest}

errorred  SL
SL
SL
SL
SL
SL
SL

Variables: ${colors.error} ${colors.errorDark} ${colors.errorDarker} ${colors.errorDarkest} ${colors.errorLight} ${colors.errorLighter} ${colors.errorLightest}

Typography

Sans Serif

Value: myriad-pro, sans-serif

Variable: ${typography.SansSerif}

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

Serif

Value: myriad-pro, sans-serif

Variable: ${typography.Serif}

Helper Class: className="text-serif"

Condensed

Value: Merriweather Sans, sans-serif

Variable: ${typography.Condensed}

Helper Class: className="text-condensed"

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"