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:

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:

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