Orcha Community & Blog — Design Guide

Internal reference for building new community and blog pages. Last updated: March 2026

Quick Start Checklist

When creating a new blog post:

1. Copy the Blog Post Template below
2. Use only the 3 approved accent colors (blue, amber, emerald) + semantic red
3. Create both EN and DE versions simultaneously
4. Add hreflang tags linking both versions
5. Add a card entry to both www/en/community/index.html and www/de/community/index.html
6. Include all required sections: head, navbar, breadcrumb, article header, body, newsletter CTA, footer, cookie banner, scroll-to-top
7. Test on mobile (responsive breakpoints: md: 768px, lg: 1024px)
8. Adjust all relative paths (../../, ../../../, ../../../../) based on nesting depth

1. Color Palette

Primary — Blue (Brand)

The main accent for links, badges, callouts, hover states, and CTA elements.

Highlight — Amber

For prompts, tips, warnings, and intermediate-level indicators.

Positive — Emerald

For success states, positive indicators, and beginner-level badges.

Semantic Red — Errors Only

Red is only for form errors, critical compliance warnings, and genuine danger states. Never use red for decoration or card thumbnails.

Neutrals — Zinc Scale

Used for text, backgrounds, borders, and surfaces. No changes from current implementation.

Retired Colors — Do NOT Use

These colors appeared in older pages and should not be used in new pages:

• teal-* — replace with brand / blue-50
• purple-* — replace with brand
• rose-* — replace with amber for caution, brand for advanced level
• green-* — replace with emerald-* everywhere

2. Typography

Font Stack

Sans:  Inter (400, 500, 600, 700) — body text, headings, UI
Mono:  JetBrains Mono (400, 500, 700) — badges, code blocks, labels

Loaded via Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />

Type Scale

3. Spacing & Layout

Container Widths

Page Padding

Content Grids

Border Radius

4. Component Catalog

4.1 Navbar

Identical across all pages. Adjust relative paths based on page depth.

<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
  <nav class="max-w-6xl mx-auto px-6 md:px-12 flex items-center justify-between h-16">
    <a href="[path-to-home]/index.html" class="flex items-center">
      <img src="[path-to-root]/logos/orcha-logo.png" alt="Orcha" class="h-8 w-auto" />
    </a>
    <div class="hidden md:flex items-center gap-8">
      <a href="[home]" class="text-sm font-medium text-zinc-600 hover:text-brand transition-colors duration-300">Home</a>
      <a href="[home]#product" class="text-sm font-medium text-zinc-600 hover:text-brand transition-colors duration-300">Product</a>
      <a href="[home]#pricing" class="text-sm font-medium text-zinc-600 hover:text-brand transition-colors duration-300">Pricing</a>
      <a href="[about]" class="text-sm font-medium text-zinc-600 hover:text-brand transition-colors duration-300">About Us</a>
      <a href="[contact]" class="text-sm font-medium text-zinc-600 hover:text-brand transition-colors duration-300">Contact</a>
      <span class="w-px h-4 bg-zinc-200"></span>
      <a href="[community]" class="text-sm font-medium text-brand transition-colors duration-300">Community</a>
    </div>
    <div class="flex items-center gap-4">
      <div class="hidden md:flex items-center gap-1 text-xs font-medium">
        <a href="[de-version]" class="px-2 py-1 rounded text-zinc-500 hover:text-zinc-900 transition-colors">DE</a>
        <a href="[en-version]" class="px-2 py-1 rounded bg-zinc-100 text-zinc-900">EN</a>
      </div>
      <div class="hidden md:block">
        <a href="https://calendar.app.google/8S3P2tR6J6dosLvJA" target="_blank" rel="noopener noreferrer"
           class="inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 cursor-pointer bg-zinc-950 text-white hover:bg-brand border border-zinc-950 hover:border-brand hover:shadow-lg hover:shadow-brand/20 hover:scale-[1.02] active:scale-[0.98] px-4 py-2 text-xs">
          Book a Demo
        </a>
      </div>
      <button id="mobile-menu-btn" class="md:hidden p-2 text-zinc-600 hover:text-zinc-950 transition-colors" aria-label="Open menu">
        <svg id="menu-icon-open" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18M3 6h18M3 18h18"/></svg>
        <svg id="menu-icon-close" class="w-5 h-5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </div>
  </nav>
  <!-- Mobile menu (same links, block layout) -->
  <div id="mobile-menu" class="hidden md:hidden border-t border-zinc-100 bg-white px-6 py-4 space-y-4">
    <!-- Same nav links as above with class="block text-sm font-medium text-zinc-600 hover:text-brand transition-colors" -->
    <!-- Language switcher + CTA button at bottom -->
  </div>
