Token Analytics

Prerequisites: Before diving in, ensure you’re using Panda CSS version 0.50.0 or above, as Panda Analytics is only available from this version upwards.

What does Panda Analytics for Design Tokens do?

Panda Analytics provides a detailed report offering insights into how your design tokens—such as colors, fonts, and spacing—are defined and used across your project.

By analyzing your tokens, you can:

• Identify underutilized tokens
• Spot hardcoded values
• Keep your design system consistent

Running the Analysis

To analyze your design tokens, simply run the following command in your terminal:

pnpm panda analyze --scope=token

This command scopes the analysis specifically to your tokens, giving you a clear view of how they are defined and used.

Understanding the Output

The output of the analysis will show several columns with insights into your tokens:

• Token: The name of the token (e.g., border, font).
• Usage in percentage: The percentage of defined tokens that are actually used.
• Most used: The most frequently applied tokens.
• Hardcoded tokens: Instances where values are hardcoded instead of using tokens.
• Found in files: The number of files where the token is used.