Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new CSS logo? #105

Closed
argyleink opened this issue Aug 1, 2024 · 86 comments
Closed

new CSS logo? #105

argyleink opened this issue Aug 1, 2024 · 86 comments

Comments

@argyleink
Copy link
Collaborator

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
Copy link
Collaborator Author

css

Frame 13

@argyleink
Copy link
Collaborator Author

here's a mood board of randomness

mood

@argyleink
Copy link
Collaborator Author

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

css-logo-box
css-logo

@argyleink
Copy link
Collaborator Author

fun avatars (not a very serious submission)

download (14)
download (15)
download (16)

@romainmenke
Copy link

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
Copy link

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
Copy link
Collaborator

Got this Logo from My friend Garrett,

Screenshot 2024-07-29 at 3 57 33 PM

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
Copy link
Collaborator

Screenshot 2024-08-02 at 10 13 54 AM

Got a couple of concepts from another friend.

@enbee81
Copy link

enbee81 commented Aug 2, 2024

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.

01-01
01-02
01-03
01-04
01-05

@enbee81
Copy link

enbee81 commented Aug 2, 2024

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.

02-01
02-02
02-03
02-04

@enbee81
Copy link

enbee81 commented Aug 2, 2024

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.

vs-code

@romainmenke
Copy link

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
Copy link

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... 😉)

css logo04

@rol4nd909
Copy link

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... 😉)

css logo04

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

@chriskirknielsen
Copy link

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

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

@una
Copy link
Contributor

una commented Aug 12, 2024

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
Copy link

itsjavi commented Aug 14, 2024

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).

image

@enbee81
Copy link

enbee81 commented Aug 14, 2024

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
Copy link

itsjavi commented Aug 14, 2024

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 custom 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.

image
image

@Muhammad-Mohsen
Copy link

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

@el22or
Copy link

el22or commented Aug 30, 2024

Hi everyone,

I like the idea about heaving a mascot for CSS! ❤️
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! 🦐

@argyleink
Copy link
Collaborator Author

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

image

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!

@argyleink
Copy link
Collaborator Author

css

Download svg, png, light/dark versions from this zip:
css-logo.zip

we're still working on the numbered variants, but the basic icon has stabalized and this is our latest iteration 👍🏻

@romainmenke
Copy link

romainmenke commented Sep 19, 2024

Thank you @argyleink and awesome work @itsjavi 🎉

Maybe interesting to "open source" figma, illustrator, ... files?
Then people can make subtle variants, or add subtitles?

@argyleink
Copy link
Collaborator Author

yep, will do!
we've also got a working Codepen (but uses text-box-trim, so needs Canary or Safari TP)
will share more official files and pens once all the dust has settled

Screenshot 2024-09-19 at 10 13 08 AM

@argyleink
Copy link
Collaborator Author

please hold off on using these logos until we've resolved some issues

@romainmenke
Copy link

Was also going to wait until there is an official reveal.
Don't want to steal your thunder ;)

@chriskirknielsen
Copy link

While I was more of the opinion of having a non-JS-adjacent logo, I still think this is a good candidate, though I have some notes!

