Squints

Squints is a set of design tools for the live web. It is a free Chrome extension for design engineers that puts design tools on top of any live web page, bringing Figma's measuring tools and more into the browser. With Squints you can measure spacing, drag out guides, overlay a column grid, pick colours in any format, see the font that actually rendered, and slow down or scrub any animation. It is free, requires no account, and does no tracking. Squints is added to Chrome from the Chrome Web Store. Design is moving into code. The decisions that used to be settled in a design file — spacing, type, colour and motion — now get made in the browser, where the tools for looking closely never followed. Squints brings them. That is the gap the product addresses: when layout, typography, colour and motion are decided on a live page rather than in a design file, the people making those decisions need a way to look closely at what the browser has actually rendered. Reading an exact box, checking the gap to the next element, overlaying a reference grid, confirming which font really rendered, or slowing an animation down are all normal parts of settling a design in a design file. Squints puts those same kinds of checks onto the live web page, so the page itself becomes the place where the decision can be verified. It is a free Chrome extension for design engineers, installed directly from the Chrome Web Store. Inspection is the foundation. Squints lets you inspect anything on the page: you can read its box, and the gap to the next one. That turns spacing into something that can be read rather than estimated, and it gives an exact reference for the distance between one element and the next, which is usually the number that matters when a layout has to be matched or corrected. Rulers and guides build on that reading. You drag them out like in Figma, and they snap, so reference lines land on real positions rather than approximate ones. A column grid can be overlaid over the real page, and Squints remembers that grid per site, which means the same grid is available again the next time you look at that site instead of having to be set up from scratch. Squints also lets you draw on the page: arrows, boxes and notes, placed where it matters. Annotation therefore stays attached to the exact element or area it refers to, rather than being described somewhere else. Colour picking is similarly direct: you can pick any colour, in every format, plus the token behind it. Having every format covers the practical need to read a colour the way a given context requires, while the token behind it connects the picked value to the design system it belongs to. Font identification answers a question that comes up constantly on live pages: Squints identifies any font — the one that really rendered, with metrics. That is the font the browser actually used, not the one that was asked for, together with its metrics. Motion is handled too. You can slow motion down, playing every animation at a tenth of its speed, which makes movement that passes too quickly at full speed possible to watch and judge. Finally, you can capture the result: a screenshot or a recording, marks or not. Capturing with the marks keeps the measurement, drawing or annotation visible in the record, while capturing without them gives a clean version of the same view. Taken together, Squints works on top of the page you are already viewing rather than in a separate file or a detached inspection surface. The tools are applied to the live web page itself: the box you read, the guides you drag, the grid you overlay, the marks you draw, the colour you pick, the font you identify, the animation you slow and the capture you take all relate to what is actually rendered in the browser. Squints is delivered as a free Chrome extension, so there is no account to create and no tracking to consider before using it. Because the column grid is remembered per site, the extension also carries some continuity between sessions on the same site, which supports repeat checks rather than one-off looks. The benefit is that design decisions made in the browser can be made with precision. Spacing can be measured rather than guessed, and the gap to the next element can be read. Alignment can be checked against snapping rulers and guides dragged out as they would be in a design file. A column structure can be verified against the real page, with the grid ready again next time on that site. Colours can be read in whichever format is needed and traced to the token behind them. Typography issues can be traced to the font that actually rendered, with metrics, instead of the font that was requested. Motion can be slowed to a tenth of its speed so it can be evaluated rather than missed. And any of these can end in a screenshot or a recording, with or without marks. Because the extension is free, requires no account and does no tracking, none of this depends on a purchase or a sign-up. Use cases follow the decisions the tools support. When a layout has been built in code and its spacing needs checking, Squints lets you read the box of any element and the gap to the next one. When alignment has to be judged against a reference, guides can be dragged out and snapped into place, like in Figma. When a page has to hold to a column structure, a column grid can be overlaid over the real page, and Squints remembers it for that site. When feedback is needed on a live page, arrows, boxes and notes can be drawn where it matters. When a colour has to be read or documented, it can be picked in every format along with the token behind it. When type does not look right, the font that really rendered can be identified with metrics. When an animation needs reviewing, it can be slowed to a tenth of its speed. And when any of that needs to be shared, a screenshot or a recording can be captured, with or without marks. Squints is for design engineers, and it is a Chrome extension, distributed through the Chrome Web Store where it can be added to Chrome with a single action. It runs on live web pages, which is where its tools apply. It is free, with no account and no tracking. No paid tiers, subscriptions or further pricing details are stated in the product's own description. Its Product Hunt topics place it alongside design tools, productivity and developer tools, which reflects the work it supports: looking closely at a page, checking the details of a build, and doing so without leaving the browser. The summary is simple: Squints brings design tools to the live web. Inspecting boxes and gaps, dragging out snapping rulers and guides, overlaying a remembered column grid, drawing arrows, boxes and notes on the page, picking colours in every format with the token behind them, identifying the font that really rendered with metrics, slowing every animation to a tenth of its speed, and capturing a screenshot or recording with or without marks — all of it on any live web page, free, with no account and no tracking, from a Chrome extension built for design engineers.