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 700
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-mobile 700
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 700
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-mobile 700
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 normal
The quick brown fox jumps over the lazy dog.
secondary-xl-font-weight-desktop normal
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 normal
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 700
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 700
The quick brown fox jumps over the lazy dog.
primary-xxl-font-weight-mobile normal
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-mobile 700
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 normal
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-weight-desktop normal
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 normal
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 normal
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 normal
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 700
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-desktop-xl 700
The quick brown fox jumps over the lazy dog.
primary-xxl-font-weight-desktop normal
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 700
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 700
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 700
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 700
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-desktop-xl 700
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 normal
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 700
The quick brown fox jumps over the lazy dog.
primary-xxs-font-weight-desktop 700
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 700
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 700
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 700
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 700
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 normal
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-desktop-xl 700
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 58px
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 initial
The quick brown fox jumps over the lazy dog.
primary-l-font-size-mobile 34px
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 30px
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 36px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-desktop 24px
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 initial
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 20px
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-desktop 26px
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 11px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-mobile initial
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 initial
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 26px
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-size-desktop-xl 20px
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 11px
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 24px
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 36px
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 initial
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 17px
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 initial
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 30px
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 58px
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 36px
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 initial
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-desktop-xl initial
The quick brown fox jumps over the lazy dog.
primary-l-font-size-desktop-xl 45px
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 18px
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-size-mobile 19px
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 initial
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-desktop 12px
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 22px
The quick brown fox jumps over the lazy dog.
primary-s-font-size-mobile 23px
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 12px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-desktop-xl initial
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 45px
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-desktop initial
The quick brown fox jumps over the lazy dog.
secondary-xs-font-size-desktop-xl initial
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 37px
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 32px
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 36px
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 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-m-line-height-desktop 40px
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 17px
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 57px
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 35px
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 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-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 38px
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 27px
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 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.
secondary-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-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 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-xs-line-height-desktop 29px
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 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-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 29px
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 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-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 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.
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 27px
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 38px
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 21px
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 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-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-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 35px
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 17px
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 57px
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 40px
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 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.
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 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-xl 42px
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 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-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 21px
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 21px
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 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-s-line-height-desktop 17px
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 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-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.
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 17px
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 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-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 37px
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 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-mobile 35px
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 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.
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 42px
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 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-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.
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 31px
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 Arial, sans-serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-primary Arial, sans-serif
The quick brown fox jumps over the lazy dog.
Fallback for primary-fancy
font-family-secondary-fancy Arial, sams-serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-secondary Arial, sans-serif
The quick brown fox jumps over the lazy dog.
Fallback for secondary-fancy
font-family-body Arial, 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.
Horizontal Rule Colors Value Examples Usage
border-color-grey-lightest rgb(247, 247, 247)
border-color-brand-secondary-light rgb(0, 0, 0)
border-color-grey-light rgb(204, 204, 204)
border-color-grey-dark rgb(106, 106, 106)
border-color-brand-secondary-dark rgb(0, 0, 0)
border-color-brand-secondary rgb(0, 0, 0)
border-color-grey rgb(140, 140, 140)
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(236, 28, 36)
Background Colors Value Examples Usage
background-color-grey-light rgb(204, 204, 204)
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(106, 106, 106)
background-color-grey rgb(140, 140, 140)
background-color-body rgb(255, 255, 255) The background color of the main body of the site.
background-color-brand-secondary rgb(0, 0, 0) The secondary brand color. This should be lighter in hue, and sufficient contrast with black text.
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(236, 28, 36) The primary brand color. This should be dark in hue, and have sufficient contrast with white text.
background-color-grey-darkest rgb(50, 50, 50)
Text Colors Value Examples Usage
color-brand-secondary rgb(0, 0, 0) 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(236, 28, 36) The quick brown fox jumps over the lazy dog.
color-grey-light rgb(230, 230, 230) 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(106, 106, 106) The quick brown fox jumps over the lazy dog.
color-grey rgb(140, 140, 140) The quick brown fox jumps over the lazy dog.