Design Tokens

Acerca de

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.

Características Principales

• Includes built-in patterns for light/dark mode theming and component-level tokens.
• Implements CSS-native design tokens using Tailwind CSS 4's `@theme` directive.
• Utilizes the OKLCH color space for creating perceptually uniform and accessible color systems.
• Advocates for semantic naming conventions for colors, spacing, and typography.
• Provides comprehensive, scalable systems for typography, spacing (8-point grid), and shadows.
• 1 GitHub stars

Casos de Uso

• Building a new, scalable design system for a web application.
• Refactoring an existing CSS codebase to centralize design decisions and improve maintainability.
• Establishing and enforcing brand guidelines across a suite of digital products.