| Horizontal Rule Colors | Value | Examples | Usage |
|---|---|---|---|
border-color-grey-lightest
|
rgb(247, 247, 247)
|
|
|
border-color-brand-secondary-light
|
rgb(243, 245, 203)
|
|
|
border-color-grey-light
|
rgb(230, 230, 230)
|
|
|
border-color-grey-dark
|
rgb(106, 106, 106)
|
|
|
border-color-brand-secondary
|
rgb(238, 232, 9)
|
|
|
border-color-grey
|
rgb(140, 140, 140)
|
|
|
border-color-white
|
rgb(255, 255, 255)
|
|
|
border-color-brand-primary-dark
|
rgb(36, 56, 66)
|
|
|
border-color-brand-primary
|
rgb(107, 123, 132)
|
|
| Background Colors | Value | Examples | Usage |
|---|---|---|---|
background-color-grey-light
|
rgb(230, 230, 230)
|
||
background-color-grey-lightest
|
rgb(247, 247, 247)
|
||
background-color-brand-secondary-light
|
rgb(243, 245, 203)
|
||
background-color-grey-dark
|
rgb(106, 106, 106)
|
||
background-color-grey
|
rgb(140, 140, 140)
|
||
background-color-brand-secondary
|
rgb(238, 232, 9)
|
The secondary brand color. This should be lighter in hue, and sufficient contrast with black text. | |
background-color-brand-accent
|
rgb(26, 40, 47)
|
||
background-color-black
|
rgb(0, 0, 0)
|
||
background-color-brand-primary-dark
|
rgb(36, 56, 66)
|
||
background-color-white
|
rgb(255, 255, 255)
|
||
background-color-brand-primary
|
rgb(107, 123, 132)
|
The primary brand color. This should be dark in hue, and have sufficient contrast with white text. | |
background-color-grey-darkest
|
rgb(50, 50, 50)
|
| Text Colors | Value | Examples | Usage |
|---|---|---|---|
color-brand-secondary
|
rgb(238, 232, 9)
|
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-dark
|
rgb(36, 56, 66)
|
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(107, 123, 132)
|
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-light
|
rgb(243, 245, 203)
|
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-grey
|
rgb(140, 140, 140)
|
The quick brown fox jumps over the lazy dog. | |
color-brand-accent
|
rgb(243, 112, 33)
|
The quick brown fox jumps over the lazy dog. |