diff --git a/site/_includes/scss/_colors.scss b/site/_includes/scss/_colors.scss index 4e2ba8fa..9a5889db 100644 --- a/site/_includes/scss/_colors.scss +++ b/site/_includes/scss/_colors.scss @@ -115,6 +115,11 @@ body { --highlight-bg: rgba(var(--light-blue-rgb), 0.3); background-color: var(--bg-primary); + + + .dark-only {display: none;} + .light-only {display: inline-block;} + } .dark body { @@ -159,4 +164,7 @@ body { background-color: #fff; } } -} \ No newline at end of file + + .dark-only {display: inline-block;} + .light-only {display: none;} +} diff --git a/site/_includes/scss/brand.scss b/site/_includes/scss/brand.scss new file mode 100644 index 00000000..d48a16a8 --- /dev/null +++ b/site/_includes/scss/brand.scss @@ -0,0 +1,43 @@ +.brandbox { + display: flex; + flex-wrap: wrap; + + .brandblock { + width: 50%; + p { + text-align: center; + } + } + + .colorblock { + padding: 2rem; + width: 40%; + h4, p { + color: white; + text-align: center; + } + } + + .fern { background-color: #4D7343; } + .asparagus { background-color: #78A658; } + .yellowgreen { background-color: #A9D962; } + .lightblue { background-color: #BAD3D9; } + .ashgray { background-color: #a7bec3; } + .goldenrod { background-color: #D6A509; } + .cocoabrown { background-color: #D96704; } + .britishracinggreen { background-color: #1A402A; } + .darkgreen { background-color: #012626; } + .white { background-color: #ffffff; } + .black { background-color: #000000; } + + @media(max-width: 672px) { + + .brandblock, .colorblock { + width: 100%; + } + } +} + +.logopadding { + padding: 2rem 0 2.5rem 0; +} diff --git a/site/about/branding.md b/site/about/branding.md index 4f818efe..4529844b 100644 --- a/site/about/branding.md +++ b/site/about/branding.md @@ -5,8 +5,15 @@ description: Guidelines for correctly using the Commonhause Foundation logo, col Our visual and verbal identity mirrors our dedication to fostering open source communities and promoting collaborative development. This guide offers a detailed look at the appropriate application of our brand assets. + + ## Logo usage +
+ + +
+ Our logo symbolizes our foundation's dedication to the [principles and values](./index.md#our-guiding-principles) that guide our efforts. It is essential to use our logo with care and consistency, adhering to these guidelines: @@ -14,20 +21,110 @@ It is essential to use our logo with care and consistency, adhering to these gui - Ensure the logo is surrounded by ample space, keeping it clear of text or other visual distractions. - Usage of the logo to imply endorsement or partnership is strictly limited to those with explicit authorization. +Access the **[Commonhaus Foundation Brand Repo](https://github.com/commonhaus/artwork/tree/main/foundation/brand)** on gitub to get the files in various formats and sizes. + +### Proper logo usage + +When using the Commonhaus Foundation logo, make sure to leave an appropriate amount space around the logo. We define "appropriate" as the height of the capital F in the "Foundation" in the word mark in the logo itself. + +This is the minimum space to be left around the logo: + + + + + +### Improper logo usage + +
+
+ + +

Don't distort, stretch or skew the logo

+
+
+ + +

Don't recolor the logo

+
+
+ + +

Don't use a gradient on the logo

+
+
+ + +

Don't change the size relationship between the logomark and the typography

+
+
+ + +

Don't use the type without the logomark

+
+
+ + +

Don't add dropshadows or effects

+
+
+ +## Tinting or shading the one-color logo + +In some applications, the user may want to use a one-color version of the logo where the default Commonhaus Foundation branding colors are inappropriate. In these cases, it is acceptable to tint or shade the logo. The only concern would be to maintain enough contrast between the logo and the background color to maintain a reasonable amount of legibility. + +
+
+ +
+
+ +
+
+ +**Please Note:** There is a difference between the "default" and "reverse" logos. The mark is frameless (and larger) in the "reverse" version. Keep this in mind when selecting a logo for light or dark background usages. + ## Color palette Our color palette has been carefully selected to represent our brand's characteristics: growth, innovation, and reliability. Please use the following color codes for digital and print materials: - -- Fern green: `#4D7343` -- Asparagus: `#78A658` -- Yellow-green: `#A9D962` -- Light blue: `#BAD3D9` -- Ash gray: `#a7bec3` -- Goldenrod: `#D6A509` -- Cocoa brown: `#D96704` -- British racing green: `#1A402A` -- Dark green: `#012626` +
+
+

Fern Green

+

#4D7343

+
+
+

Asparagus

+

#78A658

+
+
+

Yellow Green

+

#A9D962

+
+
+

Light Blue

+

#BAD3D9

+
+
+

Asparagus

+

#a7bec3

+
+
+

Goldenrod

+

#D6A509

+
+
+

Cocoa Brown

+

#D96704

+
+
+

British Racing Green

+

#1A402A

+
+
+

Dark Green

+

#012626

+
+
## Typography diff --git a/site/assets/site.scss b/site/assets/site.scss index 1c4f824b..88c1da14 100644 --- a/site/assets/site.scss +++ b/site/assets/site.scss @@ -5,6 +5,7 @@ @use 'callout'; @use 'text'; @use 'site-main-about'; +@use 'brand'; // Screen reader only .sr-only { diff --git a/site/static/images/brand/brand_logo_dropshadow.svg b/site/static/images/brand/brand_logo_dropshadow.svg new file mode 100644 index 00000000..e10ea03a --- /dev/null +++ b/site/static/images/brand/brand_logo_dropshadow.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_dropshadow_dark.svg b/site/static/images/brand/brand_logo_dropshadow_dark.svg new file mode 100644 index 00000000..4ed0f18e --- /dev/null +++ b/site/static/images/brand/brand_logo_dropshadow_dark.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_dropshadow_light.svg b/site/static/images/brand/brand_logo_dropshadow_light.svg new file mode 100644 index 00000000..e10ea03a --- /dev/null +++ b/site/static/images/brand/brand_logo_dropshadow_light.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_gradient.svg b/site/static/images/brand/brand_logo_gradient.svg new file mode 100644 index 00000000..cb0acec9 --- /dev/null +++ b/site/static/images/brand/brand_logo_gradient.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_gradient_dark.svg b/site/static/images/brand/brand_logo_gradient_dark.svg new file mode 100644 index 00000000..e40a8de1 --- /dev/null +++ b/site/static/images/brand/brand_logo_gradient_dark.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_gradient_light.svg b/site/static/images/brand/brand_logo_gradient_light.svg new file mode 100644 index 00000000..cb0acec9 --- /dev/null +++ b/site/static/images/brand/brand_logo_gradient_light.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_logotype.svg b/site/static/images/brand/brand_logo_logotype.svg new file mode 100644 index 00000000..5405c26c --- /dev/null +++ b/site/static/images/brand/brand_logo_logotype.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_logotype_dark.svg b/site/static/images/brand/brand_logo_logotype_dark.svg new file mode 100644 index 00000000..2946a9a7 --- /dev/null +++ b/site/static/images/brand/brand_logo_logotype_dark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_logotype_light.svg b/site/static/images/brand/brand_logo_logotype_light.svg new file mode 100644 index 00000000..5405c26c --- /dev/null +++ b/site/static/images/brand/brand_logo_logotype_light.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_recolor.svg b/site/static/images/brand/brand_logo_recolor.svg new file mode 100644 index 00000000..55448a62 --- /dev/null +++ b/site/static/images/brand/brand_logo_recolor.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_recolor_dark.svg b/site/static/images/brand/brand_logo_recolor_dark.svg new file mode 100644 index 00000000..11c71295 --- /dev/null +++ b/site/static/images/brand/brand_logo_recolor_dark.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_recolor_light.svg b/site/static/images/brand/brand_logo_recolor_light.svg new file mode 100644 index 00000000..55448a62 --- /dev/null +++ b/site/static/images/brand/brand_logo_recolor_light.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_resize.svg b/site/static/images/brand/brand_logo_resize.svg new file mode 100644 index 00000000..e2510af4 --- /dev/null +++ b/site/static/images/brand/brand_logo_resize.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_resize_dark.svg b/site/static/images/brand/brand_logo_resize_dark.svg new file mode 100644 index 00000000..32d65616 --- /dev/null +++ b/site/static/images/brand/brand_logo_resize_dark.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_resize_light.svg b/site/static/images/brand/brand_logo_resize_light.svg new file mode 100644 index 00000000..e2510af4 --- /dev/null +++ b/site/static/images/brand/brand_logo_resize_light.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_skew.svg b/site/static/images/brand/brand_logo_skew.svg new file mode 100644 index 00000000..e5442a90 --- /dev/null +++ b/site/static/images/brand/brand_logo_skew.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_skew_dark.svg b/site/static/images/brand/brand_logo_skew_dark.svg new file mode 100644 index 00000000..87281968 --- /dev/null +++ b/site/static/images/brand/brand_logo_skew_dark.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_skew_light.svg b/site/static/images/brand/brand_logo_skew_light.svg new file mode 100644 index 00000000..e5442a90 --- /dev/null +++ b/site/static/images/brand/brand_logo_skew_light.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_spacing_hori.svg b/site/static/images/brand/brand_logo_spacing_hori.svg new file mode 100644 index 00000000..c66951cd --- /dev/null +++ b/site/static/images/brand/brand_logo_spacing_hori.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_spacing_hori_dark.svg b/site/static/images/brand/brand_logo_spacing_hori_dark.svg new file mode 100644 index 00000000..43b6b469 --- /dev/null +++ b/site/static/images/brand/brand_logo_spacing_hori_dark.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_spacing_hori_light.svg b/site/static/images/brand/brand_logo_spacing_hori_light.svg new file mode 100644 index 00000000..c66951cd --- /dev/null +++ b/site/static/images/brand/brand_logo_spacing_hori_light.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_spacing_vert_dark.svg b/site/static/images/brand/brand_logo_spacing_vert_dark.svg new file mode 100644 index 00000000..88703125 --- /dev/null +++ b/site/static/images/brand/brand_logo_spacing_vert_dark.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_logo_spacing_vert_light.svg b/site/static/images/brand/brand_logo_spacing_vert_light.svg new file mode 100644 index 00000000..43c7e237 --- /dev/null +++ b/site/static/images/brand/brand_logo_spacing_vert_light.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_onecolor_horizontal_dark.svg b/site/static/images/brand/brand_onecolor_horizontal_dark.svg new file mode 100644 index 00000000..b1c97de2 --- /dev/null +++ b/site/static/images/brand/brand_onecolor_horizontal_dark.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/static/images/brand/brand_onecolor_horizontal_light.svg b/site/static/images/brand/brand_onecolor_horizontal_light.svg new file mode 100644 index 00000000..8b15a891 --- /dev/null +++ b/site/static/images/brand/brand_onecolor_horizontal_light.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file