</header>

Active page link: The currently active section link gets text-brand instead of text-zinc-600. On community pages, the "Community" link is always active (brand-colored).

Language switcher: Active language gets bg-zinc-100 text-zinc-900. Inactive gets text-zinc-500 hover:text-zinc-900.

4.2 Breadcrumb (Blog Posts Only)

<nav class="mb-8" data-aos="fade-up">
  <a href="../../index.html"
     class="inline-flex items-center gap-2 text-sm font-medium text-zinc-600 hover:text-brand px-4 py-2 rounded-full border border-zinc-200 hover:border-brand/30 transition-all">
    &larr; Back to Community
  </a>
</nav>

4.3 Article Header

<header class="mb-12" data-aos="fade-up" data-aos-delay="100">
  <div class="flex items-center gap-3 mb-4">
    <span class="text-[11px] font-mono uppercase tracking-wider text-brand bg-brand/10 px-2.5 py-0.5 rounded-full">Guide</span>
    <span class="text-sm text-zinc-400">7 min read</span>
  </div>
  <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">[Title]</h1>
  <p class="text-lg text-zinc-600 leading-relaxed">[Subtitle / description]</p>
  <div class="flex items-center gap-4 mt-8 pt-8 border-t border-zinc-100">
    <div class="w-10 h-10 rounded-full bg-brand/10 flex items-center justify-center">
      <span class="text-sm font-semibold text-brand">O</span>
    </div>
    <div>
      <p class="text-sm font-medium">Orcha Team</p>
      <p class="text-xs text-zinc-400">[Date]</p>
    </div>
  </div>
</header>

4.4 Category Badges

<!-- Guide (brand blue — default for most posts) -->
<span class="text-[11px] font-mono uppercase tracking-wider text-brand bg-brand/10 px-2.5 py-0.5 rounded-full">Guide</span>

<!-- Pinned Resource (amber — only for the featured/pinned card) -->
<span class="text-[11px] font-mono uppercase tracking-wider text-amber-600 bg-amber-50 px-2.5 py-0.5 rounded-full">Pinned Resource</span>

<!-- Video (brand blue — standardized) -->
<span class="text-[11px] font-mono uppercase tracking-wider text-brand bg-brand/10 px-2.5 py-0.5 rounded-full">Video</span>

<!-- Living Resource (amber — for regularly updated posts) -->
<span class="text-[11px] font-mono uppercase tracking-wider text-amber-600 bg-amber-50 px-2.5 py-0.5 rounded-full">Living Resource</span>

4.5 Difficulty Badges (for Projects / Tutorials)

Three tiers using the three accent colors:

<!-- Beginner (emerald) -->
<span class="text-[10px] font-mono uppercase tracking-wider text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full">Beginner</span>

<!-- Intermediate (amber) -->
<span class="text-[10px] font-mono uppercase tracking-wider text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Intermediate</span>

<!-- Advanced (brand blue) -->
<span class="text-[10px] font-mono uppercase tracking-wider text-brand bg-brand/10 px-2 py-0.5 rounded-full">Advanced</span>

4.6 Callout Box — Insight (Blue)

For key takeaways, important information, and "good to know" content.

