chorus-services/planning and reports/WEBSITE_INTEGRATION.md

Website Integration - Updated with Brand Guidelines

Status: Ready for Implementation ✅

The CHORUS Services platform is fully configured for the www.chorus.services website integration with current brand guidelines. All technical specifications have been updated to align with the CHORUS 8-color system, Three.js logo integration, and ultra-minimalist design principles.

Technical Integration Complete

Brand System Integration

• Color System: CHORUS 8-color system implemented with Tailwind CSS
• Typography: Inter Tight, Inconsolata, and Exo font families configured
• Logo System: Three.js Möbius Ring with accessibility adaptations
• Accessibility: Data attributes for protanopia, deuteranopia, tritanopia, achromatopsia
• Theme System: Dark mode default with light mode toggle capability

Docker Swarm Configuration

• docker-compose.swarm.yml includes chorus-website service
• Traefik labels configured for www.chorus.services and chorus.services
• Domain redirect: chorus.services → www.chorus.services
• SSL/TLS certificates via Let's Encrypt
• Registry image: registry.home.deepblack.cloud/tony/chorus-website:latest
• HTTP server development on port 3000, production on port 80

Build Scripts & Development Server

• build-and-push.sh includes website build support
• Individual build command: ./build-and-push.sh website
• Integrated with unified build: ./chorus.sh build
• Development Server: HTTP server on port 3000 (npm run dev)
• Production Build: Next.js standalone with Tailwind CSS optimization

Management Integration

• ./chorus.sh deploy includes website in production deployment
• Production endpoints configured and documented

Implementation Requirements

1. Three.js Logo Integration

// Required Three.js logo implementation
// components/ui/ChorusLogo.tsx
interface ChorusLogoProps {
  className?: string;
  size?: number;
  accessibilityTheme?: 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia' | 'default';
}

// Canvas element with accessibility adaptations
<canvas 
  className="chorus-logo aspect-square" 
  data-accessibility-aware="true"
  style={{ width: `${size}px`, height: `${size}px` }}
/>

2. Accessibility System Implementation

// Required accessibility provider
const AccessibilityProvider = ({ children }) => {
  const [theme, setTheme] = useState('default');
  
  useEffect(() => {
    document.documentElement.setAttribute('data-accessibility', theme);
    // Update Three.js logo materials
    window.updateLogoAccessibilityTheme?.(theme);
  }, [theme]);
  
  return <div data-accessibility={theme}>{children}</div>;
};

3. CHORUS 8-Color System Configuration

// tailwind.config.js - Required configuration
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Semantic color tokens for 8-color system
        'chorus-primary': '#000000',    // carbon-950
        'chorus-secondary': '#0b0213',  // mulberry-950
        'chorus-accent': '#403730',     // walnut-900
        'chorus-neutral': '#c1bfb1',    // nickel-400
        'chorus-info': '#3a4654',       // ocean-900
        'chorus-success': '#3a4540',    // eucalyptus-900
        'chorus-warning': '#6a5c46',    // sand-900
        'chorus-danger': '#3e2d2c',     // coral-900
        // Full color scales for carbon, mulberry, walnut, etc.
      }
    }
  }
};

4. Performance Optimization Strategy

// Ultra-minimalist component design
const MinimalButton = ({ children, variant = 'primary', ...props }) => {
  const baseClasses = "transition-all duration-200 ease-out";
  const variants = {
    primary: "bg-carbon-950 text-white hover:bg-carbon-900",
    secondary: "bg-mulberry-950 text-paper-400 hover:bg-mulberry-900",
  };
  
  return (
    <button className={`${baseClasses} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
};

Deployment & Access Points

Build and Deploy

# Development server (port 3000)
cd website/
npm run dev  # http://localhost:3000

# Production build and deploy
./chorus.sh build    # Includes website with brand system
./chorus.sh deploy   # Deploys to production

Access Points

• Marketing: https://www.chorus.services
• Dashboard: https://dashboard.chorus.services
• API: https://api.chorus.services

Domain Configuration ✅

DNS & SSL Configuration

External domains configured with DNS pointing to 202.171.184.242:

• chorus.services (redirects to www)
• www.chorus.services (marketing website with CHORUS brand system)
• dashboard.chorus.services (WHOOSH dashboard)
• api.chorus.services (API endpoints)
• *.chorus.services (wildcard for future services)

Brand-Compliant Domain Strategy

• Primary Domain: www.chorus.services (ultra-minimalist design)
• Logo Integration: Three.js Möbius Ring on all subdomains
• Consistent Theme: Dark mode default across all services
• Performance: HTTP/2, Brotli compression, CDN optimization

SEO Considerations for Minimalist Design

Ultra-Minimalist SEO Strategy

// Structured data for minimalist design
const structuredData = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "CHORUS Services",
  "description": "Distributed AI Orchestration Without the Hallucinations",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web Browser",
  "softwareVersion": "1.0",
  "author": {
    "@type": "Organization",
    "name": "Deep Black Cloud Development"
  }
};

Performance Requirements

• Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
• Lighthouse Score: 95+ across all categories
• Bundle Size: <500KB initial, optimized with Next.js tree shaking
• Three.js Logo: GPU-accelerated rendering with fallback images

Accessibility Compliance

• WCAG 2.1 AA: Full compliance with semantic HTML
• Keyboard Navigation: Tab order and focus management
• Screen Readers: ARIA labels and descriptions
• Reduced Motion: Respects prefers-reduced-motion settings
• Color Vision: Four accessibility theme adaptations

Integration Challenges Identified

1. Three.js Logo Performance

Challenge: Ensuring 60fps performance across all devices Solution: GPU acceleration, level-of-detail rendering, WebGL fallbacks

2. Accessibility Theme Switching

Challenge: Seamless logo material updates without re-initialization Solution: CSS custom properties with Three.js material parameter binding

3. Ultra-Minimalist Content Strategy

Challenge: Maintaining SEO effectiveness with minimal content Solution: Semantic HTML, structured data, optimized meta descriptions

All Traefik labels and routing ready for production deployment with brand-compliant implementation.