The text size seems a little too small to me. Since Web Assembly (that's what WA is, right? 😅) uses a different font, I think it's reasonable to use a more appropriate font here as well. Javi's original design seems closer to what I'd have in mind, instead of "forcing" the use of the Neutra font used for JS.

A CSS logo on a pink square with rounded corners besides top left. A text 'CSS' sits on the bottom-right using a narrower font than the current candidate logo.
(note that I opened up the aperture of the C so it would line up with the terminal of the S)

By using a narrower font (open source DINish Condensed Heavy in this example but any condensed font could be accepted), we can get back to the same character height in the square (compared to JS/TS). This also increases the logo readability at smaller sizes:

Initial CSS logo change at small size Proposed CSS logo change at small size

It keeps the logo looking like it's part of the same family, but ensures it has its own look and feel, instead of being that sibling of JavaScript who's always trying to copy it. 😄

@enbee81
Copy link

enbee81 commented Sep 23, 2024

I totally understand the reasoning for choosing a logo that plays nicely with the existing JS and other logos.
I'd also go with chriskirknielsen's suggestion to make the letters a bit bigger to increase readability. Even though you seem to have already decided on the final logo, I wanted to suggest one last option: a combination of one of the logos we created with the now-chosen partly rounded hot-pink square.

css

I especially like the border radius that is matched in the bottom curve of the "C" and the second "S".

@bramus
Copy link

bramus commented Sep 23, 2024

+1 on making the text size bigger, as it was here. It was the first thing that I noticed too when seeing them side-by-side.

A pity that the overflow pun was dropped – it’s what makes CSS, CSS – but I guess that’s OK for alignment purposes.

@michael-andreuzza
Copy link

I totally understand the reasoning for choosing a logo that plays nicely with the existing JS and other logos. I'd also go with chriskirknielsen's suggestion to make the letters a bit bigger to increase readability. Even though you seem to have already decided on the final logo, I wanted to suggest one last option: a combination of one of the logos we created with the now-chosen partly rounded hot-pink square.

css I especially like the border radius that is matched in the bottom curve of the "C" and the second "S".

The fact that the letters are sliced decreases readability IHMO...

@jbwharris
Copy link

I'm fond of the purple. Not that it necessarily gets paired with icons on the homescreen of your mobile device, but there are so many apps that have white on blue logos. Steering away from that makes sense if you can create differentiation of identity.

@dragontheory
Copy link

dragontheory commented Oct 30, 2024

Is it too late? Just saw the post on X.
01_CSS
02_CSS
03_CSS
04_CSS
05_CSS
06_CSS
07_CSS
08_CSS

@mxdvl
Copy link

mxdvl commented Oct 31, 2024

Love the rebeccapurple logo from @itsjavi & @argyleink and especially the Codepen where the logo is drawn using CSS only. I did, however, have a small concern in that it relies on an external font, so I accurately reproduced the CSS letter shapes in SVG so that the future logo can ben entirely self-contained:

<svg viewBox="0 0 300 300" fill="none" stroke="white" stroke-width="22">
  <path fill="rebeccapurple" stroke="none" d="
    M0,0 H250
    A 50 50 0 0 1 300 50
    V250
    A 50 50 0 0 1 250 300
    H50
    A 50 50 0 0 1 0 250
    Z" 
  />
  <g id="css" transform="translate(70 220)">
    <path class="C" transform="translate(32 0)" d="
      M 21,-24
      C 21,-33 18,-48 0,-48
      C -18,-48 -21,-33 -21,-24
      V 24
      C -21,28 -18,48 0,48
      C 18,48 21,28  21,24
    " />
    <path class="S" transform="translate(104 0)" d="M 21,-24
      C 21,-33 18,-48 0,-48
      C -18,-48 -21,-33 -21,-24
      C -21,-14 -15,-6.25 0,0
      C 15,6.25 21,14 21,24
      C 21,28 18,48 0,48
      C -18,48 -21,28 -21,24"
    />
    <path class="S" transform="translate(176 0)" d="M 21,-24
      C 21,-33 18,-48 0,-48
      C -18,-48 -21,-33 -21,-24
      C -21,-14 -15,-6.25 0,0
      C 15,6.25 21,14 21,24
      C 21,28 18,48 0,48
      C -18,48 -21,28 -21,24"
    />
  </g>
</svg>
screenshot comparison of CSS logo

Feel free to reuse any parts of this if relevant!

EDIT: formal proposal over at CSS-Next/logo.css#39

@plutonium-239
Copy link

Wasm already has a purplish colour, with rebeccapurple the "with friends" becomes a bit boring. I really loved the pink suggestions, wish that was presented as an option.

@itsjavi
Copy link

itsjavi commented Oct 31, 2024

thank you @mxdvl

I think the final SVG will have the font as curves, or we can embed the font in CSS with a reduced charset to make it smaller

@argyleink
Copy link
Collaborator Author

embed the font in CSS with a reduced charset to make it smaller

we were just talking about that this morning! as an alt route to making it easy to use this. we'll definitely have options for folks, with different variants and implementations so you can embed it easy 👍🏻

@SachaG
Copy link

SachaG commented Nov 1, 2024

I like the purple! 🎉 That being said I'm a bit sad that the CSS logo needs to be dragged down to the boring "acronym in a box" level of the other ones… Calling them "logos" at all is already pretty generous!

@argyleink
Copy link
Collaborator Author

the winner by popular vote: rebeccapurple

Screenshot 2024-11-12 at 12 46 23 PM

The final version (and new place for discussion) in this shiny new repo https://github.com/CSS-Next/logo.css

@ryanleichty
Copy link

The rounded corners supposedly nodding to tooltips gets totally lost on me. They feel dated already imo—I would say ditch them and go for continuity since that already seems to be a goal.

@LitoMore
Copy link

LitoMore commented Nov 16, 2024

Hi @argyleink. Are those HTML, JS, and WASM logos decided among the CSS logo?

Can I use those new designs on Simple Icons?

@Que-tin
Copy link
Collaborator

Que-tin commented Nov 16, 2024

Hi @argyleink. Are those HTML, JS, and WASM logos decided among the CSS logo?

Can I use those new designs on Simple Icons?

Most of these logos have been around for quite some time and have just been used as a reference, besides HTML.

WebAssembly:
https://github.com/carlosbaraza/web-assembly-logo

Typescript looks slightly different, the one used as reference was the Community logo it was adapted and adjusted by Microsoft:
https://www.typescriptlang.org/branding/

The JavaScript logo is widely used by the community but as far as our research goes never was crowned as official logo.

The HTML one is just an example on how a new one could look like, this one doesn't exist in the way it is represented.

TL;DR You can use the WebAssembly and Typescipt one from the official sources

@iamdtms
Copy link

iamdtms commented Nov 18, 2024

  • font kerning issue fixed (by @yuanchuan)
  • inner stoke added
  • not a drupal logo: border-radius realigned
688336ef5ede6afb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests