tractatus/TRACTATUS_BRAND_SYSTEM.md

# Tractatus AI Safety Framework - Brand Identity System

**Created**: 2025-10-18
**Portfolio**: MySovereignty Digital
**Design Philosophy**: 6-node hexagonal orbital system representing structural AI governance

---

## 🎨 Color System

### Core Identity (AI System Being Governed)

```css
/* Shared with MySovereignty Passport - Cyan to Blue gradient */
--tractatus-core-start: #64ffda;   /* Cyan 300 - Clarity, transparency */
--tractatus-core-mid: #448aff;     /* Blue 400 - Trust, logic */
--tractatus-core-end: #0ea5e9;     /* Cyan 500 - Technical precision */
```

**Usage**: Central sphere in logo, primary brand accent, hero gradients

**Psychology**:
- **Cyan** = Clarity, openness, technical transparency
- **Blue** = Trust, safety, intelligence, stability
- **Combination** = Trustworthy AI systems with transparent operation

---

### Six Governance Services (Hexagonal Node Colors)

Each color represents a specific framework component with intentional psychological associations:

#### 1. BoundaryEnforcer - Emerald Green
```css
--service-boundary-light: #10b981;  /* Emerald 500 */
--service-boundary-dark: #059669;   /* Emerald 600 */
```
**Symbolism**: Protection, safety boundaries, ethical guardrails
**Usage**: Buttons for safety features, boundary violation warnings

#### 2. InstructionPersistenceClassifier - Indigo
```css
--service-instruction-light: #6366f1;  /* Indigo 500 */
--service-instruction-dark: #4f46e5;   /* Indigo 600 */
```
**Symbolism**: Memory, persistence, long-term stability
**Usage**: Instruction storage UI, persistence indicators

#### 3. CrossReferenceValidator - Purple
```css
--service-validator-light: #8b5cf6;  /* Purple 500 */
--service-validator-dark: #7c3aed;   /* Purple 600 */
```
**Symbolism**: Verification, cross-checking, validation
**Usage**: Validation confirmations, audit trail displays

#### 4. ContextPressureMonitor - Amber
```css
--service-pressure-light: #f59e0b;  /* Amber 500 */
--service-pressure-dark: #d97706;   /* Amber 600 */
```
**Symbolism**: Alert, monitoring, attention, pressure warning
**Usage**: Warning states, monitoring dashboards, pressure indicators

#### 5. MetacognitiveVerifier - Rose
```css
--service-metacognitive-light: #ec4899;  /* Pink 500 */
--service-metacognitive-dark: #db2777;   /* Pink 600 */
```
**Symbolism**: Reflection, self-awareness, thoughtful verification
**Usage**: Metacognitive checkpoints, reflection prompts

#### 6. PluralisticDeliberationOrchestrator - Teal
```css
--service-deliberation-light: #14b8a6;  /* Teal 500 */
--service-deliberation-dark: #0d9488;   /* Teal 600 */
```
**Symbolism**: Balance, mediation, multi-stakeholder harmony
**Usage**: Deliberation interfaces, stakeholder views

---

### UI Neutrals (Slate-based for technical feel)

```css
/* Light mode */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;      /* Slate 50 */
--bg-tertiary: #f1f5f9;       /* Slate 100 */

--text-primary: #0f172a;      /* Slate 900 */
--text-secondary: #475569;    /* Slate 600 */
--text-tertiary: #94a3b8;     /* Slate 400 */

--border-light: #e2e8f0;      /* Slate 200 */
--border-medium: #cbd5e1;     /* Slate 300 */
--border-dark: #94a3b8;       /* Slate 400 */

/* Dark mode (future) */
--bg-primary-dark: #0f172a;   /* Slate 900 */
--bg-secondary-dark: #1e293b; /* Slate 800 */
--text-primary-dark: #f8fafc; /* Slate 50 */
```

---

### Semantic Colors

```css
/* Success (safety achieved) */
--success: #10b981;           /* Emerald 500 - matches BoundaryEnforcer */
--success-light: #d1fae5;     /* Emerald 100 */
--success-dark: #065f46;      /* Emerald 800 */

/* Warning (attention needed) */
--warning: #f59e0b;           /* Amber 500 - matches PressureMonitor */
--warning-light: #fef3c7;     /* Amber 100 */
--warning-dark: #92400e;      /* Amber 800 */

/* Error (boundary violation) */
--error: #ef4444;             /* Red 500 */
--error-light: #fee2e2;       /* Red 100 */
--error-dark: #991b1b;        /* Red 800 */

/* Info (neutral notification) */
--info: #0ea5e9;              /* Cyan 500 - matches core */
--info-light: #e0f2fe;        /* Cyan 100 */
--info-dark: #075985;         /* Cyan 800 */
```

---

## 🎭 Logo Variations

### Primary Logo
**File**: `tractatus-icon-animated.svg`
**Usage**: Hero sections, landing page, main branding
**Features**:
- Animated breathing circles (4s cycle, staggered)
- Pulsing connection lines
- Full color with gradients
- 200x200px optimal size

### Static Logo
**File**: `tractatus-icon-new.svg`
**Usage**: Navbar, footer, documentation headers
**Features**:
- No animation (better performance)
- Same visual structure
- Smaller file size

