Agnostic Tokens for DaisyUI

Overview

The goal of the Agnostic Tokens for DaisyUI project is to deliver a comprehensive tokenized theming system that remains platform-agnostic, enabling seamless use across various tools, including Figma, Adobe XD, and Penpot. This project simplifies the traditionally complex process of design system management by leveraging the strengths of Tailwind CSS, DaisyUI, and the incredible work done by the team at Token Studio. DaisyUI, built on the streamlined framework of Tailwind CSS, enhances the system with an elegant and flexible component set, making it an ideal candidate for tokenization. By combining these powerful tools, this project provides designers with a versatile and user-friendly toolkit to elevate their design workflows.

The system is structured in four levels:

• Core Level (Tokens): Foundational design tokens for sizes, colors, typography, and shadows.
• Theme Level (Tokens): Semantic tokens that adapt core tokens for different themes (e.g., light, dark).
• Component Level (Tokens): Tokens applied to UI components, ensuring consistency and reusability across designs.
• Styles (Specific to Figma): Helps designers quickly update styles in Figma that are fed from the component variables.

Key Resources

• DaisyUI-Components
• DaisyUI component library
• Style Dictionary
• Design Tokens Community Group

Figma File

The Figma file for this project is available for viewing and commenting. If you wish to edit the file, you can make a copy for yourself.

Contribution and Feedback

We welcome feedback and collaboration from the design and development community. The goal is to refine and expand this system to create a versatile, cross-platform design language that benefits both designers and developers alike.