new CSS logo? #105
Comments
|
|
|
here's a mood board of randomness
|
|
made these awhile ago https://nerdy.dev/a-css-logo-thing
|
|
fun avatars (not a very serious submission)
|
|
I love the idea of having a mascot for CSS. |
|
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:
Almost all icon themes with visual studies code use the Personally, in favour of not having any number attached with the new CSS logo. |
|
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. " |
Got a couple of concepts from another friend. |
|
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.
|
|
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.
|
|
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.
|
@argyleink maybe better to have a deadline and first gather submissions and only after the deadline start collecting votes? |
|
Adding my suggestion...
|
Love this idea to keep it in the line as js 😍 |
|
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/ |
|
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:
|
|
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).
|
|
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.
|
|
A few suggestions I made yesterday. |
|
Hi everyone, I like the idea about heaving a mascot for CSS! ❤️ 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! 🦐 |
|
we've deliberated a few times about the logos now and have begun unanimously converging on the submission by @itsjavi:
justifications:
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! |
|
Download svg, png, light/dark versions from this zip: we're still working on the numbered variants, but the basic icon has stabalized and this is our latest iteration 👍🏻 |
|
Thank you @argyleink and awesome work @itsjavi 🎉 Maybe interesting to "open source" figma, illustrator, ... files? |
|
yep, will do! 
|
|
please hold off on using these logos until we've resolved some issues |
|
Was also going to wait until there is an official reveal. |
|
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.
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: 
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. 😄 |
|
I totally understand the reasoning for choosing a logo that plays nicely with the existing JS and other logos. 
I especially like the border radius that is matched in the bottom curve of the "C" and the second "S". |
|
+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. |
|
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. |
|
Is it too late? Just saw the post on X. |
|
Love the <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>
Feel free to reuse any parts of this if relevant! EDIT: formal proposal over at CSS-Next/logo.css#39 |
|
Wasm already has a purplish colour, with |
|
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 |
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 👍🏻 |
|
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! |
|
the winner by popular vote:
The final version (and new place for discussion) in this shiny new repo https://github.com/CSS-Next/logo.css |
|
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. |
|
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: Typescript looks slightly different, the one used as reference was the Community logo it was adapted and adjusted by Microsoft: 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 |
|
|
@itsjavi Hey Javi, it's possible to have your e-mail? I'm asking, because I wrote article about how you guys created new logo and would be great to have some original images if possible. Thanks. |
and others
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:
this issue will hold submissions and votes, ultimately helping us find crowd sourced candidates that we can all agree on
The text was updated successfully, but these errors were encountered: