Token Inspector

A Chrome extension to inspect and analyze design tokens and hard-coded CSS values on webpages.

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.