CSS Stats

Design Token Extractor

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. Live Page Editor Beyond extraction, Design Extractor includes a professional live editing mode that functions similarly to WordPress page builders. When enabled, you can: - Click any element on the page to select it - View all computed styles in a dedicated sidebar panel - Edit typography properties including font family, font size, font weight, line height, and text color in real-time - Modify background colors and border colors with a visual color picker - Adjust spacing values including padding and margin - See changes applied instantly to the page - Copy the complete CSS for any edited element - Reset changes to restore original styles The live editor provides visual feedback with hover highlights and selection indicators, making it easy to identify and modify specific elements. This feature is invaluable for prototyping, testing design variations, and understanding how design tokens work together in practice. 1. JSON Export: Complete token data in structured JSON format, perfect for importing into design tools, documentation systems, or custom applications. The JSON includes all color values with RGB breakdowns, all spacing values, and complete typography information. 2. CSS Variables Export: Generates CSS custom properties (CSS variables) that can be directly integrated into your stylesheets. This format is ideal for maintaining design tokens in CSS-based design systems and ensures compatibility with modern CSS workflows. 3. TypeScript Export: Type-safe TypeScript constants that can be imported directly into TypeScript or JavaScript projects. The exported code includes proper type definitions and follows TypeScript best practices, making it easy to integrate tokens into React, Vue, Angular, or any TypeScript-based application. 4. Tailwind Config Export: Generates a complete Tailwind CSS configuration file with all extracted tokens properly formatted for Tailwind's design system. This includes color palettes, spacing scales, and typography settings, allowing you to quickly bootstrap a Tailwind project based on any website's design tokens. The extension features a clean, dark-themed interface organized into intuitive tabs: Colors Tab: Displays all extracted colors organized by type (background, text, border) with visual color swatches, hexadecimal values, and RGB values. Click any color to copy its value to your clipboard. Spacing Tab: Shows all spacing values grouped by type (margin, padding, gap) with contextual information about which elements use each spacing value. This helps identify spacing patterns and design system consistency. -Typography Tab: Presents font families, font sizes, and font weights in organized sections. Typography combinations are grouped together with text samples, showing how different type combinations appear in context. Live Editor Tab: Provides controls to enable or disable the live editing mode, with status indicators showing the current editor state. Privacy and Security Design Extractor operates entirely locally within your browser. All token extraction and processing happens on your device, with no data transmitted to external servers. The extension requires only the "activeTab" permission, meaning it can only access the current tab you're viewing, not your browsing history or other tabs. No tracking, analytics, or data collection occurs. The extension works completely offline after installation, ensuring your privacy and security. The extension uses advanced browser APIs to extract computed styles from every element on a page. It analyzes the Document Object Model (DOM) comprehensively, processing all visible and hidden elements to ensure complete token extraction. The extraction algorithm handles edge cases including transparent colors, inherited styles, and dynamically generated content. The extension is built using Manifest V3, the latest Chrome extension standard, ensuring compatibility and security. Design System Analysis: Understand how leading websites structure their design systems by extracting and analyzing their design tokens. Learn from industry best practices and identify patterns used by successful design teams. Competitive Research: Extract color palettes, spacing systems, and typography choices from competitor websites. Understand their design language and use this information to inform your own design decisions. Migration Projects: When migrating from one design system to another, extract existing tokens to ensure consistency and identify all design values that need to be mapped or updated. Design Inspiration: Discover color combinations, typography pairings, and spacing patterns from websites you admire. Use extracted tokens as starting points for your own design projects. Educational Purposes: Learn how professional design systems are structured by examining real-world implementations. Understand the relationship between design tokens and visual design. Rapid Prototyping: Use the live editor to quickly test design variations and see how different token values affect the visual appearance of elements. Design System Documentation: Export tokens to create comprehensive documentation of existing design systems, making it easier to maintain consistency across teams and projects. Performance and Reliability The extension is optimized for performance, handling large and complex websites efficiently. The extraction process runs asynchronously to prevent browser freezing, and the interface provides clear feedback during extraction. Error handling ensures the extension gracefully handles edge cases and provides helpful error messages when extraction cannot be performed on certain page types. Design Extractor works on all websites accessible through Chrome, including static websites, single-page applications, and dynamically generated content. The extension is compatible with modern web technologies including React, Vue, Angular, and other JavaScript frameworks. It can extract tokens from websites using CSS-in-JS, CSS modules, or traditional stylesheets. 1. Install the extension from the Chrome Web Store 2. Navigate to any website you want to analyze 3. Click the Design Extractor icon in your Chrome toolbar 4. Click the "Extract Design Tokens" button 5. Browse the extracted tokens in the organized tabs 6. Export tokens in your preferred format (JSON, CSS, TypeScript, or Tailwind) 7. Optionally enable Live Editor mode to interactively edit page elements For Developers The extension is particularly valuable for front-end developers working with design systems. The exported formats are production-ready and can be directly integrated into build processes. The TypeScript export includes proper type definitions, and the Tailwind config export follows Tailwind's official configuration format. Developers can use extracted tokens to quickly bootstrap new projects, maintain design consistency, and ensure alignment between design and implementation. For Designers Designers can use this extension to analyze design systems, extract color palettes for mood boards, understand typography hierarchies, and study spacing systems. The live editor allows designers to experiment with design variations without needing to modify source code, making it an excellent tool for rapid iteration and client presentations. The extension is actively maintained with regular updates that add new features, improve extraction accuracy, and enhance export formats. User feedback drives development priorities, ensuring the tool continues to meet the needs of the design and development community. Support and Documentation Comprehensive documentation is available, and the extension includes helpful tooltips and status messages to guide users. The interface is designed to be intuitive, requiring no technical knowledge to extract and export design tokens. Design Extractor transforms the way you work with design systems, making it easy to extract, analyze, and export design tokens from any website. Whether you're a designer, developer, or design system architect, this tool provides the insights and exports you need to work more efficiently and maintain design consistency across your projects. Side Panel Architecture — The entire extension now runs inside Chrome's native Side Panel for a seamless, persistent workflow alongside any webpage. Minimize to Bubble — Collapse the sidebar into a tiny, draggable glassmorphic overlay so you can view the full-width page (great for screenshots). Click the bubble to reopen instantly. Smart Capture (Alt+S) — One-click intelligent page capture with Shadow DOM encapsulation for zero style conflicts. Tailwind Export — New fourth export format generates Tailwind CSS utility classes for any extracted token set. Improved Color Detection — Robust background and border color extraction that walks the DOM tree to find the true visible color, even on transparent elements. Improved Spacing Detection — Shorthand reconstruction logic ensures accurate padding and margin values even when browsers report empty shorthands. Interactive Info Buttons — Pulsating info indicators on token cards guide users to deeper context and usage details.

