Consolidating and Unifying Jupyter Logos

[spoorthyv]

Currently, there are tons of Jupyter logos across multiple subprojects that are all slightly different from each other. The plan right now is to consolidate all of these and create one logo for everything.

The first picture shows versions of the Jupyter logo that are actually in use right now

• A/E are the original logo
• B is the logo found on the website's header
• Everything else is found here and there throughout Jupyter

Currently there are 4 variables among the logos.

• Gradient vs No gradient (E is the only one with a gradient)
• Shade of orange (A is a lighter orange than B, C, and D)
• Size of moons (B's moons are larger than the rest)
• Color of moons (B and C have uniformly colored moons while A, D, and E have different colored moons)

The second photo shows all instances of Jupyter Logos actually being used in products right now. The last photo shows all versions of the logo I could find (including versions not being used anywhere).

What are everyone's thoughts and preferences? What parts of each logo do you like?

[ellisonbg]

• Like the moon sizes and shades in A/D/E
• Except at really small sizes, and they prefer a single shade of grey.
• Like the solid orange of A, then the gradient of E. Other orange a bit depressing. I prefer no gradient at small sizes as you can't see it well.
• Moons of B too large
• Moon of C don't have enough size variation.

[fperez]

Great! I haven't gone through yet (can't right now) but I also want to flag that as part of this, once we settle down we should put them all in a known location, where we keep both source (vector) files and renders at a few common resolutions. This will make it easier to get consistent reuse.

[spoorthyv]

Yep. We totally agree.

[ellisonbg]

Yes, consolidation and organization of files will be the next step. Here is an issue for that:

https://github.com/jupyter/design/issues/33

[willingc]

Thanks @spoorthyv! @ellisonbg, will there be graphics for JupyterHub? or will the Jupyter logo be used for all?

[spoorthyv]

I think the plan right now is to update all Jupyter related logos so they are consistent. So jupyterhub would get a slightly different logo too.

[bollwyvl]

Don't forget nbviewer!

We'd still love an icon/favicon.

Personally, I'm :-1: to gradients anywhere! But that's just me!

[mpacer]

So the aim is something like cadency from the old days of heraldry for the different projects (but presumably with fewer line details than traditional ones)?

Or, if not that, what did you mean by slightly different logos?

[mpacer]

@bollwyvl I've definitely seen asset versions from large companies that both include and don't include gradients, but I don't know how they tend to be officially defined for the purposes of trademark applications (especially if you have variations in the change point of the gradient at different sizes, a feature we would probably need to implement given the taper on the planet's outline).

[mpacer]

Is there a canonical list of the current use cases that need to be met?

I'm going to write an overpopulated list that can be winnowed down from along a few dimensions

Color variation:

• [ ] light background, color
• [ ] light background, greyscale
• [ ] light background, black and white
• [ ] dark background, color
• [ ] dark background, greyscale
• [ ] dark background, black and white
• [ ] colored background, color (inspired by docs page with blue header, currently name is acting as logo)
• [ ] colored background, greyscale
• [ ] colored background, black and white
• [ ] medium grey background (with variations…use-caseinspired by the multi-tone css from the jupyter website) ?

Text:

• [ ] with text
• [ ] without text
• [ ] variations in x-height/contrast to match different fonts?

Size variations (electronic display, are the other standard sizes that we should aim for?):

