Spacing Value Examples Usage
spacing-00 0
Used for margins and padding only.
spacing-025 0.25rem
Used for margins and padding only.
spacing-050 0.5rem
Used for margins and padding only.
spacing-075 0.75rem
Used for margins and padding only.
spacing-1 1rem
Used for margins and padding only.
spacing-125 1.25rem
Used for margins and padding only.
spacing-150 1.5rem
Used for margins and padding only.
spacing-2 2rem
Used for margins and padding only.
Font Weights Value Examples Usage
font-weight-light 300
The quick brown fox jumps over the lazy dog.
font-weight-normal 400
The quick brown fox jumps over the lazy dog.
font-weight-bold 700
The quick brown fox jumps over the lazy dog.
body-xs-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
body-xxxs-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
primary-xs-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
accent-m-font-weight-mobile 300
The quick brown fox jumps over the lazy dog.
basic-l-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
basic-xxl-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
accent-regular-xxs-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
basic-xs-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
accent-l-font-weight-mobile 300
The quick brown fox jumps over the lazy dog.
primary-xxs-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
body-xxs-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
body-s-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
basic-m-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
accent-xxs-font-weight-desktop 300
The quick brown fox jumps over the lazy dog.
accent-s-font-weight-desktop 300
The quick brown fox jumps over the lazy dog.
secondary-s-font-weight-desktop-xl 600
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-weight-desktop-xl 600
The quick brown fox jumps over the lazy dog.
secondary-xl-font-weight-desktop 600
The quick brown fox jumps over the lazy dog.
secondary-regular-m-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
body-xl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
secondary-xs-font-weight-desktop-xl 600
The quick brown fox jumps over the lazy dog.
body-xxxl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
primary-xl-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
secondary-l-font-weight-desktop 600
The quick brown fox jumps over the lazy dog.
body-m-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
basic-xxs-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
accent-xs-font-weight-mobile 300
The quick brown fox jumps over the lazy dog.
basic-xl-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
secondary-m-font-weight-desktop 600
The quick brown fox jumps over the lazy dog.
basic-s-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
primary-m-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
primary-xxl-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
body-xxl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
body-l-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
basic-xl-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
basic-xxs-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
basic-s-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
secondary-m-font-weight-desktop-xl 600
The quick brown fox jumps over the lazy dog.
secondary-l-font-weight-desktop-xl 600
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
basic-xs-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
secondary-xs-font-weight-desktop 600
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-weight-desktop 600
The quick brown fox jumps over the lazy dog.
secondary-s-font-weight-desktop 600
The quick brown fox jumps over the lazy dog.
secondary-xl-font-weight-desktop-xl 600
The quick brown fox jumps over the lazy dog.
secondary-regular-m-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
accent-s-font-weight-desktop-xl 300
The quick brown fox jumps over the lazy dog.
accent-xxs-font-weight-desktop-xl 300
The quick brown fox jumps over the lazy dog.
secondary-s-font-weight-mobile 600
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-weight-mobile 600
The quick brown fox jumps over the lazy dog.
basic-m-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
accent-regular-xxs-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
basic-xxl-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
basic-l-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
basic-xs-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
secondary-xs-font-weight-mobile 600
The quick brown fox jumps over the lazy dog.
basic-xl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
body-xxl-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
primary-xxl-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
accent-m-font-weight-desktop-xl 300
The quick brown fox jumps over the lazy dog.
body-xs-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
body-l-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
body-xxxs-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
primary-xs-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
body-m-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
accent-l-font-weight-desktop-xl 300
The quick brown fox jumps over the lazy dog.
primary-m-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
basic-xxs-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
accent-xs-font-weight-desktop 300
The quick brown fox jumps over the lazy dog.
basic-s-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
secondary-m-font-weight-mobile 600
The quick brown fox jumps over the lazy dog.
primary-xl-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
body-xxxl-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
body-xl-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
secondary-l-font-weight-mobile 600
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
primary-xxs-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
body-xxs-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
body-s-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
secondary-regular-m-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
secondary-xl-font-weight-mobile 600
The quick brown fox jumps over the lazy dog.
accent-s-font-weight-mobile 300
The quick brown fox jumps over the lazy dog.
accent-xxs-font-weight-mobile 300
The quick brown fox jumps over the lazy dog.
basic-m-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
body-s-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
body-xxs-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
primary-xxs-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
body-xl-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
body-xxxl-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
primary-xl-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
accent-xs-font-weight-desktop-xl 300
The quick brown fox jumps over the lazy dog.
accent-regular-xxs-font-weight-mobile 400
The quick brown fox jumps over the lazy dog.
accent-l-font-weight-desktop 300
The quick brown fox jumps over the lazy dog.
basic-xxl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
primary-m-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
body-m-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
basic-l-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
accent-m-font-weight-desktop 300
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
body-xxxs-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
primary-xs-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
body-xs-font-weight-desktop normal
The quick brown fox jumps over the lazy dog.
primary-xxl-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
body-xxl-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
body-l-font-weight-desktop-xl normal
The quick brown fox jumps over the lazy dog.
Font Sizes Value Examples Usage
body-l-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
primary-xl-font-size-desktop 33px
The quick brown fox jumps over the lazy dog.
body-xxxl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
body-xl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-mobile 30px
The quick brown fox jumps over the lazy dog.
primary-l-font-size-mobile 24px
The quick brown fox jumps over the lazy dog.
body-xxl-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
basic-s-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
secondary-m-font-size-desktop-xl 14px
The quick brown fox jumps over the lazy dog.
basic-xxs-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
basic-xs-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
secondary-l-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
body-s-font-size-desktop 16px
The quick brown fox jumps over the lazy dog.
body-xxs-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
primary-s-font-size-desktop 20px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-desktop 17px
The quick brown fox jumps over the lazy dog.
secondary-regular-m-font-size-desktop-xl 15px
The quick brown fox jumps over the lazy dog.
secondary-xl-font-size-desktop-xl 21px
The quick brown fox jumps over the lazy dog.
accent-s-font-size-desktop-xl 23px
The quick brown fox jumps over the lazy dog.
accent-xxs-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
accent-l-font-size-desktop 58px
The quick brown fox jumps over the lazy dog.
accent-m-font-size-desktop 26px
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-size-desktop 15px
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-desktop 19px
The quick brown fox jumps over the lazy dog.
body-xxxs-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
body-xs-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-mobile 13px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-mobile 12px
The quick brown fox jumps over the lazy dog.
basic-m-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
secondary-xs-font-size-mobile 13px
The quick brown fox jumps over the lazy dog.
accent-regular-xxs-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
basic-xxl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
basic-l-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
basic-l-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
basic-xxl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
accent-regular-xxs-font-size-desktop 18px
The quick brown fox jumps over the lazy dog.
basic-xl-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
basic-m-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
body-xs-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
body-xxxs-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-desktop-xl 19px
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-size-desktop-xl 15px
The quick brown fox jumps over the lazy dog.
accent-m-font-size-desktop-xl 26px
The quick brown fox jumps over the lazy dog.
basic-s-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
secondary-m-font-size-mobile 14px
The quick brown fox jumps over the lazy dog.
accent-xxs-font-size-desktop 18px
The quick brown fox jumps over the lazy dog.
accent-l-font-size-desktop-xl 58px
The quick brown fox jumps over the lazy dog.
basic-xxs-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
accent-s-font-size-desktop 23px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-desktop-xl 17px
The quick brown fox jumps over the lazy dog.
body-xxs-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
primary-s-font-size-desktop-xl 20px
The quick brown fox jumps over the lazy dog.
body-s-font-size-desktop-xl 16px
The quick brown fox jumps over the lazy dog.
secondary-xl-font-size-desktop 21px
The quick brown fox jumps over the lazy dog.
secondary-regular-m-font-size-desktop 15px
The quick brown fox jumps over the lazy dog.
secondary-l-font-size-mobile 18px
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
secondary-xl-font-size-mobile 21px
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
secondary-l-font-size-desktop 18px
The quick brown fox jumps over the lazy dog.
secondary-regular-m-font-size-mobile 15px
The quick brown fox jumps over the lazy dog.
accent-xxs-font-size-mobile 14px
The quick brown fox jumps over the lazy dog.
secondary-m-font-size-desktop 14px
The quick brown fox jumps over the lazy dog.
basic-s-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
basic-xxs-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
accent-s-font-size-mobile 23px
The quick brown fox jumps over the lazy dog.
basic-m-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
body-xl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
body-xxxl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
primary-xl-font-size-desktop-xl 33px
The quick brown fox jumps over the lazy dog.
accent-regular-xxs-font-size-mobile 14px
The quick brown fox jumps over the lazy dog.
primary-m-font-size-desktop-xl 21px
The quick brown fox jumps over the lazy dog.
basic-xxl-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
body-m-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
basic-l-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
basic-xl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
accent-xs-font-size-desktop-xl 23px
The quick brown fox jumps over the lazy dog.
secondary-xs-font-size-desktop 13px
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-desktop-xl 45px
The quick brown fox jumps over the lazy dog.
primary-l-font-size-desktop-xl 27px
The quick brown fox jumps over the lazy dog.
body-xxl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
body-l-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
body-xs-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
body-xxxs-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-mobile 19px
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-size-mobile 13px
The quick brown fox jumps over the lazy dog.
accent-m-font-size-mobile 26px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-desktop 12px
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-desktop 13px
The quick brown fox jumps over the lazy dog.
basic-xs-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
accent-l-font-size-mobile 40px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-mobile 17px
The quick brown fox jumps over the lazy dog.
primary-s-font-size-mobile 20px
The quick brown fox jumps over the lazy dog.
body-xxs-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
body-s-font-size-mobile 16px
The quick brown fox jumps over the lazy dog.
basic-xs-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-desktop-xl 13px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-desktop-xl 12px
The quick brown fox jumps over the lazy dog.
body-l-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
body-xxl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
primary-l-font-size-desktop 27px
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-desktop 45px
The quick brown fox jumps over the lazy dog.
secondary-xs-font-size-desktop-xl 13px
The quick brown fox jumps over the lazy dog.
body-xl-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
body-xxxl-font-size-mobile initial
The quick brown fox jumps over the lazy dog.
primary-xl-font-size-mobile 29px
The quick brown fox jumps over the lazy dog.
basic-xl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
accent-xs-font-size-mobile 18px
The quick brown fox jumps over the lazy dog.
primary-m-font-size-mobile 21px
The quick brown fox jumps over the lazy dog.
body-m-font-size-desktop 18px
The quick brown fox jumps over the lazy dog.
body-m-font-size-mobile 18px
The quick brown fox jumps over the lazy dog.
primary-m-font-size-desktop 21px
The quick brown fox jumps over the lazy dog.
accent-xs-font-size-desktop 23px
The quick brown fox jumps over the lazy dog.
Line Heights Value Examples Usage
line-height-small 1.1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
line-height-normal 1.35
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
line-height-copy 1.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
line-height-large 1.85
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-xs-line-height-desktop 24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-m-line-height-desktop 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-m-line-height-desktop 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-s-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-m-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxl-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xl-line-height-desktop 33px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xl-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxs-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xs-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-l-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxl-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-regular-m-line-height-desktop-xl 15px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xl-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-xxs-line-height-desktop-xl 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-s-line-height-desktop-xl 23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-s-line-height-desktop 23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxs-line-height-desktop 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-s-line-height-mobile 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxs-line-height-mobile 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-s-line-height-desktop 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-l-line-height-desktop 50px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-m-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxxs-line-height-desktop 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xs-line-height-desktop 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xs-line-height-mobile 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-l-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-regular-xxs-line-height-desktop-xl 26px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxl-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-m-line-height-desktop 26px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xl-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-regular-xxs-line-height-desktop 26px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xs-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xs-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxs-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxxs-line-height-desktop-xl 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-m-line-height-desktop-xl 26px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-l-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxl-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-m-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-s-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-m-line-height-mobile 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxs-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-l-line-height-desktop-xl 50px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxs-line-height-desktop-xl 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-s-line-height-desktop-xl 23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxs-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-s-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-l-line-height-mobile 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxl-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-s-line-height-desktop 23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-xxs-line-height-desktop 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xl-line-height-mobile 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xl-line-height-desktop 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-regular-m-line-height-mobile 15px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-regular-m-line-height-desktop 15px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-s-line-height-mobile 23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-xxs-line-height-mobile 0.4px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxl-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-l-line-height-desktop 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-m-line-height-desktop 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-s-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xl-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xl-line-height-desktop-xl 33px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxl-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-m-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-l-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-m-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-m-line-height-desktop-xl 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-regular-xxs-line-height-mobile 14px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxl-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-xs-line-height-desktop-xl 24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxl-line-height-desktop-xl 51px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-l-line-height-desktop-xl 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxl-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-l-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xl-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xs-line-height-desktop 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xs-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxs-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xs-line-height-mobile 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxxs-line-height-mobile 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-m-line-height-mobile 26px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-l-line-height-mobile 36px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xs-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxs-line-height-desktop 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-s-line-height-desktop 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxs-line-height-mobile 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-s-line-height-mobile 23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxs-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-s-line-height-mobile 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-s-line-height-desktop-xl 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxs-line-height-desktop-xl 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xl-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxl-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xl-line-height-mobile 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xs-line-height-desktop-xl 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-m-line-height-mobile 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-m-line-height-mobile 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xl-line-height-desktop-xl initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-xs-line-height-mobile 19px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-l-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxl-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-l-line-height-desktop 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxl-line-height-desktop 51px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxl-line-height-mobile 36px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxl-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-l-line-height-mobile 24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-l-line-height-mobile initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
Font Families Value Examples Usage
font-family-primary-fancy 'beaufort-pro', serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-primary serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-secondary-fancy 'neue-haas-unica', sans-serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-secondary serif
The quick brown fox jumps over the lazy dog.
Fallback for secondary-fancy
font-family-body Georgia, Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-basic Arial, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-accent Verdana, serif
The quick brown fox jumps over the lazy dog.
font-family-accent-fancy Verdana, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-body-fancy Georgia, Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
Horizontal Rule Colors Value Examples Usage
border-color-grey-lightest rgb(239, 239, 239)
border-color-brand-secondary-light rgb(0, 0, 0)
border-color-grey-light rgb(153, 153, 153)
border-color-grey-dark rgb(102, 102, 102)
border-color-brand-secondary-dark rgb(0, 0, 0)
border-color-brand-secondary rgb(21, 57, 105)
border-color-grey rgb(117, 117, 117)
border-color-brand-primary-light rgb(236, 28, 36)
border-color-white rgb(255, 255, 255)
border-color-brand-primary-dark rgb(236, 28, 36)
border-color-brand-primary rgb(255, 213, 53)
border-color-grey-darkest rgb(64, 64, 64)
Background Colors Value Examples Usage
background-color-grey-light rgb(153, 153, 153)
background-color-grey-lightest rgb(247, 247, 247)
background-color-brand-secondary-dark rgb(0, 0, 0)
background-color-brand-secondary-light rgb(0, 0, 0)
background-color-grey-dark rgb(102, 102, 102)
background-color-grey rgb(117, 117, 117)
background-color-body rgb(255, 255, 255) The background color of the main body of the site.
background-color-brand-secondary rgb(21, 57, 105)
background-color-black rgb(0, 0, 0)
background-color-brand-primary-light rgb(236, 28, 36)
background-color-brand-primary-dark rgb(236, 28, 36)
background-color-white rgb(255, 255, 255)
background-color-brand-primary rgb(255, 213, 53) The primary brand color. This should be dark in hue, and have sufficient contrast with white text.
background-color-grey-darkest rgb(64, 64, 64)
Text Colors Value Examples Usage
color-brand-secondary rgb(21, 57, 105) The quick brown fox jumps over the lazy dog.
color-black rgb(0, 0, 0) The quick brown fox jumps over the lazy dog.
color-brand-primary-light rgb(236, 28, 36) The quick brown fox jumps over the lazy dog.
color-brand-primary-dark rgb(236, 28, 36) The quick brown fox jumps over the lazy dog.
color-white rgb(255, 255, 255) The quick brown fox jumps over the lazy dog.
color-brand-primary rgb(255, 213, 53) The quick brown fox jumps over the lazy dog.
color-grey-light rgb(153, 153, 153) The quick brown fox jumps over the lazy dog.
color-brand-secondary-dark rgb(0, 0, 0) The quick brown fox jumps over the lazy dog.
color-brand-secondary-light rgb(0, 0, 0) The quick brown fox jumps over the lazy dog.
color-grey-dark rgb(102, 102, 102) The quick brown fox jumps over the lazy dog.
color-grey rgb(117, 117, 117) The quick brown fox jumps over the lazy dog.
color-grey-darkest rgb(64, 64, 64) The quick brown fox jumps over the lazy dog.
color-grey-lightest rgb(247, 247, 247) The quick brown fox jumps over the lazy dog.