Like a website’s design? Well, now you can grab it — with the SERP Design & Typography Grabber
Table of contents
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!
Somethin’ like this:
Tag: H1
style: normal
weight: 700
size: 42px
lineHeight: 52px
fontFamily: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif
color: rgb(200, 200, 159)
backgroundColor: rgba(0, 0, 0, 0)
borderColor: rgb(200, 200, 159)
borderWidth: 0px
borderRadius: 0px
textAlign: start
textTransform: none
textDecoration: none
letterSpacing: -0.462px
wordSpacing: 0px
fontVariant: normal
padding: 0px
marginTop: 49.98px
marginRight: 0px
marginBottom: 32px
marginLeft: 0px
width: 680px
height: 104px
Tag: H2
style: normal
weight: 700
size: 16px
lineHeight: 20px
fontFamily: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif
color: rgb(200, 200, 159)
backgroundColor: rgba(0, 0, 0, 0)
borderColor: rgb(200, 200, 159)
borderWidth: 0px
borderRadius: 0px
textAlign: start
textTransform: none
textDecoration: none
letterSpacing: normal
wordSpacing: 0px
fontVariant: normal
padding: 0px
marginTop: 0px
marginRight: 0px
marginBottom: 0px
marginLeft: 0px
width: 480px
height: 20px
Tag: H3
style: normal
weight: 400
size: 16px
lineHeight: 20px
fontFamily: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif
color: rgb(178, 178, 120)
backgroundColor: rgba(0, 0, 0, 0)
borderColor: rgb(178, 178, 120)
borderWidth: 0px
borderRadius: 0px
textAlign: start
textTransform: none
textDecoration: none
letterSpacing: normal
wordSpacing: 0px
fontVariant: normal
padding: 0px
marginTop: 0px
marginRight: 0px
marginBottom: 0px
marginLeft: 0px
width: 480px
height: 40px
Tag: RankedColors
0: rgba(211, 211, 178, 0.8),1722
1: rgba(0, 0, 0, 0),1449
2: rgb(178, 178, 120),402
3: rgb(200, 200, 159),384
4: rgb(241, 70, 214),120
5: rgb(74, 46, 255),104
6: rgb(255, 255, 255),62
7: rgb(150, 93, 215),52
8: rgb(233, 67, 63),52
9: rgb(211, 211, 178),22
10: rgb(23, 47, 71),14
11: rgba(211, 211, 178, 0.8) rgba(211, 211, 178, 0.8) rgb(29, 58, 89),14
12: rgb(0, 0, 0),12
13: rgb(27, 54, 83),8
14: rgba(211, 211, 178, 0.8) rgb(26, 52, 79) rgba(211, 211, 178, 0.8) rgba(211, 211, 178, 0.8),8
15: rgb(85, 255, 85),8
16: rgb(22, 44, 67),5
17: rgb(25, 50, 76),5
18: rgba(162, 162, 93, 0.05),4
19: rgb(21, 110, 18),4
20: rgb(34, 177, 30),4
21: rgb(149, 149, 85),3
22: rgba(211, 211, 178, 0.8) rgba(211, 211, 178, 0.8) rgb(27, 54, 83),2
23: rgb(25, 50, 77),2
24: rgb(26, 52, 79),2
25: rgb(212, 153, 121),2
26: rgb(97, 228, 93),2
27: rgba(0, 0, 0, 0.08),1
28: rgb(27, 54, 83) rgba(211, 211, 178, 0.8),1
And if you want MORE, just hit it on a couple blog posts from the same website to make sure you get a good variety of stuffs!
Here is it in action:
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