index.html

---
layout: default
title: Commons — The Home for Building Living Systems
---

<style>
  :root {
    --brand-blue: #3AAADC;
    --brand-light-blue: #f4f8fa;
    --brand-green: #3AAADC;
    --text-dark: #2c3e50;
    --text-light: #5a738e;
    --border-color: #e6e9ed;
  }

  .hero-section {
    background: var(--brand-light-blue);
    text-align: center;
    padding: 80px 20px 60px;
  }

  .hero-content h1 {
    font-size: 2.8em;
    color: var(--text-dark);
    font-weight: 600;
    margin: 0 0 20px 0;
  }

  .hero-content .hero-subtitle {
    font-size: 1.25em;
    color: var(--text-light);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
  }

  .page-section {
    padding: 70px 20px;
  }

  .bg-white { background: white; }
  .bg-light { background: #f9fafb; }

  .container {
    max-width: 1100px;
    margin: 0 auto;
  }

  .section-header {
    text-align: center;
    margin-bottom: 50px;
  }

  .section-header h2 {
    font-size: 2em;
    color: var(--text-dark);
    margin-bottom: 15px;
  }

  .section-header p {
    font-size: 1.1em;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* Narrative prose */
  .narrative {
    max-width: 750px;
    margin: 0 auto;
  }

  .narrative p {
    font-size: 1.1em;
    color: var(--text-light);
    line-height: 1.85;
    margin-bottom: 25px;
  }

  /* Triple Diamond */
  .triple-diamond-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 25px;
    margin-top: 10px;
  }

  .diamond-step {
    text-align: center;
  }

  .diamond-step .icon {
    margin-bottom: 15px;
    color: var(--brand-blue);
  }
  
  .diamond-step .icon [data-lucide],
  .domain-card .icon [data-lucide],
  .offer-card .icon [data-lucide] {
    width: 40px;
    height: 40px;
  }
  
  .diamond-step .icon [data-lucide] {
    width: 48px;
    height: 48px;
  }

  .diamond-step h3 {
    margin: 0 0 8px 0;
    font-size: 1.3em;
    color: var(--text-dark);
  }

  .diamond-step p {
    font-size: 0.95em;
    color: var(--text-light);
    margin: 0 0 15px 0;
    line-height: 1.6;
  }

  .diamond-step a {
    text-decoration: none;
    font-weight: 500;
    color: var(--brand-blue);
    font-size: 0.95em;
  }

  .diamond-arrow {
    font-size: 2em;
    color: #ccc;
    margin-top: 35px;
  }

  /* Carousel */
  .carousel-wrapper {
    position: relative;
    padding: 0 50px;
  }

  .carousel-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0;
  }

  .carousel-track::-webkit-scrollbar {
    display: none;
  }

  .carousel-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .bg-white .carousel-card {
    background: var(--brand-light-blue);
    border-color: transparent;
  }

  .carousel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }

  .carousel-card .card-icon {
    margin-bottom: 15px;
    color: var(--brand-blue);
  }

  .carousel-card .card-icon [data-lucide] {
    width: 36px;
    height: 36px;
  }

  .carousel-card h3 {
    font-size: 1.3em;
    color: var(--text-dark);
    margin: 0 0 10px 0;
  }

  .carousel-card p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95em;
    flex-grow: 1;
    margin-bottom: 15px;
  }

  .carousel-card .card-meta {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--brand-blue);
  }

  .carousel-card .card-meta.coming {
    color: #999;
    font-weight: 400;
  }

  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    font-size: 1.3em;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
  }

  .carousel-btn:hover {
    background: var(--brand-light-blue);
    border-color: var(--brand-blue);
  }

  .carousel-btn.prev { left: 0; }
  .carousel-btn.next { right: 0; }

  /* Offer grid */
  .offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
  }

  .offer-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
  }

  a.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(42,100,150,0.1);
  }

  .offer-card .icon {
    font-size: 2.5em;
    margin-bottom: 15px;
  }

  .offer-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    color: var(--text-dark);
  }

  .offer-card p {
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0 0 15px 0;
  }

  .offer-card .badge {
    font-size: 0.8em;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background: #eee;
    color: #999;
  }

  .offer-card .badge.active {
    background: var(--brand-green);
    color: white;
  }

  /* CTA */
  .cta-section {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
  }

  .cta-section p {
    font-size: 1.1em;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 30px;
  }

  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .cta-buttons a {
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1em;
    transition: all 0.3s ease;
  }

  .btn-primary {
    background: var(--brand-blue);
    color: white;
  }

  .btn-primary:hover {
    background: #1e4a70;
  }

  .btn-secondary {
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
  }

  .btn-secondary:hover {
    background: rgba(42,100,150,0.05);
  }

  @media (max-width: 768px) {
    .triple-diamond-grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .diamond-arrow { display: none; }
    .hero-content h1 { font-size: 2em; }
    .carousel-wrapper { padding: 0 10px; }
    .carousel-card { flex: 0 0 260px; padding: 24px; }
    .carousel-btn { display: none; }
  }
