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 44px
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 30px
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 24px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-desktop 18px
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 16px
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 30px
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 42px
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 16px
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 26px
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 19px
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 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 33px
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 39px
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 28px
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 16px
The quick brown fox jumps over the lazy dog.
accent-xs-font-size-desktop 23px
The quick brown fox jumps over the lazy dog.
primary-xl-font-size-desktop-xl 54px
The quick brown fox jumps over the lazy dog.
primary-m-font-size-desktop-xl 31px
The quick brown fox jumps over the lazy dog.
primary-l-font-size-desktop-xl 39px
The quick brown fox jumps over the lazy dog.
body-font-size-mobile 18px
The quick brown fox jumps over the lazy dog.
secondary-m-font-size-desktop-xl 24px
The quick brown fox jumps over the lazy dog.
body-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
body-font-size-desktop 18px
The quick brown fox jumps over the lazy dog.
secondary-l-font-size-desktop-xl 46px
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-desktop-xl 17px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-desktop-xl 17px
The quick brown fox jumps over the lazy dog.
primary-s-font-size-desktop-xl 27px
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 45px
Lorem 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 66px
Lorem 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 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-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 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-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 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xs-line-height-desktop initial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xs-line-height-mobile 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 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-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 39px
Lorem 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 55px
Lorem 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 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-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 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxxs-line-height-mobile 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 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-s-line-height-mobile 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
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 58px
Lorem 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 43px
Lorem 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 49px
Lorem 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 45px
Lorem 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.
primary-xl-line-height-desktop-xl 81px
Lorem 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 47px
Lorem 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 58px
Lorem 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 48px
Lorem 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 60px
Lorem 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 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.
primary-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.
primary-s-line-height-desktop-xl 39px
Lorem 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 'neue-haas-unica', Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
Available via Typekit.
font-family-primary Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
Fallback for primary-fancy.
font-family-secondary-fancy 'Domaine Display Narrow Test', Georgia, serif
The quick brown fox jumps over the lazy dog.
Available via @font-face.
font-family-secondary Georgia, serif
The quick brown fox jumps over the lazy dog.
Fallback for secondary-fancy
font-family-body 'Helvetica Neue', Helvetica, 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.
Border Colors Value Examples Usage
border-color-brand-secondary rgb(241, 247, 252)
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-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(229, 75, 39)
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(241, 247, 252)
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(229, 75, 39)
background-color-grey-darkest rgb(50, 50, 50)
Text Colors Value Examples Usage
color-brand-secondary rgb(241, 247, 252) 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(229, 75, 39) 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.