<div class="my-10 p-6 md:p-8 bg-brand/5 border border-brand/15 rounded-2xl">
  <div class="flex items-start gap-4">
    <div class="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center flex-shrink-0 mt-0.5">
      <svg class="w-5 h-5 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>
      </svg>
    </div>
    <div>
      <p class="text-sm font-semibold text-zinc-900 mb-1">[Title]</p>
      <p class="text-sm text-zinc-600 leading-relaxed">[Body text]</p>
    </div>
  </div>
</div>

4.7 Callout Box — Tip (Blue, Inline)

Lighter variant for short tips within prose content.

<div class="my-6 p-4 bg-brand/5 border border-brand/15 rounded-xl text-sm text-zinc-600 leading-relaxed">
  <strong>[Tip label]:</strong> [Tip content]
</div>

4.8 Callout Box — Warning / Note (Amber)

For important notes, pricing caveats, and cautionary content.

<div class="my-10 p-6 md:p-8 bg-amber-50 border border-amber-200 rounded-2xl">
  <div class="flex items-start gap-4">
    <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0 mt-0.5">
      <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
      </svg>
    </div>
    <div>
      <p class="text-sm font-semibold text-zinc-900 mb-1">[Title]</p>
      <p class="text-sm text-zinc-600 leading-relaxed">[Body text]</p>
    </div>
  </div>
</div>

4.9 Callout Box — Critical Warning (Red)

Only for security, compliance, data-loss, or GDPR warnings. Never for decoration.

<div class="not-prose my-8 p-6 bg-red-50 rounded-2xl border border-red-200">
  <p class="text-base font-semibold mb-2 text-red-800">[Critical warning title]</p>
  <p class="text-sm text-red-700">[Warning body]</p>
</div>

4.10 Prompt / Code Box

For copy-paste prompts and code snippets.

<div class="my-10 p-6 md:p-8 bg-zinc-50 border border-zinc-200 rounded-2xl" data-aos="fade-up">
  <div class="flex items-center gap-3 mb-4">
    <div class="w-8 h-8 rounded-lg bg-brand/10 flex items-center justify-center">
      <span class="text-xs font-bold text-brand">1</span>
    </div>
    <h3 class="text-sm font-bold text-zinc-900">[Prompt title]</h3>
  </div>
  <div class="bg-white border border-zinc-200 rounded-xl p-4 text-sm text-zinc-700 leading-relaxed font-mono whitespace-pre-wrap">[Prompt content]</div>
</div>

4.11 Info Box (Neutral)

For source attribution, minor notes, or disclaimers.

<div class="mt-10 p-4 bg-zinc-50 border border-zinc-200 rounded-xl text-sm text-zinc-500">
  <p>[Content]</p>
</div>

4.12 Glossary / Definition Card

<div class="bg-zinc-50 rounded-xl border border-zinc-200 p-5">
  <p class="font-bold text-zinc-900 mb-1">[Term]</p>
  <p class="text-sm text-zinc-700 mb-2">[Definition]</p>
  <p class="text-sm text-zinc-500 italic">Think of it as: [analogy]</p>
</div>

4.13 Feature / Benefit Card

<div class="p-6 bg-white border border-zinc-200 rounded-2xl shadow-sm">
  <div class="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center mb-4">
    <svg class="w-5 h-5 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      [icon path]
    </svg>
  </div>
  <h4 class="text-sm font-bold text-zinc-900 mb-2">[Title]</h4>
  <p class="text-sm text-zinc-600 leading-relaxed">[Description]</p>
</div>

4.14 Content Card (Community Index)

All guide cards use the same gradient background (from-blue-50 to-brand/15). Cards are differentiated by their icon, not their color.

