Design Tokens
Establishes consistent, maintainable UI design systems using modern design token patterns and Tailwind CSS 4.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- 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.
Use cases
- 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.
FAQ
What capabilities does it provide?
It implements modern patterns for semantic color systems using the OKLCH color space, modular typography scales, 8-point grid spacing, and built-in support for light/dark mode. All tokens are available as both Tailwind utilities and CSS variables.
What does the Design Tokens skill do?
This skill enables Claude to generate and manage a complete design token system directly in your CSS using Tailwind CSS 4's `@theme` directive. It establishes a single source of truth for colors, typography, spacing, and more for consistent UI.
When should I use this skill?
Use this skill when starting a new project, establishing brand guidelines, or refactoring an existing codebase for consistency. It's ideal for building scalable UI design systems, component libraries, or reviewing design implementation.
How does this skill improve my workflow?
It centralizes all design decisions in a single CSS file, eliminating the need for `tailwind.config.js`. This simplifies setup, provides type-safe autocompletion in your editor, and makes your design system easier to maintain and theme (e.g., dark mode).
Related skills
Frontend Design
Creates distinctive, production-grade frontend interfaces with high design quality and a strong aesthetic point-of-view.
Developer Tools2,82412 ptsXterm.js Development
Provides battle-tested patterns for building robust, production-grade terminal applications using xterm.js, React, and WebSockets.
Developer Tools9912 ptsBrainstorming and Design
Refines rough ideas into fully-formed software designs using structured questioning, alternative exploration, and incremental validation.
Developer Tools6912 pts