An official logo for CSS
Introduction
Since its introduction, CSS has never had an official logo. Only ever since CSS3 and therefore the well-known shields got introduced people had a visual representation in terms of a logo when they were talking about CSS.
For well over a decade now this shield served as a logo for the CSS language, but whilst CSS evolved and more and more features got added the shield with its big 3 in the middle stayed the same.
Whilst investigating new ways for how to properly version CSS to better visualize the evolution of the language the CSS-Next Community Group, in addition to the new CSS levels, started working on a newly more generalized logo that can represents CSS as a whole rather than only version 3.
Together with the community the CSS-Next Community Group started collecting ideas for a new logo and started working on improving some of the drafts that had been made. Javi Aguilar (@itsjavi) submitted their idea and it was full of nice CSS call-outs and fit well with other web language logos like JS, TS and WA. After quite a few iterations this is the final result, with the wonderful CSS color rebeccapurple.
Logo Usage Guidelines
The logo is released under an MIT license so you use it as you want. Nevertheless, the CSS-Next Community Group decided to provide usage guidelines to make sure the logo is used in an accessible and recognizable manner.
Font
The logo uses Dinish Condensed Heavy which is open-source and free to use. The numbers have been slightly adjusted to match the overall logo, therefore we advise you to only use the official logos provided by the CSS Next Community Group inside of this repository to keep the logo recognizable across different sources.
Colors
The logo comes in three variants so it can be used in any scenario.
Main
The main logo uses purple rebeccapurple, #663399 or #639 as the background color and white #FFFFFF as the font color.
Dark
The dark variant of the logo. It uses black #000000 as the background color and white #FFFFFF as the font color. This logo should only be used on light backgrounds to ensure accessibility.
Light
The light variant of the logo. It uses white #FFFFFF as the background color and black #000000 as the font color. This logo should only be used on dark backgrounds to ensure accessibility.
Background
Use neutral, light, or dark colors that maintain at least AA WCAG contrast with the logo. Avoid using the logo on overly busy or complex backgrounds that reduce its legibility or fail to meet color contrast standards.
Clear Space and Sizing
Maintain a clear space around the logo to preserve its integrity. The minimum size of the logo should be 40px in height for digital applications and 1 inch / 2.5 cm in height for print to ensure readability. Exceptions are favicons or icons for example to visualize the file type in an IDE.
Modifications
The colors, fonts, and sizes of the logo and its variations have been carefully chosen by the CSS-Next Community Group to provide the best combination of readability and accessibility, but in some cases you may still need to deviate from the guidelines. Any modification outside of the variations provided is referred to as custom logo. The following lists provide a base guideline of modification Do's and Don'ts:
Do's
- Change colors and background while maintaining a proper contrast ratio and legibility
- Rotate and scale the logo as you need
Don'ts
- Do not distort the logo by stretching or squashing it
- Do not add any effects such as shadows, gradients, or outlines to the logo
- Do not use different font families for enumeration or claim
Usage on the web
When embedding the official CSS logo in websites, always use the official image files provided by the CSS Next community group. Ensure the logo scales properly on different devices and screen sizes.
Use proper CSS properties like margin, padding, and text-align to maintain uniform positioning across layouts.
Contributing
Generating assets
To generate the different assets of the logo, run the assets.mjs script using Deno.
deno run --node-modules-dir=auto --allow-read --allow-write assets.mjsInquiries
For questions and issues regarding the CSS logo, feel free to open an issue.