<a href="./posts/[slug]/index.html" data-category="guide" data-aos="fade-up"
   class="content-card group block rounded-2xl border border-zinc-200 bg-white overflow-hidden hover:shadow-lg hover:border-brand/30 transition-all duration-300 hover:-translate-y-1">
  <div class="aspect-[16/9] bg-gradient-to-br from-blue-50 to-brand/15 flex items-center justify-center relative">
    <div class="w-16 h-16 rounded-2xl bg-white/80 backdrop-blur flex items-center justify-center shadow-sm">
      <svg class="w-8 h-8 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        [topic-specific icon path]
      </svg>
    </div>
  </div>
  <div class="p-6">
    <div class="flex items-center gap-2 mb-3">
      <span class="text-[11px] font-mono uppercase tracking-wider text-brand bg-brand/10 px-2.5 py-0.5 rounded-full">Guide</span>
      <span class="text-[11px] text-zinc-400">[X] min read</span>
    </div>
    <h3 class="text-lg font-semibold mb-2 group-hover:text-brand transition-colors">[Title]</h3>
    <p class="text-sm text-zinc-600 leading-relaxed">[Description]</p>
  </div>
</a>

4.15 Featured / Pinned Card (Community Index)

Used for the topmost pinned resource. Uses amber to distinguish from regular cards.

<a href="./posts/[slug]/index.html" data-aos="fade-up"
   class="group block rounded-2xl border-2 border-brand/20 bg-gradient-to-br from-brand/5 to-white overflow-hidden hover:shadow-xl hover:border-brand/40 transition-all duration-300 hover:-translate-y-1">
  <div class="p-8 md:p-10 flex flex-col md:flex-row gap-6 md:gap-10 items-start">
    <div class="flex-shrink-0 w-14 h-14 rounded-2xl bg-amber-100 flex items-center justify-center">
      <svg class="w-7 h-7 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        [star or relevant icon]
      </svg>
    </div>
    <div class="flex-1">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-[11px] font-mono uppercase tracking-wider text-amber-600 bg-amber-50 px-2.5 py-0.5 rounded-full">Pinned Resource</span>
        <span class="text-[11px] text-zinc-400">Updated regularly</span>
      </div>
      <h2 class="text-xl md:text-2xl font-bold mb-2 group-hover:text-brand transition-colors">[Title]</h2>
      <p class="text-sm text-zinc-600 leading-relaxed max-w-2xl">[Description]</p>
      <span class="inline-flex items-center gap-1 mt-4 text-sm font-medium text-brand group-hover:gap-2 transition-all">
        Read now
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      </span>
    </div>
  </div>
</a>

4.16 Quick Nav / Jump Links

Use when an article has 4+ sections.

<div class="mb-12 p-6 bg-zinc-50 rounded-2xl border border-zinc-200">
  <p class="text-sm font-semibold mb-3">Jump to section</p>
  <div class="flex flex-wrap gap-2">
    <a href="#section-id" class="text-xs font-medium text-brand bg-brand/10 px-3 py-1.5 rounded-full hover:bg-brand/20 transition-colors">[Section name]</a>
    <!-- repeat for each section -->
  </div>
</div>

4.17 Newsletter CTA (End of Blog Post)

<div class="mt-12 p-8 md:p-10 bg-brand/5 rounded-2xl border border-brand/10 text-center" data-aos="fade-up">
  <div class="w-12 h-12 rounded-xl bg-brand/10 flex items-center justify-center mx-auto mb-4">
    <svg class="w-6 h-6 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
    </svg>
  </div>
  <h3 class="text-xl font-bold mb-2">[CTA heading]</h3>
  <p class="text-sm text-zinc-600 mb-6">[CTA description]</p>
  <form id="newsletter-form" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto" onsubmit="return handleNewsletterSubmit(event)">
    <input type="email" required placeholder="Your email address"
           class="flex-1 px-4 py-3 rounded-full border border-zinc-300 text-sm focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20 transition-all" />
    <input type="text" name="_hp" style="position:absolute;left:-9999px" tabindex="-1" autocomplete="off" />
    <button type="submit" data-loading="Subscribing..."
            class="inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 cursor-pointer bg-zinc-950 text-white hover:bg-brand border border-zinc-950 hover:border-brand hover:shadow-lg hover:shadow-brand/20 hover:scale-[1.02] active:scale-[0.98] px-6 py-3 text-sm whitespace-nowrap">
      Subscribe
    </button>
  </form>
  <p id="newsletter-success" class="hidden mt-4 text-sm text-emerald-600 font-medium">Thanks for subscribing!</p>
  <p id="newsletter-error" class="hidden mt-4 text-sm text-red-600 font-medium">Something went wrong. Please try again.</p>
