Typography aside, the selection and application of color on the new website best defines the Institute’s refreshed brand. This palette was crafted with both web and print applications in mind. It imparts a warm richness with a spark of saturation while avoiding traditional colors used in the think tank, advocacy, and political realm.
Much of the code on the site already accounts for appropriate color pairings, but in the case of other uses, it’s important to make sure contrast is sufficient for all users—including those with impaired vision, lower resolution screens, or non-ideal viewing environments. To test color pairings, we recommend using Jonathan Snook’s Color Contrast Checker. This tool will allow you to enter foreground and background colors and will confirm whether they meet accessibility guidelines at different text sizes (under 18px, 18px+). As a rule of thumb, all colors should meet at least AA compliance. Color usage, hex codes, and Sass variables are listed below.
Print-based color values have been provided separately by Familiar.
| Color | Usage | Hex code | Sass variable |
|---|---|---|---|
| Light cream | Page background |
#f4f3ef
|
$cream-lt
|
| Cream | Neutral page color field |
#eceae4
|
$cream
|
| Dark cream | Expert color field |
#e0ded8
|
$cream-dk
|
| Black | Primary text color |
#251e20
|
$black
|
| Light gray | Dividing lines |
#dbdad7
|
$gray-lt
|
| Gray | Secondary text and link color on dark background |
#86878a
|
$gray
|
| Dark gray | Secondary text color |
#616264
|
$gray-dk
|
| Light cranberry | Primary link on a dark background |
#f13c63
|
#cranberry-lt
|
| Cranberry | Primary link |
#842b45
|
$cranberry
|
| Dark cranberry | Main navigation background |
#420724
|
$cranberry-dk
|
| Magenta | Highlight, utility links/icons |
#e9134c
|
$magenta
|
| Maroon | Video detail background |
#211a1c
|
$maroon
|
| Light blue-gray | Topics links |
#5f6a80
|
$bluegray
|
| Blue-gray | Primary button background |
#3b3a45
|
$bluegray
|
| Dark blue-gray | Topics darker color—part of the gradient and stroke for topic links |
#212634
|
$bluegray-dk
|
| Light blue | YSI tagboard |
#3a6085
|
$blue-lt
|
| Dark blue | YSI background |
#232d39
|
$blue-dk
|
| Light green | Event tagboard |
#304449
|
$green-lt
|
| Dark green | Event background |
#141b1b
|
$green-dk
|