Create a "Branding & Assets" page

[thibaultamartin]

We need a "Branding & Assets" page to share:

• The logos from https://github.com/element-hq/logos/tree/master/matrix
• The Foundation Membership badges from Matrix Member Badges.zip

We can use something as simple as https://element.io/en/logo as layout reference for starters, and will add branding guidelines later.

The new page should appear at https://matrix.org/branding which should be added to the footer links.

[HarHarLinks]

Where would this page be discoverable?

[awtj8o81ryywg793]

Quoted from a previous comment:

Where would this page be discoverable?

Based on my experience, it's typical to place a link to such a page in the footer.

[HarHarLinks]

it's typical to place a link to such a page in the footer.

This was agreed in the working group. I've updated the issue accordingly.

[ibharathboga]

Hello @thibaultamartin and @HarHarLinks,

I have been looking into this issue and I would like to work on it. I have spent some time exploring the Zola setup and have the project running locally.

May I take this on ?

[HarHarLinks]

@ibharathboga yes, please do! we are happy about any PRs submitted that tackle issues with the "help wanted" label. you might find some inspiration for how we implement "cards" in #3172. Let us know in GitHub comments or our chat https://matrix.to/#/#matrix.org-website:matrix.org if you have any questions.

[ibharathboga]

Hello @HarHarLinks !,

is the above sample design good to proceed ? i will try to incorporate the consistent cards styling from the reference you provided soon after feedback. thank you

[HarHarLinks]

Looks good!

• Can you separate the "Matrix Logo" and "Matrix Favicon"? Perhaps similar to the element.io reference above?
  • With that added, you could come to a semi-grid layout (i.e. as content allows)
• I am on the edge about showing all 4 tiers of membership logos; in fact I will ask to clarify if we shouldn't have 6 types instead. i think it is worthwhile to make obvious that there is one for each of the 4/6 types of members.
• I am not sure why there is another Matrix logo additionally at the top, outside the boxes. I would remove that.

[ibharathboga]

Hi @HarHarLinks,

thank you for the feedback.

As suggested,

• Matrix logo and Matrix favicon are separated.
• One card for each tier is added.
  • upon click, download for zip folder which has only the tier's .svg and .png is triggered.
• Additional Matrix logo at the top is removed.

The reference zip,

• contains badges for 4 tiers. I built the layout to be flexible, so adding the remaining 2 will be easy once the assets are available.
• has _MACOSX directory and DS_Store file, they are not included in the current setup. I am not sure if it is the right decision.

[HarHarLinks]

Looks good, please submit a Pull Request.

I have the additional info as promised:

• we will receive the 2 additional member badges
• we will add a short text explaining the membership badges with a link to the appropriate page we already have somewhere. If you'd like, feel free to propose something, but we also can supply/update text as needed. Additionally, we will have text encouraging members who add a badge to their site to link to our members page.

[ibharathboga]

@HarHarLinks, I am almost done with the branding & assets page updates.

Proposal: Membership Badges Section

Based on your feedback, here is a draft for the text and usage guidelines:
I came across the older "Made for Matrix" badge guidelines while exploring how to write a better draft for this section. Using it as a reference, I have drafted the following text:

---

Membership Badges
These badges are available for members of the Matrix.org Foundation to showcase their support for the ecosystem. Whether you are an Individual, Silver, Gold, or Platinum member, you can use these assets on your website, GitHub profiles, or marketing materials.

Not a member yet? Learn more about our membership tiers and benefits here.

How to use them

• Link it back: If you display a badge on your site, we encourage you to link the image to our Members Page. This helps verify your support and helps others discover the Foundation.
• Visual Integrity: Please do not stretch, rotate, or modify the colors of the badges. Do not alter the aspect ratio of the badge.

Example HTML snippet:

<a href="https://matrix.org/members/">
  <img src="path/to/matrix-silver-badge.svg" alt="Matrix.org Silver Member Badge" width="200">
</a>

---

Technical Note: Zola Versioning Conflict

My local environment is running the latest version of Zola, which threw the following syntax error:

To get the branding changes to build locally, I applied a minor syntax fix/hack. However, I am concerned the production workflow might still be pinned to an older Zola version.

Should I revert the fix before submitting ? Keep the original syntax (my local build will fail, but pr will work for the production build)

Let me know your preference and I will open the PR. Thank you.