For a long time, finding out how a website was built cost me money. Whenever I needed the exact fonts, colours, spacing or CSS of a site, I paid to get that work done, and over time it added up to thousands of dollars.
Then I realised I could build the tool myself.
Building it
It wasn't quick. It took sleepless nights and daily building, then testing, then more building, until I had something close to what I wanted. I used a few other tools along the way, but most of the work was the slow part: trying it on real websites, finding where it was wrong, and fixing it.
The result is Code Specimen, a browser extension for Chrome and Firefox. You hover over any element on a page, it outlines itself with its tag and size, and a click locks it. A side panel beside the page then shows its font, colours, spacing and CSS, each with its own copy button. Other tabs show the page's whole type scale, its colour palette and every image on the page.
The hard parts
Reading the real fonts. A site's CSS can list several fonts, but what you want to know is the one you're actually looking at.
Getting contrast right. Every colour in the Colours tab comes with its contrast ratio, so you can tell which pairs are safe to borrow. If those numbers are wrong, they're worse than useless.
Keeping it to four permissions. I didn't want an extension that asks for access to every site you visit. Code Specimen asks for four permissions at most: the side panel, the active tab, scripting to outline, and storage for your settings. It runs only when you open it, and opening it never reloads the page.
Translating it into 20 languages. I wanted it to work for people wherever they are, not only in English.
Why it's free
I know what it's like to pay for this kind of work, and I know plenty of people need it and can't afford it. So copying a colour or a font size isn't locked behind a plan. There's no account, no analytics, and no ads.
What's next
SEO Specimen, a sibling extension, is next.
Try it
- Chrome (also works in Edge, Brave, Opera and Vivaldi): https://chromewebstore.google.com/detail/code-specimen/kgibepkpkomfceicgpgfglkidnaniifj
- Firefox: https://addons.mozilla.org/firefox/addon/code-specimen/
- Website: https://codespecimen.com/
If you try it, I'd love to hear where it gets something wrong. That's the feedback that helps most.
Top comments (0)