ux-color-system

Semantic color tokens map theming problems to CSS variables enforcing contrast and accessibility rules. Define tokens like --theme-surface, --color-success, and --color-error, then pair them with text colors (on-surface) to maintain WCAG contrast standards across light and dark themes for fantasy or medieval designs.

Use semantic surface and text token pairs designed for both light and dark modes. The Skill provides predefined patterns for surface/text combinations and state colors that automatically maintain accessibility across theme switches, eliminating manual contrast recalculation.

Yes. CSS custom properties like --theme-surface, --color-primary, and feedback colors (success, error) integrate with accessibility contrast rules. The approach defines semantic tokens that enforce safe pairings, overlays, and phase indicators while supporting both light and dark surfaces.

Semantic token patterns include overlay and gradient definitions with built-in contrast enforcement. Map overlay usage to hover states and emphasis areas, then apply gradient patterns as CSS variables tied to surface and accent colors, ensuring accessibility across all interactive states.

Semantic tokens cover primary, secondary, success, and error states, plus phase indicators for multi-step workflows. The system provides CSS variables for each state and phase, with contrast rules ensuring text readability and accessible feedback colors across fantasy-themed interfaces.

No framework dependency required. Semantic color tokens work as standalone CSS custom properties applicable to any component or HTML structure. Define surface, text, state, and overlay variables, then apply them directly to your fantasy UI—no build tools or additional dependencies needed.