DesignKit: Ruler, Inspector, Color, Typography & A11y Toolkit

Every design inspection tool you need, in one panel that docks beside the page. DesignKit replaces the handful of single-purpose extensions most designers end up installing. Open it on any page and you get 23 tools across measurement, color, typography, code, assets, accessibility and capture, all working on the live page. MEASURE • Ruler. Drag to measure, snapping to element edges and centres. Take as many measurements as you like and compare them side by side. Every reading in px, in rem, and as a multiple of your baseline grid. • Element Inspector. Box model, spacing, radius, type and color for anything you click. • Alignment & Gap. Pin one element, hover another, read the exact gap and whether they actually line up. • Grid & Baseline. Configurable column grid and baseline rhythm over the page. • Breakpoint Tester. Preview reflow at six device widths. COLOR • Eyedropper. True pixel sampling, so it reads images, gradients and canvas, not just CSS. Copies as HEX, RGB, HSL or OKLCH. • Page Palette. Every color on the page ranked by how often it is used, exportable as CSS custom properties. • Contrast Checker. WCAG AA and AAA, reading the real background behind translucent layers rather than what the CSS claims. • Color Blindness. Simulate four vision deficiencies on the live page. TYPE • Typography Inspector. The full type spec for any text, with the family that is actually rendering called out in the stack. • Font Source Detector. Google Fonts, Adobe, self-hosted or system, plus how each face behaves while it downloads. • Type Scale. Every distinct text style on the page, ranked. A page running fourteen ad-hoc sizes instead of a scale shows that in one screen. CODE • Copy CSS. Clean computed styles with browser defaults stripped out. • Copy as Tailwind. Best-effort utility classes, with approximations flagged. • CSS Variables. Every custom property with resolved values and swatches. ASSETS • Image Inspector. Natural versus displayed size, format and transfer size. • SVG Extractor. Pull the raw markup out of any inline SVG. • Favicon Grabber. Every icon a page declares, ready to save. ACCESSIBILITY • Contrast Audit. Every failing text color on the page at once, highlighted in place. • Alt Text Audit. Missing, decorative and suspicious alt text. • Heading Hierarchy. The page outline with skipped levels flagged. • Tab Order. Every focusable element numbered in real tab order, with the path between them drawn. CAPTURE • Screenshot. Full page, visible area, or just the element you locked. Your measurements and audit highlights can be captured with it, so you can send someone a marked-up screenshot instead of describing what you found. FINDINGS Most tools have a Save button. Everything you collect gathers in one tray and exports as Markdown for a ticket or JSON for tooling. PRIVACY No accounts. No telemetry. No analytics. Your settings, your last twelve picked colors and your saved findings live in Chrome's local storage on your own machine and nowhere else. The only network request DesignKit ever makes is a same-origin HEAD request, and only when you ask an image for its file size. Four permissions, and that is all. activeTab to work on the tab you opened it on, scripting to load the tools on demand, storage to remember your settings, and downloads to save screenshots and exports. KEYBOARD R ruler, E inspector, C eyedropper, K contrast, A alignment, G grid, T typography, S screenshot, F findings. Press ? for the full list. Switchable off for sites that bind their own keys. No frameworks, no third-party code, no remote scripts.