Foundations Colors
Utilizing brand colors such as teal, our primary color, and navy, our secondary color, help to solidify the State of Michigan's identity across its many applications and digital touchpoints. Using these colors in your app establishes that it's an official State of Michigan product. It also establishes trust with our users—they are more likely to trust an application if the brand colors and design patterns match other state experiences.
Brand colors
Teal
Teal is the State of Michigan's primary brand color. You'll mostly use this color in icons and in interactive elements such as links and buttons. Teal is used for primary calls to action (CTAs).
Hex: #277C78
RGB: 39, 124, 120
$primary
Hex: #61C8AF
RGB: 97, 200, 175
$light-teal
A gray button reading 'Cancel' and a teal button reading 'Submit' in white text. The teal button is the primary CTA.
When using teal, keep in mind:
- Don't use teal as a background for content sections.
- Teal should make up no more than 10% of your app.
- Use light teal in situations where teal would cause color contrast issues, such as on top of navy backgrounds.
An example of light teal being used to increase contrast on a navy background.
Navy
This color serves as our secondary color, to be a complement to teal. Navy is used with focus and hover states for components such as inputs, dropdowns, etc. It can also indicate a toggled state such as when checkboxes and radios are checked. It can also be used sparingly as a background color.
Hex: #142D3E
RGB: 20, 45, 62
$secondary
An image of navy components used for toggled statuses. The first example is of a button to indicate that a filter is active. The second uses navy to indicate that a checkbox has been selected.
An example of white text against a navy background.
UI colors
Our UI colors are used to convey specific meaning. They are used for status indicators (such as successes, warnings, failures, and to emphasize information) and to improve an application's usefulness. Because of their role, they cannot be used decoratively or in place of brand colors. Their use must always convey meaning.
An example of UI colors being used in badge components to convey meaningful statuses, consisting of a green "on time" badge, a yellow "due soon" badge, and a red "late" badge.
Some best practices when using UI colors are:
- Default UI colors are used for borders, text, and meaningful actions (such as red for delete buttons). They help confirm processes and successful actions, and they can alert users as to when they're about to make a mistake.
- Lighter variants of these colors are provided for backgrounds of components such as alerts and badges. Make sure that you're maintaining sufficient contrast when using these colors.
Green
This color signifies a successful action, such as with a processed payment or a sent message.
Hex: #0D8252
RGB: 13, 130, 82
$success
Hex: #EAFBEB
RGB: 234, 251, 235
$success-background
Success alert utilizing success green borders and icons on a light green background to confirm a successful action.
Yellow
Yellow signifies a “warning.” It's for situations where caution is needed, or when an error is likely, and users can fix it. If an error or obstacle is unavoidable, such as scheduled downtime for maintenance, users should be given advanced notice, such as via an alert at the top of the app screen announcing the date and time of downtime.
- A darker yellow is used for text, icons, and other communicative use cases where sufficient contrast is needed.
Hex: #E5A612
RGB: 229, 166, 18
$warning
Hex: #FFEFCA
RGB: 255, 239, 202
$warning-background
Hex: #AE5400
RGB: 174, 84, 0
$warning-link
Warning badge utilizing yellow borders and a darker yellow text to signify something needs attention and must be addressed.
Red
Red represents an error that was made by the app or by a user, such as a failed validation from an incorrect entry on a form or notification that a message didn't send. It also represents a destructive action such as deleting or removing something.
Hex: #B30518
RGB: 179, 5, 24
$error
Hex: #FFE8E3
RGB: 255, 232, 227
$error-background
This input turns red when users fail to enter a value. The helper text underneath it also turns red.
A gray 'Cancel' button and a red 'Delete' button with a trash can icon sit next to each other. The 'Delete' button is red to signify that the action is destructive.
Blue
Blue is used to highlight important information in order to give additional context about the action. Use it in tooltips and alerts.
Hex: #0077A7
RGB: 0, 119, 167
$info
Hex: #E3F7FF
RGB: 227, 247, 255
$info-background
Information alert utilizing blue borders and icons, with a blue call to action link for users to click on if they want more details.
Grays & neutrals
These colors comprise the majority of an app. They're used for text, body copy, captions, lines, and alternate background colors. When using these colors, remember:
- Grays and neutrals help other colors, such as red alerts and yellow warnings, stand out.
- Smoke can only be used in a few situations, such as chart backgrounds and hover states. It can also be used to represent “emptiness,” such as a progress bar that hasn't loaded yet.
Hex: #161618
RGB: 0, 0, 0
$heading-copy
Hex: #353535
RGB: 53, 53, 53
$light-teal
Hex: #707070
RGB: 112, 112, 112
$gray-50
Hex: #D0D0D0
RGB: 208, 208, 208
$gray-30
Hex: #F7F7F7
RGB: 247, 247, 247
$gray-10
Hex: #EAF1F4
RGB: 234, 241, 244
$smoke
Accessibility
To ensure that the State of Michigan’s applications and content are accessible for all users, we follow the Web Content Accessibility Guidelines. For more detailed information, read the Digital Guidelines' page on accessibility.
Do you have an idea, or want to help us improve this page? Reach out to us via email.
DTMB-DG-Support@michigan.govNeed help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.