Design Token Extractor

### Core Features

**Comprehensive Token Extraction**

The extension automatically scans every element on a webpage to extract three primary categories of design tokens:

1. **Color Tokens**: The extension identifies and extracts all color values used throughout the page, including background colors, text colors, and border colors. Each color is presented in both hexadecimal and RGB formats, with visual color swatches for easy identification. The system automatically deduplicates colors, showing only unique values to help you understand the complete color palette of any website.

2. **Spacing Tokens**: All spacing values are extracted and categorized by type, including margins, padding, and gap values. The extension provides contextual information showing which HTML elements use specific spacing values, making it easy to understand how spacing is applied throughout the design. This helps identify spacing systems, rhythm patterns, and design consistency.

3. **Typography Tokens**: Complete typography analysis includes font families, font sizes, font weights, and line heights. The extension groups typography combinations together, showing which font families are paired with specific sizes and weights. Additionally, it displays actual text samples from the page, allowing you to see typography in context and understand how different type combinations are used.