Color is a key element in our design system used to create meaning and consistency. Our color palette helps to unify our brand’s experiences, from product interfaces to marketing.
You can apply color to:
- Convey emotion
- Express a tone
- Guide attention
- Pinpoint critical items
Below you will find a set of well-defined guidelines on how to work with our colors.
Brand colors
Primary colors
Our primary color palette is designed for use throughout our digital products within interfaces and for branding. Primary colors are displayed most frequently across our products' screens and components.
Primary colors are used for:
- Key actions such as primary call to action buttons
- Highlighted content
- Form field elements
We chose colors that offer a range of uses and that meet or exceed standards in supporting accessibility and contrast for low vision users.
The guidelines indicate how colors should be applied, noting where some should be utilized sparingly and with purpose for specific components like errors or messaging.
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-primary-lightest- Hex:
- #e6f1f8
- Figma:
- Ocean 50
- Used in:
- Day Picker, Filter Chip
- CSS:
--color-primary- Hex:
- #0071bc
- Figma:
- Ocean 500
- Used in:
- Badge, Button, Choice, Filter Chip, Link, Pagination, Steplist, Tabs, Tooltip, Vertical Nav, USA Banner
- CSS:
--color-primary-darker- Hex:
- #004f84
- Figma:
- Ocean 700
- Used in:
- Button, Choice, Link, Pagination, Tabs
- CSS:
--color-primary-darkest- Hex:
- #00395e
- Figma:
- Ocean 800
- Used in:
- Button, Link, Pagination
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
--color-primary-lighter- Hex:
- #b3d4eb
- Figma:
- Ocean 100
- CSS:
- No CSS token
- Hex:
- #80b8de
- Figma:
- Ocean 200
- CSS:
--color-primary-light- Hex:
- #4d9cd0
- Figma:
- Ocean 300
- CSS:
- No CSS token
- Hex:
- #1a7fc3
- Figma:
- Ocean 400
- CSS:
--color-primary-dark- Hex:
- #0066a9
- Figma:
- Ocean 600
- CSS:
- No CSS token
- Hex:
- #002238
- Figma:
- Ocean 900
- CSS:
- No CSS token
- Hex:
- #000b13
- Figma:
- Ocean 1000
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.
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-secondary-lightest- Hex:
- #e7f3e7
- Figma:
- Spring 50
- Used in:
- Button
- CSS:
--color-secondary-lighter- Hex:
- #b8dcb7
- Figma:
- Spring 100
- Used in:
- Button
- CSS:
--color-secondary-light- Hex:
- #59ac56
- Figma:
- Spring 300
- Used in:
- Button
- CSS:
--color-secondary- Hex:
- #12890e
- Figma:
- Spring 500
- Used in:
- Button
- CSS:
--color-secondary-darker- Hex:
- #0d600a
- Figma:
- Spring 700
- Used in:
- Button
- CSS:
--color-secondary-darkest- Hex:
- #094507
- Figma:
- Spring 800
- Used in:
- Button
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
- No CSS token
- Hex:
- #f6faf5
- Figma:
- Spring 40
- CSS:
- No CSS token
- Hex:
- #89c487
- Figma:
- Spring 200
- CSS:
- No CSS token
- Hex:
- #2a9526
- Figma:
- Spring 400
- CSS:
--color-secondary-dark- Hex:
- #107b0d
- Figma:
- Spring 600
- CSS:
- No CSS token
- Hex:
- #052904
- Figma:
- Spring 900
- CSS:
- No CSS token
- Hex:
- #020e01
- Figma:
- Spring 1000
Accent colors
Accent colors are used sparingly to support primary and secondary colors in designs and illustrations.
Primary accent colors
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
--color-accent-primary-lightest- Hex:
- #fcebe6
- Figma:
- Persimmon 50
- CSS:
--color-accent-primary-lighter- Hex:
- #f5c3b3
- Figma:
- Persimmon 100
- CSS:
- No CSS token
- Hex:
- #ee9b81
- Figma:
- Persimmon 200
- CSS:
--color-accent-primary-light- Hex:
- #e7724f
- Figma:
- Persimmon 300
- CSS:
- No CSS token
- Hex:
- #e04a1c
- Figma:
- Persimmon 400
- CSS:
--color-accent-primary- Hex:
- #dd3603
- Figma:
- Persimmon 500
- CSS:
--color-accent-primary-dark- Hex:
- #c73103
- Figma:
- Persimmon 600
- CSS:
--color-accent-primary-darker- Hex:
- #9b2602
- Figma:
- Persimmon 700
- CSS:
--color-accent-primary-darkest- Hex:
- #6f1b02
- Figma:
- Persimmon 800
- CSS:
- No CSS token
- Hex:
- #421001
- Figma:
- Persimmon 900
- CSS:
- No CSS token
- Hex:
- #160500
- Figma:
- Persimmon 1000
Neutral colors
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-white- Hex:
- #ffffff
- Figma:
- White solid
- Used in:
- Accordion, Alert, Badge, Button, Choice, Drawer, Filter Chip, Steplist, Spinner, Tooltip
- CSS:
--color-gray-lightest- Hex:
- #f2f2f2
- Figma:
- Granite 50
- Used in:
- Accordion, Button, Drawer, Table, Vertical Nav, USA Banner
- CSS:
--color-gray-lighter- Hex:
- #d9d9d9
- Figma:
- Granite 100
- Used in:
- Accordion, Button, Choice, Pagination, Tabs, Text Input, USA Banner
- CSS:
--color-gray-light- Hex:
- #a6a6a6
- Figma:
- Granite 300
- Used in:
- Choice, Text Input, Tooltip
- CSS:
--color-gray-dark- Hex:
- #5a5a5a
- Figma:
- Granite 700
- Used in:
- Badge, Button, Pagination, Vertical Nav
- CSS:
--color-gray-darker- Hex:
- #404040
- Figma:
- Granite 800
- Used in:
- Button, Drawer, Tabs, Tooltip
- CSS:
--color-black- Hex:
- #000000
- Figma:
- Black solid
- Used in:
- Drawer, Table, Text Input
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
- No CSS token
- Hex:
- #c0c0c0
- Figma:
- Granite 200
- CSS:
- No CSS token
- Hex:
- #8d8d8d
- Figma:
- Granite 400
- CSS:
--color-gray- Hex:
- #808080
- Figma:
- Granite 500
- CSS:
- No CSS token
- Hex:
- #737373
- Figma:
- Granite 600
- CSS:
--color-gray-darkest- Hex:
- #262626
- Figma:
- Granite 900
- CSS:
- No CSS token
- Hex:
- #0d0d0d
- Figma:
- Granite 1000
Text colors
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-base- Hex:
- #262626
- Figma:
- Granite 900
- Used in:
- Global, Accordion, Alert, Badge, Button, Choice, Filter Chip, Pagination, Steplist, Spinner, Tabs, Text Input, Tooltip, Vertical Nav
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.
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-background- Hex:
- #ffffff
- Figma:
- White solid
- Used in:
- Choice, Dialog, Drawer, Spinner, Tabs, Tooltip
- CSS:
--color-background-inverse- Hex:
- #00395e
- Figma:
- Ocean 800
- Used in:
- Spinner
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
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-info-lightest- Hex:
- #e6f9fd
- Figma:
- Sky 50
- Used in:
- Alert, Drawer
- CSS:
--color-info- Hex:
- #02bfe7
- Figma:
- Sky 500
- Used in:
- Alert, Drawer
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
--color-info-lighter- Hex:
- #b3ecf8
- Figma:
- Sky 100
- CSS:
- No CSS token
- Hex:
- #81dff3
- Figma:
- Sky 200
- CSS:
--color-info-light- Hex:
- #4ed2ee
- Figma:
- Sky 300
- CSS:
- No CSS token
- Hex:
- #1bc5e9
- Figma:
- Sky 400
- CSS:
--color-info-dark- Hex:
- #02acd0
- Figma:
- Sky 600
- CSS:
--color-info-darker- Hex:
- #0186a2
- Figma:
- Sky 700
- CSS:
--color-info-darkest- Hex:
- #016074
- Figma:
- Sky 800
- CSS:
- No CSS token
- Hex:
- #013945
- Figma:
- Sky 900
- CSS:
- No CSS token
- Hex:
- #001317
- Figma:
- Sky 1000
Success
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-success-lightest- Hex:
- #f6faf5
- Figma:
- Spring 40
- Used in:
- Alert
- CSS:
--color-success-light- Hex:
- #59ac56
- Figma:
- Spring 300
- Used in:
- USA Banner
- CSS:
--color-success- Hex:
- #12890e
- Figma:
- Spring 500
- Used in:
- Alert, Badge
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
- No CSS token
- Hex:
- #e7f3e7
- Figma:
- Spring 50
- CSS:
--color-success-lighter- Hex:
- #b8dcb7
- Figma:
- Spring 100
- CSS:
- No CSS token
- Hex:
- #89c487
- Figma:
- Spring 200
- CSS:
- No CSS token
- Hex:
- #2a9526
- Figma:
- Spring 400
- CSS:
--color-success-dark- Hex:
- #107b0d
- Figma:
- Spring 600
- CSS:
--color-success-darker- Hex:
- #0d600a
- Figma:
- Spring 700
- CSS:
--color-success-darkest- Hex:
- #094507
- Figma:
- Spring 800
- CSS:
- No CSS token
- Hex:
- #052904
- Figma:
- Spring 900
- CSS:
- No CSS token
- Hex:
- #020e01
- Figma:
- Spring 1000
Warn
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-warn-lightest- Hex:
- #fef9e9
- Figma:
- Goldenrod 50
- Used in:
- Alert
- CSS:
--color-warn- Hex:
- #f8c41f
- Figma:
- Goldenrod 500
- Used in:
- Alert, Badge
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
--color-warn-lighter- Hex:
- #fdedbc
- Figma:
- Goldenrod 100
- CSS:
- No CSS token
- Hex:
- #fce28f
- Figma:
- Goldenrod 200
- CSS:
--color-warn-light- Hex:
- #fad662
- Figma:
- Goldenrod 300
- CSS:
- No CSS token
- Hex:
- #f9ca35
- Figma:
- Goldenrod 400
- CSS:
--color-warn-dark- Hex:
- #dfb01c
- Figma:
- Goldenrod 600
- CSS:
--color-warn-darker- Hex:
- #ae8916
- Figma:
- Goldenrod 700
- CSS:
--color-warn-darkest- Hex:
- #7c6210
- Figma:
- Goldenrod 800
- CSS:
- No CSS token
- Hex:
- #4a3b09
- Figma:
- Goldenrod 900
- CSS:
- No CSS token
- Hex:
- #191403
- Figma:
- Goldenrod 1000
Error
These colors are currently found in components throughout the design system, but don’t represent the entire available palette.
- CSS:
--color-error-lightest- Hex:
- #fef5f7
- Figma:
- Rose 40
- Used in:
- Alert
- CSS:
--color-error-lighter- Hex:
- #f7bbc5
- Figma:
- Rose 100
- Used in:
- Inline Error, Text Input
- CSS:
--color-error- Hex:
- #e31c3d
- Figma:
- Rose 500
- Used in:
- Alert, Badge, Inline Error, Text Input
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
- No CSS token
- Hex:
- #fce8ec
- Figma:
- Rose 50
- CSS:
- No CSS token
- Hex:
- #f18e9e
- Figma:
- Rose 200
- CSS:
--color-error-light- Hex:
- #eb6077
- Figma:
- Rose 300
- CSS:
- No CSS token
- Hex:
- #e63350
- Figma:
- Rose 400
- CSS:
--color-error-dark- Hex:
- #cc1937
- Figma:
- Rose 600
- CSS:
--color-error-darker- Hex:
- #9f142b
- Figma:
- Rose 700
- CSS:
--color-error-darkest- Hex:
- #720e1f
- Figma:
- Rose 800
- CSS:
- No CSS token
- Hex:
- #440812
- Figma:
- Rose 900
- CSS:
- No CSS token
- Hex:
- #170306
- Figma:
- Rose 1000
Focus colors
These colors are available as part of the system palette, but are not currently used in existing components. Using these colors? Let the DS team know.
- CSS:
--color-focus-light- Hex:
- #ffffff
- Figma:
- White solid
- CSS:
--color-focus-dark- Hex:
- #bd13b8
- Figma:
- Orchid 500
Accessibility considerations
Text contrast
WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.
Text over gradients and background images still need to meet contrast requirements.
Non-text contrast
Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.
Easily test your color combinations
Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast: