Semantic color principles

Unlike colors defined by their visual attributes (like red or blue), semantic colors express purpose and behavior in the interface. These colors communicate meaning regardless of their actual appearance.

Key semantic color roles:

• Label colors: express content hierarchy from primary to quaternary
• Background colors: indicate different levels of elevation and grouping
• Link colors: show interactive text elements
• Separator colors: define content boundaries
• Placeholder colors: indicate temporary states
• Control colors: show interactive elements
• Selected state colors: highlight active elements

Semantic colors maintain their meaning while adapting to different contexts like light/dark modes and accessibility settings. The system automatically manages their appearance while preserving their functional purpose.