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 'Playfair Display', serif
The quick brown fox jumps over the lazy dog.
The primary webfont, loaded async
font-family-primary Georgia, serif
The quick brown fox jumps over the lazy dog.
The fallback for the primary font
font-family-secondary-fancy 'sofia-pro', sans-serif
The quick brown fox jumps over the lazy dog.
The secondary webfont, loaded async
font-family-secondary 'Helvetica Neue', sans-serif
The quick brown fox jumps over the lazy dog.
The fallback for the secondary font
font-family-body 'Helvetica Neue', sans-serif
The quick brown fox jumps over the lazy dog.
font-family-basic 'Helvetica Neue', sans-serif
The quick brown fox jumps over the lazy dog.
font-family-accent Georgia, serif
The quick brown fox jumps over the lazy dog.
The fallback for the accent font
font-family-accent-fancy Lust, serif
The quick brown fox jumps over the lazy dog.
The accent webfont, loaded async

Horizontal Rule Colors Value Examples Usage
border-color-white rgb(255, 255, 255)
border-color-grey-lightest rgb(247, 247, 247)
border-color-grey-light rgb(204, 204, 204)
border-color-grey rgb(140, 140, 140)
border-color-grey-dark rgb(106, 106, 106)
border-color-brand-primary rgb(169, 19, 30)
border-color-brand-secondary rgb(238, 80, 85)
border-color-brand-secondary-light rgb(246, 161, 151)
border-color-brand-accent-dark rgb(23, 51, 81)
border-color-brand-accent-secondary rgb(250, 220, 171)
border-color-brand-accent-light rgb(249, 250, 251)
border-color-brand-accent rgb(207, 227, 249)
border-color-brand-primary-light rgb(202, 79, 88)
border-color-brand-accent-secondary-light rgb(254, 249, 228)

Background Colors Value Examples Usage
background-color-grey-light rgb(204, 204, 204)
background-color-grey-lightest rgb(247, 247, 247)
background-color-grey-dark rgb(106, 106, 106)
background-color-grey rgb(140, 140, 140)
background-color-body rgb(255, 248, 241) The background color of the main body of the site.
background-color-brand-secondary rgb(238, 80, 85)
background-color-black rgb(0, 0, 0)
background-color-white rgb(255, 255, 255)
background-color-brand-primary rgb(169, 19, 30)
background-color-grey-darkest rgb(50, 50, 50)
background-color-brand-accent-secondary rgb(250, 220, 171)
background-color-brand-secondary-light rgb(246, 161, 151)
background-color-brand-accent-dark rgb(23, 51, 81)
background-color-brand-accent-light rgb(249, 250, 251)
background-color-brand-accent rgb(207, 227, 249)
background-color-brand-primary-light rgb(202, 79, 88)
background-color-brand-accent-secondary-light rgb(254, 249, 228)

Text Colors Value Examples Usage
color-white rgb(255, 255, 255) 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-grey rgb(140, 140, 140) 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-black rgb(0, 0, 0) The quick brown fox jumps over the lazy dog.
color-brand-primary rgb(169, 19, 30) The quick brown fox jumps over the lazy dog.
color-brand-secondary rgb(238, 80, 85) The quick brown fox jumps over the lazy dog.
color-brand-primary-light rgb(202, 79, 88) The quick brown fox jumps over the lazy dog.
color-brand-accent-secondary-light rgb(254, 249, 228) The quick brown fox jumps over the lazy dog.
color-brand-accent-secondary rgb(250, 220, 171) The quick brown fox jumps over the lazy dog.
color-brand-accent-light rgb(249, 250, 251) The quick brown fox jumps over the lazy dog.
color-brand-secondary-light rgb(246, 161, 151) The quick brown fox jumps over the lazy dog.
color-brand-accent-dark rgb(23, 51, 81) The quick brown fox jumps over the lazy dog.
color-brand-accent rgb(207, 227, 249) The quick brown fox jumps over the lazy dog.