Media
3 items
Description
Hold the backtick key (`) and hover to sample type, colour, spacing, and imagery from any site. Click to pin, tap to copy. Klep is a style sampler for designers. What it shows Typography: the full font stack with the actually-rendered family flagged, weight as a name (e.g. Semibold, 600), size, line height, and letter spacing. Colour: text, background, and border colours as swatches, switchable between HEX, RGB, and HSL. Transparent backgrounds resolve up to the ancestor colour that's actually visible, so you get the colour you can see rather than rgba(0,0,0,0). Spacing: padding, margin, width and height, border radius and width, collapsed to shorthand when uniform. How it works 1. Hold ` — the popup follows your cursor and updates live as you move 2. Click — the popup pins in place and becomes interactive; links and buttons underneath won't fire 3. Click any value to copy it. Esc or a click outside dismisses. Why not just use DevTools DevTools shows you everything. Klep shows you the dozen things a designer actually wants to see, in the conventions designers actually use, and copies them in one click. Permissions and privacy Klep runs a content script on all sites because it has to read computed styles from whatever page you're on, that's the entire feature. It reads styles only and never modifies the page. It makes no network requests, collects no data, and stores only your preferred colour format, locally on your machine.