Colors & Fonts

How stubbornness made me design and build a resource for developers, designers and digital creatives.

Michael Andreuzza
Jun 5 · 6 min read

This is me.

Hello everyone!
I would like to introduce myself, My name is Michael Andreuzza, originally half Spanish, half Italian and born in London, UK, but now I live in Åland Island, Finland.

I work in a Swedish company as a Sales Advisor but in my free time, I am the father of a 7 years old girl, a husband and a tech passionate.

I learn web development in late 2017, with the goal of changing carrier, thru free resources and Treehouse, after that, I wanted to give back to the community and those who need inspiration.

Colors & fonts website is my way to say thank you to all free content creators.

I know how to code, now what?

After a while, in the middle of 2018, I decided that to apply to some companies here on the island, but just a couple answered me telling me I need more projects and learn more JS. Fair enough, I thought.

Then in January 2019, the story repeated, but a few answered back, without hopes. Here in the Åland Island they still look for certificates and academic achievements.

Then I made the decision that, if I don’t get work I am going to create it. I started to look around and see what I can do for the community.
I said:
- Ok, let’s make a Figma / Sketch file of 10 gradients so people can download it as a free resource.

I changed my idea, I dreamed bigger.

After doing the file with the gradients, I thought that not many users were going to have access to the file.

Well, then I thought that I could perfectly develope a website with the gradients, displaying the gradient hex colors.

Just like this:

The gradient’s first stage.

The gradients were ready, what do I do now?

Let’s add some features!

The gradients got a button where you could copy to the clipboard so it would be easier and quicker for the user to get the work done.
This is how it looked:

2nd Stage.

…but they ended up with a button that appeared on hover so you could copy to the clipboard and they ended up looking like this:

It wasn’t enough still.

After that, I added color palettes because I thought that it was a boring site and why not add some more resources. I started to build the page for the palettes and I published the page with 20 different palettes.

They looked like this:

1st Stage.

And you could copy to clipboard when clicking on them….

Nope, I wasn’t done at all.

Let’s have a look at what I did next…

Personally, I really like typography, I put a lot of time on it
I made some cards for font pairings, users could have a look at them after getting the codes for the colors and then go and get them to Google Fonts

1st Stage

Not done with this….

The website got a Material Ui color picker where you can copy to clipboard all the shades of all the 19 hues Material use.

1st Stage Material Ui color picker.

This is how they look right now!

Let’s start from the Gradients and we finish with the color picker.

1.The gradients.

Right now the gradient is bigger, so it’s easier to see how it will look,of course, you can copy the CSS code in one click and you can search for a gradient by writing down a color name. Like, we say, blue.

The code you get:

background: #da22ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(45deg, #D70652, #FF025E);
/* Chrome 10–25, Safari 5.1–6 */
background: linear-gradient(45deg, #D70652, #FF025E);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Dark mode on Colors & fonts

2.The palettes.

The palettes have also the copy to clipboard feature, BUT you have choices. We love choices, don’t we? Either you get the whole palette code, the 5 hex colors or you copy color by color.

The code the users get if they want them all:

B8D8D8–7A9E9F — 4F6367 — EEF5DB — FE5F55

or if the users just copies one:

#B8D8D8

And this is how it looks by now:

Actual shot.

3.Font Pairings

The font pairings page has the choice to import the font pairing, copy the font family independently. Something useful of this page is that if the user hovers over the color tags it will change the background color from white, black, blue or yellow. And yes, you can also search here…

This is the code you get:

@import url(‘https://fonts.googleapis.com/css?family=Lato|Poppins');

font-family: ‘Poppins’, sans-serif;

font-family: ‘Lato’, sans-serif;

…and this is how they look now:

Font pairing dark mode.

4.Material UI color picker.

On the Material picker, you can copy to clipboard the hex color between the 19 Hues and shades from 50 to 900 and then the accent colors from A100, A200, A400 & A700. Here you do not need search because I have used a color picker from CodePen by BennyAlex which you can also fork on Github .

This is how it looks:

Material color picker.

6.The website.

The website has been built with Bulma, which is a free, open-source CSS framework based on Flexbox and used by more than 150,000 developers built by Jeremy Thomas. And of course, javascript.

The website is completely responsive, the only thing you are not going to see on mobile is the aside description where the ads will appear. who likes Ads on mobile when trying to be productive?

You can follow me here:

You can follow Colors & Fonts here:

I

Thank you for reading the post.

Thank you so much for putting your time to read the post and I hope you like colors & Fonts.

I am open to any kind of feedback, so feel free to leave a comment.

Have a good day !!

/mike

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade