new CSS logo?

[argyleink]

to aid in the marketing and promotion of the new CSS era's, we're thinking it'd be nice to have a neat new logo!

the logo should:

• work well very small
• be legible
• work without color (but color def can happen)
• work without a number but also work with a number
• be able to exist as svg
• more requirements here?

this issue will hold submissions and votes, ultimately helping us find crowd sourced candidates that we can all agree on

[argyleink]

[argyleink]

here's a mood board of randomness

[argyleink]

made these awhile ago https://nerdy.dev/a-css-logo-thing

[argyleink]

fun avatars (not a very serious submission)

[romainmenke]

I love the idea of having a mascot for CSS. When I was doing more projects in Go I really liked creating variations of the gopher to include in readme's. I bet the community will do fun stuff with it, if it existed.

[nileshprajapati]

I agree with @romainmenke I would like to see a mascot for CSS.

Both chameleon and Peacock look quite cool as mascot ❤️.

With regards to requirements:

• The logo needs to work in various sizes, formats and platforms (i.e. web, vs-code theme icon, etc).

Almost all icon themes with visual studies code use the 3 icon (and 5 for HTML).

Personally, in favour of not having any number attached with the new CSS logo.

[subuhunter]

Got this Logo from My friend Garrett,

This was his explanation for the concept he made

"here’s a quick concept. basically we keep the shield pattern that is already current. we clean up the text so it’s readable. Convert the shield to resemble a web page and add a jewel icon for the version number. "

[subuhunter]

Got a couple of concepts from another friend.

[enbee81]

Our design team at 9elements has created some logo suggestions. Here is our first proposal. While looking quite techie, it emphasizes the fluidity of CSS by incorporating a continuous line that resembles a cascade. It can be shown either horizontally or rotated by 45 degrees.

[enbee81]

For our second proposal, we aimed to creatively combine the numbers 4 and 5. During the CSS Café Meetup in Amsterdam, some concerns were raised that CSS 4 might become the forgotten version of CSS. Therefore, we thought it would be nice to showcase both versions together.

[enbee81]

Creating something that works at a 14px width is challenging, of course. However, we believe it is possible to use both proposed logos effectively, for example, as file type icons inside VS Code.

[romainmenke]

this issue will hold submissions and votes

@argyleink maybe better to have a deadline and first gather submissions and only after the deadline start collecting votes?

[Amit-Sheen]

Adding my suggestion... (The idea is to communicate with the existing JS logo, with a little nod to the CSS quirks we all love so much... 😉)

[rol4nd909]

Adding my suggestion...

(The idea is to communicate with the existing JS logo, with a little nod to the CSS quirks we all love so much... 😉)

Love this idea to keep it in the line as js 😍

[chriskirknielsen]

How did I miss this! :D Made this logo a little while back:

You can edit it as well and add a number to it, change colours, etc.: https://chriskirknielsen.com/css-logo/

[una]

Hi all! Thank you so much for the submissions so far. We just discussed some guidelines to help create creative constraints with the CSS-Next group:

• Recognizable at large and small sizes (i.e. in a 16px x 16px view)
• Is close to a 1:1 ratio (does not need to fit in a square, but should work nicely with other 1:1 logos)
• Limited color palette (ideally 1-2 colors so that it works on both light and dark backgrounds)
• CSS4 logo and CSS5 logo should be visually distinct

[itsjavi]

I also like consistency with the existing unofficial/official JS community logo.

Since I am a huge fan of color theory, I would chose the complementary of JS's yellow but since it's too similar to TypeScript's logo color, that would make their representation a little monotone when put together, so I would choose the pink of the Tetradic wheel. Even the purple of the Triadic would look good.

Another reason I like pink is that it is kind of an analogy to makeup 💅, and CSS is the makeup of the web.

For the font, I would use Open Sans Semi-Condensed (Bold, Tracking -50%) instead of Ubuntu Bold.

I would keep versioning out, because they become obsolete and tbh. does it make even sense to be talking about CSS versions nowadays? (since now every spec/module has its own separate one, e.g. CSS Color Module Level 4).

[enbee81]

I have to admit that I have mixed feelings about the overlapping CSS logo. On the one hand, I appreciate that it aligns nicely with the JS and TS logos. On the other hand, I wonder why CSS has to subordinate itself in terms of branding just because JS already has a logo.

Regarding the reference to the 'CSS IS AWESOME' meme, I initially chuckled, of course. However, at the same time, the meme also represents CSS as something quirky, unpredictable, and full of bugs. I’m not sure if that’s the exact message that needs to be repeated in the logo. It feels like it reinforces the recurring 'CSS is broken' mantra. To exaggerate: CSS is subordinate to JS and somehow broken.

[itsjavi]

I have to admit that I have mixed feelings about the overlapping CSS logo. On the one hand, I appreciate that it aligns nicely with the JS and TS logos. On the other hand, I wonder why CSS has to subordinate itself in terms of branding just because JS already has a logo.

Regarding the reference to the 'CSS IS AWESOME' meme, I initially chuckled, of course. However, at the same time, the meme also represents CSS as something quirky, unpredictable, and full of bugs. I’m not sure if that’s the exact message that needs to be repeated in the logo. It feels like it reinforces the recurring 'CSS is broken' mantra. To exaggerate: CSS is subordinate to JS and somehow broken.

Not subordinate, but CSS is very related to JS since it is part of the web technologies (HTML, JS, CSS, WASM, etc.), so it makes sense to have some consistency/similarity. Look at the official Web Assembly logo, it follows the same design style.

It doesn't have to be exactly like that, but IMHO it's nice to have some resemblance in that direction. Also, with the future introduction of CSS functions it's kind of becoming another programming language itself.

I agree tough with the overflow of the text, maybe it can be kept inside the square, or something else, but I also had mixed feelings when trying other positions.

I created some variants, and it looks much better (and readable) inside the boundaries.

[Muhammad-Mohsen]

A few suggestions I made yesterday. Most of them probably wouldn't work, but maybe they give someone with more skill some ideas.

[el22or]

Hi everyone,

I like the idea about heaving a mascot for CSS! :heart: Both Chameleon and Peacock look fantastic, but I would like to suggest one more awesome animal, a Mantis Shrimp!

Mantis Shrimp has 12 cone cells and is able to see colors that we can not imagine. They can see ultra violet, ultra red and even polarized colors. They are amazing! :)

Please consider it! :shrimp:

[argyleink]

we've deliberated a few times about the logos now and have begun unanimously converging on the submission by @itsjavi:

justifications:

1. fits well next to other logos of it's caliber (js, ts, html, etc)
2. uses a well known CSS named color hotpink, a subtle and excellent hat tip to CSS
3. the border radius, also subtle and an excellent hat tip to CSS
4. works great without color (light and dark alt versions)
5. legible small or large
6. works with or without a number
7. easily can exist as svg or as css

there's so many delightful and rad submissions in here, we really appreciate the community coming together here to work on this. we felt there was clearly a winner for "radness", which is the submission by Nine Elements. but ultimately, we felt the submission in the rounded corner box was minimal and easily integrated with more places. thank you everyone for your submissions!

have issues with this deliberation? let us know your thoughts!

we're reached out to Javi to create a couple more formal versions (with very minor tweaks requested), and will post them here. we'll continue sharing with the community, getting feedback, and as long as nothing major comes up, we may be looking at a next-gen CSS logo being born!