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 bold
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 800
The quick brown fox jumps over the lazy dog.
basic-xxl-font-weight-desktop 800
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 800
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 bold
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-mobile bold
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 800
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 400
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 400
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 800
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 800
The quick brown fox jumps over the lazy dog.
secondary-m-font-weight-desktop 400
The quick brown fox jumps over the lazy dog.
basic-s-font-weight-desktop 800
The quick brown fox jumps over the lazy dog.
primary-m-font-weight-mobile bold
The quick brown fox jumps over the lazy dog.
primary-xxl-font-weight-mobile 700
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-mobile bold
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 800
The quick brown fox jumps over the lazy dog.
basic-xxs-font-weight-desktop-xl 800
The quick brown fox jumps over the lazy dog.
basic-s-font-weight-desktop-xl 800
The quick brown fox jumps over the lazy dog.
secondary-m-font-weight-desktop-xl 400
The quick brown fox jumps over the lazy dog.
secondary-l-font-weight-desktop-xl 400
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 800
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 400
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 400
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 800
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 800
The quick brown fox jumps over the lazy dog.
basic-l-font-weight-desktop-xl 800
The quick brown fox jumps over the lazy dog.
basic-xs-font-weight-desktop 800
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 800
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 bold
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 700
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 bold
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 bold
The quick brown fox jumps over the lazy dog.
basic-xxs-font-weight-mobile 800
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 800
The quick brown fox jumps over the lazy dog.
secondary-m-font-weight-mobile 400
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 400
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 bold
The quick brown fox jumps over the lazy dog.
primary-s-font-weight-desktop-xl bold
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 800
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 bold
The quick brown fox jumps over the lazy dog.
primary-xxs-font-weight-desktop bold
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 800
The quick brown fox jumps over the lazy dog.
primary-m-font-weight-desktop-xl bold
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 800
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 bold
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 700
The quick brown fox jumps over the lazy dog.
primary-l-font-weight-desktop-xl bold
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 20px
The quick brown fox jumps over the lazy dog.
primary-xl-font-size-desktop 32px
The quick brown fox jumps over the lazy dog.
body-xxxl-font-size-desktop 26px
The quick brown fox jumps over the lazy dog.
body-xl-font-size-desktop 22px
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-mobile 30px
The quick brown fox jumps over the lazy dog.
primary-l-font-size-mobile 24px
The quick brown fox jumps over the lazy dog.
body-xxl-font-size-mobile 24px
The quick brown fox jumps over the lazy dog.
basic-s-font-size-desktop-xl 15px
The quick brown fox jumps over the lazy dog.
secondary-m-font-size-desktop-xl 26px
The quick brown fox jumps over the lazy dog.
basic-xxs-font-size-desktop-xl 11px
The quick brown fox jumps over the lazy dog.
basic-xs-font-size-mobile 14px
The quick brown fox jumps over the lazy dog.
secondary-l-font-size-desktop-xl 33px
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-size-desktop-xl 40px
The quick brown fox jumps over the lazy dog.
body-s-font-size-desktop 14px
The quick brown fox jumps over the lazy dog.
body-xxs-font-size-desktop 13px
The quick brown fox jumps over the lazy dog.
primary-s-font-size-desktop 20px
The quick brown fox jumps over the lazy dog.
primary-xxs-font-size-desktop 16px
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 34px
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 18px
The quick brown fox jumps over the lazy dog.
body-xxxs-font-size-desktop 14px
The quick brown fox jumps over the lazy dog.
body-xs-font-size-desktop 10px
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-mobile 22px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-mobile 22px
The quick brown fox jumps over the lazy dog.
basic-m-font-size-desktop-xl 16px
The quick brown fox jumps over the lazy dog.
secondary-xs-font-size-mobile 20px
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 24px
The quick brown fox jumps over the lazy dog.
basic-l-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
basic-l-font-size-desktop 18px
The quick brown fox jumps over the lazy dog.
basic-xxl-font-size-desktop 24px
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 18px
The quick brown fox jumps over the lazy dog.
basic-m-font-size-desktop 16px
The quick brown fox jumps over the lazy dog.
body-xs-font-size-desktop-xl 10px
The quick brown fox jumps over the lazy dog.
body-xxxs-font-size-desktop-xl 14px
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-desktop-xl 18px
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 15px
The quick brown fox jumps over the lazy dog.
secondary-m-font-size-mobile 26px
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 11px
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 16px
The quick brown fox jumps over the lazy dog.
body-xxs-font-size-desktop-xl 13px
The quick brown fox jumps over the lazy dog.
primary-s-font-size-desktop-xl 20px
The quick brown fox jumps over the lazy dog.
body-s-font-size-desktop-xl 14px
The quick brown fox jumps over the lazy dog.
secondary-xl-font-size-desktop 34px
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 26px
The quick brown fox jumps over the lazy dog.
secondary-xxl-font-size-mobile 24px
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 40px
The quick brown fox jumps over the lazy dog.
secondary-l-font-size-desktop 33px
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 26px
The quick brown fox jumps over the lazy dog.
basic-s-font-size-desktop 15px
The quick brown fox jumps over the lazy dog.
basic-xxs-font-size-desktop 11px
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 16px
The quick brown fox jumps over the lazy dog.
body-xl-font-size-desktop-xl 22px
The quick brown fox jumps over the lazy dog.
body-xxxl-font-size-desktop-xl 26px
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 20px
The quick brown fox jumps over the lazy dog.
basic-xxl-font-size-mobile 16px
The quick brown fox jumps over the lazy dog.
body-m-font-size-desktop-xl 16px
The quick brown fox jumps over the lazy dog.
basic-l-font-size-mobile 16px
The quick brown fox jumps over the lazy dog.
basic-xl-font-size-desktop 21px
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 20px
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-desktop-xl 36px
The quick brown fox jumps over the lazy dog.
primary-l-font-size-desktop-xl 26px
The quick brown fox jumps over the lazy dog.
body-xxl-font-size-desktop-xl 24px
The quick brown fox jumps over the lazy dog.
body-l-font-size-desktop-xl 20px
The quick brown fox jumps over the lazy dog.
body-xs-font-size-mobile 10px
The quick brown fox jumps over the lazy dog.
body-xxxs-font-size-mobile 14px
The quick brown fox jumps over the lazy dog.
primary-xs-font-size-mobile 22px
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 18px
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-desktop 22px
The quick brown fox jumps over the lazy dog.
basic-xs-font-size-desktop-xl 13px
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 16px
The quick brown fox jumps over the lazy dog.
primary-s-font-size-mobile 20px
The quick brown fox jumps over the lazy dog.
body-xxs-font-size-mobile 13px
The quick brown fox jumps over the lazy dog.
body-s-font-size-mobile 14px
The quick brown fox jumps over the lazy dog.
basic-xs-font-size-desktop 13px
The quick brown fox jumps over the lazy dog.
secondary-s-font-size-desktop-xl 22px
The quick brown fox jumps over the lazy dog.
secondary-xxs-font-size-desktop-xl 18px
The quick brown fox jumps over the lazy dog.
body-l-font-size-desktop 20px
The quick brown fox jumps over the lazy dog.
body-xxl-font-size-desktop 24px
The quick brown fox jumps over the lazy dog.
primary-l-font-size-desktop 26px
The quick brown fox jumps over the lazy dog.
primary-xxl-font-size-desktop 36px
The quick brown fox jumps over the lazy dog.
secondary-xs-font-size-desktop-xl 20px
The quick brown fox jumps over the lazy dog.
body-xl-font-size-mobile 22px
The quick brown fox jumps over the lazy dog.
body-xxxl-font-size-mobile 26px
The quick brown fox jumps over the lazy dog.
primary-xl-font-size-mobile 30px
The quick brown fox jumps over the lazy dog.
basic-xl-font-size-desktop-xl 21px
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 26px
The quick brown fox jumps over the lazy dog.
body-m-font-size-desktop 16px
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 20px
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 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-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.
basic-s-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-m-line-height-desktop-xl 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-xxxl-line-height-desktop 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.
primary-xl-line-height-desktop 34px
Lorem 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 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-xxs-line-height-desktop-xl 13px
Lorem 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 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-l-line-height-desktop-xl 37px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-xxl-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.
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 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.
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 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-xxs-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.
primary-xxs-line-height-desktop 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-s-line-height-mobile 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.
secondary-xxs-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.
body-s-line-height-desktop 16px
Lorem 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 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-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 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xs-line-height-desktop 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-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.
basic-l-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-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 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-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 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-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 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.
primary-xs-line-height-desktop-xl 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxxs-line-height-desktop-xl 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-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 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xxl-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.
basic-m-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.
basic-s-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-m-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.
basic-xxs-line-height-mobile 13px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
accent-l-line-height-desktop-xl 50px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxs-line-height-desktop-xl 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-s-line-height-desktop-xl 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-xxs-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.
body-s-line-height-desktop-xl 16px
Lorem 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 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-xxl-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.
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 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-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 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.
secondary-l-line-height-desktop 37px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
secondary-m-line-height-desktop 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.
basic-s-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.
body-xl-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-xl-line-height-desktop-xl 34px
Lorem 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 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.
basic-xxs-line-height-desktop 13px
Lorem 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 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-l-line-height-mobile 16px
Lorem 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 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-xl 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
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 16px
Lorem 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 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.
primary-l-line-height-desktop-xl 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-xxl-line-height-desktop-xl 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-l-line-height-desktop-xl 31px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xl-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-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-xs-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.
body-xxxs-line-height-mobile 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xs-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.
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 13px
Lorem 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 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-s-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.
primary-xxs-line-height-mobile 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-s-line-height-mobile 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-xxs-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.
body-s-line-height-mobile 16px
Lorem 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 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.
secondary-xxs-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.
basic-xs-line-height-desktop 13px
Lorem 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 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-xxxl-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.
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 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-m-line-height-mobile 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-m-line-height-mobile 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
basic-xl-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.
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 31px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxl-line-height-desktop 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-l-line-height-desktop 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.
primary-xxl-line-height-desktop 40px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
primary-xxl-line-height-mobile 33px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-xxl-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.
primary-l-line-height-mobile 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
body-l-line-height-mobile 31px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum id feugiat at, venenatis quis erat.
Font Families Value Examples Usage
font-family-primary-fancy 'Feature Flat Deck', serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-primary serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-secondary-fancy 'Feature Flat Deck', serif
The quick brown fox jumps over the lazy dog.
The webfont, loaded async
font-family-secondary serif
The quick brown fox jumps over the lazy dog.
Fallback for secondary-fancy
font-family-body 'Feature Flat Text', serif
The quick brown fox jumps over the lazy dog.
font-family-basic serif
The quick brown fox jumps over the lazy dog.
font-family-accent Verdana, serif
The quick brown fox jumps over the lazy dog.
font-family-accent-fancy Verdana, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-basic-fancy 'Feature Flat Text', serif
The quick brown fox jumps over the lazy dog.
font-family-body-fancy 'Feature Flat Text', serif
The quick brown fox jumps over the lazy dog.
Horizontal Rule Colors Value Examples Usage
border-color-grey-lightest rgb(239, 239, 239)
border-color-brand-secondary-light rgb(165, 133, 83)
border-color-grey-light rgb(153, 153, 153)
border-color-grey-dark rgb(102, 102, 102)
border-color-brand-secondary-dark rgb(122, 89, 45)
border-color-brand-secondary rgb(0, 0, 0)
border-color-grey rgb(118, 118, 118)
border-color-brand-primary-light rgb(230, 0, 25)
border-color-white rgb(255, 255, 255)
border-color-brand-primary-dark rgb(230, 0, 25)
border-color-brand-primary rgb(230, 0, 25)
Background Colors Value Examples Usage
background-color-grey-light rgb(153, 153, 153)
background-color-grey-lightest rgb(239, 239, 239)
background-color-brand-secondary-dark rgb(122, 89, 45)
background-color-brand-secondary-light rgb(165, 133, 83)
background-color-grey-dark rgb(102, 102, 102)
background-color-grey rgb(118, 118, 118)
background-color-body rgb(255, 255, 255) The background color of the main body of the site.
background-color-brand-secondary rgb(122, 89, 45)
background-color-black rgb(0, 0, 0)
background-color-brand-primary-light rgb(230, 0, 25)
background-color-brand-primary-dark rgb(230, 0, 25)
background-color-white rgb(255, 255, 255)
background-color-brand-primary rgb(230, 0, 25) The primary brand color. This should be dark in hue, and have sufficient contrast with white text.
background-color-grey-darkest rgb(64, 64, 64)
Text Colors Value Examples Usage
color-brand-secondary rgb(122, 89, 45) 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(230, 0, 25) The quick brown fox jumps over the lazy dog.
color-brand-primary-dark rgb(230, 0, 25) 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(230, 0, 25) The quick brown fox jumps over the lazy dog.
color-grey-light rgb(153, 153, 153) The quick brown fox jumps over the lazy dog.
color-brand-secondary-dark rgb(122, 89, 45) The quick brown fox jumps over the lazy dog.
color-brand-secondary-light rgb(165, 133, 83) The quick brown fox jumps over the lazy dog.
color-grey-dark rgb(102, 102, 102) The quick brown fox jumps over the lazy dog.
color-grey rgb(118, 118, 118) The quick brown fox jumps over the lazy dog.