Feat/branding guidelines

docs/developers/branding.mdx

@@ -0,0 +1,174 @@
+---
+sidebar_position: 99
+---
+
+# Branding
+
+This page provides guidance on how to correctly represent **Open Control Plane** in documentation, presentations, integrations, and community content.
+
+---
+
+## Logo
+
+The logo is the primary brand mark. Use it in headers, emails, presentations, and documentation.
+
+<div className="reference-grid">
+
+<div className="reference-card reference-card-compact" style={{textAlign: 'center'}}>
+  <img src="/docs/img/logo.png" alt="Open Control Plane Logo (Horizontal)" style={{maxHeight: '60px', width: 'auto', margin: '12px auto'}} />
+  <h3>Horizontal</h3>
+  <p>The preferred lockup for headers, emails, and wide contexts. Use on light backgrounds.</p>
+  <a href="/docs/img/logo.png" download className="reference-link">Download PNG →</a>
+</div>
+
+<div className="reference-card reference-card-compact" style={{textAlign: 'center', opacity: 0.6}}>
+  <div style={{fontSize: '40px', margin: '16px auto 12px', lineHeight: 1}}>🔜</div>
+  <h3>Stacked</h3>
+  <p>Icon above wordmark — for square or compact contexts such as slide decks and social cards.</p>
+  <span style={{fontSize: '0.8rem', color: 'var(--ifm-color-emphasis-500)', fontStyle: 'italic'}}>Coming Soon</span>
+</div>
+
+</div>
+
+---
+
+## Icons
+
+The axolotl mascot is used as a standalone icon in contexts where the full logo doesn't fit — avatars, app icons, favicons, and badges.
+
+<div className="reference-grid">
+
+<div className="reference-card reference-card-compact" style={{textAlign: 'center'}}>
+  <img src="/docs/img/co_axolotl.png" alt="Axolotl icon – Default" style={{maxHeight: '72px', width: 'auto', margin: '12px auto'}} />
+  <h3>Default</h3>
+  <p>Standard variant with background fill. Use in most contexts.</p>
+  <a href="/docs/img/co_axolotl.png" download className="reference-link">Download PNG →</a>
+</div>
+
+<div className="reference-card reference-card-compact" style={{textAlign: 'center'}}>
+  <img src="/docs/img/co_axolotl_transparent.png" alt="Axolotl icon – Transparent" style={{maxHeight: '72px', width: 'auto', margin: '12px auto'}} />
+  <h3>Transparent</h3>
+  <p>No background — ideal for overlaying on coloured or image backgrounds.</p>
+  <a href="/docs/img/co_axolotl_transparent.png" download className="reference-link">Download PNG →</a>
+</div>
+
+<div className="reference-card reference-card-compact" style={{textAlign: 'center'}}>
+  <img src="/docs/img/co_axolotl_mirrored.png" alt="Axolotl icon – Mirrored" style={{maxHeight: '72px', width: 'auto', margin: '12px auto'}} />
+  <h3>Mirrored</h3>
+  <p>Horizontally flipped variant for layouts that need the mascot facing the other way.</p>
+  <a href="/docs/img/co_axolotl_mirrored.png" download className="reference-link">Download PNG →</a>
+</div>
+
+<div className="reference-card reference-card-compact" style={{textAlign: 'center'}}>
+  <img src="/docs/img/co_axolotl.svg" alt="Axolotl icon – SVG" style={{maxHeight: '72px', width: 'auto', margin: '12px auto'}} />
+  <h3>SVG</h3>
+  <p>Vector format for print, large-format displays, and any scalable integration.</p>
+  <a href="/docs/img/co_axolotl.svg" download className="reference-link">Download SVG →</a>
+</div>
+
+</div>
+
+### Favicon
+
+<div style={{display: 'flex', alignItems: 'center', gap: '20px', padding: '16px', background: 'var(--ifm-color-emphasis-100)', borderRadius: '8px', margin: '16px 0'}}>
+  <img src="/docs/img/favicon.ico" alt="Favicon" style={{width: '32px', height: '32px'}} />
+  <div>
+    <strong>favicon.ico</strong> — 32×32px<br/>
+    <span style={{fontSize: '0.85rem', color: 'var(--ifm-color-emphasis-600)'}}>Used automatically by the documentation site. For custom integrations, request a PNG variant.</span>
+  </div>
+</div>
+
+---
+
+## Colors
+
+The brand palette is built on a single teal spectrum — from light mint to deep ocean. Shades are not interchangeable; each maps to a specific audience and context.
+
+<table style={{width: '100%', borderCollapse: 'collapse', marginTop: '16px', marginBottom: '24px'}}>
+  <thead>
+    <tr>
+      <th style={{width: '10%', padding: '10px 16px', background: 'var(--ifm-color-emphasis-100)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid var(--ifm-color-emphasis-300)', textAlign: 'left'}}>Swatch</th>
+      <th style={{width: '18%', padding: '10px 16px', background: 'var(--ifm-color-emphasis-100)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid var(--ifm-color-emphasis-300)', textAlign: 'left'}}>Token</th>
+      <th style={{width: '14%', padding: '10px 16px', background: 'var(--ifm-color-emphasis-100)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid var(--ifm-color-emphasis-300)', textAlign: 'left'}}>Hex</th>
+      <th style={{width: '20%', padding: '10px 16px', background: 'var(--ifm-color-emphasis-100)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid var(--ifm-color-emphasis-300)', textAlign: 'left'}}>Audience</th>
+      <th style={{padding: '10px 16px', background: 'var(--ifm-color-emphasis-100)', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid var(--ifm-color-emphasis-300)', textAlign: 'left'}}>Usage</th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      ['#C2FCEE', '--teal-2', '#C2FCEE', 'All / Accent', 'Subtle highlights, light-mode call-to-action tints, email accent text on dark backgrounds'],
+      ['#2CE0BF', '--teal-4', '#2CE0BF', 'All / Accent', 'Vibrant accent for badges, icons, hover states, and gradient endpoints'],
+      ['#049F9A', '--teal-6', '#049F9A', 'End Users', 'Primary brand colour — buttons, links, and UI elements targeting application end users'],
+      ['#02414C', '--teal-10', '#02414C', 'Platform Operators', 'Primary tone for operator-focused content, deep nav backgrounds, and section headers'],
+      ['#012931', '--teal-11', '#012931', 'Contributors', 'Darkest brand tone — contributor-facing surfaces (ghost button border), footers, deepest header gradients'],
+    ].map(([hex, token, code, audience, usage], i) => (
+      <tr key={i} style={{background: i % 2 === 0 ? 'transparent' : 'var(--ifm-color-emphasis-100)'}}>
+        <td style={{padding: '10px 16px', borderBottom: '1px solid var(--ifm-color-emphasis-200)'}}>
+          <div style={{width: '32px', height: '32px', borderRadius: '6px', background: hex, border: '1px solid var(--ifm-color-emphasis-300)', flexShrink: 0}} />
+        </td>
+        <td style={{padding: '10px 16px', fontSize: '0.85rem', borderBottom: '1px solid var(--ifm-color-emphasis-200)'}}><code>{token}</code></td>
+        <td style={{padding: '10px 16px', fontSize: '0.85rem', borderBottom: '1px solid var(--ifm-color-emphasis-200)'}}><code>{code}</code></td>
+        <td style={{padding: '10px 16px', fontSize: '0.85rem', borderBottom: '1px solid var(--ifm-color-emphasis-200)', fontWeight: 500, color: 'var(--ifm-color-emphasis-700)'}}>{audience}</td>
+        <td style={{padding: '10px 16px', fontSize: '0.85rem', borderBottom: '1px solid var(--ifm-color-emphasis-200)', color: 'var(--ifm-color-emphasis-700)'}}>{usage}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+:::tip Persona-driven colour selection
+Lighter teals (`--teal-6`, `--teal-7`) signal end-user-facing surfaces — the parts of the platform that application developers interact with daily. Darker teals (`--teal-10`, `--teal-11`) signal operator- and contributor-facing surfaces — administration, configuration, platform management, and open-source contribution CTAs. When in doubt, ask: *who is this UI for?*
+:::
+
+---
+
+## Naming
+
+### The correct name is **Open Control Plane**
+
+When referring to the project, always use the full name **Open Control Plane** (three words, each capitalised) or the abbreviation **OCP**. Both are correct.
+
+<table style={{width: '100%', borderCollapse: 'collapse', marginTop: '16px'}}>
+  <thead>
+    <tr>
+      <th style={{width: '50%', padding: '10px 16px', background: '#f0fdf4', color: '#15803d', fontWeight: 700, fontSize: '0.85rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid #22c55e', textAlign: 'left'}}>✓ Do</th>
+      <th style={{width: '50%', padding: '10px 16px', background: '#fef2f2', color: '#dc2626', fontWeight: 700, fontSize: '0.85rem', letterSpacing: '0.05em', textTransform: 'uppercase', borderBottom: '2px solid #ef4444', textAlign: 'left'}}>✗ Don't</th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      ['Open Control Plane', 'OpenControlPlane'],
+      ['OCP', 'open control plane'],
+      ['Open Control Plane (OCP)', 'Open control plane'],
+      ['the OCP platform', 'OCP Platform — redundant'],
+      ['openmcp-project (org/repo names)', 'the OCP tool — it\'s a platform'],
+    ].map(([good, bad], i) => (
+      <tr key={i} style={{background: i % 2 === 0 ? 'transparent' : 'var(--ifm-color-emphasis-100)'}}>
+        <td style={{padding: '10px 16px', fontSize: '0.9rem', borderBottom: '1px solid var(--ifm-color-emphasis-200)'}}><code style={{background: 'none', color: 'inherit', fontFamily: 'inherit'}}>{good}</code></td>
+        <td style={{padding: '10px 16px', fontSize: '0.9rem', borderBottom: '1px solid var(--ifm-color-emphasis-200)', color: 'var(--ifm-color-emphasis-600)'}}><s>{bad}</s></td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+:::tip In code vs. prose
+In code identifiers, CLI commands, and repository names, `openmcp` and `opencontrolplane` are acceptable as single-word forms. In all human-readable prose, use **Open Control Plane**.
+:::
+
+---
+
+## Avoid the "MCP" Abbreviation
+
+:::warning Don't use MCP as an abbreviation for this project
+**MCP** is widely established in the developer community as **Model Context Protocol** (Anthropic's open standard for AI tool integrations). Using MCP to refer to Open Control Plane's *Managed Control Planes* causes immediate confusion — especially at cloud-native and AI-adjacent conferences like KubeCon.
+:::
+
+When referring to a single instance of a control plane managed by the platform, use one of these instead:
+
+| Instead of… | Use… |
+|---|---|
+| MCP | **Managed Control Plane** (full form, first use) |
+| MCP | **control plane** (after first use in context) |
+| my MCP | **my control plane** |
+| MCP list | **control plane list** |
+
+If you are writing documentation or a blog post, introduce the full term **Managed Control Plane** on first use and then shorten to **control plane** — never to MCP.

src/css/custom.css

@@ -986,7 +986,81 @@ html[data-theme="dark"] .open-source-section .button--primary:hover {
   color: #000000 !important;
 }
 
-/* ===== Global link colors in light mode ===== */
+/* ===== Video Section ===== */
+.video-section {
+  padding: 80px 24px;
+  background: var(--ifm-background-color);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.video-section-inner {
+  max-width: 860px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.video-section-eyebrow {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--teal-6);
+  margin: 0 0 12px 0;
+}
+
+.video-section-title {
+  font-size: 2.2rem;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  color: var(--ifm-font-color-base);
+  margin: 0 0 16px 0;
+}
+
+.video-section-subtitle {
+  font-size: 1.05rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.6;
+  margin: 0 0 40px 0;
+}
+
+.video-embed-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 */
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(4, 159, 154, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.video-embed-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+[data-theme='dark'] .video-section {
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme='dark'] .video-embed-wrapper {
+  box-shadow: 0 20px 60px rgba(44, 224, 191, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+@media (max-width: 768px) {
+  .video-section-title {
+    font-size: 1.6rem;
+  }
+  .video-section {
+    padding: 60px 16px;
+  }
+}
+
+
 html[data-theme="light"] {
   --ifm-link-color: var(--c-accent);
   --ifm-link-hover-color: var(--c-accent);

src/pages/index.js

@@ -638,6 +638,27 @@ export default function Home() {
           </div>
         </section>
 
+        <section className="video-section">
+          <div className="container">
+            <div className="video-section-inner">
+              <p className="video-section-eyebrow">See it in action</p>
+              <h2 className="video-section-title">Watch the KubeCon Amsterdam Talk</h2>
+              <p className="video-section-subtitle">
+                See how OpenControlPlane enables teams to build, share, and adopt cloud-native control planes at scale.
+              </p>
+              <div className="video-embed-wrapper">
+                <iframe
+                  src="https://www.youtube-nocookie.com/embed/hR8hFht9sFA"
+                  title="OpenControlPlane – KubeCon Amsterdam"
+                  loading="lazy"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section className="get-started-section gray-white">
           <Link
             className="button button--primary button--lg"
@@ -1227,6 +1248,7 @@ spec:
             </div>
           </div>
         </section>
+
       </main>
     </Layout>
   );