Create a Token-Based Design System DEMO in Tailwind CSS on Figma

Design and structure a scalable, token-based design system in Figma that aligns with Tailwind CSS conventions. The system should include design tokens for colors, typography, spacing, border radius, shadows, and other core utilities. Each token should be organized following a consistent naming convention and grouped by category (e.g., Core, Light/Dark Themes, Breakpoints). Ensure tokens are compatible with Tailwind's utility classes and easily maintainable for future updates. Collaborate with developers to validate the mapping between Figma tokens and Tailwind configuration.

Deliverables:

• A well-structured Figma file with all token categories

• Token naming aligned with Tailwind's utility-first approach

• Documentation of the token system logic and usage guidelines

• Export-ready format for integration with design token tools (e.g., Tokens Studio)