What problem does it solve? Teams often ship arbitrary palettes or raw hex values that break hierarchy, accessibility, and dark mode. This Skill turns color into a structured system of semantic roles grounded in the existing project and platform design references. ## Core Features & Use Cases - Semantic role modeling: Define surface, content, action, feedback, and structural color roles before assigning raw values, separating primitives from semantic and component tokens. - Theme transformation: Build light/dark/high-contrast themes that preserve role relationships instead of simple inversion, with verification on representative rendered screens. - Brand and state allocation: Allocate brand accents to key actions and states without semantic collisions, and design hover/pressed/selected/disabled states as relationships to base roles. - Use Case: When redesigning a product UI, audit existing tokens, map them to semantic roles, consult Apple HIG, Material 3, Spectrum, and USWDS references, then verify hierarchy across light and dark rendered screens. ## Quick Start Use the color-system skill to audit my current color tokens and propose a semantic role structure with light and dark theme mappings.
