# Design Toolkit

> Free browser extension for designers, developers and QA to inspect, measure and copy any design on the web. Works in Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi, Arc and Firefox. Runs locally with no account and no data collection.

## What it does

- Element inspector: hover any element for size, margin, padding, typography and colors; press Space to pin.
- Box model overlay drawn on the page.
- Distance measurement between elements, with page rulers.
- Side panel with the DOM path, box model, and code export as computed CSS, source rules, Tailwind classes or React style objects.
- Colors in HEX, RGB or HSL, with WCAG contrast ratio.
- Typography details and asset downloads (images, SVGs, video) with real file names.
- Animation inspector for CSS animations, transitions and Web Animations, with "Copy for AI": a brief with timing, easing, keyframes, hover values and CSS.
- Responsive mode: several device viewports side by side, rotate, zoom, synced scrolling.
- Page audit: meta tags, social previews, page weight, technology detection, palette and fonts.
- Works on right-to-left pages and sites with a strict Content-Security-Policy.

## Links

- Website: https://www.designtoolkit.online/
- Contact: https://www.designtoolkit.online/contact.html
- X (Twitter): https://x.com/Ahmed206UX
- Instagram: https://www.instagram.com/a_k_g_206/
- Privacy policy: https://www.designtoolkit.online/privacy.html