<h2>Palette</h2>
<p>This palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue and red, grounded in sophisticated deeper
shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.</p>
<p>This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.</p>
<h2>Primary Colors</h2>
<p>This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.</p>
<div class="usa-grid-full usa-color-row usa-primary-color-section">
<div class="usa-color-square usa-color-primary">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#0071bc</p>
<p class="usa-color-name">$color-primary</p>
</div>
</div>
<div class="usa-color-square usa-color-primary-darker usa-mobile-end-row">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#205493</p>
<p class="usa-color-name">$color-primary-darker</p>
</div>
</div>
<div class="usa-color-square usa-color-primary-darkest">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#112e51</p>
<p class="usa-color-name">$color-primary-darkest</p>
</div>
</div>
<div class="usa-color-square usa-color-base usa-end-row">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#212121</p>
<p class="usa-color-name">$color-base</p>
</div>
</div>
</div>
<h2>Secondary Colors</h2>
<p>These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They
should be used sparingly and never draw the eye to more than one piece of information at a time.</p>
<div class="usa-grid-full usa-color-row usa-primary-color-section">
<div class="usa-color-square usa-color-gray-dark">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#323a45</p>
<p class="usa-color-name">$color-gray-dark</p>
</div>
</div>
<div class="usa-color-square usa-color-gray-light usa-mobile-end-row">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#aeb0b5</p>
<p class="usa-color-name">$color-gray-light</p>
</div>
</div>
<div class="usa-color-square usa-color-white">
<div class="usa-color-inner-content">
<p class="usa-color-hex">#ffffff</p>
<p class="usa-color-name">$color-white</p>
</div>
</div>
</div>
<h2>Background Colors</h2>
<p>These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.</p>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-gray-dark">
</div>
<p class="usa-color-hex">#323a45</p>
<p class="usa-color-name">$color-gray-dark</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gray">
</div>
<p class="usa-color-hex">#5b616b</p>
<p class="usa-color-name">$color-gray</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gray-light">
</div>
<p class="usa-color-hex">#aeb0b5</p>
<p class="usa-color-name">$color-gray-light</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gray-lighter">
</div>
<p class="usa-color-hex">#d6d7d9</p>
<p class="usa-color-name">$color-gray-lighter</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gray-lightest">
</div>
<p class="usa-color-hex">#f1f1f1</p>
<p class="usa-color-name">$color-gray-lightest</p>
</div>
</div>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-gray-warm-dark">
</div>
<p class="usa-color-hex">#494440</p>
<p class="usa-color-name">$color-gray-warm-dark</p>
</div>
<div class="color-small usa-end-row">
<div class="usa-color-short usa-color-gray-warm-light">
</div>
<p class="usa-color-hex">#e4e2e0</p>
<p class="usa-color-name">$color-gray-warm-light</p>
</div>
</div>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-primary-darkest">
</div>
<p class="usa-color-hex">#112e51</p>
<p class="usa-color-name">$color-primary-darkest</p>
</div>
<div class="color-small usa-end-row">
<div class="usa-color-short usa-color-gray-cool-light">
</div>
<p class="usa-color-hex">#dce4ef</p>
<p class="usa-color-name">$color-gray-cool-light</p>
</div>
</div>
<h2>Tertiary Colors</h2>
<p>These colors are used primarily for content-specific needs, such as alerts and illustrations. They should never overpower the primary colors.</p>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-gold">
</div>
<p class="usa-color-hex">#fdb81e</p>
<p class="usa-color-name">$color-gold</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gold-light">
</div>
<p class="usa-color-hex">#f9c642</p>
<p class="usa-color-name">$color-gold-light</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gold-lighter">
</div>
<p class="usa-color-hex">#fad980</p>
<p class="usa-color-name">$color-gold-lighter</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-gold-lightest usa-end-row">
</div>
<p class="usa-color-hex">#fff1d2</p>
<p class="usa-color-name">$color-gold-lightest</p>
</div>
</div>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-green">
</div>
<p class="usa-color-hex">#2e8540</p>
<p class="usa-color-name">$color-green</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-green-light">
</div>
<p class="usa-color-hex">#4aa564</p>
<p class="usa-color-name">$color-green-light</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-green-lighter">
</div>
<p class="usa-color-hex">#94bfa2</p>
<p class="usa-color-name">$color-green-lighter</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-green-lightest usa-end-row">
</div>
<p class="usa-color-hex">#e7f4e4</p>
<p class="usa-color-name">$color-green-lightest</p>
</div>
</div>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-cool-blue">
</div>
<p class="usa-color-hex">#205493</p>
<p class="usa-color-name">$color-cool-blue</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-cool-blue-light">
</div>
<p class="usa-color-hex">#4773aa</p>
<p class="usa-color-name">$color-cool-blue-light</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-cool-blue-lighter">
</div>
<p class="usa-color-hex">#8ba6ca</p>
<p class="usa-color-name">$color-cool-blue-lighter</p>
</div>
<div class="color-small">
<div class="usa-color-short usa-color-cool-blue-lightest">
</div>
<p class="usa-color-hex">#dce4ef</p>
<p class="usa-color-name">$color-cool-blue-lightest</p>
</div>
</div>
<h3>Special State Colors</h3>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-focus">
</div>
<p class="usa-color-hex">#3e94cf</p>
<p class="usa-color-name">$color-focus</p>
</div>
</div>
<div class="usa-grid-full usa-color-row">
<div class="color-big">
<div class="usa-color-short usa-color-visited">
</div>
<p class="usa-color-hex">#4c2c92</p>
<p class="usa-color-name">$color-visited</p>
</div>
</div>
<h2>Text accessibility</h2>
<p>WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">at least 4.5:1</a>.
This ensures that viewers who cannot see the full color spectrum are able to read the text.</p>
<p>The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.</p>
<p>If you choose to customize beyond this palette, this <a href="http://webaim.org/resources/contrastchecker/">color contrast tool</a> is a useful resource for testing the compliance of any color combination.</p>
<h3>Fully accessible combinations</h3>
<h4>Colors on a white background</h4>
<div class="usa-grid-full usa-color-outline">
<div class="usa-width-one-half">
<div class="usa-color-text usa-color-text-primary-darkest">
primary-darkest on white
</div>
<div class="usa-color-text usa-color-text-primary-darker">
primary-darker on white
</div>
<div class="usa-color-text usa-color-text-primary">
primary on white
</div>
<div class="usa-color-text usa-color-text-cool-blue-light">
cool-blue-light on white
</div>
<div class="usa-color-text usa-color-text-primary-alt-darkest">
primary-alt-darkest on white
</div>
<div class="usa-color-text usa-color-text-green">
green on white
</div>
<div class="usa-color-text usa-color-text-visited">
visited on white
</div>
</div>
<div class="usa-width-one-half usa-end-row">
<div class="usa-color-text usa-color-text-gray-dark">
base on white
</div>
<div class="usa-color-text usa-color-text-gray-dark">
gray-dark on white
</div>
<div class="usa-color-text usa-color-text-gray">
gray on white
</div>
<div class="usa-color-text usa-color-text-gray-warm-dark">
gray-warm-dark on white
</div>
<div class="usa-color-text usa-color-text-secondary-darkest">
secondary-darkest on white
</div>
<div class="usa-color-text usa-color-text-secondary-dark">
secondary-dark on white
</div>
<div class="usa-color-text usa-color-text-secondary">
secondary on white
</div>
</div>
</div>
<h4>Neutrals on a colored background</h4>
<div class="usa-grid-full">
<div class="usa-width-one-half">
<div class="usa-color-text usa-color-base usa-color-text-white">
white on base
</div>
<div class="usa-color-text usa-color-gray-warm-dark usa-color-text-white">
white on gray-warm-dark
</div>
<div class="usa-color-text usa-color-gray-dark usa-color-text-white">
white on gray-dark
</div>
<div class="usa-color-text usa-color-gray usa-color-text-white">
white on gray
</div>
<div class="usa-color-text usa-color-primary-darkest usa-color-text-white">
white on primary-darkest
</div>
<div class="usa-color-text usa-color-primary-darker usa-color-text-white">
white on primary-darker
</div>
<div class="usa-color-text usa-color-primary usa-color-text-white">
white on primary
</div>
<div class="usa-color-text usa-color-cool-blue-light usa-color-text-white">
white on cool-blue-light
</div>
<div class="usa-color-text usa-color-primary-alt-darkest usa-color-text-white">
white on primary-alt-darkest
</div>
<div class="usa-color-text usa-color-primary-alt-dark">
base on primary-alt-dark
</div>
<div class="usa-color-text usa-color-primary-alt">
base on primary-alt
</div>
<div class="usa-color-text usa-color-green usa-color-text-white">
white on green
</div>
<div class="usa-color-text usa-color-green-light">
base on green-light
</div>
<div class="usa-color-text usa-color-gold">
base on gold
</div>
<div class="usa-color-text usa-color-gold-light">
base on gold-light
</div>
<div class="usa-color-text usa-color-secondary-darkest usa-color-text-white">
white on secondary-darkest
</div>
<div class="usa-color-text usa-color-secondary-dark usa-color-text-white">
white on secondary-dark
</div>
<div class="usa-color-text usa-color-secondary usa-color-text-white">
white on secondary
</div>
</div>
<div class="usa-width-one-half usa-end-row">
<div class="usa-color-text usa-color-gray-light">
base on gray-light
</div>
<div class="usa-color-text usa-color-gray-lighter">
base on gray-lighter
</div>
<div class="usa-color-text usa-color-gray-warm-light">
base on gray-warm-light
</div>
<div class="usa-color-text usa-color-cool-blue-lighter">
base on cool-blue-lighter
</div>
<div class="usa-color-text usa-color-cool-blue-lightest">
base on cool-blue-lightest
</div>
<div class="usa-color-text usa-color-primary-alt-lightest">
base on primary-alt-lightest
</div>
<div class="usa-color-text usa-color-green-lighter">
base on green-lighter
</div>
<div class="usa-color-text usa-color-green-lightest">
base on green-lightest
</div>
<div class="usa-color-text usa-color-gold-lighter">
base on gold-lighter
</div>
<div class="usa-color-text usa-color-gold-lightest">
base on gold-lightest
</div>
<div class="usa-color-text usa-color-secondary-lightest">
base on secondary-lightest
</div>
</div>
</div>
<style scoped>
.usa-color-short {
height: 7rem;
margin-bottom: 1rem;
}
.usa-color-name {
font-size: 1.2rem;
margin-top: 0;
margin-bottom: 1em;
}
.usa-color-row {
margin-bottom: 3rem;
}
.usa-color-row .color-small {
float: left;
margin-right: 0;
width: 50%;
}
.usa-color-row p {
font-family: Consolas, Monaco, "Andale Mono", monospace;
font-size: 1.5rem;
}
.usa-color-row p:last-of-type {
font-size: 11px;
}
.usa-primary-color-section {
margin-bottom: 0;
}
.usa-primary-color-section .usa-color-square {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
margin-bottom: 7rem;
padding-bottom: 50%;
position: relative;
}
.usa-primary-color-section .usa-color-square:last-child {
margin-right: 0;
}
.usa-primary-color-section .usa-mobile-end-row {
margin-right: 0;
}
.usa-primary-color-section .usa-color-name {
margin: 0;
}
.usa-color-inner-content {
position: absolute;
top: 100%;
}
.usa-color-hex {
margin-top: 1rem;
margin-bottom: 0;
font-weight: 700;
}
.usa-color-text {
padding: 1rem 2rem;
font-weight: 700;
margin-bottom: .4rem;
}
.usa-color-outline .usa-color-text {
box-shadow: inset 0 0 0 1px #5b616b;
}
@media screen and (min-width: 768px) {
.usa-color-name {
margin: 0;
}
.usa-color-row .color-big {
float: left;
padding-right: 4%;
width: 32%;
}
.usa-color-row .color-small {
width: 17%;
}
.usa-primary-color-section {
margin-bottom: 8rem;
}
.usa-primary-color-section .usa-color-square {
float: left;
display: block;
margin-right: 2.35765%;
width: 23.23176%;
margin-bottom: 0;
padding-bottom: 19%;
}
.usa-primary-color-section .usa-color-square:last-child {
margin-right: 0;
}
.usa-primary-color-section .usa-mobile-end-row {
margin-right: 2.35765%;
}
}
</style>