Brand colors
Our color palette was chosen to reflect the state’s identity while ensuring accessibility across all digital services.
General guidelines
All organizations should leverage the Massachusetts Design System color palette to the greatest extent possible. This helps to ensure that residents are presented with an accessible, and recognizable identity, no matter which service they’re interacting with.
Bay Blue
Bay Blue is the primary brand color that anchors the overall palette and provides a consistent visual foundation across products.
Base hex color code: #14558F
Bay Blue interactive colors
Interactive hex color codes:
| Default | Hover | Active | Disabled | Focus border |
|---|---|---|---|---|
#14558F | 
#4377A5 | 
#104472 | 
#F0F0F0 | 
#0088FF |
Berkshires Green
Berkshires Green is the accent brand color. It complements Bay Blue by adding balance and variety to the palette, often appearing in secondary interface elements.
Base hex color code: #388557
Berkshires Green interactive colors
Interactive hex color codes:
| Default | Hover | Active | Disabled | Focus border |
|---|---|---|---|---|
#32784E | 
#388557 | 
#275D3D | 
#F0F0F0 | 
#0088FF |
Duckling Yellow
Duckling Yellow is the highlight brand color in the palette. It should be used sparingly to draw attention to key information and bring warmth and energy to the overall experience.
Base hex color code: #F6C51B
Granite Gray
Granite Gray is the neutral brand color in the palette. It can be used as a background fill to create contrast and support readability without overpowering the primary or accent colors, helping those colors stand out as focal points.
Base hex color code: #535353.
In addition, there is a Light color way for interactive components.
Granite Gray interactive colors
| Default | Hover | Active | Disabled | Focus border |
|---|---|---|---|---|
#F7F7F7 | 
#FFFFFF | 
#E6E6E6 | 
#F0F0F0 | 
#0088FF |
Utility
Utility colors are reserved for conveying specific system states and user feedback such as focus, success, warning, and danger. These colors provide clear, consistent signals that help users understand what’s happening and how to respond, whether it’s identifying the active input field, being alerted to an issue, or confirming a successful action. Because they carry critical meaning across interactions, utility colors are intentionally limited and standardized within the system. This ensures they remain reliable, accessible, and free from visual overload or misuse in decorative contexts, so users can trust their meaning wherever they appear.
Success Green
Success Green is used to indicate positive outcomes, successful actions, or completed processes. It provides a clear, accessible visual signal that something has gone right, such as confirming a form submission, displaying a success message, or highlighting verified information.
Base hex color code: #24A850
Warning Yellow
Warning Yellow is used to draw attention to important information that may need caution or action. It signals situations that aren’t errors but could require user awareness, such as upcoming deadlines, incomplete tasks, or potential issues that need to be reviewed.
Base hex color code: #F6B622
Danger Red
Danger Red is used to indicate errors, critical issues, or destructive actions. It provides a clear, accessible visual signal that something has gone wrong or needs immediate attention, such as form validation errors, system failures, or irreversible actions like deleting data.
Base hex color code: #CD0D0D
Danger Red interactive colors
| Default | Hover | Active | Disabled | Focus border |
|---|---|---|---|---|
#CD0D0D | 
#FFFFFF | 
#FEF1F1 | 
#F0F0F0 | 
#0088FF |
Focus
Focus is used to highlight interactive elements when they receive keyboard or programmatic focus. It provides a clear visual indicator to support accessibility and help users understand where they are on the page when navigating without a mouse.
Focus on light
Hex color code: #0088FF
Focus on dark
Hex color code: #B2DBFF
Semantic color definition
A semantic color style definition names color styles based on their purpose or role (like “background” "text" or “icons”) rather than their appearance, making it easier to keep color consistent and meaningful across designs and code.
Designing with semantic color styles in Figma
Designers leveraging our Figma libraries, can easily choose from the predefined set of semantic color styles to maintain consistency, and meet color contrast accessibility requirements.
View the color style definitions in Figma
All semantic color styles were created using our base (also known as primitive) color ramp variables.
Token theme files for developers
We’re currently exploring options for providing token theme files to make implementation more consistent and efficient. If you have suggestions, use cases, or preferences for how these files could be delivered, please send an email to designsystem@mass.gov. We'd love to connect and hear your input.