Prompt it

Create a beginner-friendly responsive color-token grid using semantic HTML and dependency-free CSS. Use a labelled section with an intro, a real unordered list, and three list items that each contain an accessible decorative swatch, token name, hex value, and short usage description. Scope every selector under .cf-color-token-grid and keep every custom selector represented in the supplied HTML. Use CSS Grid with minmax(0, 1fr) for three columns, collapse to one column below 640px, preserve source order, keep content readable from 320px, include visible keyboard focus styles, readable contrast, and a reduced-motion fallback. Do not use JavaScript, frameworks, or external assets. Return complete copy-ready HTML and CSS and explain the token naming and responsive breakpoint for a beginner.