Update branding assets and deployment configurations
- Enhanced moebius ring logo design in Blender - Updated Docker Compose for website-only deployment with improved config - Enhanced teaser layout with updated branding integration - Added installation and setup documentation - Consolidated planning and reports documentation - Updated gitignore to exclude Next.js build artifacts and archives 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
409
planning and reports/DESIGN.md
Normal file
409
planning and reports/DESIGN.md
Normal file
@@ -0,0 +1,409 @@
|
||||
# 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
|
||||
```javascript
|
||||
// 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
|
||||
```css
|
||||
/* 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
|
||||
```typescript
|
||||
// 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
|
||||
|
||||
```css
|
||||
/* 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
|
||||
|
||||
```typescript
|
||||
// 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:
|
||||
|
||||
```javascript
|
||||
// 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**
|
||||
|
||||
```javascript
|
||||
// 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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user