I built Raval to make inspecting websites easier. I like studying design systems and sites from people I look up to in design engineering, and I wanted to understand why things look the way they do. I also wanted that to be fun and intuitive, not a dig through DevTools.

It's a Chrome extension that reads values straight off the page:

• Inspect: hover for sizes; click text or an element for its font, colours, margin, padding and radius

• Measure: click up to five elements and read the gap between them in pixels

• Guides: place guides that snap to element edges, saved per page

• Annotate: size callouts, notes, arrows you can bend, and a freehand pen

• Also: design tokens as JSON, and screenshots of the whole view or a region with your marks on it

It's free, open source (MIT), has no account and collects no data.

You can try it on the site without installing anything: there's a live demo on the homepage.

It's for people who obsess over details.