</style>

<!-- P: Hero — Recognition, not accusation -->
<div class="hero-section">
  <div class="hero-content">
    <h1>The Home for Building Living Systems</h1>
    <p class="hero-subtitle">Some systems thrive. Others just survive. The difference is rarely technology — it's design. If you've always sensed that the best organizations, communities, and ecosystems grow more like gardens than machines, you've found your place.</p>
    <div style="margin-top: 32px;"><a href="/deck/" style="display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: linear-gradient(135deg, #3AAADC 0%, #2E94BD 100%); color: white; text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 1em; transition: all 0.3s ease;">&#9654;&ensp;Watch the Deck — The Age of Living Systems</a></div>
  </div>
</div>

<!-- S: The method — Context → Pattern → Build (loop) -->
<div class="page-section bg-light">
  <div class="container">
    <div class="section-header">
      <h2>How It Works</h2>
      <p>A continuous loop from understanding to action — and back again.</p>
    </div>

    <div class="triple-diamond-grid">
      <div class="diamond-step">
        <div class="icon"><i data-lucide="search"></i></div>
        <h3>Context</h3>
        <p>Understand your unique situation. Identify the forces, tensions, and opportunities at play.</p>
        <a href="/context/">Capture Context →</a>
      </div>
      <div class="diamond-arrow">→</div>
      <div class="diamond-step">
        <div class="icon"><i data-lucide="hexagon"></i></div>
        <h3>Pattern</h3>
        <p>Find proven, reusable solutions from a living library. Curated collections guide the way.</p>
        <a href="/patterns/">Explore Patterns →</a>
      </div>
      <div class="diamond-arrow">→</div>
      <div class="diamond-step">
        <div class="icon"><i data-lucide="map-plus"></i></div>
        <h3>Build</h3>
        <p>Bring patterns to life. Create real, observable systems. Become a Lighthouse for others.</p>
        <a href="/build/">Build Lighthouses →</a>
      </div>
    </div>
  </div>
</div>

<!-- A: The observation — why this matters -->
<div class="page-section bg-white">
  <div class="container narrative">
    <p>The world is full of systems designed for control and predictability. But the world itself is neither controllable nor predictable. When a system can't adapt, it becomes brittle — it loses its best people, misses vital signals, and slowly decays. We keep optimizing the parts, forgetting that the health of the whole is what matters.</p>
    <p>Commons Engineering is a different approach. It's the discipline of designing and stewarding systems that are alive, adaptive, and resilient. Not a rigid methodology, but a shared language and a growing body of knowledge for seeing, understanding, and cultivating the forces that give a system its vitality.</p>
  </div>
</div>