</div>

4.18 Filter Tabs (Community Index)

<div class="flex items-center gap-2 flex-wrap" id="filter-tabs">
  <button data-filter="all" class="filter-tab active px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 bg-zinc-950 text-white">All</button>
  <button data-filter="guide" class="filter-tab px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200">Guides</button>
  <button data-filter="video" class="filter-tab px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200">Videos</button>
</div>

Active state: bg-zinc-950 text-white. Inactive state: bg-zinc-100 text-zinc-600 hover:bg-zinc-200.

4.19 Scroll-to-Top Button

<button id="scroll-to-top"
        class="hidden fixed bottom-6 right-6 z-40 w-10 h-10 rounded-full bg-zinc-950 text-white flex items-center justify-center shadow-lg hover:bg-brand transition-colors duration-200 cursor-pointer"
        style="opacity:0;transform:scale(0.8);transition:opacity 0.2s,transform 0.2s"
        aria-label="Scroll to top">
  <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/>
  </svg>
</button>

4.20 Cookie Banner

<div id="cookie-banner" class="hidden fixed bottom-0 inset-x-0 z-50 p-4"
     style="transform:translateY(80px);opacity:0;transition:transform 0.3s ease,opacity 0.3s ease">
  <div class="max-w-xl mx-auto bg-white border border-zinc-200 rounded-2xl shadow-lg px-6 py-4 flex items-center justify-between gap-4">
    <p class="text-sm text-zinc-600">This website uses only technically necessary cookies.</p>
    <button id="cookie-accept"
            class="text-sm font-semibold text-white bg-zinc-950 hover:bg-brand px-4 py-2 rounded-full transition-colors whitespace-nowrap cursor-pointer">
      Got it
    </button>
  </div>
</div>

4.21 Footer

<footer class="bg-zinc-950 text-white">
  <div class="max-w-6xl mx-auto px-6 md:px-12 py-16">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
      <div class="md:col-span-5">
        <span class="text-lg font-bold tracking-tight">orcha</span>
        <p class="mt-4 text-sm text-zinc-400 max-w-xs leading-relaxed">[Tagline]</p>
        <div class="mt-4 flex items-center gap-3">
          <span class="text-[10px] font-mono uppercase tracking-widest text-zinc-500 border border-zinc-700 rounded-full px-3 py-1">GDPR</span>
        </div>
      </div>
      <div class="md:col-span-2">
        <h4 class="text-sm font-semibold mb-4 text-zinc-300">Product</h4>
        <ul class="space-y-2">
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Features</a></li>
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Pricing</a></li>
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Integrations</a></li>
        </ul>
      </div>
      <div class="md:col-span-2">
        <h4 class="text-sm font-semibold mb-4 text-zinc-300">Company</h4>
        <ul class="space-y-2">
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">About Us</a></li>
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Community</a></li>
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Contact</a></li>
        </ul>
      </div>
      <div class="md:col-span-2">
        <h4 class="text-sm font-semibold mb-4 text-zinc-300">Legal</h4>
        <ul class="space-y-2">
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Privacy Policy</a></li>
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Legal Notice</a></li>
          <li><a href="[link]" class="text-sm text-zinc-400 hover:text-brand transition-colors duration-300">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="border-t border-zinc-800 mt-12 pt-8 text-xs text-zinc-500 text-center">
      &copy; 2026 Orcha. All rights reserved.
    </div>
  </div>
</footer>

5. Interaction Patterns

Hover States

Animations (AOS)

All scroll-triggered animations use AOS (Animate On Scroll):

<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

