+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpacingValueExamplesUsage
+ 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 WeightsValueExamplesUsage
+ 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 HeightsValueExamplesUsage
+ 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 FamiliesValueExamplesUsage
+ font-family-primary-fancy + + 'DM Serif Text', Georgia, serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+ font-family-primary + + 'DM Serif Text', Georgia, serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+ font-family-secondary-fancy + + Roboto, 'Helvetica Regular', serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+ font-family-secondary + + Roboto, 'Helvetica bold', serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+ font-family-body + + Georgia, serif + +
+ The quick brown fox jumps over the lazy dog. +
+
+ font-family-basic + + Roboto, 'Helvetica bold', serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+ font-family-accent + + Roboto, 'Helvetica bold', serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+ font-family-accent-fancy + + Roboto, 'Helvetica bold', serif + +
+ The quick brown fox jumps over the lazy dog. +
+ 		The webfont, loaded async
+
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Horizontal Rule ColorsValueExamplesUsage
+ border-color-grey-lightest + + rgb(239, 239, 239) + +
+
+ border-color-brand-secondary-light + + rgb(0, 0, 0) + +
+
+ border-color-grey-light + + rgb(220, 220, 220) + +
+
+ border-color-grey-dark + + rgb(90, 90, 90) + +
+
+ border-color-brand-secondary-dark + + rgb(0, 0, 0) + +
+
+ border-color-brand-secondary + + rgb(27, 147, 157) + +
+
+ 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(27, 147, 157) + +
+
+ border-color-brand-accent + + rgb(16, 16, 16) + +
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Background ColorsValueExamplesUsage
+ background-color-grey-light + + rgb(220, 220, 220) +
+ background-color-grey-lightest + + rgb(239, 239, 239) +
+ background-color-brand-secondary-dark + + rgb(0, 0, 0) +
+ background-color-brand-secondary-light + + rgb(0, 0, 0) +
+ background-color-grey-dark + + rgb(90, 90, 90) +
+ 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(27, 147, 157) +
+ 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(27, 147, 157) +
+ background-color-grey-darkest + + rgb(50, 50, 50) +
+ background-color-brand-accent + + rgb(16, 16, 16) +
+
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Text ColorsValueExamplesUsage
+ color-brand-secondary + + rgb(27, 147, 157) + + 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(27, 147, 157) + + The quick brown fox jumps over the lazy dog. +
+ color-grey-light + + rgb(220, 220, 220) + + 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(90, 90, 90) + + 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-lightest + + rgb(239, 239, 239) + + The quick brown fox jumps over the lazy dog. +
+ color-brand-accent + + rgb(16, 16, 16) + + The quick brown fox jumps over the lazy dog. +
+
+
+ + + + +