# Hero Section Draft - Cultural DNA Revision

**Date**: October 28, 2025
**Task**: Phase 2.2 - Draft New Hero Section
**Target**: public/index.html lines 65-66 (title and subtitle)
**Goal**: Achieve 9/10 cultural DNA compliance (from current 3/10)

---

## Current Version (VIOLATIONS)

```html
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">
  Tractatus AI Safety Framework
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  Structural constraints that require AI systems to preserve human agency<br>
  for values decisions—tested on Claude Code
</p>
```

### Violations Identified:
- ❌ **inst_087**: No "one approach" framing (sounds definitive)
- ❌ **Amoral vs Plural Moral Values**: Zero use of strategic terminology (0/10)
- ⚠️ **inst_085**: Partially grounded but could be more operational
- ✅ **inst_089**: Good architectural emphasis ("structural constraints")

---

## Proposed Version A (PRIMARY RECOMMENDATION)

```html
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">
  Tractatus: Architecture for Plural Moral Values
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  One architectural approach to governing AI at the coalface where decisions are made.<br>
  Not amoral AI systems, but plural moral values—enabling organizations to navigate<br>
  value conflicts thoughtfully. Tested on Claude Code.
</p>
```

### Compliance Analysis:

**✅ inst_085: Grounded Language** (9/10)
- "at the coalface where decisions are made" - operational, specific
- "governing AI" - concrete action vs abstract "aligning"
- "tested on Claude Code" - specific validation claim
- Minor: Could replace "enabling" with more concrete mechanism

**✅ inst_086: Honest Uncertainty** (8/10)
- "One architectural approach" - humble, not claiming only solution
- "Tested on" - implies empirical validation, honest about status
- Could add "may enable" instead of "enabling" for more uncertainty

**✅ inst_087: One Approach Framing** (10/10)
- Explicit: "One architectural approach"
- Acknowledges this is not the definitive solution
- Perfect compliance

**✅ inst_088: Awakening Over Recruiting** (8/10)
- "navigate value conflicts" - emphasizes understanding/recognizing problems
- No recruitment language
- Focus on organizational capability, not joining movement

**✅ inst_089: Architectural Constraint Emphasis** (10/10)
- "Architecture" in title (primary framing)
- "architectural approach" in subtitle
- Strong emphasis throughout

**✅ Amoral vs Plural Moral Values** (10/10)
- "Plural Moral Values" in title (hero positioning)
- Explicit contrast: "Not amoral AI systems, but plural moral values"
- Sets up problem (amoral AI) vs solution (plural moral values)

**Overall Score**: 9.2/10 (vs current 3/10)

---

## Proposed Version B (ALTERNATIVE - More Concise)

```html
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">
  Architecture for Plural Moral Values
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  One approach to AI governance that handles value conflicts without imposing hierarchy.<br>
  Not amoral systems, but plural moral values—tested on Claude Code.
</p>
```

### Pros:
- More concise (better for hero section readability)
- Still maintains all key elements
- Stronger "without imposing hierarchy" framing

### Cons:
- Loses "at the coalface" operational language (inst_085 compliance drops slightly)
- Less explicit about what it enables organizations to do

**Overall Score**: 8.8/10

---

## Proposed Version C (ALTERNATIVE - Emphasizes Real-World Validation)

```html
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">
  Tractatus: Plural Moral Values in Production
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  One architectural approach for governing AI at the coalface where decisions are made.<br>
  Moves from amoral AI to plural moral values—tested in production on Claude Code.
</p>
```

### Pros:
- "In Production" emphasizes operational reality (inst_085)
- "Moves from...to..." framing clarifies the transition
- "tested in production" stronger validation claim

### Cons:
- "In Production" might sound too definitive (inst_087 concern)
- Less explicit "not X, but Y" contrast

**Overall Score**: 8.5/10

---

## Recommendation: VERSION A

