Measure.
Anything.
Pixel Ruler
Design QA in the browser. Measure margins, paddings, gaps between any elements. Copy CSS variables with one click.
Measure any element. Copy CSS variables instantly.
Copies CSS Variables
World First Browser OS
Launch from Quick Launch
150+ Tools
Pixels And
Variables
The only ruler that shows you the actual CSS.
Most measurement tools give you pixels. That’s useful, but it’s not what you actually need. When you’re building with a design system like Automatic CSS, you need the variable—not the computed value.
This ruler shows both. Click an element, hover near another, and you see:
- 24px – The computed pixel value
- var(–space-s) – The CSS variable behind it
Part of the
Design Toolkit
Tools that work together in the Design toolkit.
Love a website's colors? Extract the full palette. HEX, RGB, HSL. Copy any format instantly.
ImageOptim is the gold standard for image compression on macOS. MozJPEG for JPEG. OxiPNG for PNG. ImageQuant for lossy PNG. The best codecs, per.
One click opens a responsive testing panel. Pick a device. See the exact viewport. Test instantly - and find elements breaking your layout.
Desktop: H1 at 48px. Body at 16px. Inter throughout. Looks perfect.Mobile: H1 is still 48px. Body text overflows. Font weights don't shift. Nobo.
Native browser eyedropper. Works on any website - and your desktop. Click rapidly without reloading. Saves up to 20 colors. HEX, RGB, HSL - all.
Found the perfect headline font? Hover and copy. Font name, weight, and styles in one tooltip.