Token Inspector

Token Inspector is a Chrome extension designed for developers and designers to inspect and analyze design tokens and hard-coded CSS values on any webpage. It helps ensure design system consistency by identifying violations in real time, with a focus on performance and usability.

Key Features
Detects Hard-Coded CSS Values: Instantly scans webpages for hard-coded colors, typography, spacing, and border values that should use design tokens.
Organized by Category: Groups violations by design system category (Color, Typography, Spacing, Border) for clear review.

Minimal UI: Clean, easy-to-use interface with tabbed navigation and detailed violation information.
Chrome DevTools Panel: Integrates directly into DevTools for advanced inspection, element highlighting, and inline CSS editing.

Consistent Scanning Logic: Uses a shared scanning engine for both popup and DevTools, ensuring reliable results everywhere.

Performance Focused: Fast, efficient scanning with minimal impact on page performance.
Comprehensive Test Files: Includes a variety of test pages to verify detection accuracy and edge cases.