Grid Lens

Grid Lens is a design inspection tool for the browser. Pick any element, measure dimensions, extract typography and color tokens, and export production-ready CSS code. Features: • Pixel Grid Overlay — Toggle a configurable grid (4px, 8px, 16px) to check alignment. Baseline grid and 12-column layout modes included. • Element Boxes — Visualize every element's bounding box with depth-based outlines. • Inspect Mode — Hover any element to see its tag, dimensions (width × height), font info, and padding in real-time. • Rulers — Pixel rulers along the top and left edges, with tick marks every 10px and labels every 50px. • Select & Measure — Click elements to annotate their dimensions with redline-style labels. Export an annotated screenshot with all measurements visible. • Pick → Code — Click any element to extract its original CSS rules directly from the page's stylesheets. Includes :hover, :focus, :active states, transitions, @keyframes animations, and CSS variables (var()). Falls back to computed styles when stylesheets are cross-origin. SVG elements export their attributes (fill, stroke, d, etc.). • Design System Snapshot — Extract the full design system from any page: typography scale with ratio detection, font families, color palette (text/background/accent split), CSS custom properties, spacing scale with base unit detection, border radius, box shadows, and layout max-width. Export as structured Markdown. • Day / Night Mode — Auto-switches based on time of day, or toggle manually. • Side Panel — Pin Grid Lens as a persistent panel alongside your browser. • Keyboard Shortcuts — Alt+G (grid), Alt+I (inspect), Alt+R (rulers). No popup needed. Privacy: Grid Lens runs entirely in your browser. No data is collected, no network requests are made. All processing is local.