| 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.
|
|
basic-xxs-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-xxs-font-weight-mobile
|
800
|
The quick brown fox jumps over the lazy dog.
|
| Font Sizes | Value | Examples | Usage |
|---|---|---|---|
basic-xxs-font-size-desktop-xl
|
11px
|
The quick brown fox jumps over the lazy dog.
|
|
basic-xxs-font-size-mobile
|
11px
|
The quick brown fox jumps over the lazy dog.
|
|
basic-xxs-font-size-desktop
|
11px
|
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.
|
|
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-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.
|
|
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.
|
| Font Families | Value | Examples | Usage |
|---|---|---|---|
font-family-primary-fancy
|
'neue-haas-grotesk-display', Times New Roman, sans-serif
|
The quick brown fox jumps over the lazy dog.
|
The webfont for font-family-primary. |
font-family-primary
|
'Times New Roman', serif
|
The quick brown fox jumps over the lazy dog.
|
The fallback font for font-family-primary. |
font-family-secondary-fancy
|
Arial, sams-serif
|
The quick brown fox jumps over the lazy dog.
|
The webfont, loaded async |
font-family-secondary
|
Arial, sans-serif
|
The quick brown fox jumps over the lazy dog.
|
Fallback for secondary-fancy |
font-family-body
|
'open-sans', 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(26, 72, 196)
|
|
|
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(26, 72, 196)
|
||
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(26, 72, 196)
|
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. |