Style Guide

Once we finish the Website redesign, we will set up a Style Guide that gives suggested code and colors for the website.

Standards

These are some standards for the website.

• Maximum Width = 63rem (any larger and the Zcard is not wide enough).

These settings should apply to all channels on Hubzilla.org unless otherwise specified.

Logos

The Hubzilla Project, the Hubzilla Association, and the Neuhub Project use different logos to represent Hubzilla.

Square Logos

All projects use the same square logo, although with different colors. See the logo colors section for the colors.

• Version 1 Blue - There is an SVG for this, but I can't find a file to link to. See the home page.
• Version 2 Midnight Blue - https://hubzilla.network/cloud/info/logos/hubzilla-logo-1.png
• Version 2 Blue - https://hubzilla.network/cloud/info/logos/hubzilla-logo-3.png
• Orignal Version Purple - https://framagit.org/hubzilla/core/-/blob/master/images/hz-64.png

These are often used interchangably, although Hubzilla.org and Neuhub.org tend to favor different colors.

Rectangular Logos

There are multiple variations of the rectangular logo. Hubzilla.org uses version 1, and Neuhub.org uses version 2.

• Version 1 - https://hubzilla.org/photo/ce66f225-945a-4cc6-a13e-8f9242df96aa
• Version 1 Association - https://hubzilla.org/cloud/info/website_images_small/hubzilla_association.png
• Version 2 - https://hubzilla.network/cloud/info/logos/hubzilla-logo-2.png
• Original Version - https://hubzilla.network/cloud/info/logos/hubzilla-banner.png

Logo Colors

The following colors are used in the logos and other elements of the website.

• #007EFF - Hubzilla Logo Blue (Version 1)
• #00B8FF - Hubzilla Logo Cyan (Version 1)
• #172D54 - Hubzilla Logo Midnight Blue (Version 2)
• #2E5AA1 - Hubzilla Logo Blue (Version 2)
• rgba(67,71,138,1) - Old Hubzilla Logo Color

Experimental Colors

Right now we are just trying out some various colors on the website. We are storing their infomation here temporarily.

Primary Colors

• Indigo - #6610f2
• Purple - #833382 (feels slightly burnt)

Light Background Colors

• rgba(226,222,233,1) - Greyish Purple

Dark Backgrounds

• rgba(67,71,138,1) - Old Hubzilla Website Background Color