• [ ] a favicon at 32 × 32 px @bollwyvl
• [ ] within body-text sized version (possibly accessible as part of the default fonts we ship or as a tab completion in the notebook itself (since we can add it in the private use area of the Unicode tables)
• [ ] within-app display size (e.g., header/menu bar from labs or nb)
• [ ] version of logo to be acknowledged in talks/slides
• [ ] header and other larger displays (e.g., big logo on the front page of http://jupyter.org/)

Size variations (printed):

• [ ] a caption sized version (possibly able to be encoded as tikz drawn object and so included in jupyter built LaTeX by default as part of an (optional) colophon/"built by jupyter: nbconvert" footnote) (aim for 9pt font?)
• [ ] a body-text sized version (again…possibly encodable with tikz)
• [ ] display version as part of letterform/stationary header for official printed communications
• [ ] display version for teeshirts and other apparel
• [ ] display version for banners/tables/signs
• [ ] display version for posters and presentations

Gradient:

• [ ] no gradient version
• [ ] gradient for small display
• [ ] gradient for large display

We can take the cross product of any of these, however as you can see the number of variations can grow rapidly. I definitely haven't covered all the use-situations yet. What will be key is identifying those versions that we can expect to work across different settings.

One thing that we'll probably need to actually with regards to which we will likely need to consider the full cross product is the size, location and colour of the moons for the different sizes × background.

Also the with and without text variations will probably require different versions of the icon itself (as suggested above).

[spoorthyv]

I think it will be really important to try to simplify and come up with as few versions of the logo as we can that will still cover all possible use cases. The more complicated we make the brand guideline, the harder it will be for people to follow them correctly.

[willingc]

One example of simple, yet covers most use cases, is MailChimp https://mailchimp.com/about/brand-assets/

[mpacer]

Agreed, with the importance of simplification. That's why I wanted to lay out as many of the use cases as possible, because that will guide us toward the features that we can/want to simplify.

MailChimp's logo and Freddie have features that Jupyter's logo can't have currently that allow it to have a reduced number of examples.

1. Mailchimp font has fairly open counters and it has no stroke contrast and it's logo is a type object (not an icon). This means that they basically don't need to worry about different sizes of their logo. In contrast, for the jupyter icon the shape, spacing and colours of the moons will need to vary fairly dramatically to still be visible and distinctive even at some of the small sizes that are envisioned for it (e.g., (32px)² favicon)
2. Jupyter' icon can be expected to be used in a wider variety of settings than mailchimp's. And involves color as one of its core elements. That means that the contrast with the background needs to be dealt with directly, and that that contrast may require different treatments at different font sizes.
3. Their icon "Freddie" has the advantage of having a border surrounding it that allows it to either distinguish itself from the background or (in the case of the b&w logo) blend in regardless of the background. The Jupyter logo (in contrast) would look ridiculous with that kind of border given the (successful) use of extremely sharp tapers and small circles that would be blunted by including an outline.

A somewhat more fleshed out branding package that fits more with the jupyter use case would be GitHub's: https://github.com/logos.

A more substantial branding package that fits less with jupyter's use case but covers the color problem a little bit more thoroughly would be Twitter's: https://brand.twitter.com/en.html

I might recommend against allowing the use of the jupyter logo overlaid on a background image, that will simplify things quite a bit since we won't need the constraints that Twitter is calling for.

To what extent is there consensus around the use of text in the logo versus treating it as a separate kind of object (in particular I'm thinking of the over/underlining the word jupyter with the logo present in some of the cases). If we are going to have a favicon, I think that trying to shove textual detail into that tiny space is going to backfire.

Also, a side note, the diversity of trademarks in actual use can actually help the trademark application's coverage (at least in terms of establishing a history of use). Each of them has a set of common elements, indicating that the general use of those assets like those will be covered by the application. It frees the organisation from forever being stuck with the current mark that is filed with it. For example, consider the history of the coca-cola logo (more accurately the coca-cola wordmark).

I'm sure we have a legal specialist on this but we should be sure to be filing for both a standard trademark and a wordmark. If we want to have a logo that includes both the text and the icon, that will probably have to be included as a variant in the case of the main trademark application, but it won't cover the sole use of the stylised text as that is more properly a wordmark.

[willingc]

A somewhat more fleshed out branding package that fits more with the jupyter use case would be GitHub's: https://github.com/logos.

A more substantial branding package that fits less with jupyter's use case but covers the color problem a little bit more thoroughly would be Twitter's: https://brand.twitter.com/en.html

Great feedback @michaelpacer and thanks for the explanation :D

[fperez]

• I'm Ok with dumping the gradients... They add complexity of implementation/printing and I don't find them particularly compelling. A flatter, simpler design is more to my liking, personally.
• Shade: I'm leaning towards the darker one, but it would be an easier call to make if we also check against a dark bg like we have in #21. I really like that dark bg logo for some uses, and our t-shirts effectively embody that use case. So while I like the dark one better seeing it on white, I'm willing to accept the lighter one might be better on a dark bg. Or that we carry two shades depending on the bg, though that sounds less ideal. It would be nice to settle on what "Jupyter Orange" is once...
• Moon size: B are too big for my taste.
• Moon color variation: I don't have a strong opinion right now, but probably lean minimally towards a single color, just in the name of overall minimalism and simplicity.

Thanks for this!!

[mpacer]

I just want to point out something as regards the single colour idea. We can settle on one colour but it will not always appear to be the same colour even on the same medium.

This images from the Adelson illusion actually don't apply (unless we are going to be staging the logo in projected geometric contexts), but it still illustrates the point that we either will need to give up on uniform appearance or uniform specification even if we choose a single spec for "Jupyter orange" that looks good on both dark and light backgrounds.

EDIT: That said, settling on one spec is going to be a lot easier than settling a perceptually uniform orange…which I don't think anyone has built a system that can account for that across people (if that's even possible). So if we want uniformity, I think going with the one spec to rule them all is the way to go.

(images from wikipedia)

[spoorthyv]

Here is our new version of the logo.

It uses the lighter orange, moon sizes that are in between the two versions, and variable color moons (the moons are material greys now). We also made the size of the word "jupyter" in between the two previous sizes.

@ellisonbg

[frankgerhardt]

I guess the logo should look like planet Jupiter with moon. It doesn't.

The logo is not nice. I understand that this issue is not about getting a new logo, just doing minor improvements. I would not even bother with the minor details.

To me logo looks like a frog from the front with a huge open mouth, two disconnected eyes on top and something else in the lower left. Consider getting a nice logo from a designer.

[Carreau]

I guess the logo should look like planet Jupiter with moon. It doesn't.

The logo is not nice. I understand that this issue is not about getting a new logo, just doing minor improvements. I would not even bother with the minor details.

To me logo looks like a frog from the front with a huge open mouth, two disconnected eyes on top and something else in the lower left.

Thanks you for your input, the frog is called "Chompy" and have teeth on parodic version of our logo.

Consider getting a nice logo from a designer.

The logo vas done by a designer, Adrienne Wantulok, after many iteration and a lot of work. This can be found on previous PRs; the process was open and requested feedback fron the comunity. We have also the constraints to stay away from logo that could be confused with other brands with similar name among other.

Most of the people like the logo and do not see the frog. Unfortunately human perception is not uniform and we are sorry if you fall into the side of the distribution that does not like the logo.

[fperez]

On Fri, Aug 26, 2016 at 12:34 PM, frankgerhardt notifications@github.com wrote:

To me logo looks like a frog from the front with a huge open mouth, two disconnected eyes on top and something else in the lower left. Consider getting a nice logo from a designer.

Our logo was created by a designer with lots of input from many in the project, and we are currently happy with it, just normalizing small variations that had appeared over time in usage.

While you're entitled to your personal taste, comments like the above are simply trashing someone else's work without providing any useful feedback, which was the only point of this issue. Constructive and actionable feedback is always welcome in the future, but further comments of this kind are not and will be henceforth summarily deleted.

Fernando Perez (@fperez_org; http://fperez.org) fperez.net-at-gmail: mailing lists only (I ignore this when swamped!) fernando.perez-at-berkeley: contact me here for any direct mail

[fperez]

Nice job, @spoorthyv!

Question: why the larger moons? Both @ellisonbg and I seemed to find the A/D/E sizes pretty good... I do find the bottom-left in your last draft a bit jarring due to size (not as much as B, but still...)

Otherwise I love it, thanks!

[spoorthyv]

@fperez Thanks. The main problem with the small moons is that they look like specs of dust in super small sizes (see top left of jupyter lab. That's using version B too). Also we wanted to make the difference between moon sizes more apparent.

How do you like this version? We made the 2nd and 3rd moons slightly smaller.

[fperez]

Mmh, I see the issue... I still find them a bit on the large size for my taste, but I'm willing to go along...

One thing to consider, though: it might be best to have a separate version of the logo for rendering at very small sizes... This is just the reality that vector drawings don't always scale perfectly across the entire size range; for example with fonts, typically the smaller font sizes are rendered from modified glyph outlines because if you simply scale down the main one, small features easily disappear, lines become too thin, etc. Same issue with favicons: those typically need to be made by hand, since simply downscaling a large font is unlikely to give something nice at such a tiny size.

Another question: what was the rationale behind the lighter orange choice? To my eye, the B/C orange [RGB(228, 110, 46)] or D [RGB(226, 110, 56)], both very similar to the naked eye, work better (esp. on light backgrounds). Thoughts?

[ellisonbg]

@frankgerhardt

You have discovered the secret identity embedded in our logo! We call this character chompy. Here is a drawing that makes it a bit more explicit:

More seriously, everything Fernando said about the logo is the case: this logo was carefully designed with a designer and in general we like it a lot.

[fperez]

Hey @ellisonbg, I noticed you closed the issue, but I was still discussing some color/size questions with @spoorthyv...

[spoorthyv]

@fperez We realize that in many cases it is beneficial to have separate versions for small sizes but we wanted to reduce the number of versions as much as possible unless it was necessary. In this case, we felt a separate version might look slightly nicer but it won't make a big enough difference to warrant a completely different version. It's probably better to come to a consensus on one moon/color size.

Color wise we chose the light version for purely our personal tastes. All the people here felt like the darker color was a little dingy and dull looking. Also I think both have a good amount of contrast on both light and dark backgrounds. Thoughts?

[ellisonbg]

Opps, didn't mean to close

[fperez]

@spoorthyv: re. size: no problem, if this is a decent compromise, let's go with it. Obviously favicons are a separate story, since they are really so small, but for now we can probably use the ones we have (unless you're doing an update).

re. color: I keep looking at it and I still like the slightly darker B/C orange [RGB(228, 110, 46)], which is not quite as dark as the one in D but I find more pleasant against light backgrounds.

I'd like to ask your team to have one last look at this: if everyone really prefers the lighter one, I won't dig my heels. But you might come to see it my way :)

In any case, once you take that last look, we can close this either way.

Thanks for the great work!!