Branding updates

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;
     }
   }
-}
+
+  .dark-only {display: inline-block;}
+  .light-only {display: none;}
+}

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;
+}

site/about/branding.md

@@ -5,29 +5,126 @@ 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
 
+<div class="logopadding">
+<img class="light-only" src="https://raw.githubusercontent.com/commonhaus/artwork/3be8f24eb147253b4167dfacc4902181a0c98531/foundation/brand/svg/CF_logo_horizontal_default.svg" aria-hidden="true" alt="Commonhaus Foundation logo">
+<img class="dark-only" src="https://raw.githubusercontent.com/commonhaus/artwork/main/foundation/brand/svg/CF_logo_horizontal_default.svg" aria-hidden="true" alt="Commonhaus Foundation logo">
+</div>
+
 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:
 
 - Maintain the original colors and proportions of the logo without modifications.
 - 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:
+<img class="light-only" src="/images/brand/brand_logo_spacing_vert_light.svg" aria-hidden="true" alt="Appropriate spacing for the vertical Commonhaus Foundation logo">
+<img class="dark-only" src="/images/brand/brand_logo_spacing_vert_dark.svg" aria-hidden="true" alt="Appropriate spacing for the vertical Commonhaus Foundation logo">
+<img class="light-only" src="/images/brand/brand_logo_spacing_hori_light.svg" aria-hidden="true" alt="Appropriate spacing for the horizontal Commonhaus Foundation logo">
+<img class="dark-only" src="/images/brand/brand_logo_spacing_hori_dark.svg" aria-hidden="true" alt="Appropriate spacing for the horizontal Commonhaus Foundation logo">
+
+### Improper logo usage
+
+<div class="brandbox">
+	<div class="brandblock">
+		<img class="light-only" src="/images/brand/brand_logo_skew_light.svg" aria-hidden="true" alt="Example image of skewing the logo" >
+		<img class="dark-only" src="/images/brand/brand_logo_skew_dark.svg" aria-hidden="true" alt="Example image of skewing the logo">
+		<p>Don't distort, stretch or skew the logo</p>
+	</div>
+	<div class="brandblock">
+		<img class="light-only" src="/images/brand/brand_logo_recolor_light.svg" aria-hidden="true" alt="Example image of recoloring the logo">
+		<img class="dark-only" src="/images/brand/brand_logo_recolor_dark.svg" aria-hidden="true" alt="Example image of recoloring the logo">
+		<p>Don't recolor the logo</p>
+	</div>
+	<div class="brandblock">
+		<img class="light-only" src="/images/brand/brand_logo_gradient_light.svg" aria-hidden="true" alt="Don't use a gradient on the logo">
+		<img class="dark-only" src="/images/brand/brand_logo_gradient_dark.svg" aria-hidden="true" alt="Don't use a gradient on the logo">
+		<p>Don't use a gradient on the logo</p>
+	</div>
+	<div class="brandblock">
+		<img class="light-only" src="/images/brand/brand_logo_resize_light.svg" aria-hidden="true" alt="Example image of changing the relationshipo between logomark and the typography">
+		<img class="dark-only" src="/images/brand/brand_logo_resize_dark.svg" aria-hidden="true" alt="Example image of changing the relationshipo between logomark and the typography">
+		<p>Don't change the size relationship between the logomark and the typography</p>
+	</div>
+	<div class="brandblock">
+		<img class="light-only" src="/images/brand/brand_logo_logotype_light.svg" aria-hidden="true" alt="Example of using the logotype without the logomark">
+		<img class="dark-only" src="/images/brand/brand_logo_logotype_dark.svg" aria-hidden="true" alt="Example of using the logotype without the logomark">
+		<p>Don't use the type without the logomark</p>
+	</div>
+	<div class="brandblock">
+		<img class="light-only" src="/images/brand/brand_logo_dropshadow_light.svg" aria-hidden="true" alt="Example of adding a dropshadow">
+		<img class="dark-only" src="/images/brand/brand_logo_dropshadow_dark.svg" aria-hidden="true" alt="Example of adding a dropshadow">
+		<p>Don't add dropshadows or effects</p>
+	</div>
+</div>
+
+## 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. 
+
+<div class="brandbox">
+  <div class="brandblock white">
+	<img src="/images/brand/brand_onecolor_horizontal_light.svg" aria-hidden="true" alt="Example of one-color tint or shade usage">
+  </div>
+	<div class="brandblock black">
+	<img src="/images/brand/brand_onecolor_horizontal_dark.svg" aria-hidden="true" alt="Example of one-color tint or shade usage">
+  </div>
+</div>
+
+**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`
+<div class="brandbox">
+  <div class="colorblock fern">
+    <h4>Fern Green</h4>
+    <p>#4D7343</p>
+  </div>
+  <div class="colorblock asparagus">
+    <h4>Asparagus</h4>
+    <p>#78A658</p>
+  </div>
+  <div class="colorblock yellowgreen">
+    <h4>Yellow Green</h4>
+    <p>#A9D962</p>
+  </div>
+  <div class="colorblock lightblue">
+    <h4>Light Blue</h4>
+    <p>#BAD3D9</p>
+  </div>
+  <div class="colorblock ashgray">
+    <h4>Asparagus</h4>
+    <p>#a7bec3</p>
+  </div>
+  <div class="colorblock goldenrod">
+    <h4>Goldenrod</h4>
+    <p>#D6A509</p>
+  </div>
+  <div class="colorblock cocoabrown">
+    <h4>Cocoa Brown</h4>
+    <p>#D96704</p>
+  </div>
+  <div class="colorblock britishracinggreen">
+    <h4>British Racing Green</h4>
+    <p>#1A402A</p>
+  </div>
+  <div class="colorblock darkgreen">
+    <h4>Dark Green</h4>
+    <p>#012626</p>
+  </div>
+ </div>
 
 ## Typography
 

site/assets/site.scss

@@ -5,6 +5,7 @@
 @use 'callout';
 @use 'text';
 @use 'site-main-about';
+@use 'brand';
 
 // Screen reader only
 .sr-only {