Extract any Website's Typography, Colors, Fonts & Styles! | SERP Design ...
I'm shit at design.
I know what I like, but I seem to be first, and then I can never explain it properly to any type of designer…
Maybe that's because all of the designers I've ever tried don't even really know what a Type-scale is 🤷.
So… I decided to look for plugins, extensions, software, etc, that would be help just take the easy way out and extract a type-scale from a website that I liked.
After all, we’ve all heard this one
But to my surprise... in the year 2023… it did not seem to exist.
Impossible. But true.
So, I made one!
I’d like to share it with all of you design-challenged developers who would, like me, would rather jump into a pile of Cacti than try and tinker with front-end web development of any kind…
Here’s how it works:
Go to a webpage where you like the design style (typography, type-scale, etc.)
Hit the extension
And get some text files with all the specs!
Here is it in action:
https://youtu.be/plocOQgqK8A?si=VRZMAP5s4Z19J_qO
---
It’s been submitted to the good ‘ol Chrome app store and will probably be approved in a day or two…
But if you’re impatient and want the bootleg version, you can grab it here and install it via chrome “developer” extensions:
👉 https://serp.ly/@serp/stuff/serp-design-grabber
And if you getting on Product hunt leaderboards for all the upvotes you, do here’s a layup for ya!
👉 https://serp.ly/@serp/ph/serp-design-grabber-ext
Otherwise it’ll be on the Chrome Store soon!
Cheers, and happy programing (with one less front-end worry)
🦩
👨👩👧👦 Join the Community: https://serp.ly/@serp/discord