The 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, 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.
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.
Brand colors
Primary colors
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.
--color-primary-lightest
ocean-50
--color-primary-lighter
ocean-100
--color-primary-light
ocean-300
--color-primary
ocean-500
--color-primary-dark
ocean-600
--color-primary-darker
ocean-700
--color-primary-darkest
ocean-800
Secondary colors
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.
--color-secondary-lightest
spring-50
--color-secondary-lighter
spring-100
--color-secondary-light
spring-300
--color-secondary
spring-500
--color-secondary-dark
spring-600
--color-secondary-darker
spring-700
--color-secondary-darkest
spring-800
Accent colors
Accent colors are used sparingly to support primary and secondary colors in designs and illustrations.
Primary accent colors
--color-accent-primary-lightest
persimmon-50
--color-accent-primary-lighter
persimmon-100
--color-accent-primary-light
persimmon-300
--color-accent-primary
persimmon-500
--color-accent-primary-dark
persimmon-600
--color-accent-primary-darker
persimmon-700
--color-accent-primary-darkest
persimmon-800
Neutral colors
--color-white
white-solid
--color-gray-lightest
granite-50
--color-gray-lighter
granite-100
--color-gray-light
granite-300
--color-gray
granite-500
--color-gray-dark
granite-700
--color-gray-darker
granite-800
--color-gray-darkest
granite-900
--color-black
black-solid
Text colors
--color-base
granite-900
Background colors
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.
--color-background
white-solid
--color-background-inverse
ocean-800
Status colors
These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.
Informational
--color-info-lightest
sky-50
--color-info-lighter
sky-100
--color-info-light
sky-300
--color-info
sky-500
--color-info-dark
sky-600
--color-info-darker
sky-700
--color-info-darkest
sky-800
Success
--color-success-lightest
spring-50
--color-success-lighter
spring-100
--color-success-light
spring-300
--color-success
spring-500
--color-success-dark
spring-600
--color-success-darker
spring-700
--color-success-darkest
spring-800
Warn
--color-warn-lightest
goldenrod-50
--color-warn-lighter
goldenrod-100
--color-warn-light
goldenrod-300
--color-warn
goldenrod-500
--color-warn-dark
goldenrod-600
--color-warn-darker
goldenrod-700
--color-warn-darkest
goldenrod-800
Error
--color-error-lightest
rose-50
--color-error-lighter
rose-100
--color-error-light
rose-300
--color-error
rose-500
--color-error-dark
rose-600
--color-error-darker
rose-700
--color-error-darkest
rose-800
Focus colors
--color-focus-light
white-solid
--color-focus-dark
orchid-500