Add color palette, logo, and typography documentation

src/components/AssetCard.astro

@@ -132,7 +132,7 @@ const {
       max-width: 60%;
     }
     .card-asset.logomark img {
-      max-width: 40%;
+      max-width: 30%;
     }
     .card-asset--dark {
       background-color: #000;

src/content/docs/esphome/index.mdx

@@ -20,28 +20,36 @@ When in doubt, use this, as it is the default and official version, certified an
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-color-on-light.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/esphome/lockup/png/esphome-lockup-main-color-on-light.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-color-on-light.svg"
-  />
+  >
+  When in doubt, use this, as it is the default and official version, certified and with the trademark registration. Prioritize this version in all brand collateral.
+  </AssetCard>
   <AssetCard
     title="Color on dark"
     mode="dark"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-color-on-dark.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/esphome/lockup/png/esphome-lockup-main-color-on-dark.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-color-on-dark.svg"
-  />
+  >
+  Only to be used on dark backgrounds: e.g. on a page with a dark theme so that the lighter text can be read.
+  </AssetCard>
 
   <AssetCard
     title="Monochrome on light"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-monochrome-on-light.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/esphome/lockup/png/esphome-lockup-main-monochrome-on-light.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-monochrome-on-light.svg"
-  />
+  >
+  Use the fully black or fully white version on photographic backgrounds to ensure good readability, or in printed materials where color is unavailable.
+  </AssetCard>
   <AssetCard
     title="Monochrome on dark"
     mode="dark"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-monochrome-on-dark.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/esphome/lockup/png/esphome-lockup-main-monochrome-on-dark.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/esphome/lockup/svg/esphome-lockup-main-monochrome-on-dark.svg"
-  />
+  >
+  Use the fully black or fully white version on photographic backgrounds to ensure good readability, or in printed materials where color is unavailable.
+  </AssetCard>
 </CardGrid>
 
 

src/content/docs/home-assistant/index.mdx

@@ -20,28 +20,36 @@ When in doubt, use this, as it is the default and official version, certified an
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-color-on-light.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/home-assistant/lockup/png/ha-lockup-main-color-on-light.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-color-on-light.svg"
-  />
+  >
+  When in doubt, use this, as it is the default and official version, certified and with the trademark registration. Prioritize this version in all brand collateral.
+  </AssetCard>
   <AssetCard
     title="Color on dark"
     mode="dark"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-color-on-dark.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/home-assistant/lockup/png/ha-lockup-main-color-on-dark.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-color-on-dark.svg"
-  />
+  >
+  Only to be used on dark backgrounds: e.g. on a page with a dark theme so that the lighter text can be read.
+  </AssetCard>
 
   <AssetCard
     title="Monochrome on light"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-monochrome-on-light.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/home-assistant/lockup/png/ha-lockup-main-monochrome-on-light.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-monochrome-on-light.svg"
-  />
+  >
+  Use the fully black or fully white version on photographic backgrounds to ensure good readability, or in printed materials where color is unavailable.
+  </AssetCard>
   <AssetCard
     title="Monochrome on dark"
     mode="dark"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-monochrome-on-dark.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/home-assistant/lockup/png/ha-lockup-main-monochrome-on-dark.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/home-assistant/lockup/svg/ha-lockup-main-monochrome-on-dark.svg"
-  />
+  >
+  Use the fully black or fully white version on photographic backgrounds to ensure good readability, or in printed materials where color is unavailable.
+  </AssetCard>
 </CardGrid>
 
 

src/content/docs/home-assistant/logo.mdx

@@ -0,0 +1,162 @@
+---
+title: Logo
+---
+
+import AssetCard from "../../../components/AssetCard.astro";
+import CardGrid from "../../../components/CardGrid.astro";
+
+## Logo anatomy
+
+The Home Assistant is built up of 3 elements as described below.
+
+<CardGrid cols="3">
+  <AssetCard
+    title="House"
+    assetName=""
+    class="basic"
+  />
+  <AssetCard
+    title="Antenna"
+    assetName=""
+    class="basic"
+  />
+  <AssetCard
+    title="Blue"
+    assetName="/assets/open-home-foundation/ohf-logo-anatomy-blue.png"
+    class="basic"
+  />
+</CardGrid>
+
+### House
+
+For all our projects, we take the house form used in our overarching Open Home Foundation logomark and adapt it so our audiences can see both the link between the foundation and the project, and the qualities of the project.
+
+The only difference between each project logomark is the white symbol within the house enclosure that symbolises its core attribute. This makes use of our project logos much easier, since they all follow the same rules that are covered in this Home Assistant section.
+The dark blue foundation part of the Open Home Foundation logomark should not appear in any of the project logos.
+
+
+### Antenna
+
+You may see it as a tree, a set of nodes, or a PCB – we call it an antenna. The white antenna is the most recognizable and memorable part of the previous Home Assistant logomark, and is an easily understandable symbol that conveys technologies that are smart, connected, and growing evergreen.
+
+### Blue
+
+Blue feels stable and essential. A bright sky blue is joyful, clear, and free of clouds.
+
+## Logotype
+
+The logotype is what we call our project’s name when it’s styled up in our official typeface and color, and is used in combination with the logomark described above.
+
+The headline typeface for the Home Assistant brand is Biotif, but in titlecase rather than all capitals (uppercase).
+
+Read [Typography](/home-assistant/typography/) for more details.
+
+## Design and clearspace
+
+The following sectrion describes the design of the logo and the clearspace that should be maintained around it to ensure its visibility and impact.
+
+### Layout and Color variations
+
+See [brand assets](/home-assistant/) for the various layout variations of the logo and use cases.
+
+### Grid and proportions (UPDATE ASSETS)
+
+The logo has been designed following a rigid scheme of proportions – please do not change this ratio in any way. Use the main modular unit, on which the entire logo is based, to define the grid. All other graphic elements should also be designed on this grid. As the grid is built on a square module, the vertical proportions depend entirely on the horizontals.
+
+It is important to keep the logo free from other graphic elements. To help you regulate this, we’ve created an exclusion zone around it, which is equal to one third of the height of the icon. This exclusion zone indicates the minimum area around the logo that must be kept free of other graphic elements.
+
+
+<CardGrid cols="1">
+  <AssetCard
+    assetName="/assets/open-home-foundation/ohf-logomark-architecture.png"
+    class="basic no-bgc"
+    hideBorder
+  />
+  <AssetCard
+    assetName="/assets/open-home-foundation/ohf-lockup-architecture.png"
+    class="basic no-bgc"
+    hideBorder
+  />
+</CardGrid>
+
+### Deprecated logos
+
+Some older versions of the Home Assistant logo are now deprecated and should not be used. Please follow these official visual guidelines to ensure consistent and correct branding and only use [approved logos](/home-assistant/).
+
+<CardGrid cols="3">
+  <AssetCard
+    assetName="/assets/home-assistant/ha-deprecated-1.png"
+    class="basic"
+    deprecated
+  />
+  <AssetCard
+    assetName="/assets/home-assistant/ha-deprecated-2.png"
+    class="basic"
+    deprecated
+  />
+  <AssetCard
+    assetName="/assets/home-assistant/ha-deprecated-3.png"
+    class="basic"
+    deprecated
+  />
+  <AssetCard
+    assetName="/assets/home-assistant/ha-deprecated-4.png"
+    class="basic"
+    deprecated
+  />
+  <AssetCard
+    assetName="/assets/home-assistant/ha-deprecated-5.png"
+    class="basic"
+    deprecated
+  />
+  <AssetCard
+    assetName="/assets/home-assistant/ha-deprecated-6.png"
+    class="basic"
+    deprecated
+  />
+</CardGrid>
+
+### What to avoid
+
+The logo has relative sizes and proportions determined by the criteria of composition, hierarchy and functionality.
+Under no circumstances should these sizes and proportions be altered – here are some **examples** of what to avoid:
+
+<CardGrid>
+  <AssetCard
+    assetName="/assets/home-assistant/ha-do-not-use-1.png"
+    deprecated
+  >
+    Don’t distort or rotate the logo in any way. Don’t change the dimensions or move any logo element.
+  </AssetCard>
+  <AssetCard
+    assetName="/assets/home-assistant/ha-do-not-use-2.png"
+    deprecated
+  >
+    Don’t place the logo against any background that doesn’t create contrast.
+  </AssetCard>
+  <AssetCard
+    assetName="/assets/home-assistant/ha-do-not-use-3.png"
+    deprecated
+    class="logomark"
+  >
+    Don’t change the original solid color with an outline.
+  </AssetCard>
+  <AssetCard
+    assetName="/assets/home-assistant/ha-do-not-use-4.png"
+    deprecated
+  >
+    Don’t add drop shadow.
+  </AssetCard>
+  <AssetCard
+    assetName="/assets/home-assistant/ha-do-not-use-5.png"
+    deprecated
+  >
+    Don’t change letter spacing.
+  </AssetCard>
+  <AssetCard
+    assetName="/assets/open-home-foundation/ohf-do-not-use-6.png"
+    deprecated
+  >
+    Don’t change any color, don’t add any kind of gradient. Use only the selected color palette.
+  </AssetCard>
+</CardGrid>

src/content/docs/music-assistant/index.mdx

@@ -20,28 +20,36 @@ When in doubt, use this, as it is the default and official version, certified an
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-color-on-light.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/music-assistant/lockup/png/ma-lockup-main-color-on-light.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-color-on-light.svg"
-  />
+  >
+  When in doubt, use this, as it is the default and official version, certified and with the trademark registration. Prioritize this version in all brand collateral.
+  </AssetCard>
   <AssetCard
     title="Color on dark"
     mode="dark"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-color-on-dark.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/music-assistant/lockup/png/ma-lockup-main-color-on-dark.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-color-on-dark.svg"
-  />
+  >
+  Only to be used on dark backgrounds: e.g. on a page with a dark theme so that the lighter text can be read.
+  </AssetCard>
 
   <AssetCard
     title="Monochrome on light"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-monochrome-on-light.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/music-assistant/lockup/png/ma-lockup-main-monochrome-on-light.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-monochrome-on-light.svg"
-  />
+  >
+  Use the fully black or fully white version on photographic backgrounds to ensure good readability, or in printed materials where color is unavailable.
+  </AssetCard>
   <AssetCard
     title="Monochrome on dark"
     mode="dark"
     svg="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-monochrome-on-dark.svg"
     png="https://media.githubusercontent.com/media/OpenHomeFoundation/brand-assets/refs/heads/main/music-assistant/lockup/png/ma-lockup-main-monochrome-on-dark.png"
     assetName="https://raw.githubusercontent.com/OpenHomeFoundation/brand-assets/heads/main/music-assistant/lockup/svg/ma-lockup-main-monochrome-on-dark.svg"
-  />
+  >
+  Use the fully black or fully white version on photographic backgrounds to ensure good readability, or in printed materials where color is unavailable.
+  </AssetCard>
 </CardGrid>
 
 

src/content/docs/open-home-foundation/color-palette.mdx

@@ -0,0 +1,92 @@
+---
+title: Color palette
+---
+
+import ColorPaletteGrid from "../../../components/ColorPaletteGrid.astro";
+import ColorCard from "../../../components/ColorCard.astro";
+import { OHF_COLORS } from "../../../lib/colors";
+
+Our color system helps convey a consistent brand identity while distinguishing various themes within the Open Home Foundation ecosystem. Consistent use of these colors will contribute to the cohesive and harmonious appearance of the Open Home Foundation brand across all relevant media.
+
+## Which color value should I use?
+
+CMYK for process-color printing <br/>
+HSL, RGB or HEX code for screen viewing
+
+## Primary palette
+
+Our primary palette is anchored by a signature blue, which serves as the dominant element in most brand applications. Supported by a foundation of neutrals, dark blue, and light grey, this balance keeps the look focused, technical, and uncomplicated.
+
+<div class="not-content" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-block: 1.5rem;">
+  <ColorCard color={OHF_COLORS.ohf_light_blue} />
+  <ColorCard color={OHF_COLORS.ohf_dark_blue} />
+  <ColorCard color={OHF_COLORS.ohf_dark_grey} />
+  <ColorCard color={OHF_COLORS.ohf_light_grey} />
+  <ColorCard color={OHF_COLORS.ohf_grey} />
+</div>
+
+### Application
+
+To maintain brand depth, OHF Dark Blue and OHF Light Grey replace pure Black and White in all digital and print assets. Standard Black and White should be reserved exclusively for monochrome graphics.
+
+For optimal legibility, headings are set in OHF Dark Blue, while paragraphs utilize OHF Dark Grey on light backgrounds and OHF Grey on dark backgrounds.
+
+To ensure accessibility standards, avoid layering OHF Light Blue text on light backgrounds where possible.
+When in doubt, refer to our pre-approved color pairings.
+
+[COMPONENT]
+
+### Pre-approved color pairings
+
+[COMPONENT]
+
+[COMPONENT]
+
+[COMPONENT]
+
+[COMPONENT]
+
+[COMPONENT]
+
+## Secondary palette
+
+Our secondary colors bring our values to life. Privacy, Choice, and Sustainability are each assigned a distinct sub-palette featuring a main color, an accent, a gradient, and grounding neutrals. This modular approach gives you the flexibility to express our brand mission across any format.
+
+[COMPONENT]
+
+[COMPONENT]
+
+### Application
+
+Our secondary colors are more than just aesthetic choices; they visually represent our commitment to our users.
+
+Privacy: We use a soft blue to communicate peace of mind. Its low saturation feels airy and open, removing the “weight” of data surveillance. Accent: OHF Blue.
+Choice: A vibrant magenta is the color of action. It stands out in any interface, representing the user’s power to choose. We pair it with a warm, sun-drenched Yellow (#F8B34C) to make every choice feel positive and bright.
+
+Sustainability: A brilliant green moves away from “traditional” earthy tones toward a high-tech, luminous shade that reflects modern eco-innovation. It is supported by a vivid Deep Mint (#41D09B) to emphasize growth and renewal.
+
+To ensure accessibility standards, refer to our pre-approved color pairings.
+
+[COMPONENT]
+
+### Pre-approved color pairings
+
+[COMPONENT]
+
+[COMPONENT]
+
+[COMPONENT]
+
+## Accessibility
+
+Ensuring accessibility is a key priority. Each color palette is thoroughly tested to meet readability standards and maintain strong contrast ratios. They are optimized to avoid color conflicts and are verified as color-blind safe, making Open Home Foundation materials accessible to all users.
+
+Always use sufficient contrast between foreground and background colors to help every user easily perceive and understand the information presented.
+
+## Color blind simulator
+
+No conflicts found. The palette is color-blind safe.
+
+[COMPONENT]
+
+[COMPONENT]