paypal / glamorous

DEPRECATED: 💄 Maintainable CSS with React
https://glamorous.rocks
MIT License
3.64k stars 208 forks source link

Create and add logo #1

Closed kentcdodds closed 7 years ago

kentcdodds commented 7 years ago

@mxstbr says he's cool with this:

glamorous

It's obviously inspired by styled-components:

styled-components

Here's how I made it:

<div style="
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-family: cursive;
  border: 2px solid;
">
  <div>&lt; 💄 &gt;</div>
  <div>glamorous</div>
</div>

Thanks Max!

kentcdodds commented 7 years ago

Based on feedback from @jdan, I changed it to:

glamorous

I like it because it demonstrates a more than slight difference to styled-components and even calls out the difference in the API being JS rather than CSS

<div style="
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-family: cursive;
  border: 2px solid;
">
  <div>{ 💄 }</div>
  <div>glamorous</div>
</div>
kentcdodds commented 7 years ago

So I just upgraded to macOS Sierra and the lipstick emoji changed. So should we update the logo?

glamorous-new

I think I like the old one better.

Give this comment a :+1: if you like it better and think we should change or a :-1: if you like the original better or think we should keep it the same.

hisk commented 7 years ago

@kentcdodds Following the same styled-components logo feel, here is what I came up with:

screen shot 2017-04-12 at 20 56 11

Smaller preview without border:

screen shot 2017-04-12 at 21 06 05

The version rendered using glamorous and SVG can be found here: https://codesandbox.io/s/DlwAv2yA

kentcdodds commented 7 years ago

I'm going to think on this. Snoozing my email for a week or so... Anyone can feel free to add variations of their own if they like :)

kentcdodds commented 7 years ago

Ok, I've gotta get serious about this. I've made a few slight adjustments. I decided I want to keep the cursive font. I want to put this to a vote. I'll add a comment and screenshot for all the logo options. Please vote with emoji reactions!

I've decided to avoid sticking with proprietary emoji because (even though I love it), it's eh... proprietary, and I'd like to avoid copyright issues...

kentcdodds commented 7 years ago

Custom SVG Emoji from @hisk

screen shot 2017-04-17 at 11 21 33 am
kentcdodds commented 7 years ago

EmojiOne

screen shot 2017-04-17 at 11 22 12 am
kentcdodds commented 7 years ago

Feel free to put up your own if you feel like you've got better. Requirements:

  1. Must be able to easily put it into: http://kcd.im/glamorous-help
  2. Must be SVG
  3. Must have open and free licensing

I have a strong preference for this general style and the cursive, but feel free to be as creative as you want.

paulmolluzzo commented 7 years ago

Vote cast.

I've decided to avoid sticking with proprietary emoji because (even though I love it), it's eh... proprietary, and I'd like to avoid copyright issues...

Totally agree.

satya164 commented 7 years ago

I like the first one you added, but the cursive { and } feel a bit weird

satya164 commented 7 years ago

Probably more because the light grey colour and different stroke width than rest of the elements, and not because it's cursive

kentcdodds commented 7 years ago

Someone suggested we rotate the second emoji to be inline with the surrounding braces:

screen shot 2017-04-17 at 4 28 29 pm
markdalgleish commented 7 years ago

Cross-posting from Twitter.

I really wasn't a fan of the font, so I looked for an alternative—arrived at Playfair Display, changing the colour to better match the emoji.

screen shot 2017-04-19 at 8 55 04 am

(Source)

kwelch commented 7 years ago

I am a very big fan of the custom svg and I really like the font adjustment and color above.

kentcdodds commented 7 years ago

I really like what @markdalgleish has here. Iterating on it a bit:

screen shot 2017-04-18 at 9 35 18 pm

In my mind, this is a real winner. Anyone care to iterate further on this one? Otherwise I think we'll go with this.

kentcdodds commented 7 years ago

Anyone know how to convert the whole thing to SVG (both with and without the box)? That way we don't have to load a whole font.

The reason that I took a stronger interest in the logo is because PayPal's going to be printing stickers :)

satya164 commented 7 years ago

The font feels a bit too thick. I'd suggest to have the same thickness for the font and the braces.

satya164 commented 7 years ago

To convert to SVG, all SVG editors support converting fonts to outline, do it shouldn't be an issue.

kentcdodds commented 7 years ago

What about this?

screen shot 2017-04-18 at 11 50 55 pm
kentcdodds commented 7 years ago

I personally prefer the thicker font. It almost looks like you used the lipstick to draw it :)

jamesmcallister commented 7 years ago

Why not have a font logo inspired by actually writing in lipstick.

Something like this. http://www.dafont.com/forum/attach/orig/3/8/382404.gif

(Sorry on mobile)

kentcdodds commented 7 years ago

Thanks for weighing in @jamesmcallister! I think that might be a little too much based on tips from @sarahbethfederman.

kentcdodds commented 7 years ago

Thanks to @Connorelsea for making this:

hex

I think we're going to go with a combination of that and this from @markdalgleish!

square

Thanks everyone for weighing in!