Colors
brand 1#a8353a SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand1} ${colors.brand1Dark} ${colors.brand1Darker} ${colors.brand1Darkest} ${colors.brand1Light} ${colors.brand1Lighter} ${colors.brand1Lightest}
brand 2#f5f4f0 SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand2} ${colors.brand2Dark} ${colors.brand2Darker} ${colors.brand2Darkest} ${colors.brand2Light} ${colors.brand2Lighter} ${colors.brand2Lightest}
brand 3#8F191E SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand3} ${colors.brand3Dark} ${colors.brand3Darker} ${colors.brand3Darkest} ${colors.brand3Light} ${colors.brand3Lighter} ${colors.brand3Lightest}
brand 4#4a4a4a SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.brand4} ${colors.brand4Dark} ${colors.brand4Darker} ${colors.brand4Darkest} ${colors.brand4Light} ${colors.brand4Lighter} ${colors.brand4Lightest}
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#f5f4f0 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}
error#8F191E SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.error} ${colors.errorDark} ${colors.errorDarker} ${colors.errorDarkest} ${colors.errorLight} ${colors.errorLighter} ${colors.errorLightest}
yellow#fbfcae SL
SL
SL
SL
SL
SL
SL
Variables: ${colors.yellow} ${colors.yellowDark} ${colors.yellowDarker} ${colors.yellowDarkest} ${colors.yellowLight} ${colors.yellowLighter} ${colors.yellowLightest}
Typography
Sans Serif
Value: freight-sans-pro, sans-serif
Variable: ${typography.SansSerif}
Helper Class: className="text-sans-serif"
Serif
Value: freight-display-pro, serif
Variable: ${typography.Serif}
Helper Class: className="text-serif"
Condensed
Value: freight-sans-pro, sans-serif
Variable: ${typography.Condensed}
Helper Class: className="text-condensed"
Display
Value: freight-display-pro, 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