Leyline

Overlay the real layout grid and your design reference on any page.

Leyline finds what's a few pixels off your layout grid, and lays the real grid and your design over any web page, so you can see at a glance whether the build matches the design. FINDS WHAT'S OFF THE GRID • Turn on Alignment and Leyline lists every element whose edge sits just off a column line: a title 3px in, a card 2px over, an image 5px short. Edges far from every line are left alone, so it flags mistakes, not your design decisions. • Hover a row to find the element on the page, click it to scroll there. • Choose how strict it is (½, 1 or 2px). It re-checks as you resize, so every breakpoint gets audited. • Copy report: the list as JSON with a CSS selector for each element, ready for an issue or your AI assistant. THE GRID, FROM THE PAGE ITSELF • Pick container: click the page's container and Leyline reads its real CSS (content box, grid tracks, column gap). The stripes land exactly on the page's columns, at every width. • The picker tells you when you're on a CSS grid ("grid 12") and points to the nearest one when you're not. • Presets for Tailwind, Bootstrap 5 and Material, plus your own: edit columns, gap, margin and max width per breakpoint and save them. • A small indicator shows the current width and breakpoint. YOUR DESIGN ON TOP • Paste a design (Figma → Copy as PNG, then Cmd/Ctrl+V) or drop an image. One per breakpoint: Leyline shows the right one as you resize. • Difference mode turns matching pixels black, so only what's off lights up. • Scale (1x, 2x, 3x, Fit or any value), opacity, scroll with the page or stay fixed, center or left. • Move it with the arrow keys or by holding Alt (⌥ on Mac) and dragging; crop a browser bar off the top. STAYS OUT OF THE WAY • A floating glass panel inside the page: drag it to any corner or collapse it to a pill. • Keyboard shortcuts for the grid, the alignment audit and the reference (Alt+G, Alt+A and Alt+R by default; change them in the browser's shortcut settings). • Settings are saved per site: localhost, staging and production each keep their own. PRIVATE BY DESIGN • No account, no tracking, no network requests. Everything stays in your browser. • It only runs on the tab where you click its icon or press a shortcut — no access to all your sites. Built for frontend developers and designers who want to check a layout against the real grid and the real design. It works on any site, whatever it was built with.