• Use data-aos="fade-up" on major sections
• Stagger with data-aos-delay="100", "200", etc. (increment by 50-100ms)
• AOS is initialized in main.js with duration: 600, easing: 'ease-out', once: true, offset: 100

6. Prose Styles

Article body text wraps in a <div class="prose">. The .prose class is defined in css/globals.css:

• h2: 1.25rem, semibold (600), margin-top 2.5rem, margin-bottom 1rem, color #09090b
• p: color #52525b, line-height 1.75, margin-bottom 1rem
• ul: disc style, padding-left 1.5rem, color #52525b
• li: line-height 1.75, margin-bottom 0.5rem
• a: color #0078d4, underlined with 2px offset, hover #005a9e

When placing custom components (callout boxes, prompt boxes, grids) inside a prose section, close the </div> before the component and reopen <div class="prose"> after it. Alternatively, wrap the custom component in a not-prose class.

7. Tailwind Config (Canonical)

Every page must include this identical config block:

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: '#0078d4',
          'brand-hover': '#005a9e',
          'brand-light': '#e6f2fc',
          'surface-dark': '#18181b',
          'text-primary': '#09090b',
          'text-secondary': '#52525b',
          'text-muted': '#a1a1aa',
        },
        fontFamily: {
          sans: ['Inter', 'sans-serif'],
          mono: ['JetBrains Mono', 'monospace'],
        },
      },
    },
  }
</script>

8. Required Scripts & Dependencies

Every page includes these in the <head>:

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />

<!-- Tailwind CDN + config (see section 7) -->

<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />

<!-- Custom CSS -->
<link rel="stylesheet" href="[path-to-root]/css/globals.css" />

And these before </body>:

<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script src="[path-to-root]/js/main.js"></script>
<script src="[path-to-root]/js/community-forms.js"></script>

9. Blog Post Template

Full HTML skeleton for a new blog post. Replace all [placeholders].

<!DOCTYPE html>
<html lang="[en|de]">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>[Post Title] – Orcha Community</title>
  <meta name="description" content="[Meta description, ~155 chars]" />

  <!-- Open Graph -->
  <meta property="og:title" content="[Post Title]" />
  <meta property="og:description" content="[Short description]" />
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="[en_US|de_DE]" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="[Post Title]" />
  <meta name="twitter:description" content="[Short description]" />

  <!-- Favicon -->
  <link rel="icon" href="../../../../logos/orcha-icon.png" type="image/png" />

  <!-- Hreflang -->
  <link rel="alternate" hreflang="en" href="https://getorcha.com/en/community/posts/[en-slug]/" />
  <link rel="alternate" hreflang="de" href="https://getorcha.com/de/community/posts/[de-slug]/" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: '#0078d4',
            'brand-hover': '#005a9e',
            'brand-light': '#e6f2fc',
            'surface-dark': '#18181b',
            'text-primary': '#09090b',
            'text-secondary': '#52525b',
            'text-muted': '#a1a1aa',
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
            mono: ['JetBrains Mono', 'monospace'],
          },
        },
      },
    }
  </script>

  <!-- AOS -->
  <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />

  <!-- Custom CSS -->
  <link rel="stylesheet" href="../../../../css/globals.css" />
