Kind of rebeccapurple

Anyone who loves jazz music is likely familiar with the iconic album Kind of Blue by Miles Davis. This album is considered one of the most influential jazz records of all time, and its uniqueness lies in its exceptional lineup, universal accessibility, and timeless quality.

The album Kind of Blue is like an expansive space where every tone, every instrument, and every note is given room to breathe – a fusion of individuality and collaboration. Each musician brings their unique voice to the work, but together they create something far greater than the sum of its parts.

Similarly, communities come together – each contributing their small, unique piece, which collectively forms something extraordinary. A great example is the initiative of the community, which recently came together to create a new CSS logo.

The community designs a new CSS logo

In early August, Adam Argyle started a GitHub thread inviting the community to share ideas and designs for what the new CSS logo could look like.

The first proposal that resonated with the community came from Amit Sheen, who incorporated the style of the current JavaScript logo. For the CSS logo, he changed the color and adjusted the text’s positioning slightly. The text spills out of an imaginary container, a humorous nod well-known in the web development community, referencing the challenges of understanding certain CSS properties.

The concept for the new CSS logo serves as a metaphor for the well-known meme “CSS is Awesome”.

Javi Aguilar responded to this positively received design by suggesting a few adjustments. His suggestion was to change the shade of blue to better match the JavaScript logo. However, the color would have been too similar to the TypeScript logo, and their combination might have appeared somewhat monotonous.

As a solution, he selected pink from the tetradic color wheel, which he felt would look appealing. Another reason for choosing pink, he explained, was its analogy to makeup, as CSS can be humorously perceived as the “makeup 💅” of the web (even if with a bit of hyperbole).

Screenshot from Javi’s Aguilar article New CSS Logo for a new CSS era published on his web.

For the font, he suggested using Open Sans (Semi-Condensed, bold, with -50% letter spacing) instead of Ubuntu Bold. Although this choice evolved over time, it was the initial version largely approved by those overseeing the project, including Adam Argyle, Una Kravets, and others.

Those participating in the discussion later questioned the analogy to the well-known meme “CSS is Awesome,” which inspired the text overflowing beyond the background color area. This represents something unpredictable and chaotic, which, according to most participants, is not a message a logo should convey (as it ties into the recurring mantra “CSS is broken”).

Finalizing the Design

Javi Aguilar, based on feedback from everyone involved, created a logo resembling a tooltip with rounded corners, referencing modern CSS properties.

Adam Argyle summarized all the points agreed upon by the CSS-Next Community Group and outlined the key reasons why the pink logo was chosen:

• It fits well among other logos of the same caliber (JS, TS, HTML, etc.).
• It uses the well-known CSS-named color hotpink, a subtle and excellent nod to CSS.
• The rounded corners subtly and effectively reference newer CSS features.
• It works great even without color (alternative light and dark versions).
• It remains legible at both small and large sizes (important for code editors).
• It functions with or without a number.
• It can easily exist as an SVG or even as pure CSS.

The version of the logo before the final minor adjustments with the modified font.

Web implementation

Adam Argyle developed this version alongside other logos for web technologies and shared a preview on CodePen. You can notice how the font differs, particularly in its type (it’s not Condensed) and height.

Font

Christopher Kirk-Nielsen, known for creating numerous web-themed t-shirt designs (including the popular State of CSS), joined the discussion and pointed out that the text size was unnecessarily small and could be harder to read compared to the original design.

He suggested that it wasn’t essential to use the Neutra font employed in the JavaScript logo, as WebAssembly uses a different font, making strict consistency unnecessary. Instead, he focused on these aspects and shared his revised design in the conversation thread. His proposal was well-received, earning positive feedback from the community.

The design by Christopher Kirk-Nielsen featuring the font DINish Condensed Heavy. Notice that the author also fine-tuned the pink color to match his vision, presenting a complete concept.

The main reason for the font adjustment was the argument that the well-known open-source font DINish (closely resembling the even more famous DIN 1451) could match the height of the fonts used in the JavaScript, TypeScript, or WebAssembly logos. Another argument was its improved legibility at small sizes (such as 16x16 pixels), making it suitable as a programming language icon in code editors.

Color

The font change sparked many positive reactions from everyone involved, and the only thing left was to vote on the winning design. Adam Argyle added a comment and asked the community to cast their votes. Surprisingly, neither of the two proposals featured the original pink background color or its adjustments.

The final proposals for the new CSS logo before the voting.

The original CSS and W3C logos have always featured shades of blue. The first candidate was a logo with a blue background, inspired by the fundamental web color for links. This design offers strong contrast, is easy to remember, and incorporates a color that is an inseparable part of the web and web standards.

The blue colors were chosen as follows (from left): the shade from the W3C logo, the standard color for web links, the color from the CSS3 shield logo, and lastly, the CSS shield with enhanced contrast.

The downside of this blue logo is that it lacks originality and innovation. For this reason, Adam Argyle presented a second option, with a background color of #663399, also known as rebeccapurple. Like the first design, this color wasn’t chosen randomly but carries a meaningful backstory and an emotional resonance.

rebeccapurple

The year 2014 was devastating for Kate and Eric Meyer, one of the most influential advocates for web standards, particularly CSS. That year, they lost their 6-year-old daughter, Rebecca Alison Meyer, to cancer.

Jeffrey Zeldman and a few others from the web development community proposed a way to support the family beyond financial help. They encouraged community members who appreciated Eric’s work to share words or images on Twitter in support. To unify these contributions, they used a tag system. The hashtag that connected all the tweets was #669933Becca, the hexadecimal value of the purple color Rebecca loved.

The CSS Working Group also suggested naming the hexadecimal value #663399 as beccapurple. However, Eric Meyer requested it be named rebeccapurple. His reason was a conversation with Rebecca a few weeks before her passing, in which she told her parents that when she turned six, she wanted everyone to call her Rebecca.

Final Logo

This sad but deeply moving story inspired the creators in designing the new logo for CSS. The story of rebeccapurple proves that technology is not detached from humanity — it is the result of teamwork, ideas, and the stories of the people who create it.

The community made a clear decision and chose the logo with the rebeccapurple color (at the time of publication, it received 517 votes compared to 55 votes for the logo with a blue background).

A separate GitHub repository was then created for the new logo, and the community contributed further by refining the work—for example, creating a standalone SVG logo that doesn’t depend on an external font.

Rebeccapurple lives

The story of Rebecca Meyer and the creation of the color rebeccapurple in CSS is like the “Kind of Blue” of the web design world. It’s a reminder that even loss can inspire something beautiful and lasting. Just as Miles Davis created a space for improvisation, freedom, and connection, the developer community created something that goes beyond technology — a color that is a tribute, a story, and a connecting people.

CSS is an integral part of web design, but its story is also about the people behind it. From Eric Meyer to thousands of other contributors, each brought a piece of themselves—whether through innovation or gestures like the creation of rebeccapurple. The next time you write code and use color: rebeccapurple;, take a moment to remember the story behind this color.