Background-1
Default surface background, typically the main page color.
Color
Guidelines for using color across the website.
Background
Used for surfaces like pages, cards, and containers.
Background-2
Secondary background for elevated surfaces or hover states.
Background-3
Tertiary background for the highest elevated surfaces and for nested hover states.
Foreground
Used for text, icons, and visual emphasis.
Foreground-1
Used for default text color and for CTA actions.
Foreground-2
Intermediate color used for edge cases or for just a bit of emphasis.
Foreground-3
Used for secondary text color.
Border
Used for dividing, outlining, and framing UI elements.
Border-1
Used for default border or outline color.
Border-2
Used for secondary border colors.
Accent
Used for team brand colors and highlights.
Accent-red
General DTI/full team accent color.
Accent-pink
Leads team accent color.
Accent-green
Development team accent color.
Accent-blue
Design team accent color.
Accent-yellow
Business team accent color.
Accent-purple
Product team accent color.