Token Intent Validator

What It Does

The Token Intent Validator goes beyond simple token checking. It understands the intent behind token usage and flags mismatches that other tools miss.

Validation Rules

1. No Raw Colors

Error when raw hex values like #FF0000 are used instead of tokens.

2. No Primitives in Components

Error when primitive tokens (e.g., blue.500) are used directly in components instead of semantic tokens.

3. Status Color Misuse

Warning when status colors (danger, success) are used in non-status contexts.

4. Intent Mismatch

Warning when a token’s intent doesn’t match the property it’s applied to (e.g., a background token used for border).

5. Context Appropriateness

Info about unusual token usage based on component context (button, card, alert, etc.).

6. State on Static

Warning when interactive state tokens (hover, focus) are applied to static elements.

Supported Token Patterns

• Semantic: color.background.primary, color/foreground/danger
• Component: button.background.primary
• Primitive: blue.500, gray-dark

Installation

1. Clone the repository
2. In Figma: Plugins > Development > Import plugin from manifest
3. Select manifest.json from the project folder
4. Run from Plugins > Development > Token Intent Validator