# Like a website’s design? Well, now you can grab it — with the SERP Design & Typography Grabber

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1710277539783/58c57860-4ed2-4e6b-8352-b57b55fc15c2.jpeg)

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:

1.  Go to a webpage where you like the design style (typography, type-scale, etc.)
2.  Hit the extension
3.  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:

<iframe src="https://www.youtube.com/embed/plocOQgqK8A?feature=oembed" width="700" height="393" frameborder="0" scrolling="no"></iframe>

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](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](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](https://serp.ly/@serp/discord)