ui-theme

Design tokens enforce color consistency by mapping Tailwind classes to CSS variables defined in globals.css and your Tailwind config. This ensures every component—cards, inputs, layouts—uses the same token-based colors (bg-background, text-foreground, border-border) rather than arbitrary literals, maintaining alignment across dark and light themes.

Yes. This Skill uses CSS variables to drive all theme values, ensuring Tailwind token classes reference centralized variables rather than hardcoded colors. This approach scales theming across your design system and supports multiple color contexts without modifying component code.

Token-based theming prevents inconsistency by prohibiting arbitrary color literals and enforcing a finite set of allowed tokens. Define your palette as CSS variables in globals.css, configure Tailwind to map token classes to those variables, and validate that components use only approved tokens.

Define your color tokens as CSS variables in globals.css for both light and dark contexts, then configure Tailwind to reference these variables. Apply token classes like bg-background and text-foreground to components; the CSS variables automatically switch values based on the active theme.

No. Token-based theming centralizes color definitions in CSS variables and Tailwind config, so palette changes update globally without touching component code. Components continue using token classes, and their colors shift automatically when variable values change.

This Skill enforces functional requirements that prohibit arbitrary color literals. Components must use only allowed tokens (bg-background, text-foreground, border-border) mapped to CSS variables, ensuring no color exists outside the system and maintaining consistency across pages and apps.