offgrid

Live layout and typography redlines on any webpage

offgrid is a designer-friendly inspect tool for the live web. It draws purple redlines on any page so you can review spacing, structure, and typography without opening DevTools. Click the toolbar icon (or press Alt+Shift+O) to inject offgrid. A compact dock sits at the bottom of the page: • Toggle redlines on/off (or press H) — the dock stays for clean screenshots • Hover any element for guides, padding/margin, and a short type tooltip • Click to lock a selection; ↑ / ↓ walk parent and child • Alt+click a second element to measure the gap between them • Press C to copy the type line; ? opens the full shortcuts sheet • Turn layers on/off (boxes, spacing, type, guides) from the dock • Minimize to a small tab at the bottom when you need the screen clear Import a token profile in Options to flag values that are off-grid in red, and see token names or “off by” deltas on spacing chips. Stroke colors auto-adapt to light and dark page surfaces. Esc closes popovers, clears measure, unlocks, then exits. Alt+Shift+X also turns inspect off. Built for design QA, spacing reviews, and handoff checks on real product UI.