Design Token Extractor
Extract design system tokens (colors, spacing, typography) from any website
Upgrade to view the full paid extension report
Public basics remain visible. Paid access adds payment clues, related extensions, and more review detail.
7-day user preview
Free accounts only see a short preview for paid extensions.
User Growth Over Time
7-day rating preview
The rating curve is shortened in preview mode.
30-day rating change
Daily, weekly, and monthly growth
Compare 1-day, 7-day, and 30-day net growth and growth rate.
Version, languages, and crawl freshness
Review publication date, version, supported languages, and crawl timestamps.
Product summary
Review the store description, core capabilities, and common use cases.
### 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.
Recent review snapshot
Inspect the latest comments and rating distribution.
More reviews require paid access
The rating summary remains visible. Paid access includes more synced review text.
Similar and related extensions
Review related products from the Chrome Web Store detail page.
Related paid products require paid access
Upgrade to compare similar products and adjacent extensions.
