 |
#14558f |
BAY BLUE |
This color is found in the utility nav and content tags, and signifies clickable hyperlinks among text. It is also occasionally used as an accent color. Exmaples: Links/Buttons/Glorified buttons/Service page header overlay/Relationship indicator borders/Pagination/Jump links |
 |
#8AAAC7 |
50% BAY BLUE |
Examples: Illustrated card border color/Button border color/File type icons/Link arrows |
 |
#E7EEF4 |
10% BAY BLUE |
Examples: Glorified button fill |
 |
#388557 |
BERKSHIRES GREEN |
This complementary color is used for major headings, underlines on rich text headings, callouts, icons, and as a background accent color. _**_Examples: ‘In this section’ table of contents heading background color/‘The details’ sticky left navigation heading background color/Icon background colors (topic pages, footer icons, decorative bullet points)/Icon color fill (search bar, location icons, etc.)/Page dividers |
 |
#97C2A9 |
50% BERKSHIRES GREEN |
Examples: Heading underline/Heading underlines (primary nav active state) |
 |
#D6E7DD |
20% BERKSHIRES GREEN |
Examples: Stat callout background color/Event date background color/Transition page background color |
 |
#F6C51B |
DUCKLING YELLOW |
This warm color is used for subtle accents and to call attention to important information, such as alerts. Never use it for text on a white or light background - it won’t be readable. Examples: Heading underline on dark backgrounds and topic & org cards/Emergency alerts, background, icon color and button outline/Wait time component icon fill |
 |
#FBE28D |
50% DUCKLING YELLOW |
Examples: Card border for alerts/Confirmation number background color on a form page |
 |
#FEF9E8 |
10% DUCKLING YELLOW |
Examples: Card fill for alerts/Background color for emergency alerts/Error page background color |
 |
#141414 |
REVOLUTION GREY |
This color is used to add boldness to headlines and create a visual hierarchy of content. It’s close to black, but a little warmer. _**_Examples: Main well H3 color |
 |
#535353 |
GRANITE GREY |
This color is used for most text. It meets accessibility standards for contrast and isn’t so dark that it negatively impacts readability. Examples: Body copy/Right rail colored heading background/Alt button background/Right rail H3 heading color |
 |
#DCDCDC |
OVERCAST GREY |
This color is used for borders, inputs, divider lines, and other organizational elements. It’s not recommended for text. Examples: Border colors |
 |
#F2F2F2 |
PLATINUM GREY |
This color is used as a background in the header, footer, and some sections to visually separate content blocks without interfering with contrast. _**_Examples: Masthead & footer background color/Table column heading background/Related pages background color/Table of contents component background color |
 |
#680A1D |
INDEPENDENCE CRANBERRY |
This color is used as an accent color, replacing the Berkshires Green, on the G2G site. It also replaces the Mass Blue in some areas on the Service page template. Examples: None (Deprecated) |
 |
#AD7E88 |
50% INDEPENDENCE CRANBERRY |
Examples: Heading underline/Navigation active state underline |
 |
#CD0D0D |
ERROR RED |
This color is used for error language, borders, and icons. Examples: Form error states |
 |
#FCF3F3 |
5% ERROR RED |
Examples: Overall form error state background |
