Establishes consistent, maintainable UI design systems using modern design token patterns and Tailwind CSS 4.
Codify design decisions into a single source of truth using modern design token patterns. This skill guides the creation of scalable UI systems directly in CSS with Tailwind CSS 4's `@theme` directive, eliminating JavaScript configuration. It emphasizes semantic naming, perceptually uniform color systems with OKLCH, and systematic scales for typography and spacing. Use this skill to build consistent brand identities, implement robust light/dark modes, and ensure design consistency across any web project.
Key Features
01Includes built-in patterns for light/dark mode theming and component-level tokens.
02Implements CSS-native design tokens using Tailwind CSS 4's `@theme` directive.
03Utilizes the OKLCH color space for creating perceptually uniform and accessible color systems.
04Advocates for semantic naming conventions for colors, spacing, and typography.
05Provides comprehensive, scalable systems for typography, spacing (8-point grid), and shadows.
061 GitHub stars
Use Cases
01Building a new, scalable design system for a web application.
02Refactoring an existing CSS codebase to centralize design decisions and improve maintainability.
03Establishing and enforcing brand guidelines across a suite of digital products.