</head>
<body class="font-sans antialiased">

  <!-- NAVBAR (see section 4.1 — adjust paths) -->
  <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
    <!-- ... full navbar ... -->
  </header>

  <main class="min-h-screen">
    <article class="pt-24 md:pt-32 pb-20 md:pb-28 px-6 md:px-12 lg:px-20">
      <div class="max-w-3xl mx-auto">

        <!-- Breadcrumb (section 4.2) -->
        <nav class="mb-8" data-aos="fade-up">
          <a href="../../index.html" class="inline-flex items-center gap-2 text-sm font-medium text-zinc-600 hover:text-brand px-4 py-2 rounded-full border border-zinc-200 hover:border-brand/30 transition-all">
            &larr; Back to Community
          </a>
        </nav>

        <!-- Article Header (section 4.3) -->
        <header class="mb-12" data-aos="fade-up" data-aos-delay="100">
          <div class="flex items-center gap-3 mb-4">
            <span class="text-[11px] font-mono uppercase tracking-wider text-brand bg-brand/10 px-2.5 py-0.5 rounded-full">Guide</span>
            <span class="text-sm text-zinc-400">[X] min read</span>
          </div>
          <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">[Title]</h1>
          <p class="text-lg text-zinc-600 leading-relaxed">[Subtitle]</p>
          <div class="flex items-center gap-4 mt-8 pt-8 border-t border-zinc-100">
            <div class="w-10 h-10 rounded-full bg-brand/10 flex items-center justify-center">
              <span class="text-sm font-semibold text-brand">O</span>
            </div>
            <div>
              <p class="text-sm font-medium">Orcha Team</p>
              <p class="text-xs text-zinc-400">[Date]</p>
            </div>
          </div>
        </header>

        <!-- Article Body -->
        <div class="prose" data-aos="fade-up" data-aos-delay="200">
          <p>[First paragraph]</p>
          <h2>[Section heading]</h2>
          <p>[Content]</p>
        </div>

        <!-- Custom components go between prose sections -->
        <!-- Use callout boxes (4.6-4.9), prompt boxes (4.10), grids, etc. -->

        <div class="prose" data-aos="fade-up">
          <h2>[Next section]</h2>
          <p>[Content]</p>
        </div>

        <!-- Newsletter CTA (section 4.17) -->
        <div class="mt-12 p-8 md:p-10 bg-brand/5 rounded-2xl border border-brand/10 text-center" data-aos="fade-up">
          <!-- ... full newsletter form ... -->
        </div>

      </div>
    </article>
  </main>

  <!-- Scroll to Top (section 4.19) -->
  <!-- Footer (section 4.21) -->
  <!-- Cookie Banner (section 4.20) -->

  <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
  <script src="../../../../js/main.js"></script>
  <script src="../../../../js/community-forms.js"></script>
</body>
</html>

10. File Structure Convention

www/
  css/
    globals.css              -- custom CSS (gradient-text, card-premium, prose, etc.)
  js/
    main.js                  -- AOS init, mobile menu, cookie banner, scroll-to-top
    community-forms.js       -- newsletter + topic suggestion form handlers
  logos/
    orcha-logo.png           -- black/transparent logo (navbar)
    orcha-icon.png           -- white icon (favicon)
  [lang]/                    -- en/ or de/
    community/
      index.html             -- community listing page
      posts/
        [slug]/
          index.html          -- individual blog post

Slug convention: Use lowercase kebab-case in the target language. EN: ai-as-a-coworker. DE: ki-als-kollege.

11. Do's and Don'ts

Do

• Use brand blue as the dominant accent — badges, callouts, links, hover borders
• Use amber for prompts, tips, warnings, and "pinned/living resource" flags
• Use emerald for success messages, positive indicators, and beginner-level badges
• Keep all index card gradients as from-blue-50 to-brand/15 for visual cohesion
• Create both EN and DE versions of every post simultaneously
• Add hreflang tags linking both language versions
• End every article with the Newsletter CTA component
• Use the .prose class for body text, not-prose wrapper for custom components within prose
• Use data-aos="fade-up" on major content sections
• Keep article body within max-w-3xl mx-auto
• Include a honeypot input (name="_hp") in all forms
• Use SVG icons from Heroicons (outline style, stroke-width="1.5" or "2")

Don't

• Use teal, purple, rose, or green (these are retired)
• Use red for anything other than form errors and critical compliance warnings
• Assign unique gradient colors to each index card (causes rainbow fragmentation)
• Use more than 3 accent colors + semantic red on any single page
• Skip the breadcrumb on article pages
• Use inline styles for colors or spacing — use Tailwind utility classes
• Forget the cookie banner, scroll-to-top button, or honeypot field
• Use different Tailwind configs across pages — always copy from section 7
• Add new CSS classes to globals.css without documenting them here