Color
The color palette balances calm, dependable blues with moments of playful warmth from pinks and oranges. This contrast brings clarity and character to the interface—professional yet expressive.
Text Color
All colors in this palette meet AAA WCAG contrast standards for accessibility and are designed to provide excellent readability in both light and dark modes.
#1E252F
text-display
#1E252F
text-header-default
#3C4B5D
text-subtitle-default
#3C4B5D
text-body-default
#59708C
text-caption-default
#0058CC
text-primary
#0047A3
text-primary-hover
#7A0050
text-information
#960000
text-warning
#206A4B
text-success
#F6F7F9
text-on-action
#F6F7F9
text-on-surface-invert
#AFBCCC
text-disabled
Icon Color
These icon colors are designed for clarity and accessibility across all backgrounds and states.
#1E252F
icon-default
#0058CC
icon-primary
#7A0050
icon-information
#960000
icon-warning
#206A4B
icon-success
#F6F7F9
icon-on-action
Surface Color
Surface colors provide the backgrounds for UI elements, ensuring clarity, hierarchy, and accessibility in both light and dark modes.
#FFFFFF
surface-light
#F6F7F9
surface-default
#EFF2F5
surface-dark
#E0EEFF
surface-primary
#FFE0F4
surface-information
#FFF7E5
surface-warning
#EBF9F3
surface-success
#0E1116
surface-invert
#0058CC
surface-action
#0047A3
surface-action-hover
#CC0086
surface-action-secondary
#A3006A
surface-action-secondary-hover
#E0E5EB
surface-disabled
#EFF2F5
surface-disabled-border
Border Color
Border colors define the outlines and separators for UI elements, supporting clarity and visual hierarchy.
#BEC8D5
border-default-light
#AFBCCC
border-default
#7F94AE
border-default-dark
#0058CC
border-primary
#CC0086
border-information
#FFAB00
border-warning
#36B37E
border-success
#D0D8E1
border-disabled
Color Roles
These color roles are used throughout the design system for consistent meaning and emphasis.
Neutral
Use for default text, backgrounds and borders.
Brand
Use for primary actions or elements that communicate the brand.
Information
Use for informative UI, such as an information icon, or UI that communicates something is important.
Success
Use to communicate a favorable outcome, such as a success message.
Warning
Use for UI that communicates caution to prevent a mistake or error from occurring.
Inverse
Use for UI elements that sit on bold emphasis backgrounds.