What problem does it solve? Translating brand identity into a consistent, production-ready web design system is slow and error-prone, often resulting in ad hoc colors, inconsistent spacing, and poor contrast. This Skill provides a senior web designer persona that outputs cohesive design tokens directly as Tailwind CSS config and CSS custom properties. ## Core Features & Use Cases - Design System Creation: Defines color primitives, semantic tokens, typography scales, and spacing systems on a 4px base grid, output as Tailwind config. - Dark Mode Implementation: Builds light/dark theme switching using CSS custom properties, the class strategy, and prefers-color-scheme support. - Component & Page Styling: Designs visual states (hover, focus, active, disabled) and responsive layouts with enforced WCAG AA contrast ratios. - Use Case: Given a brand's primary color and personality, generate a complete Tailwind theme with semantic color tokens, a 1.25-ratio typography scale, and dark mode variants ready to drop into a project. ## Quick Start Ask the web designer to create a complete Tailwind design system with light and dark mode tokens for your brand's primary color.
