This Chrome extension adds a customizable overlay system to any webpage, including rulers, guides, columns, and grids to help you create pixel-perfect layouts with confidence. Whether you’re refining spacing, aligning components, or matching a design mockup, the overlay tools give you the visual structure you need without leaving the browser.

AppSignal — Get full visibility into app health, errors, and performance

Get full visibility into app health, errors, and performance

Two of the main principles of design are rhythm and alignment. This is true for any design medium. When I started doing web design (poorly, by the way) back in the early 00s, there were very few design systems for the web. I wanted to build a tool for building grid systems, but my coding skills were subpar. I came up with some basic CSS concepts. Fast forward a few years, and I came across Readymag's builder, which has a cool feature that allows you to create a grid overlay with columns. I wanted to mimic that with JavaScript. I had some mild success but the project got put aside due to other priorities. Fast forward several years again, and after countless iterations, I finally turned it into a Chrome extension called LayoutLab. Maybe I released it a little late in the game, but I genuinely enjoyed building it. And if it helps even a few designers create cleaner, more thoughtful layouts, then it was worth the effort.

AppSignal — Get full visibility into app health, errors, and performance

Get full visibility into app health, errors, and performance

LayoutLab

A tool for measuring previewing grid systems on any website.

A tool for measuring previewing grid systems on any website.