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 normal
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-mobile normal
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 normal
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-mobile normal
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 bold
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 bold
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 normal
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 bold
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 bold
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 normal
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 normal
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 bold
The quick brown fox jumps over the lazy dog.
secondary-l-font-weight-desktop-xl bold
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 bold
The quick brown fox jumps over the lazy dog.
secondary-xl-font-weight-desktop-xl bold
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 bold
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 normal
The quick brown fox jumps over the lazy dog.
primary-xxxs-font-weight-desktop-xl normal
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 normal
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 normal
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 bold
The quick brown fox jumps over the lazy dog.
primary-xl-font-weight-desktop normal
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 bold
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 normal
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-desktop-xl normal
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 bold
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 normal
The quick brown fox jumps over the lazy dog.
primary-xxs-font-weight-desktop normal
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 normal
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 normal
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 normal
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 normal
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 normal
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 28px
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 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 18px
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 21px
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 initial
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 28px
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 42px
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 14px
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 42px
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 18px
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 24px
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 24px
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 16px
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 18px
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 32px
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 36px
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 14px
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 21px
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 14px
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 initial
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 28px
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 24px
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 16px
The quick brown fox jumps over the lazy dog.
primary-m-font-size-desktop 24px
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 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.
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 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.
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 32px
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 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.
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 32px
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 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-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 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-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 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.
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 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.
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 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.
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 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.
secondary-xl-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.
secondary-regular-m-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-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 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-m-line-height-desktop 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.
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 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-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 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.
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 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-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 32px
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 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.
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 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-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 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.
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 'Para Supreme Regular', serif
The quick brown fox jumps over the lazy dog.
font-family-primary Arial, sans-serif
The quick brown fox jumps over the lazy dog.
Fallback for primary-fancy
font-family-secondary-fancy 'IBM Plex Sans', sans-serif
The quick brown fox jumps over the lazy dog.
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 Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-accent-fancy 'Graphik XX Cond', sans-serif
The quick brown fox jumps over the lazy dog.
font-family-basic-fancy 'IBM Plex Mono', monospace
The quick brown fox jumps over the lazy dog.
font-family-body-fancy 'IBM Plex Serif', 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(36, 56, 66)
border-color-brand-secondary rgb(65, 126, 244)
border-color-grey rgb(140, 140, 140)
border-color-brand-primary-light rgb(243, 245, 203)
border-color-white rgb(255, 255, 255)
border-color-brand-primary-dark rgb(236, 28, 36)
border-color-brand-primary rgb(238, 232, 9)
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(36, 56, 66)
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(243, 245, 203)
background-color-brand-primary-dark rgb(236, 28, 36)
background-color-white rgb(255, 255, 255)
background-color-brand-primary rgb(238, 232, 9)
background-color-grey-darkest rgb(50, 50, 50)
background-color-brand-accent rgb(26, 40, 47)
Text Colors Value Examples Usage
color-brand-secondary rgb(65, 126, 244) 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(243, 245, 203) 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(238, 232, 9) 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(36, 56, 66) 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.
color-brand-accent rgb(243, 112, 33) The quick brown fox jumps over the lazy dog.