Map an Existing Palette to Semantic Roles

Use this play when you already have a set of color values — from a brand palette, a Figma file, or an existing design system — and you want to map them to semantic roles that components can consume. If you are starting from a single seed color with no existing palette, use `generate-color-scheme` instead. **Step 1 — Read the references:** Read the following from the Sistema knowledge base: - Color architecture synthesis: `{{sistema_url}}/raw/principles/color/architecture` Pay attention to the non-negotiable floor section: required semantic roles, the on-* pairing pattern, contrast requirements, and the never-hardcode rule. My existing palette: [Paste your color values here — hex values, a Figma swatch export, a Tailwind color config, or whatever format you have. Include neutrals and grays.] Map the palette to semantic roles following the role structure from the color architecture synthesis. For each role: - Note which palette value you assigned - Verify the contrast ratio for every `on-*` pairing (target ≥ 4.5:1 for text, ≥ 3:1 for UI components) - Flag gaps where the palette does not have a suitable value for a required role Output as CSS custom properties. Token naming pattern: `--color-[role]`. Custom prefix (optional): [leave blank to use `--color-`, or specify e.g. `--brand-`] ---