Hi, I am new here, and I have colors & fonts for you as CSS, Figma, Sketch and Framer. Fo' free and fo' real..!

Subscribe to my newsletter and never miss my upcoming articles

Hello everyone, let me introduce myself first.

My name is Michael Andreuzza, and I working on Colors & Fonts & Wicked Templates.

Right now I am redesigning Wicked Templates to something cooler. I am also sending a newsletter for devs & UI/UX designers on Tuesdays, TUF.

About the promised colours.

When I was learning how to make websites I started by working on Colors & Fonts. I wanted to give back to the community because that's how I learned, with free resources around the web.

This is Colors & Fonts.

image.png

And it has some tools that you can use for colour and typography. The site is used by a lot of users, from 400 to 700 users daily.

Also, I am no one, but I curated the colours myself.

Color Tools

This tools will allow you to copy-paste the CSS straight into your project.

  • Colour palettes.
  • Gradient Patterns by Jordan.
  • Gradients.
  • Contrast.
  • Material UI Colors.
  • Tailwind CSS colours.
  • Colour Converter.
  • Web Safe Colors.

For example, the colours come as a Hex colour, just like this.

#F9DC5C

Then for the Gradient, you will get the CSS Code with fallback, just like this.

background: #FF149D;
/* fallback for old browsers */
background: -webkit-linear-gradient(223.88deg, #FF149D 8.89%, #620F32 94.31%);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(223.88deg, #FF149D 8.89%, #620F32 94.31%);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

If you do not want complete snippet fallbacks you get this code by clicking on it.

linear-gradient(223.88deg, #FF149D 8.89%, #620F32 94.31%)

Typography Tools

On the typography tools, you can download, copy-paste, edit and preview variable fonts from Google fonts and PangramPangram, font pairings with Google Fonts and also copy glyphs.

  • Variable Fonts
  • Font Pairings.
  • Glyphs.

On the Variable fonts, you can copy-paste a whole @font-face declaration ( I hope no one has the handle @font-face) into your project too, and it looks like this.

@font-face {
    font-family: 'MyFontName';
    src: url('../fonts/myfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/myfont.woff2') format('woff2'), /* Modern Browsers */
        url('../fonts/myfont.woff') format('woff'), /* Modern Browsers */
        url('../fonts/myfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/myfont.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

cool bananas, right?

On the font pairings, you can also copy-paste the import, and it looks like this.

@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Paytone+One&display=swap')

I will be redesigning the site very soon.

Yeah, the site is built with Bulma and Vue and, to be honest, I want to make it with Tailwind.

At the same time, I will learn Next.js or Alpine.js while redesigning it, I am pretty impatient for this happen, is going to be fun.

Any question? Aks me, and I will answer.

You can comment here or reach me out on Twitter.

have a great day.

/Mike

No Comments Yet