✨ Design Principles for Builders

index.html

@@ -276,6 +276,11 @@
               class="text-of-text hover:text-of-accent transition-colors font-medium"
               >Heart-Centered Prompts</a
             >
+            <a
+              href="principles/"
+              class="text-of-text hover:text-of-accent transition-colors font-medium"
+              >For Builders</a
+            >
             <a
               href="heart-intelligence/"
               class="text-of-text hover:text-of-accent transition-colors font-medium"
@@ -325,6 +330,12 @@
               class="block px-4 py-3 text-base font-medium text-of-text hover:text-of-accent hover:bg-of-accent/5 transition-colors min-h-[44px] flex items-center">
               Heart-Centered Prompts
             </a>
+            <a
+              href="principles/"
+              @click="mobileMenuOpen = false"
+              class="block px-4 py-3 text-base font-medium text-of-text hover:text-of-accent hover:bg-of-accent/5 transition-colors min-h-[44px] flex items-center">
+              For Builders
+            </a>
             <a
               href="heart-intelligence/"
               @click="mobileMenuOpen = false"
@@ -1091,6 +1102,82 @@ <h3 class="text-xl font-display font-bold text-of-text mb-3">
         </div>
       </section>
 
+      <!-- For Builders Section -->
+      <section id="for-builders" class="bg-of-cream py-24">
+        <div class="max-w-5xl mx-auto px-6 lg:px-8">
+          <div class="text-center mb-12" data-aos="fade-up">
+            <p class="text-of-accent font-medium text-sm uppercase tracking-widest mb-4">For Software Engineers</p>
+            <h2 class="text-4xl md:text-5xl font-display font-bold text-of-text mb-6 leading-tight">
+              Design Principles for Builders
+            </h2>
+            <p class="text-xl text-of-muted max-w-3xl mx-auto leading-relaxed">
+              Heart-Centered AI isn't just a prompt. It's a design framework.
+              Ten engineering principles for systems that preserve dignity,
+              strengthen agency, and serve genuine flourishing.
+            </p>
+          </div>
+
+          <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-12" data-aos="fade-up" data-aos-delay="100">
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🤝</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Partnership Over Service</h3>
+              <p class="text-of-muted text-sm">Collaborative framing, not master/servant</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🌱</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Wellbeing Over Engagement</h3>
+              <p class="text-of-muted text-sm">Optimize for the human's actual life</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">💎</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Emotional Honesty Over Flattery</h3>
+              <p class="text-of-muted text-sm">Truth with compassion, never sycophancy</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🌿</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Augmentation Over Replacement</h3>
+              <p class="text-of-muted text-sm">Build capability, not dependency</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🫶</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Presence Before Solutions</h3>
+              <p class="text-of-muted text-sm">Witness first, solve second</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🔍</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Transparency Over Manipulation</h3>
+              <p class="text-of-muted text-sm">Make uncertainty visible</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🛡️</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Bounded Autonomy</h3>
+              <p class="text-of-muted text-sm">Act with permission, not assumption</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">🔐</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Consent Over Extraction</h3>
+              <p class="text-of-muted text-sm">Emotional data is sacred, not a feature</p>
+            </div>
+            <div class="bg-white rounded-xl p-5 border border-of-accent/10">
+              <span class="text-2xl mb-2 block">♾️</span>
+              <h3 class="font-display font-semibold text-of-text mb-1">Complementarity Over Competition</h3>
+              <p class="text-of-muted text-sm">Different gifts, designed together</p>
+            </div>
+          </div>
+
+          <div class="text-center" data-aos="fade-up" data-aos-delay="200">
+            <a
+              href="principles/"
+              class="bg-of-accent text-white px-8 py-3.5 rounded-full font-medium hover:bg-of-accent-dark transition-all duration-300 hover:shadow-lg inline-flex items-center gap-2">
+              Read the Full Principles
+              <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"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </section>
+
       <!-- FAQ Section -->
       <section id="faq" class="bg-of-surface">
         <div class="max-w-4xl mx-auto px-6 lg:px-8">
@@ -1276,6 +1363,13 @@ <h4 class="font-display font-bold text-of-text mb-3">Resources</h4>
                   >GitHub</a
                 >
               </li>
+              <li>
+                <a
+                  href="principles/"
+                  class="text-of-muted hover:text-of-accent transition-colors"
+                  >Design Principles</a
+                >
+              </li>
               <li>
                 <a
                   href="https://www.npmjs.com/package/heart-centered-prompts"