Add color system documentation

[taysea]

New page 1: Color usage New page 2: Color pairing

What does this PR do?

Adds documentation on color system and design tokens.

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• [ ] Small, medium, and large screen sizes
• [ ] Cross-browsers (FireFox, Chrome, and Safari)
• [ ] Light & dark modes
• [ ] All hyperlinks route properly

Accessibility Checks

• [ ] Keyboard interactions
• [ ] Screen reader experience
• [ ] Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• [ ] Console is free of warnings and errors
• [ ] Passes E2E commit checks
• [ ] Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Closes #4828

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: cd17d864dabac4ea86d5f95b81bcb55cc1899d92

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[taysea]

Our naming placement for "selected" in color names like background.selected.primary differs from our semantic taxonomy in terms of where a state like "selected" would typically be placed.

I think this had been intentional in the sense that "selected" in this scenario is more so serving as a global "role" for the color that we might not want to tie tightly to a specific hue (for example, if we added background.selected.secondary we would want that to be independent from needing to be a specific grey/green/blue/etc.).

Just trying to figure out how to clarify/reconcile that with the documented taxonomy, or if I'm not thinking about naming correctly and a color should instead be named background.secondary.selected or background.primary.selected, etc.. Let me know if you all have any thoughts.

cc: @halocline @oliverHPE

[netlify[bot]]

✅ Deploy Preview for rad-shortbread-897892 ready!

Name	Link
🔨 Latest commit	8f3a18e58492922e8294962c9175d3acd055609f
🔍 Latest deploy log	https://app.netlify.com/sites/rad-shortbread-897892/deploys/67ec6ceea008470008f66f78
😎 Deploy Preview	https://deploy-preview-4825--rad-shortbread-897892.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	cd17d864dabac4ea86d5f95b81bcb55cc1899d92
🔍 Latest deploy log	https://app.netlify.com/sites/unrivaled-bublanina-3a9bae/deploys/67f84beb91703c000873b627
😎 Deploy Preview	https://deploy-preview-4825--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	cd17d864dabac4ea86d5f95b81bcb55cc1899d92
🔍 Latest deploy log	https://app.netlify.com/sites/hpe-theme-preview/deploys/67f84bebe3470600083b2c82
😎 Deploy Preview	https://deploy-preview-4825--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.