Color
Color distinguishes our brand and reinforces consistent experiences across products.
Brand colors
The core primary color which defaults to the haiti family serves as the primary action color across all dayforward products and experiences. Additional colors should be used sparingly and purposefully.
- #1b113c
- #2c6df3
- #1f394d
Primary
Use primary color for the most prominent components across the UI, such as the high-emphasis buttons and active states.
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Secondary
Use secondary colors for less prominent components in the UI such as filter and chips.
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Tertiary
Use tertiary roles for contrasting accents that balance primary and secondary colors or bring heightened attention to an element such as an input field.
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Neutrals
Neutral colors consist of blacks, grays and white. These colors are used for default text, surfaces, level changes and complements to accent colors within the application experience. They typically don’t have meaning associated with them, though they can imply things like disabled states. Use lighter neutrals on surfaces to highlight areas of primary focus and create a sense of hierarchy.
There are dedicated neutrals for both light and dark mode.
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Sematic
Semantic colors can infuse meaning to an experience and provide feedback, status, or urgency to the user allowing for quick mental recognition across applications. These colors should be used sparingly and only when appropriate to highlight important information.
Error
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Success
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950