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)

/* 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

--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

--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

--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

--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

--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

--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)

/* 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

/* 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

--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)

--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

--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;

---

🎨 Gradient Presets

Hero Gradients

/* 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

/* 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