**Rationale**:
1. **Highest compliance score** (9.2/10)
2. **Explicit "one approach" framing** satisfies inst_087 perfectly
3. **Strong amoral vs plural moral values contrast** with "Not...but" structure
4. **Operational language** ("at the coalface") satisfies inst_085
5. **Clear value proposition** - organizations understand what it does
6. **Maintains validation** ("Tested on Claude Code")

### Minor Refinements to Version A (Optional):

**More Uncertain Language** (inst_086 enhancement):
```html
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  One architectural approach to governing AI at the coalface where decisions are made.<br>
  Not amoral AI systems, but plural moral values—may enable organizations to navigate<br>
  value conflicts thoughtfully. Tested on Claude Code.
</p>
```
Change: "enabling" → "may enable" (adds uncertainty)

**More Operational Language** (inst_085 enhancement):
```html
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  One architectural approach to governing AI at the coalface where decisions are made.<br>
  Not amoral AI systems, but plural moral values—structural constraints that facilitate<br>
  organizational navigation of value conflicts. Tested on Claude Code.
</p>
```
Change: "enabling organizations to navigate" → "structural constraints that facilitate organizational navigation"

---

## Implementation Notes

### Translation Keys (i18n)
The hero section uses translation keys:
- `data-i18n="hero.title"`
- `data-i18n="hero.subtitle"`

**Action Required**: Update translation files after HTML changes:
- `public/js/translations/en.js`
- `public/js/translations/de.js` (if exists)
- `public/js/translations/fr.js` (if exists)

### HTML Structure Preserved
- All CSS classes maintained
- Responsive design preserved (`text-5xl md:text-6xl`)
- Accessibility preserved (semantic `<h1>` and `<p>` tags)
- Animation classes intact
- Line breaks (`<br>`) added for readability

### Character Count
- Current subtitle: ~110 characters
- Proposed Version A: ~210 characters (doubled length)
- Responsive design accommodates longer text (max-w-4xl container)

---

## Visual Impact Comparison

### Current (Definitive, Abstract):
> **Tractatus AI Safety Framework**
> Structural constraints that require AI systems to preserve human agency
> for values decisions—tested on Claude Code

**Impression**: Technical, safety-focused, definitive ("THE framework")

### Proposed Version A (Humble, Strategic):
> **Tractatus: Architecture for Plural Moral Values**
> One architectural approach to governing AI at the coalface where decisions are made.
> Not amoral AI systems, but plural moral values—enabling organizations to navigate
> value conflicts thoughtfully. Tested on Claude Code.

**Impression**: Strategic positioning, humble ("one approach"), clear problem/solution contrast, organizational value prop

---

## Cultural DNA Compliance Summary

| Rule | Current | Version A | Version B | Version C |
|------|---------|-----------|-----------|-----------|
| inst_085 (Grounded) | 5/10 | 9/10 | 7/10 | 9/10 |
| inst_086 (Uncertainty) | 7/10 | 8/10 | 8/10 | 7/10 |
| inst_087 (One Approach) | 2/10 | 10/10 | 9/10 | 9/10 |
| inst_088 (Awakening) | 6/10 | 8/10 | 8/10 | 7/10 |
| inst_089 (Architectural) | 8/10 | 10/10 | 9/10 | 9/10 |
| **Amoral vs Plural** | **0/10** | **10/10** | **9/10** | **9/10** |
| **OVERALL** | **3/10** | **9.2/10** | **8.8/10** | **8.5/10** |

---

## Next Steps

1. **Review and select version** (recommend Version A)
2. **Optional**: Apply minor refinements ("may enable" for more uncertainty)
3. **Proceed to Task 2.3**: Revise feature section (services descriptions)
4. **Then Task 2.4**: Update problem statement (value proposition section)
5. **Finally Task 2.5**: Implement all changes to public/index.html simultaneously

---

**Status**: ✅ DRAFT COMPLETE
**Recommendation**: Proceed with Version A (9.2/10 compliance)
**Estimated implementation time**: 15 minutes (HTML + translation updates)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>