chorus-services/planning and reports/DESIGN.md

CHORUS Services Design Implementation Guide

Executive Summary

This document provides comprehensive design implementation guidelines for CHORUS Services, aligned with the current brand specifications including the 8-color CHORUS system, three-font hierarchy, dark mode optimization, and ultra-minimalist aesthetic. The implementation leverages modern CSS design tokens and ensures accessibility compliance while maintaining the sophisticated technical appearance that reflects our distributed AI orchestration platform.

1. Brand Alignment Overview

Current Brand System Features:

• 8-Color CHORUS System: Carbon, mulberry, walnut, nickel, ocean, eucalyptus, sand, coral
• Three-Font Hierarchy: Exo Thin 100 for logos, Inter Tight for content, Inconsolata for code
• Dark Mode Default: Optimized for sophisticated technical aesthetics
• Ultra-Minimalist Design: No border radius, clean geometric approach
• Vision Inclusivity: 8-color accessibility system with complete color-blind support
• Three.js Integration: Möbius ring logo with WebGL rendering

2. Technology Stack & Implementation Framework

Core Technologies

// Primary Stack
- Next.js 14+ (App Router with Server Components)
- CSS Design Tokens (Custom property system)
- Framer Motion (Animation and interaction)
- Three.js (Logo and visual elements)
- TypeScript (Type-safe implementation)

// Build & Development
- Tailwind CSS (Utility-first with custom configuration)
- PostCSS (Design token processing)
- ESLint/Prettier (Code quality)
- Storybook (Component documentation)

Design Token Architecture

/* CHORUS Brand Design Tokens */
:root {
  /* 8-Color CHORUS System */
  --chorus-carbon: #000000;      /* Primary dark */
  --chorus-mulberry: #0b0213;    /* Secondary dark */
  --chorus-walnut: #403730;      /* Accent warm */
  --chorus-nickel: #c1bfb1;      /* Neutral light */
  --chorus-ocean: #3a4654;       /* Info blue */
  --chorus-eucalyptus: #3a4540;  /* Success green */
  --chorus-sand: #6a5c46;        /* Warning amber */
  --chorus-coral: #3e2d2c;       /* Danger red */
  
  /* Three-Font Hierarchy */
  --font-logo: 'Exo', 'Inter Tight', sans-serif;
  --font-content: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-code: 'Inconsolata', ui-monospace, monospace;
}

3. Ultra-Minimalist Design Implementation

Core Design Principles

• Zero Border Radius: Pure geometric forms with sharp corners
• Dark Mode First: Optimized for sophisticated technical aesthetics
• Typography as Interface: Clear hierarchy using Exo, Inter Tight, Inconsolata
• Color as Communication: Strategic use of 8-color system for meaning
• Motion with Purpose: Subtle animations that enhance understanding

Component Architecture Strategy

// Ultra-minimal component approach
interface ChorusComponentProps {
  variant: 'primary' | 'secondary' | 'accent' | 'neutral';
  colorContext: 'carbon' | 'mulberry' | 'walnut' | 'nickel' | 'ocean' | 'eucalyptus' | 'sand' | 'coral';
  accessibility?: {
    theme: 'default' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia';
    reducedMotion: boolean;
  };
}

// Geometric button implementation
export const ChorusButton: React.FC<ChorusComponentProps> = ({
  variant,
  colorContext,
  accessibility = { theme: 'default', reducedMotion: false }
}) => {
  return (
    <button className={`
      chorus-button 
      chorus-button--${variant}
      chorus-color--${colorContext}
      ${accessibility.theme !== 'default' ? `chorus-a11y--${accessibility.theme}` : ''}
    `}>
      {children}
    </button>
  );
};

4. Typography Hierarchy Implementation

Three-Font System Application

/* Logo Typography - Exo Thin */
.chorus-logo-text {
  font-family: var(--font-logo);
  font-weight: 100; /* Thin weight for sophistication */
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--chorus-carbon);
}

/* Content Typography - Inter Tight */
.chorus-heading-1 {
  font-family: var(--font-content);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.2;
  color: var(--text-primary);
}