<!-- T: Where it applies — the domains -->
<div class="page-section bg-white">
  <div class="container">
    <div class="section-header">
      <h2>Where Living Systems Matter</h2>
      <p>Commons Engineering applies wherever complex systems need to thrive — from organizations to cities to ecosystems.</p>
    </div>
    <div class="carousel-wrapper">
      <button class="carousel-btn prev" onclick="scroll_carousel('domains', -1)">&#8249;</button>
      <div class="carousel-track" id="domains">
        <a href="/patterns/business/" class="carousel-card">
          <div class="card-icon"><i data-lucide="building-2"></i></div>
          <h3>Business</h3>
          <p>Organizations, governance, value streams, and the people who make them work.</p>
          <div class="card-meta">1587 Patterns — Browse Domain →</div>
        </a>
        <a href="/patterns/urban/" class="carousel-card">
          <div class="card-icon"><i data-lucide="landmark"></i></div>
          <h3>Urban</h3>
          <p>Cities, neighborhoods, public spaces, and the infrastructure of daily life.</p>
          <div class="card-meta coming">0 Patterns — Browse Domain →</div>
        </a>
        <a href="/patterns/ecology/" class="carousel-card">
          <div class="card-icon"><i data-lucide="trees"></i></div>
          <h3>Ecology</h3>
          <p>Regenerative ecosystems, bioregional economies, and our relationship with the living world.</p>
          <div class="card-meta coming">0 Patterns — Browse Domain →</div>
        </a>
        <a href="/patterns/life/" class="carousel-card">
          <div class="card-icon"><i data-lucide="sprout"></i></div>
          <h3>Life</h3>
          <p>The core patterns of living systems that underpin all other domains.</p>
          <div class="card-meta coming">0 Patterns — Browse Domain →</div>
        </a>
      </div>
      <button class="carousel-btn next" onclick="scroll_carousel('domains', 1)">&#8250;</button>
    </div>
  </div>
</div>

<!-- O: What you get -->
<div class="page-section bg-light">
  <div class="container">
    <div class="section-header">
      <h2>What You'll Find Here</h2>
      <p>An open-source commons of knowledge, tended by a community of practitioners.</p>
    </div>
    <div class="offer-grid">
      <a href="/patterns/" class="offer-card">
        <div class="icon"><i data-lucide="book-open"></i></div>
        <h3>A Living Pattern Library</h3>
        <p>Over 80 patterns across two curated collections — the Commons Blueprint and the Commons Engineer — with more being cultivated across domains.</p>
        <span class="badge active">Explore</span>
      </a>
      <a href="/context/" class="offer-card">
        <div class="icon"><i data-lucide="search"></i></div>
        <h3>Context-Aware Guidance</h3>
        <p>The Commons Suit helps you articulate your situation and find patterns that fit.</p>
        <span class="badge active">Try It</span>
      </a>
      <a href="/build/" class="offer-card">
        <div class="icon"><i data-lucide="tower-control"></i></div>
        <h3>Real-World Lighthouses</h3>
        <p>Organizations and communities that have brought these patterns to life.</p>
        <span class="badge">Coming Soon</span>
      </a>
      <a href="https://cloudsters.net" class="offer-card" target="_blank">
        <div class="icon"><i data-lucide="users"></i></div>
        <h3>A Community of Practice</h3>
        <p>Connect with fellow systems thinkers who share your way of seeing the world.</p>
        <span class="badge active">Join</span>
      </a>
    </div>
  </div>
</div>

<!-- R: Start your journey -->
<div class="page-section bg-white">
  <div class="container cta-section">
    <h2>Ready to Begin?</h2>
    <p>Whether you're transforming an organization, designing a community, or simply curious about a more vital way to build — there's a path for you.</p>
    <div class="cta-buttons">
      <a href="/deck/" class="btn-primary">&#9654;&ensp;Watch the Deck</a>
      <a href="/context/" class="btn-secondary">Capture Your Context</a>
      <a href="/patterns/" class="btn-secondary">Explore the Patterns</a>
    </div>
  </div>
</div>

<script>
function scroll_carousel(id, direction) {
  const track = document.getElementById(id);
  const cardWidth = track.querySelector('.carousel-card').offsetWidth + 24;
  track.scrollBy({ left: direction * cardWidth, behavior: 'smooth' });
}
</script>