Kind of Rebeccapurple. Příběh vzniku nového loga CSS

Ten kdo má rád jazzovou hudbu, pravděpodobně bude znát ikonické album Kind of Blue od Milese Davise. Je považováno za jedno z nejvlivnějších jazzových alb všech dob a jeho unikátnost je dána výjimečným obsazením, univerzální přístupností a nadčasovou kvalitou.

Toto album je unikátní v tom, že každý tón, každý nástroj a každá nota dostává prostor dýchat – je to splynutí individuality a spolupráce. Každý hudebník vnáší do díla svůj jedinečný hlas, ale dohromady tvoří něco mnohem většího než jen součet jednotlivých částí.

Podobně se spojují i komunity. Každý přispívá svou malou, jedinečnou částí, které dohromady vytváří něco výjimečného. Dobrým příkladem je počin komunity kolem webového designu a vývoje, která nedávno díky své aktivitě tvořila novou podobu loga CSS.

Komunita navrhuje nové logo CSS

Na začátku srpna vytvořil Adam Argyle GitHub thread, ve kterém vyzval komunitu ke sdílení nápadů a návrhů na nové CSS logo.

První návrh, který oslovil komunitu, pocházel od Amita Sheena, který se inspiroval stylem současného loga JavaScriptu. Pro CSS logo změnil barvu a mírně upravil umístění textu. Text přetékající z imaginárního kontejneru byl humorným odkazem na dobře známý problém v oblasti webového vývoje, související s pochopením některých vlastností CSS.

Účastníci diskuse později zpochybnili analogii k populárnímu memu „CSS is Awesome“, který inspiroval přetékající text přes okraje barevného pozadí. To symbolizovalo něco nepředvídatelného a chaotického, což podle většiny účastníků není vhodné poselství pro logo (vzhledem k časté kritice, že „CSS je rozbité“).

Nápad Javiho Aguilara

Javi Aguilar na tento pozitivně přijatý návrh reagoval několika úpravami, zejména změnou odstínu modré tak, aby lépe ladila s logem JavaScriptu. Tento odstín by však byl příliš podobný logu TypeScriptu, což by mohlo působit monotónně.

Jako řešení Javi vybral růžovou z barevného schématu (konkrétně z tetradic color wheel), protože podle něj působila vizuálně přitažlivě. Dalším důvodem bylo přirovnání k líčení, protože CSS lze s trochou nadsázky vnímat jako „make-up 💅“ webu.

Na základě zpětné vazby od komunity Javi vytvořil logo připomínající tooltip se zaoblenými rohy, což odkazovalo na moderní vlastnosti CSS.

Adam Argyle shrnul všechny body, na kterých se skupina CSS-Next Community Group shodla, a zdůraznil klíčové důvody, proč bylo vybráno růžové logo:

• Dobře zapadá mezi ostatní loga stejné kategorie (JS, TS, HTML atd.).
• Používá CSS barvu hotpink, což je jemný, ale výstižný odkaz na CSS.
• Zaoblené rohy nenápadně a účinně odkazují na novější CSS vlastnosti.
• Funguje skvěle i bez barvy (světlá a tmavá alternativa).
• Zůstává čitelné při malých i velkých velikostech (důležité pro kódové editory).
• Může být použito s číslem i bez něj.

Komunita také experimentovala s barvou loga a začaly vznikat první implementace pomocí SVG nebo CSS. Adam Argyle vyvinul tuto verzi spolu s dalšími logy pro webové technologie a sdílel náhled na CodePenu.

Návrh Christophera Kirka-Nielsena

Christopher Kirk-Nielsen, známý tvorbou mnoha webově zaměřených triček (včetně populárního State of CSS), se zapojil do diskuse a upozornil na to, že velikost textu byla zbytečně malá a mohla být hůře čitelná ve srovnání s původním návrhem.

Navrhl, že není nutné používat font Neutraface (který se objevuje v logu JavaScriptu), protože WebAssembly používá jiný font, což znamená, že striktní konzistence není nezbytná. Místo toho se zaměřil na tyto aspekty a představil upravený design. Jeho návrh byl komunitou pozitivně přijat a získal kladnou zpětnou vazbu.

