primary | hsl(340, 85%, 55%) | Main brand color used across buttons and highlights |
secondary | hsl(45, 90%, 60%) | Secondary accent color used for emphasis |
neutral | hsl(210, 20%, 80%) | Neutral color for borders and UI elements |
base | hsl(0, 0%, 10%) | Primary text color on light background |
muted | hsl(200, 25%, 35%) | Subdued text, used for descriptions or less important elements |
inverted | hsl(0, 0%, 100%) | Text color on primary backgrounds (e.g., buttons) |
background | hsl(0, 0%, 98%) | Default background color for the page |
background-secondary | hsl(0, 0%, 95%) | Slightly darker secondary background (e.g., cards, sections) |