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 — it generates primitive ramps via the Sistema palette API and then maps them to semantic roles. **Step 1 — Read the references:** Read the following from the Sistema knowledge base: - Color architecture synthesis: `{{sistema_url}}/raw/principles/color/architecture` - Primitive ramp scalability: `{{sistema_url}}/raw/principles/color/primitive-ramp-scalability` Pay attention to the non-negotiable floor section: required semantic roles, the on-* pairing pattern, contrast requirements, and the never-hardcode rule. **Ramp completeness check:** If the palette provided has fewer than 10 stops per hue, expand it to a full 19-stop ramp before mapping roles. POST the seed hex(es) to `{{sistema_url}}/api/palette` with body `{ "colors": { "[name]": "#[seed]" } }` and use the returned stops. For feedback hues not present in the existing palette, fetch the pre-built library at `{{sistema_url}}/palettes/library.json` and select from the named ramps. If the palette is a fixed brand specification with specific values that cannot be expanded (e.g. an existing Figma swatch export), proceed as-is and flag any semantic role where the palette has no suitable stop. 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 exact contrast ratio for every `on-*` pairing using `POST {{sistema_url}}/api/contrast` — all normal text roles must return `aa_text: true` (≥ 4.5:1), UI component roles must return `aa_ui: true` (≥ 3:1) - 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-`] ---