Colors

Greyscale colors are used as foundational elements in the design system, providing neutral tones for texts, backgrounds, and borders. These versatile colors ensure readability, maintain visual hierarchy, and create subtle separations between elements while supporting the overall design without drawing unnecessary attention.

Text

Sample	Name	Token	Hover	Active
	Default	--cds-color-text-default	--hover	--active
	Subtle	--cds-color-text-subtle	--hover	--active
	Muted	--cds-color-text-muted	--hover	--active
	Surface	--cds-color-text-surface	--hover	--active
	Inverse	--cds-color-text-inverse	--hover	--active

Backgrounds

property	Name	Token	Hover	Active
	Default	--cds-color-background-default	--hover	--active
	Default	--cds-color-background-soft	--hover	--active
	Default	--cds-color-background-medium	--hover	--active
	Default	--cds-color-background-deep	--hover	--active
	Inverse	--cds-color-background-inverse	--hover	--active

Accent

Sample	Name	Token	Hover	Active
	Pale	--cds-color-accent-primary-main	--hover	--active
	Main	--cds-color-accent-danger-main	--hover	--active

Feedback

Sample	Name	Token	Hover	Active
	Pale	--cds-color-feedback-information-pale
	Main	--cds-color-feedback-information-main
	Strong	--cds-color-feedback-information-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-feedback-success-pale
	Main	--cds-color-feedback-success-main
	Strong	--cds-color-feedback-success-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-feedback-alert-pale
	Main	--cds-color-feedback-alert-main
	Strong	--cds-color-feedback-alert-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-feedback-error-pale
	Main	--cds-color-feedback-error-main
	Strong	--cds-color-feedback-error-strong

Alternative

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-1-pale	--hover	--active
	Main	--cds-color-alternative-1-main	--hover	--active
	Strong	--cds-color-alternative-1-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-2-pale	--hover	--active
	Main	--cds-color-alternative-2-main	--hover	--active
	Strong	--cds-color-alternative-2-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-3-pale	--hover	--active
	Main	--cds-color-alternative-3-main	--hover	--active
	Strong	--cds-color-alternative-3-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-4-pale	--hover	--active
	Main	--cds-color-alternative-4-main	--hover	--active
	Strong	--cds-color-alternative-4-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-5-pale	--hover	--active
	Main	--cds-color-alternative-5-main	--hover	--active
	Strong	--cds-color-alternative-5-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-6-pale	--hover	--active
	Main	--cds-color-alternative-6-main	--hover	--active
	Strong	--cds-color-alternative-6-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-7-pale	--hover	--active
	Main	--cds-color-alternative-7-main	--hover	--active
	Strong	--cds-color-alternative-7-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-8-pale	--hover	--active
	Main	--cds-color-alternative-8-main	--hover	--active
	Strong	--cds-color-alternative-8-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-9-pale	--hover	--active
	Main	--cds-color-alternative-9-main	--hover	--active
	Strong	--cds-color-alternative-9-strong

Sample	Name	Token	Hover	Active
	Pale	--cds-color-alternative-10-pale	--hover	--active
	Main	--cds-color-alternative-10-main	--hover	--active
	Strong	--cds-color-alternative-10-strong