Design Token Extractor
Extract design system tokens (colors, spacing, typography) from any website
Extract a complete design system from any website — colors, typography, spacing, shadows, and more
Review user movement across collected snapshots.
View collected rating snapshots from the latest 7-day window to assess rating stability.
Compare 1-day, 7-day, and 30-day net growth and growth rate.
Review publication date, version, supported languages, and crawl timestamps.
Review the store description, core capabilities, and common use cases.
Design System Extractor turns any webpage into a complete, production-ready design system. Three modes in one extension:
🎨 Tokens Mode
Scan any page and extract every design token — colors (grouped by role: brand, semantic, text, surface, border), typography (h1–h6, body, caption…), spacing scale, border radius, shadows, and breakpoints. Export as:
• Design Tokens JSON (W3C DTCG format)
• CSS Custom Properties
• Tailwind Config
Inspect the latest comments and rating distribution.
Store average score: --. The bars below are calculated from synced review text only, so they may be empty for extensions that have public ratings but no synced comments yet.
Review related products from the Chrome Web Store detail page.
Extract design system tokens (colors, spacing, typography) from any website
Site Palette generates a color palette from any website, allowing designers to use it as a reference in their work.
Extracts the design system of the current website into an AI-friendly markdown document.
Extract design tokens, colors, fonts, spacing, and styles from any website and export clean YAML for design systems and AI tools.
Extract colors, fonts, images, SVGs, and CSS from any website. Build design systems in seconds.
Figma