All tools

Designer Toolbar

Grid overlays, spacing, contrast, a color picker and a ruler. One free extension.

Five small tools in one toolbar. Lay a column grid over any page, hover two elements to measure the gap between them, check the contrast of a color pair, pick the color under the cursor, and drag out a pixel ruler and guides.

FreeLayoutChrome

Download for Chrome

Pairs well with

EverythingEvery paid tool and pack so far, in one purchase.$39 instead of $52

Buy for $39

Chrome

This is a free Chrome extension. Its Chrome Web Store listing is in review, so for now it installs from the download above.

1. Unzip the download and keep the folder somewhere it can stay. Chrome runs the extension from it.
2. Open chrome://extensions and turn on Developer mode in the top right corner.
3. Click Load unpacked and choose the folder.
4. Pin it from the puzzle piece menu in the toolbar, then click its icon on any page.

It works the same way in Edge, Brave and Arc. Once the store listing is live I'll link it here, and the store version keeps itself up to date.

Privacy

Work stays on your device, and the tool has no analytics. See the privacy policy for what each permission is for.