.chorus-body-text {
  font-family: var(--font-content);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Code Typography - Inconsolata */
.chorus-code {
  font-family: var(--font-code);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.125rem 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Three.js Logo Integration

// Three.js Möbius Ring Logo Component
import * as THREE from 'three';

export const ChorusMobiusLogo: React.FC<{
  size: number;
  colorTheme: 'carbon' | 'mulberry' | 'walnut';
  accessibility?: string;
}> = ({ size, colorTheme, accessibility }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    if (!canvasRef.current) return;
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ 
      canvas: canvasRef.current,
      alpha: true,
      antialias: true
    });
    
    // Möbius strip geometry
    const mobiusGeometry = new THREE.ParametricGeometry(
      (u, v, target) => {
        const x = (1 + 0.5 * v * Math.cos(0.5 * u)) * Math.cos(u);
        const y = (1 + 0.5 * v * Math.cos(0.5 * u)) * Math.sin(u);
        const z = 0.5 * v * Math.sin(0.5 * u);
        target.set(x, y, z);
      },
      64, 8
    );
    
    // Material based on color theme and accessibility
    const materialColor = getAccessibleColor(colorTheme, accessibility);
    const material = new THREE.MeshPhongMaterial({
      color: materialColor,
      transparent: true,
      opacity: 0.9
    });
    
    const mobius = new THREE.Mesh(mobiusGeometry, material);
    scene.add(mobius);
    
    // Subtle rotation animation
    const animate = () => {
      mobius.rotation.x += 0.005;
      mobius.rotation.y += 0.01;
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    };
    
    animate();
  }, [colorTheme, accessibility]);
  
  return (
    <canvas 
      ref={canvasRef}
      className="chorus-logo"
      style={{ width: size, height: size }}
      aria-label="CHORUS Services Logo - Möbius Ring"
    />
  );
};

## **Component Architecture**

Here's how to structure your components with Ant Design:

```javascript
// components/ui/PerformanceCard.jsx
import { Card, Typography, Space, Tag } from 'antd';
import { motion } from 'framer-motion';

const { Title, Text } = Typography;

export const PerformanceCard = ({ title, description, metrics, delay = 0 }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay }}
      viewport={{ once: true }}
    >
      <Card
        hoverable
        className="performance-card"
        styles={{
          body: { padding: '32px' }
        }}
      >
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <Title level={3} style={{ margin: 0, color: '#f2f2f7' }}>
            {title}
          </Title>
          
          <Text style={{ fontSize: '16px', lineHeight: '1.6', color: '#a1a1a6' }}>
            {description}
          </Text>
          
          <Space wrap>
            {metrics.map((metric, index) => (
              <Tag
                key={index}
                color="processing"
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
                  fontWeight: 600,
                  border: 'none',
                  background: 'rgba(0, 122, 255, 0.1)',
                  color: '#007aff'
                }}
              >
                {metric}
              </Tag>
            ))}
          </Space>
        </Space>
      </Card>
    </motion.div>
  );
};

Framer Motion Integration

Ant Design components work seamlessly with Framer Motion:

// components/sections/HeroSection.jsx
import { Layout, Typography, Button, Space } from 'antd';
import { motion } from 'framer-motion';

const { Header } = Layout;
const { Title, Text } = Typography;

export const HeroSection = () => {
  return (
    <Header 
      style={{ 
        height: '100vh', 
        display: 'flex', 
        alignItems: 'center',
        background: 'linear-gradient(135deg, #000000 0%, #1a1a1a 100%)'
      }}
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
        style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}
      >
        <Space direction="vertical" size="large" align="center">
          <motion.div
            initial={{ y: 40, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <Title 
              level={1} 
              style={{ 
                fontSize: '84px', 
                fontWeight: 700,
                textAlign: 'center',
                margin: 0,
                background: 'linear-gradient(135deg, #f2f2f7 0%, #007aff 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent'
              }}
            >
              CHORUS Services
            </Title>
          </motion.div>
          
          <motion.div
            initial={{ y: 40, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            <Text 
              style={{ 
                fontSize: '36px', 
                textAlign: 'center',
                color: '#a1a1a6'
              }}
            >
              Distributed AI Orchestration Without the Hallucinations
            </Text>
          </motion.div>
          
          <motion.div
            initial={{ y: 40, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.6 }}
          >
            <Space size="large">
              <Button 
                type="primary" 
                size="large"
                style={{ height: '56px', padding: '0 32px', fontSize: '16px' }}
              >
                Explore the Platform
              </Button>
              <Button 
                size="large"
                style={{ height: '56px', padding: '0 32px', fontSize: '16px' }}
              >
                See Technical Demos
              </Button>
            </Space>
          </motion.div>
        </Space>
      </motion.div>
    </Header>
  );
};

Parallax Implementation with Ant Design

// components/sections/ParallaxSection.jsx
import { Layout, Row, Col, Card } from 'antd';
import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';

const { Content } = Layout;

export const ParallaxSection = ({ children }) => {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  
  const y1 = useTransform(scrollYProgress, [0, 1], [0, -200]);
  const y2 = useTransform(scrollYProgress, [0, 1], [0, 200]);
  
  return (
    <Layout ref={ref} style={{ minHeight: '100vh', position: 'relative' }}>
      {/* Background Layer */}
      <motion.div 
        style={{ 
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%)',
          y: y1
        }}
      />
      
      {/* Content Layer */}
      <Content style={{ position: 'relative', zIndex: 1, padding: '120px 24px' }}>
        <motion.div style={{ y: y2 }}>
          {children}
        </motion.div>
      </Content>
    </Layout>
  );
};