AccessCheck — Website Accessibility Checker, WCAG & ADA Audit

Run a WCAG and ADA accessibility audit. Check color contrast, alt text, headings, ARIA and 50+ website issues. Run a one-click WCAG and ADA accessibility audit on any web page. This accessibility checker tests color contrast, alt text, heading structure, ARIA labels, keyboard navigation and 50+ other website accessibility issues — and explains every single one in plain English, not technical WCAG codes. - Color contrast ratio for text, buttons, links, and UI elements - Missing, empty, or redundant alt text on images and icons - Heading structure and hierarchy (H1 through H6 order) - Form labels, input associations, and required field indicators - ARIA labels, roles, states, and properties - Keyboard navigation, tab order, and focus indicators - Link text clarity, descriptiveness, and "click here" anti-patterns - Language attributes and document structure - Skip navigation links and bypass blocks - Table headers, captions, and data cell associations - Interactive element focus order and visibility - Landmark regions, page structure, and HTML5 sectioning - Iframe titles, button names, and link names - Color-only information cues and meaningful contrast - And 40+ additional WCAG 2.1 and WCAG 2.2 success criteria WHO IS ACCESSCHECK FOR - Small business owners ensuring their site meets ADA website compliance requirements - Marketers and content creators checking accessibility before publishing - E-commerce store owners protecting against ADA lawsuits and demand letters - Web designers validating color contrast and readability for new designs - Bloggers making their content accessible to readers using assistive technology - Agency teams running quick website accessibility audits for clients - QA engineers needing a fast accessibility testing tool inside the browser - Educators, nonprofits, and government teams meeting Section 508 requirements - Anyone who wants to understand website accessibility without reading WCAG documentation 1. Click the AccessCheck icon on any web page 2. View results in the side panel — organized by category (Images, Forms, Navigation, Color, Structure) 3. Read plain-English descriptions of each accessibility violation (no technical WCAG jargon) 4. Follow step-by-step fix instructions with optional code snippets 5. Track your accessibility score over time with built-in scan history 6. Export a professional accessibility report as PDF for stakeholders (Pro) Instant Results: One-click accessibility audit directly in your browser. No waiting, no external servers, no command line. No Server, No Signup, No Tracking: 100% client-side scanning. Your page data never leaves your browser. This website accessibility checker works entirely offline and respects your privacy. Visual Highlights: See exactly where accessibility issues appear on the page with colored overlays — no more guessing which element triggered the violation. Letter Grade: Get an A-to-F accessibility score at a glance to understand your overall WCAG compliance level. Scan History: Track how your website accessibility improves over time with historical score tracking and trend sparklines. PDF Reports: Export professional accessibility audit reports for clients, stakeholders, and legal records (Pro). Batch Scanning: Audit multiple pages or an entire sitemap in one run to check your whole website for accessibility violations (Pro). Developer Mode: Optionally show WCAG success criteria codes alongside plain-English explanations for accessibility specialists and developers. - WCAG 2.0, WCAG 2.1, and WCAG 2.2 (Level A, AA, and AAA) - ADA (Americans with Disabilities Act) Title III compliance indicators - Section 508 of the Rehabilitation Act - EN 301 549 and the European Accessibility Act (EAA 2025) - AODA (Accessibility for Ontarians with Disabilities Act) Color contrast ratio checker for text and backgrounds Alt text checker for images, icons, and decorative graphics Heading structure and hierarchy validator Form label and input association checker ARIA attribute validation and screen reader compatibility test Keyboard navigation and focus order testing Link text quality and descriptiveness analysis Skip navigation and landmark region detection Table structure and header association review Language attribute and document structure audit Interactive element accessibility evaluation Focus indicator visibility checker Button, link, and iframe name validator Duplicate ID and unique landmark detector AccessCheck runs 100% in your browser. No page data is sent to external servers, no browsing activity is tracked, and no account is needed. This accessibility scanner is lightweight and performs the full website accessibility audit in seconds without slowing down your browser. Powered by the open-source axe-core engine trusted by accessibility teams worldwide.

VisBug

Open source web design debug tools built with JavaScript: a FireBug for designers. - Point, click, move, resize & tinker - Edit or style any page, in any state, like it's an artboard - Inspect styles, spacing, distance, accessibility and alignment - Nitpick layouts & content, in the real end environment, at any device size - Leverage adobe/sketch skills - Edit text, replace images - Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities - Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc - Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc) - No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea Give power to designers & content creators, in a place where they currently feel they have little to none, **by bringing design tool interactions and hotkeys to the browser**

CSS Variables Editor

The AI-Powered browser extension for managing colors in CSS Variables ● AI-generated color palettes ● Accessibility testing ● Support for daisyUI and shadcn/ui