brand 1#606161 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand1} ${colors.brand1Dark} ${colors.brand1Darker} ${colors.brand1Darkest} ${colors.brand1Light} ${colors.brand1Lighter} ${colors.brand1Lightest}
brand 2#C96213 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand2} ${colors.brand2Dark} ${colors.brand2Darker} ${colors.brand2Darkest} ${colors.brand2Light} ${colors.brand2Lighter} ${colors.brand2Lightest}
brand 3#C96213 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand3} ${colors.brand3Dark} ${colors.brand3Darker} ${colors.brand3Darkest} ${colors.brand3Light} ${colors.brand3Lighter} ${colors.brand3Lightest}
brand 4#C96213 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand4} ${colors.brand4Dark} ${colors.brand4Darker} ${colors.brand4Darkest} ${colors.brand4Light} ${colors.brand4Lighter} ${colors.brand4Lightest}
black#0F0F0F SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.black} ${colors.blackDark} ${colors.blackDarker} ${colors.blackDarkest} ${colors.blackLight} ${colors.blackLighter} ${colors.blackLightest}
border#A2A2A2 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.border} ${colors.borderDark} ${colors.borderDarker} ${colors.borderDarkest} ${colors.borderLight} ${colors.borderLighter} ${colors.borderLightest}
bg#f3f3f3 SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.bg} ${colors.bgDark} ${colors.bgDarker} ${colors.bgDarkerDark} ${colors.bgDarkerDarker} ${colors.bgDarkerDarkest} ${colors.bgDarkerLight} ${colors.bgDarkerLighter} ${colors.bgDarkerLightest} ${colors.bgDarkest} ${colors.bgLight} ${colors.bgLighter} ${colors.bgLightest}
bgDarker#EBEBEB SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.bgDarker} ${colors.bgDarkerDark} ${colors.bgDarkerDarker} ${colors.bgDarkerDarkest} ${colors.bgDarkerLight} ${colors.bgDarkerLighter} ${colors.bgDarkerLightest}
darkGrey#3F4040 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.darkGrey} ${colors.darkGreyDark} ${colors.darkGreyDarker} ${colors.darkGreyDarkest} ${colors.darkGreyLight} ${colors.darkGreyLighter} ${colors.darkGreyLightest}
neutral#EDEDED 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#2B2B2B SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.body} ${colors.bodyDark} ${colors.bodyDarker} ${colors.bodyDarkest} ${colors.bodyLight} ${colors.bodyLighter} ${colors.bodyLightest}
errorred SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.error} ${colors.errorDark} ${colors.errorDarker} ${colors.errorDarkest} ${colors.errorLight} ${colors.errorLighter} ${colors.errorLightest}
Sans Serif
Value: roboto, sans-serif
Variable: ${typography.SansSerif}
Helper Class: className="text-sans-serif"
Serif
Value: roboto, serif
Variable: ${typography.Serif}
Helper Class: className="text-serif"
Condensed
Value: roboto-condensed, sans-serif
Variable: ${typography.Condensed}
Helper Class: className="text-condensed"
Display
Value: The Nautigal, cursive
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.
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"
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"
Download White
className="btn btn-download-white"
Download Black