Day 2 of using Gatsby

August 14, 2022

Well now we need to come up with a logo and style guide, originally I had planned to send out some requests on Fiverr but a friend suggested some logo generators. I googled and saw Adobe has a free one. Originally I had in mind a laptop or tech device combined with a speakerphone of some sorts, but after a bit of browsing on the AI generated logo’s I liked the simplicity of the words TechAffirmed.

Now the next part was the colour selection, I’m a big lover of black and white so knew they had to be incorporated as part of the palette. One of the Adobe AI-generated colours had a bright green that I liked, I tweaked it to make it a bit more muted and to my liking and then popped the green (#51C2BB), black and white into a 5 colour palette generator. Literally the first suggestion was a red-y orange (#ED6A5A) and a blue-y grey (#56667A) and I loved them! I tried a few different other colours but ultimately decided on the first generation, what are the chances - or maybe I’m just easily pleased.

Back over to Adobe Logo Generator and I entered the colours and used the colour shuffle to see how I wanted the colours in the AI generated logo and well.. see below (if I can figure out how to display some images on a page :) )

Banner Style

Banner

Square

Square

Square Stacked

Square Stacked

Initials (For small Icons, Eg Favicon)

Square Initals

Last but not least, animated

Logo Animated

Well displaying images is easy, but resizing a one-off image isn't great from what I can tell. It seems people suggest using the HTML img tag which is fine but slightly disappointing having to mix markdown and HTML tags. Also adding to HTML tags is that I couldn't get the double space + new line to create a line break between the animated logo above and this paragraph, so handy old <br> to the rescue!

Profile picture

Written by Corey who lives in a pineapple under the sea. You should follow them on Twitter