Hlavním důvodem úpravy písma byl argument, že známý open-source font DINish (který se výrazně podobá ještě slavnějšímu DIN 1451) by mohl lépe odpovídat výšce písem použitých v logách JavaScriptu, TypeScriptu nebo WebAssembly.

Dalším z argumentů byla lepší čitelnost v malých velikostech (například 16×16 pixelů), což je důležité pro ikony programovacích jazyků v kódových editorech.

Hlasování komunity

Změna písma vyvolala mnoho pozitivních reakcí, a tak zbývalo už jen vybrat vítězný design. Adam Argyle přidal komentář a požádal komunitu, aby hlasovala. Překvapivě však žádný z návrhů nepracoval s růžovým pozadím.

Původní loga CSS a W3C vždy používala odstíny modré. Jedním z kandidátů bylo logo s modrým pozadím, inspirované základní webovou barvou odkazů. Tento návrh poskytoval silný kontrast, byl snadno zapamatovatelný a využíval barvu, která je neoddělitelnou součástí webu a webových standardů.

Modré odstíny byly vybrány z loga W3C, standardní barvy webových odkazů, barvy z CSS3 Shield loga a také z CSS Shield s vylepšeným kontrastem.

Nevýhodou tohoto modrého loga však byla nízká originalita a inovace, a z toho důvodu Adam Argyle představil druhou variantu s pozadím ve fialové barvě #663399, známou jako rebeccapurple. Stejně jako u prvního návrhu nebyla tato barva vybrána náhodou – nese silný příběh a emocionální význam.

Rebecca Alison Meyer

Rok 2014 byl pro Kate a Erica Meyera mimořádně těžký. Eric Meyer, jeden z nejvýznamnějších zastánců webových standardů, zejména CSS, tehdy přišel o svou šestiletou dceru Rebeccu Alison Meyer, která zemřela na rakovinu. Rebecca byla veselá a kreativní dívka, která milovala fialovou barvu.

Jeffrey Zeldman a několik dalších členů webové komunity hledali způsob, jak rodině pomoci nejen finančně. Povzbudili členy komunity, kteří si vážili Ericovy práce, aby na tehdejším Twitteru sdíleli slova nebo obrázky na podporu rodiny. Aby byly tyto příspěvky sjednocené, vytvořili systém označování pomocí hashtagu #669933Becca, což byl hexadecimální kód odstínu fialové, kterou Rebecca milovala.

CSS Working Group navrhla pojmenovat barvu #663399 jako beccapurple, ale Eric Meyer požádal, aby byla pojmenována rebeccapurple. Důvodem byla vzpomínka na rozhovor s Rebeccou několik týdnů před její smrtí – když jí bylo téměř šest let, řekla rodičům, že až oslaví šesté narozeniny, chce, aby jí všichni říkali Rebecca.

CSS má nové logo

Tento smutný, ale hluboce dojemný příběh inspiroval tvůrce při návrhu nového loga pro CSS. Příběh rebeccapurple dokazuje, že technologie není oddělená od lidskosti — je výsledkem týmové práce, nápadů a příběhů lidí, kteří ji tvoří.

Komunita se jasně rozhodla a vybrala logo s barvou rebeccapurple (v době publikace získalo 517 hlasů oproti 55 hlasům pro logo s modrým pozadím).

Pro nové logo byl následně vytvořen samostatný GitHub repozitář, kde komunita pokračovala v jeho vylepšování — například vytvořením samostatného SVG loga, které není závislé na externím fontu.

rebeccapurple

Příběh Rebeccy Meyer a vznik barvy rebeccapurple v CSS je jako „Kind of Blue“ ve světě webového designu. Připomíná, že i ztráta může inspirovat něco krásného a trvalého. Stejně jako Miles Davis vytvořil prostor pro improvizaci, svobodu a propojení, webová komunita vytvořila něco, co přesahuje technologii — barvu, která je poctou, příběhem a způsobem, jak spojovat lidi.

Za každým řádkem CSS stojí lidé, jejichž práce ovlivnila podobu webu, jak ho dnes známe. Od Erica Meyera po tisíce dalších přispěvatelů — každý přinesl kousek sebe, ať už prostřednictvím inovací, nebo gest, jakým bylo vytvoření rebeccapurple.

Až příště budete psát kód a použijete color: rebeccapurple;, věnujte chvíli vzpomínce na příběh, který za touto barvou stojí.