Improvements to Brand Guidelines page

[nylen]

This has the potential to be a pretty large issue so it may be a good idea to break it up into smaller issues once we start on it. See also https://forums.classicpress.net/c/team-discussions/design-forum for other relevant discussion.

Quoting from Slack today:

Has anyone else noticed that the new website doesn't quite follow the brand guidelines? Some of the headers use #4b2063 instead of Deep Purple Violet (#361946) and others use Mid Violet (#89288f). Am I being too pedantic? Personally, I think #4b2063 is better than #361946 anyway as I think the latter is a tad too dark. Just my tuppence worth. On a related note, is it worth adding the CMYK and RGB codes in addition to the hex?

...

https://github.com/ClassicPress/ClassicPress-Themes/wiki/Design-Specs we shouldn't be using this repo for anything anymore, but the #4b2063 comes from there one of the colors in the "Purple Gradient"

We could use some clearer guidelines for when to use each color or visual element.

Quick note/aside about fonts:

The Wiki page on Github also shows the font as DejaVu Sans whereas we're using Source Sans Pro. I can answer the font question, in that case https://www.classicpress.net/brand-guidelines/ and the site are correct with Source Sans

A few things to do, there are undoubtedly more:

• get some clarification on when to use each purple color [and probably other design elements as well], this is a question for @BlueSkyPhoenix, but to my eye at least the current site is doing it right
• general improvements to the documentation at https://www.classicpress.net/brand-guidelines/
• make https://github.com/ClassicPress/ClassicPress-Themes/wiki/Design-Specs and https://docs.classicpress.net/press-and-branding/ go away, any content, visual guides etc in these pages that is not already at https://www.classicpress.net/brand-guidelines/ should be folded into that page [see also https://github.com/ClassicPress/ClassicPress-Themes/issues/25]

https://docs.classicpress.net/press-and-branding/ contains a shortcode that currently lives in this repository to display a list of images: https://github.com/ClassicPress/ClassicPress-Network/blob/master/wp-content/mu-plugins/file-list.php

This shortcode should be ported over to the new site and possibly re-styled since it will no longer be the main element on the page.

Another idea for this asset/file list would be to sort the logos into categories, explain when to use each one, and also present downloadable files in a couple of different formats (.png for example).

This issue is intended to be a brain dump of some fairly minor improvements that should not require a full re-working of the brand guidelines. If you are interested in working on some of this then drop a comment here and let's chat.

[nylen]

Per further discussion at https://forums.classicpress.net/t/logo-storage/1593/12 here are some more details.

The image file listing at https://docs.classicpress.net/press-and-branding/ currently works via a shortcode with some associated styles. If we introduce multiple image formats then there should be only one row per image, with links inside the row to each individual format. This will require some code changes to the shortcode (instead of just listing files, the shortcode should merge entries by the common prefix of the file's name and then display links for all the relevant extensions.

Here is a suggested list of formats for each image: .ai, .svg, .png (600px wide), .png (1200px wide).

We have also discussed logo and other asset naming conventions in the past and come to a decision that we thought was workable: https://github.com/ClassicPress/ClassicPress/issues/266, implemented for the core code in https://github.com/ClassicPress/ClassicPress/pull/366.

A couple of other things we need:

• A brief description of the places each type of image should be used, though this will need further code changes to our file listing shortcode and this can be done after most other things are reorganized.
• A list of the places we use our official logos. Core code, marketing communications, favicons / logos on various sites, etc.

---

I will be the first to say that this is an overly long and sprawling issue. If someone wants to try breaking it apart into smaller issues then that might be a good place to start here.

[nylen]

Prototype of the "logo download" element I described above:

[ClassyBot]

This issue has been mentioned on ClassicPress Forums. There might be relevant details there:

https://forums.classicpress.net/t/help-wanted-revisions-improvements-to-brand-documentation/2171/1

[timbocode]

Just want to add "cpicons" to the list. This is the custom font set used on the ClassicPress website to display icons such as:

social media icons:

homepage icons:

[nylen]

@timbocode What needs to be done with cpicons?

[timbocode]

How to add or change an icon and how to add them to the stylesheet needs to be documented. The icons are generated using Icomoon. I wrote some notes for this in Word when I created the icons last Sept. but they never got published anywhere as there didn't seem to be an appropriate "home" for them.

[nylen]

Since the people who would be doing this is basically whoever is developing on the main site, I guess we could put a README.md + any needed supporting files (SVG source icons) somewhere under https://github.com/ClassicPress/site-www, and add a link from that repository's main readme. What do you think?

[timbocode]

That seems fine to me. Or a wiki perhaps?

[nylen]

@timbocode just realized I never answered that question. I think including the documentation about cpicons along with the site code is a better plan, since adding a wiki would add another source of information that needs to be referenced, updated, and backed up separately.

[nylen]

https://docs.classicpress.net/press-and-branding/ is gone, and logo files are now available for download at https://www.classicpress.net/brand-guidelines/ directly. The "logo download" element shown above has been implemented.

Related: https://github.com/ClassicPress/ClassicPress-docs/issues/5