logo.css

KO | EN

gitlite — search

#hacktoberfest #react #golang #android #deep-learning #linux #java #cli #awesome-list #vue #pytorch #security #ios #open-source

(★ 439)

No description available.

File Explorer

Download Latest Version (.zip)

- css.avif
- css.ico
- css.png
- css.webp
- css.avif
- css.ico
- css.png
- css.webp
- css.avif
- css.ico
- css.png
- css.webp
- css.avif
- css.ico
- css.png
- css.webp
.gitignore
assets.mjs
css.dark.small.svg
css.dark.svg
css.light.small.svg
css.light.svg
css.small.svg
css.square.small.svg
css.square.svg
css.svg
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# An official logo for CSS

- [Introduction](#introduction)
- [Logo Usage Guidelines](#logo-usage-guidelines)
  - [Font](#font)
  - [Colors](#colors)
  - [Background](#background)
  - [Clear Space and Sizing](#clear-space-and-sizing)
  - [Modifications](#modifications)
  - [Usage on the web](#usage-on-the-web)
- [Contributing](#contributing)
  - [Generating assets](#generating-assets)
  - [Inquiries](#inquiries)

## 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](https://github.com/CSS-Next/css-next/discussions/92), 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](https://github.com/CSS-Next/css-next/issues/105) and started working on improving some of the drafts that had been made. Javi Aguilar ([@itsjavi](https://github.com/itsjavi)) submitted [their idea](https://itsjavi.com/projects/new-css-logo/) and it was full of nice CSS call-outs and [fit well with other web language logos](https://github.com/CSS-Next/css-next/issues/105#issuecomment-2288115145) like JS, TS and WA. After quite a few iterations this is the final result, with the wonderful CSS color [`rebeccapurple`](https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/).

## Logo Usage Guidelines

The logo is released under [Creative Commons Zero (CC0) Universal v1.0](https://github.com/CSS-Next/logo.css/blob/main/LICENSE) ([learn more here](https://creativecommons.org/public-domain/cc0/)). 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**](https://github.com/playbeing/dinish/releases/download/v3.908/dinish-ttf.zip) 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](https://deno.com/).

```bash
deno run --node-modules-dir=auto --allow-read --allow-write assets.mjs
```

### Inquiries

For questions and issues regarding the CSS logo, feel free to open an issue.

logo.css

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

logo.css

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README