### Favicon
**File**: `favicon-new.svg`
**Usage**: Browser tabs, bookmarks
**Features**:
- Simplified 48x48px version
- Solid colors (no gradients for clarity)
- Maintains 6-node hexagonal structure

---

## 📐 Typography System

### Font Families
```css
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
```

### Type Scale (Fluid)
```css
--text-xs: 0.75rem;      /* 12px */
--text-sm: 0.875rem;     /* 14px */
--text-base: 1rem;       /* 16px */
--text-lg: 1.125rem;     /* 18px */
--text-xl: 1.25rem;      /* 20px */
--text-2xl: 1.5rem;      /* 24px */
--text-3xl: 1.875rem;    /* 30px */
--text-4xl: 2.25rem;     /* 36px */
--text-5xl: 3rem;        /* 48px */
--text-6xl: 3.75rem;     /* 60px */
--text-7xl: 4.5rem;      /* 72px */

/* Display sizes (for heroes) */
--text-display-sm: clamp(2.5rem, 5vw, 3.5rem);   /* 40-56px */
--text-display-md: clamp(3rem, 6vw, 4.5rem);     /* 48-72px */
--text-display-lg: clamp(3.5rem, 8vw, 6rem);     /* 56-96px */
```

### Font Weights
```css
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
```

---

## 🎨 Gradient Presets

### Hero Gradients
```css
/* Primary Hero - Cyan to Blue */
background: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%);

/* Secondary Hero - Cyan radial */
background: radial-gradient(circle at top right, rgba(100,255,218,0.2) 0%, transparent 50%),
            radial-gradient(circle at bottom left, rgba(14,165,233,0.2) 0%, transparent 50%);

/* Service Highlight - Multi-service */
background: linear-gradient(90deg,
  #10b981 0%,    /* BoundaryEnforcer */
  #6366f1 20%,   /* InstructionPersistence */
  #8b5cf6 40%,   /* Validator */
  #f59e0b 60%,   /* PressureMonitor */
  #ec4899 80%,   /* Metacognitive */
  #14b8a6 100%   /* Deliberation */
);
```

### Button Gradients
```css
/* Primary CTA */
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);

/* Service-specific buttons use service colors */
.btn-boundary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.btn-instruction { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
/* etc. */
```

---

## 🎯 Usage Guidelines

### When to Use Each Color

**Cyan/Blue Core (#64ffda → #0ea5e9)**:
- ✅ Primary brand elements (logo, hero, main CTAs)
- ✅ Framework architecture diagrams (center node)
- ✅ Trust indicators, safety confirmations
- ❌ Warning states, errors

**Service Colors** (Green, Indigo, Purple, Amber, Rose, Teal):
- ✅ Component-specific UI (each service gets its color)
- ✅ Architecture diagrams (color-coding services)
- ✅ Documentation sections (visual organization)
- ✅ Demo interfaces (showing which service is active)
- ❌ Mixed randomly - always map to specific service

**Neutrals** (Slate):
- ✅ Body text, backgrounds, borders
- ✅ Secondary navigation, footers
- ✅ Code blocks, technical content
- ❌ Primary CTAs, important highlights

---

## 🔄 Comparison to Portfolio Siblings

| Aspect | MySovereignty Passport | Tractatus Framework |
|--------|----------------------|-------------------|
| **Structure** | Hexagonal hub with 6 pathways | Hexagonal orbital with 6 services |
| **Core Color** | Cyan (#64ffda) → Blue (#448aff) | **Same** (portfolio unity) |
| **Node Colors** | Mixed (pathway-specific) | **Service-coded** (technical) |
| **Animation** | Breathing circles (4s) | **Same pattern** (staggered) |
| **Center Symbol** | "S" (Sovereignty) | "T" (Tractatus) |
| **Emphasis** | User empowerment | Technical governance |

**Visual Unity**: Both use cyan core gradient and hexagonal structure
**Differentiation**: Service colors vs pathway colors, "T" vs "S" symbol

---

## 📱 Responsive Considerations

### Logo Scaling
```
Desktop (>1024px):  200px logo (full detail visible)
Tablet (768-1024px): 150px logo (clear readability)
Mobile (<768px):     48px navbar icon (simplified)
```

### Color Contrast (WCAG AA Minimum)

All text/background combinations tested:
- ✅ White text on all service colors: 4.5:1+
- ✅ Slate-900 text on white: 16.7:1
- ✅ Slate-600 text on white: 7.1:1
- ✅ All button gradients: 4.5:1+ with white text

---

## 🚀 Implementation Priority

### Phase 1 (Immediate)
1. ✅ Create SVG logos (static + animated)
2. ✅ Update favicon
3. ⏳ Replace old icons in navbar
4. ⏳ Update hero section with new branding
5. ⏳ Apply color system to CSS variables

### Phase 2 (Near-term)
6. Create service-specific color coding in documentation
7. Add animated logo to homepage hero
8. Design architecture diagrams with new color system
9. Update all CTAs with new gradients

### Phase 3 (Future)
10. Dark mode variants
11. Print/PDF brand guidelines
12. Animated demo showcasing 6 services
13. Interactive logo (clickable nodes)

---

**Last Updated**: 2025-10-18
**Portfolio**: MySovereignty Digital
**Design Lead**: Claude (Sonnet 4.5) + John G Stroh