First pass at token docs

[taysea]

Deploy Preview

What does this PR do?

A first draft to add some preliminary tokens documentation:

• Overview (what/why)
• How to read token names
• How to build with tokens in code
• How to build with tokens in Figma (@oliverHPE or another designer to write content)
• All available tokens (to be filled in, but maybe something like: https://design-tokens-alpha--lustrous-dasik-2fbdc5.netlify.app/)

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 #3968

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

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