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.
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.
Font Families Value Examples Usage
font-family-primary-fancy 'Fletcha S', Georgia, sans-serif
The quick brown fox jumps over the lazy dog.
The webfont for font-family-primary.
font-family-primary 'Georgia', serif
The quick brown fox jumps over the lazy dog.
The fallback font for font-family-primary.
font-family-secondary-fancy 'neue-haas-grotesk-display', Arial, serif
The quick brown fox jumps over the lazy dog.
The webfont for font-family-secondary.
font-family-secondary Arial, serif
The quick brown fox jumps over the lazy dog.
Fallback from font-family-secondary
font-family-body 'Georgia', Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-basic Helvetica, sans-serif
The quick brown fox jumps over the lazy dog.
font-family-accent Arial, serif
The quick brown fox jumps over the lazy dog.
The fallback for the accent font
font-family-accent-fancy 'acumin-pro-condensed', Arial, sans-serif
The quick brown fox jumps over the lazy dog.
The accent webfont, loaded async
Horizontal Rule Colors Value Examples Usage
border-color-grey-lightest rgb(237, 235, 235)
border-color-brand-secondary-light rgb(0, 0, 0)
border-color-grey-light rgb(204, 204, 204)
border-color-grey-dark rgb(76, 81, 103)
border-color-brand-secondary-dark rgb(0, 0, 0)
border-color-brand-secondary rgb(203, 0, 27)
border-color-grey rgb(130, 137, 161)
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(203, 0, 27)
border-color-brand-accent-red rgb(251, 103, 107)
border-color-brand-accent-blue rgb(118, 186, 223)
border-color-grey-ligh rgb(213, 213, 213)
border-color-black rgb(16, 17, 25)
border-color-brand-accent rgb(207, 213, 230)
border-color-brand-accent-green rgb(0, 221, 161)
border-color-grey-darkest rgb(43, 46, 60)
Background Colors Value Examples Usage
background-color-grey-light rgb(204, 204, 204)
background-color-grey-lightest rgb(237, 235, 235)
background-color-brand-secondary-dark rgb(0, 0, 0)
background-color-brand-secondary-light rgb(0, 0, 0)
background-color-grey-dark rgb(76, 81, 103)
background-color-grey rgb(130, 137, 161)
background-color-body rgb(255, 255, 255) The background color of the main body of the site.
background-color-brand-secondary rgb(203, 0, 27)
background-color-black rgb(16, 17, 25)
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(203, 0, 27)
background-color-grey-darkest rgb(43, 46, 60)
background-color-brand-accent-red rgb(251, 103, 107)
background-color-brand-accent-blue rgb(118, 186, 223)
background-color-brand-accent rgb(207, 213, 230)
background-color-grey-ligh rgb(213, 213, 213)
background-color-brand-accent-green rgb(0, 221, 161)
Text Colors Value Examples Usage
color-brand-secondary rgb(203, 0, 27) The quick brown fox jumps over the lazy dog.
color-black rgb(16, 17, 25) 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(203, 0, 27) 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(76, 81, 103) The quick brown fox jumps over the lazy dog.
color-grey rgb(130, 137, 161) The quick brown fox jumps over the lazy dog.
color-grey-ligh rgb(213, 213, 213) The quick brown fox jumps over the lazy dog.
color-brand-accent-green rgb(0, 221, 161) The quick brown fox jumps over the lazy dog.
color-grey-darkest rgb(43, 46, 60) The quick brown fox jumps over the lazy dog.
color-brand-accent-red rgb(251, 103, 107) The quick brown fox jumps over the lazy dog.
color-grey-lightest rgb(237, 235, 235) The quick brown fox jumps over the lazy dog.
color-brand-accent-blue rgb(118, 186, 223) The quick brown fox jumps over the lazy dog.
color-brand-accent rgb(207, 213, 230) The quick brown fox jumps over the lazy dog.