Add Branding & Logos page with NWB artwork

config/_default/menus.yaml

@@ -124,6 +124,10 @@ main:
     weight: 5
     url: "faq/"
     parent: "Resources"
+  - name: "Branding & Logos"
+    weight: 7
+    url: "branding/"
+    parent: "Resources"
 
   # Contact
   - name: "Contact"
@@ -191,6 +195,9 @@ resources:
   - name: "FAQ"
     weight: 5
     url: "/faq"
+  - name: "Branding & Logos"
+    weight: 7
+    url: "/branding"
 
 the_standard:
   - name: "Specification"

content/branding.md

@@ -0,0 +1,259 @@
+---
+title: "Branding & Logos"
+summary: "Official Neurodata Without Borders logos, brand colors, and artwork, plus links to logos for NWB software."
+draft: false
+type: "page"
+---
+
+<style>
+.brand-notice {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  background-color: #fdf4ec;
+  border-left: 4px solid #d17128;
+  border-radius: 6px;
+  padding: 1.25rem 1.5rem;
+  margin: 0.5rem 0 2rem;
+}
+.brand-notice i {
+  color: #d17128;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+.brand-notice p {
+  margin: 0;
+}
+.brand-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
+  gap: 1.5rem;
+  margin: 1rem 0 2.5rem;
+}
+.brand-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e3e6ea;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.brand-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 220px;
+  padding: 1.5rem;
+  background-color: #f6f7f9;
+  border-bottom: 1px solid #e3e6ea;
+}
+.brand-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.brand-body {
+  padding: 1.25rem 1.5rem 1.5rem;
+  flex: 1;
+}
+.brand-body h3 {
+  font-size: 1.2rem;
+  margin: 0 0 0.4rem;
+  color: #114b7c;
+}
+.brand-body p {
+  font-size: 0.95rem;
+  color: #555;
+  margin: 0 0 1rem;
+}
+.content ul.brand-downloads {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.9rem;
+}
+.content ul.brand-downloads li {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0.45rem 0;
+  border-top: 1px solid #f0f1f3;
+}
+.brand-downloads li span {
+  color: #777;
+  white-space: nowrap;
+}
+.brand-downloads a {
+  text-decoration: none;
+}
+.brand-downloads a i {
+  margin-right: 0.35rem;
+}
+.brand-colors {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
+  gap: 1.5rem;
+  margin: 1rem 0 2.5rem;
+}
+.brand-swatch {
+  border: 1px solid #e3e6ea;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.brand-swatch .chip {
+  height: 110px;
+}
+.brand-swatch .info {
+  padding: 0.9rem 1.1rem;
+  font-size: 0.95rem;
+}
+.brand-swatch .info strong {
+  display: block;
+  font-size: 1.05rem;
+  margin-bottom: 0.2rem;
+}
+.brand-swatch .value {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.9rem;
+  color: #333;
+}
+.tool-logos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+  gap: 1rem;
+  margin: 1rem 0 2.5rem;
+}
+.tool-logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 1rem;
+  border: 1px solid #e3e6ea;
+  border-radius: 10px;
+  text-align: center;
+  text-decoration: none;
+  color: #114b7c;
+  font-weight: 600;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.tool-logo:hover {
+  border-color: #d17128;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+.tool-logo .tool-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 90px;
+  width: 100%;
+}
+.tool-logo img {
+  max-height: 90px;
+  max-width: 100%;
+  object-fit: contain;
+}
+</style>
+
+The Neurodata Without Borders (NWB) logo and related artwork are available here for presentations, posters, websites, and other materials that refer to NWB.
+
+<div class="brand-notice">
+  <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
+  <p><strong>Please ask before using the NWB logo.</strong> NWB does not yet have a formal branding usage policy. Until one is in place, please request permission on the <a href="https://github.com/NeurodataWithoutBorders/helpdesk/discussions" target="_blank">NWB Help Desk</a> before using the NWB logo or artwork, and briefly describe where and how you plan to use it.</p>
+</div>
+
+## NWB Logo
+
+The logo combines the hexagonal "brain" mark with the "Neurodata Without Borders" wordmark. Use the vector (SVG or PDF) files whenever possible, since they scale to any size without losing quality. "Transparent" files have no background and are designed for light backgrounds. "White background" files include a solid white background.
+
+<div class="brand-grid">
+  <div class="brand-card">
+    <div class="brand-preview"><img src="/branding/nwb-logo/logo_brain_text_transp_hor.svg" alt="NWB logo, horizontal layout"></div>
+    <div class="brand-body">
+      <h3>Horizontal</h3>
+      <p>Mark and wordmark side by side. The best choice for headers, slides, and banners.</p>
+      <ul class="brand-downloads">
+        <li><a href="/branding/nwb-logo/logo_brain_text_transp_hor.svg" download><i class="bi bi-download"></i>SVG, transparent</a><span>vector</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_text_transp_hor.png" download><i class="bi bi-download"></i>PNG, transparent</a><span>1241 × 226</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_text_transp_hor_big.png" download><i class="bi bi-download"></i>PNG, transparent, large</a><span>10938 × 1985</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_text_white_hor.png" download><i class="bi bi-download"></i>PNG, white background</a><span>1241 × 226</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="brand-card">
+    <div class="brand-preview"><img src="/branding/nwb-logo/logo_brain_text_transp_ver.svg" alt="NWB logo, stacked layout"></div>
+    <div class="brand-body">
+      <h3>Stacked</h3>
+      <p>Mark above the wordmark. Works well for posters, title slides, and square spaces.</p>
+      <ul class="brand-downloads">
+        <li><a href="/branding/nwb-logo/logo_brain_text_transp_ver.svg" download><i class="bi bi-download"></i>SVG, transparent</a><span>vector</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_text_transp_ver.png" download><i class="bi bi-download"></i>PNG, transparent</a><span>2550 × 1795</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_text_white_ver.svg" download><i class="bi bi-download"></i>SVG, white background</a><span>vector</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_text_white_ver.pdf" download><i class="bi bi-download"></i>PDF, white background</a><span>vector</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="brand-card">
+    <div class="brand-preview"><img src="/branding/nwb-logo/logo_brain_transp.svg" alt="NWB hexagonal brain mark"></div>
+    <div class="brand-body">
+      <h3>Brain Mark</h3>
+      <p>The hexagonal mark on its own. Use it for icons, avatars, and small spaces where the wordmark would be illegible.</p>
+      <ul class="brand-downloads">
+        <li><a href="/branding/nwb-logo/logo_brain_transp.svg" download><i class="bi bi-download"></i>SVG, transparent</a><span>vector</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_transp.png" download><i class="bi bi-download"></i>PNG, transparent</a><span>523 × 436</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_transp_512x512.png" download><i class="bi bi-download"></i>PNG, transparent, square</a><span>512 × 512</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_white_512x512.svg" download><i class="bi bi-download"></i>SVG, white background, square</a><span>vector</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_white_1400x1400.png" download><i class="bi bi-download"></i>PNG, white background, square</a><span>1400 × 1400</span></li>
+        <li><a href="/branding/nwb-logo/logo_brain_white.pdf" download><i class="bi bi-download"></i>PDF, white background</a><span>vector</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="brand-card">
+    <div class="brand-preview"><img src="/branding/nwb-logo/logo_text_transp.png" alt="Neurodata Without Borders wordmark"></div>
+    <div class="brand-body">
+      <h3>Wordmark</h3>
+      <p>The "Neurodata Without Borders" text on its own, for use where the mark already appears nearby.</p>
+      <ul class="brand-downloads">
+        <li><a href="/branding/nwb-logo/logo_text_transp.png" download><i class="bi bi-download"></i>PNG, transparent</a><span>915 × 143</span></li>
+        <li><a href="/branding/nwb-logo/logo_text_white.png" download><i class="bi bi-download"></i>PNG, white background</a><span>915 × 143</span></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+Additional variants, including letter-size source sheets, are in the <a href="https://github.com/NeurodataWithoutBorders/neurodatawithoutborders.github.io/tree/main/static/branding" target="_blank">branding folder of the NWB website repository on GitHub</a>.
+
+## Brand Colors
+
+<div class="brand-colors">
+  <div class="brand-swatch">
+    <div class="chip" style="background-color: #114b7c;"></div>
+    <div class="info"><strong>Blue</strong><span class="value">#114b7c</span><br><span class="value">rgb(17, 75, 124)</span></div>
+  </div>
+  <div class="brand-swatch">
+    <div class="chip" style="background-color: #d17128;"></div>
+    <div class="info"><strong>Orange</strong><span class="value">#d17128</span><br><span class="value">rgb(209, 113, 40)</span></div>
+  </div>
+  <div class="brand-swatch">
+    <div class="chip" style="background-color: #8f8f8f;"></div>
+    <div class="info"><strong>Gray</strong><span class="value">#8f8f8f</span><br><span class="value">rgb(143, 143, 143)</span></div>
+  </div>
+</div>
+
+## NWB Software Logos
+
+Logos for NWB software tools are maintained in each tool's own repository. Select a tool to browse its logo files on GitHub.
+
+<div class="tool-logos">
+  <a class="tool-logo" href="https://github.com/NeurodataWithoutBorders/pynwb/tree/dev/docs/source/figures" target="_blank"><span class="tool-img"><img src="/images/pynwb_logo_framed.png" alt=""></span>PyNWB</a>
+  <a class="tool-logo" href="https://github.com/NeurodataWithoutBorders/matnwb/tree/main/logo" target="_blank"><span class="tool-img"><img src="/images/matnwb_logo_framed.png" alt=""></span>MatNWB</a>
+  <a class="tool-logo" href="https://github.com/NeurodataWithoutBorders/nwbinspector/tree/dev/docs/logo" target="_blank"><span class="tool-img"><img src="/images/nwbinspector_logo_framed.png" alt=""></span>NWB Inspector</a>
+  <a class="tool-logo" href="https://github.com/NeurodataWithoutBorders/nwb-guide/tree/main/docs/assets" target="_blank"><span class="tool-img"><img src="/images/guide_logo_framed.png" alt=""></span>NWB GUIDE</a>
+  <a class="tool-logo" href="https://github.com/NeurodataWithoutBorders/aqnwb/tree/main/resources/logo" target="_blank"><span class="tool-img"><img src="/images/aqnwb_logo.png" alt=""></span>AqNWB</a>
+  <a class="tool-logo" href="https://github.com/nwb-extensions/nwb-extensions.github.io/tree/main/images" target="_blank"><span class="tool-img"><img src="/images/ndxcatalog_logo_framed.png" alt=""></span>NWB Extensions</a>
+  <a class="tool-logo" href="https://github.com/NeurodataWithoutBorders/nwb-benchmarks/tree/main/docs/assets" target="_blank"><span class="tool-img"><img src="/images/nwb_benchmarks_logo.png" alt=""></span>NWB Benchmarks</a>
+  <a class="tool-logo" href="https://github.com/hdmf-dev/hdmf/tree/dev/docs/source" target="_blank"><span class="tool-img"><img src="/images/hdmf_logo_framed.png" alt=""></span>HDMF</a>
+  <a class="tool-logo" href="https://github.com/hdmf-dev/hdmf-zarr/tree/dev/docs/source/figures" target="_blank"><span class="tool-img"><img src="/images/hdmf_zarr_logo_framed.png" alt=""></span>HDMF Zarr</a>
+  <a class="tool-logo" href="https://github.com/catalystneuro/neuroconv/tree/main/docs/img" target="_blank"><span class="tool-img"><img src="/images/nwbconversiontools_logo_framed.png" alt=""></span>NeuroConv</a>
+</div>