tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive brand system and website architecture documentation

Browse Source 
This commit adds the complete CHORUS Services brand system and documentation:

BRAND ASSETS:
- Complete CHORUS brand guide with visual identity standards
- Comprehensive typography system with Exo font family
- Color system documentation (Carbon Black, Walnut Brown, Brushed Aluminum)
- Brand usage guidelines and logo specifications
- Website mockup concepts and design assets
- Texture assets for brand consistency

WEBSITE SUBMODULE UPDATE:
- Update to latest commit (7774d7e) with full brand system implementation
- Includes typography system, design tokens, and component updates
- Production-ready brand application across all website components

DOCUMENTATION:
- Website Architecture Strategy: Next.js 13+ with Ant Design 5+ technical specs
- UX Design Strategy: User experience and interface design principles
- Website Functionality Audit: Feature requirements and technical specifications
- Network Validation Report: Infrastructure and deployment validation

ASSETS STRUCTURE:
- /brand-assets/fonts/ - Complete Exo font family with licensing
- /brand-assets/colors/ - Color system documentation
- /brand-assets/typography/ - Typography hierarchy specifications
- /brand-assets/guidelines/ - Brand usage and implementation guidelines
- /brand-assets/mockups/ - Website design concepts and layouts
- /brand-assets/textures/ - Visual texture assets for brand consistency

This establishes the complete foundation for CHORUS Services brand identity
and provides comprehensive documentation for consistent implementation
across all marketing and product materials.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
2025-08-02 22:13:32 +10:00
parent fccedf229a
commit b7553856f5
42 changed files with 4880 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

444
brand-assets/CHORUS-BRAND-GUIDE.md Normal file
View File

@@ -0,0 +1,444 @@
# CHORUS Services Brand Guide
*Comprehensive Visual Identity & Brand Standards*
---
## Table of Contents
1. [Brand Overview](#brand-overview)
2. [Brand Identity Concept](#brand-identity-concept)
3. [Logo System](#logo-system)
4. [Color Palette](#color-palette)
5. [Typography](#typography)
6. [Component Brand System](#component-brand-system)
7. [Usage Guidelines](#usage-guidelines)
8. [Implementation Examples](#implementation-examples)
9. [Brand Protection](#brand-protection)
10. [Quick Reference](#quick-reference)
---
## Brand Overview
### Mission Statement
CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.
### Brand Promise
Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.
### Brand Positioning
CHORUS Services positions itself as the premium, enterprise-grade solution for distributed AI orchestration, combining technical sophistication with approachable design to serve global enterprise customers seeking reliable, scalable AI coordination.
### Target Audiences
#### Primary: Technical Decision Makers (CTOs, VP Engineering)
- **Needs**: ROI justification, technical depth, security assurance
- **Communication**: Professional authority, technical precision, enterprise reliability
#### Secondary: AI Research Leads/Principal Engineers
- **Needs**: Technical specifications, API documentation, research validation
- **Communication**: Technical sophistication, innovation focus, capability depth
#### Tertiary: Business Stakeholders/Executives
- **Needs**: Business outcomes, competitive positioning, implementation support
- **Communication**: Clear value proposition, measurable benefits, strategic advantage
---
## Brand Identity Concept
### Design Philosophy
The CHORUS brand identity embodies **sophisticated orchestration** through visual metaphors that connect musical harmony with technological precision. The system reflects:
- **Distributed Intelligence**: Interconnected nodes representing AI agent coordination
- **Orchestral Harmony**: Musical conducting metaphors for workflow orchestration
- **Enterprise Sophistication**: Premium materials and refined typography
- **Global Accessibility**: Internationally appropriate and inclusive design
### Visual Metaphors
- **The Orchestration Symbol**: Central hub with radiating connections representing the conductor orchestrating distributed AI agents
- **Musical Harmony**: References to symphony and coordination without being literal
- **Premium Materials**: Carbon black, walnut brown, brushed aluminum, natural paper
- **Technological Precision**: Clean geometry and sophisticated proportions
### Brand Personality
- **Sophisticated**: Premium aesthetic reflecting enterprise-grade capabilities
- **Reliable**: Consistent, trustworthy visual language building confidence
- **Approachable**: Human-centered design making complex technology accessible
- **Global**: Culturally neutral and internationally appropriate
---
## Logo System
### Primary Logo: "The Orchestration Mark"
#### Visual Description
The CHORUS logo consists of a stylized orchestration symbol formed by interconnected nodes representing the five core components (WHOOSH, BZZZ, SLURP, COOEE, Monitoring) connected to a central hub, creating an abstract musical note when viewed holistically.
#### Core Elements
1. **Orchestration Symbol (Icon)**: Central hub with five radiating connections
2. **Wordmark**: "CHORUS" in SF Pro Display Bold with "Services" subtitle
3. **Integration System**: Modular design enabling component combinations
### Logo Configurations
#### Primary Horizontal Layout
```
[Orchestration Icon] CHORUS Services
```
- **Usage**: Website headers, business cards, letterhead, primary applications
- **Minimum Size**: 120px width (digital), 1.5" width (print)
- **Aspect Ratio**: 4:1 (width:height)
#### Stacked Vertical Layout
```
[Orchestration Icon]
CHORUS
Services
```
- **Usage**: Square formats, mobile applications, social media profiles
- **Minimum Size**: 80px width (digital), 1" width (print)
- **Aspect Ratio**: 1:1.2 (width:height)
#### Icon-Only Version
```
[Orchestration Icon]
```
- **Usage**: Favicons, app icons, navigation elements, profile images
- **Size Range**: 16px to 512px (digital), 0.25" to 4" (print)
- **Aspect Ratio**: 1:1 (perfect square)
---
## Color Palette
### Brand Color Philosophy
The CHORUS color palette draws inspiration from premium natural materials and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.
### Core Brand Colors
#### Carbon Black `#000000`
- **Usage**: Primary backgrounds, high-contrast text, logo applications
- **Psychology**: Authority, sophistication, premium quality
- **Applications**: Website backgrounds, app interfaces, business cards
#### Natural Paper `#F5F5DC`
- **Usage**: Light backgrounds, high-contrast text, accessibility contrast
- **Psychology**: Clarity, simplicity, natural intelligence
- **Applications**: Print materials, light themes, text on dark backgrounds
#### Walnut Brown `#8B4513`
- **Usage**: Warm accents, secondary elements, natural touches
- **Psychology**: Reliability, craftsmanship, approachable intelligence
- **Applications**: Secondary text, accent elements, print materials
#### Brushed Aluminum `#C0C0C0`
- **Usage**: UI elements, borders, technical precision
- **Psychology**: Modern sophistication, precision, technology
- **Applications**: Interface elements, technical diagrams, secondary text
### System Colors
#### Orchestration Blue `#007AFF`
- **Usage**: Primary actions, interactive elements, system feedback
- **Psychology**: Trust, reliability, technological precision
- **Applications**: Buttons, links, primary CTAs, logo accents
#### Harmony Green `#30D158`
- **Usage**: Success states, positive feedback, growth indicators
- **Applications**: Success messages, positive data visualization
#### Resonance Amber `#FF9F0A`
- **Usage**: Warning states, attention indicators, energy elements
- **Applications**: Warnings, attention callouts, active processes
#### Alert Coral `#FF453A`
- **Usage**: Error states, critical alerts, problem indicators
- **Applications**: Error messages, critical warnings, urgent notifications
### Dark Mode Implementation
- **Background Hierarchy**: Pure Black → Carbon Gray → Cool Gray → Border Gray
- **Text Hierarchy**: Natural Paper → Light Gray → Medium Gray → Orchestration Blue
- **Contrast**: All combinations tested for WCAG 2.1 AA compliance
### Light Mode Implementation
- **Background Hierarchy**: Pure White → Natural Paper → Light Gray → Border Light
- **Text Hierarchy**: Carbon Black → Medium Gray → Light Gray → Orchestration Blue
- **Contrast**: Optimized for readability on warm, natural backgrounds
---
## Typography
### Font System
**Primary**: SF Pro Display/Text (Apple System Fonts)
**Fallback**: -apple-system, BlinkMacSystemFont, Inter, Segoe UI, Roboto, sans-serif
**Monospace**: SF Mono, Monaco, Inconsolata, Fira Code
### Typography Scale
#### Display Typography (Headlines)
- **Hero Display**: `clamp(48px, 8vw, 84px)` - SF Pro Display Heavy (800)
- **Section Display**: `clamp(32px, 5vw, 48px)` - SF Pro Display Bold (700)
- **Subsection Display**: `clamp(24px, 4vw, 36px)` - SF Pro Display Semibold (600)
#### Body Typography (Content)
- **Body Large**: 18px - SF Pro Text Regular (400)
- **Body Regular**: 16px - SF Pro Text Regular (400)
- **Body Small**: 14px - SF Pro Text Regular (400)
#### Interface Typography (UI)
- **Button Text**: 16px/14px - SF Pro Text Semibold (600)
- **Navigation**: 16px - SF Pro Text Medium (500)
- **Labels**: 14px - SF Pro Text Medium (500)
#### Technical Typography (Code)
- **Code Primary**: 14px - SF Mono, monospace
- **Code Inline**: 90% of parent size - SF Mono
### Responsive Implementation
- **Fluid Scaling**: CSS clamp() functions for responsive typography
- **Line Height**: Optimized for readability (1.4-1.6 for body text)
- **Letter Spacing**: Optical corrections for large display sizes
- **Accessibility**: Meets WCAG 2.1 AA contrast requirements
---
## Component Brand System
### Modular Design Framework
Each CHORUS component (WHOOSH, BZZZ, SLURP, COOEE, Monitoring) has its own visual identity that integrates seamlessly with the main CHORUS brand through shared design language and connection systems.
### Component Identities
#### WHOOSH - Orchestration Engine
- **Visual Concept**: Stylized orchestration podium with flowing conductor lines
- **Color**: Orchestration Blue (#007AFF) primary
- **Integration**: "WHOOSH powered by CHORUS"
#### BZZZ - P2P Agent Coordination
- **Visual Concept**: Hexagonal mesh network pattern (honeycomb reference)
- **Color**: Harmony Green (#30D158) primary
- **Integration**: Network mesh connects to CHORUS orchestration hub
#### SLURP - Context Curator Service
- **Visual Concept**: Stacked information layers with intelligent filtering
- **Color**: Walnut Brown (#8B4513) gradient primary
- **Integration**: Context layers flow into CHORUS orchestration symbol
#### COOEE - Feedback & Learning System
- **Visual Concept**: Circular feedback loop with learning arrows
- **Color**: Resonance Amber (#FF9F0A) primary
- **Integration**: Feedback loop surrounds CHORUS node connection
#### Monitoring & Analytics
- **Visual Concept**: Modern dashboard with real-time metrics
- **Color**: Brushed Aluminum (#C0C0C0) primary
- **Integration**: Dashboard metrics emanate from CHORUS central hub
### Integration Patterns
- **Horizontal**: Component Icon + Name → CHORUS Icon + Name
- **Vertical**: Component above, CHORUS below with connection
- **Compact**: Side-by-side icons with combined wordmark
---
## Usage Guidelines
### Logo Applications
#### Approved Uses
- Website headers and navigation (horizontal layout preferred)
- Business cards and letterhead (minimum size requirements)
- Digital presentations and documents (appropriate contexts)
- Social media profiles and posts (optimized versions)
- Marketing materials and advertisements (brand-compliant designs)
#### Prohibited Uses
- Stretching or distorting logo proportions
- Using colors outside approved brand palette
- Placing on backgrounds that fail contrast requirements
- Adding effects (shadows, outlines, gradients) to logo
- Altering spacing between logo elements
### Color Usage Standards
#### Digital Applications
- **Dark Mode**: Primary brand version on Carbon Black backgrounds
- **Light Mode**: Reversed version on Natural Paper or White backgrounds
- **Interactive Elements**: Orchestration Blue for buttons, links, active states
- **System Feedback**: Appropriate system colors for success/warning/error states
#### Print Applications
- **Business Collateral**: Carbon Black on Natural Paper for professional materials
- **Marketing Materials**: Full color palette with accessibility considerations
- **Single Color**: Monochrome versions for cost-effective printing
### Typography Applications
#### Marketing Content
- **Headlines**: Display typography with proper hierarchy and spacing
- **Body Copy**: Readable sizes with optimal line length (45-75 characters)
- **CTAs**: Clear, action-oriented language with appropriate typography weight
#### Technical Documentation
- **Structure**: Clear headings, numbered procedures, code examples
- **Language**: Precise, assumption-free technical communication
- **Format**: Consistent formatting with monospace fonts for code
---
## Implementation Examples
### Website Header
```html
<header class="site-header">
<div class="container">
<a href="/" class="logo-link">
<img src="chorus-logo-horizontal-color.svg"
alt="CHORUS Services - Distributed AI Orchestration"
class="chorus-logo chorus-logo--horizontal">
</a>
<nav class="main-navigation">
<!-- Navigation items -->
</nav>
</div>
</header>
```
### CSS Implementation
```css
:root {
/* Brand Colors */
--color-carbon-black: #000000;
--color-natural-paper: #F5F5DC;
--color-orchestration-blue: #007AFF;
--color-walnut-brown: #8B4513;
--color-brushed-aluminum: #C0C0C0;
/* Typography */
--font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
--font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}
.chorus-logo {
display: inline-block;
max-width: 100%;
height: auto;
}
.site-header {
background: var(--color-carbon-black);
color: var(--color-natural-paper);
font-family: var(--font-text);
}
```
### Business Card Example
```
┌─────────────────────────────────────────┐
│ [CHORUS Logo - Horizontal, 1.5" width] │
│ │
│ John Smith │
│ VP of Engineering │
│ CHORUS Services │
│ │
│ john.smith@chorus.services │
│ +1 (555) 123-4567 │
│ https://www.chorus.services │
│ │
│ Distributed AI Orchestration │
│ Without the Hallucinations │
└─────────────────────────────────────────┘
```
### Email Signature
```html
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="chorus-logo-horizontal-120px.png"
alt="CHORUS Services Logo"
width="120" height="30">
</td>
</tr>
<tr>
<td style="font-family: -apple-system, sans-serif; font-size: 14px; color: #1a1a1a;">
<strong>John Smith</strong><br>
VP of Engineering, CHORUS Services<br>
<a href="mailto:john.smith@chorus.services">john.smith@chorus.services</a> | +1 (555) 123-4567<br>
<a href="https://www.chorus.services">https://www.chorus.services</a>
</td>
</tr>
<tr>
<td style="font-family: -apple-system, sans-serif; font-size: 12px; color: #6d6d73; padding-top: 8px;">
Distributed AI Orchestration Without the Hallucinations
</td>
</tr>
</table>
```
---
## Brand Protection
### Trademark Usage
- CHORUS Services is a trademark and should be used consistently
- Always use proper trademark symbols (™ or ®) when legally required
- Do not modify or abbreviate the brand name without authorization
### Quality Control
- All brand applications must meet accessibility requirements (WCAG 2.1 AA)
- Print applications require brand team approval before production
- Digital applications should follow responsive design principles
- International applications may require cultural sensitivity review
### Approval Process
1. **Internal Review**: Brand Manager → Design Lead → Marketing Director
2. **External Applications**: Require brand license agreement and approval
3. **Media Usage**: Provide official logo package with usage guidelines
4. **Partner Materials**: Review and approval process with brand compliance
---
## Quick Reference
### Logo Minimum Sizes
- **Horizontal**: 120px width (digital), 1.5" width (print)
- **Stacked**: 80px width (digital), 1" width (print)
- **Icon-Only**: 16px (favicon), 32px (standard), 512px (high-res)
### Primary Colors (Hex Codes)
- **Carbon Black**: `#000000`
- **Natural Paper**: `#F5F5DC`
- **Orchestration Blue**: `#007AFF`
- **Walnut Brown**: `#8B4513`
- **Brushed Aluminum**: `#C0C0C0`
### Typography Hierarchy
- **Hero**: 48-84px, SF Pro Display Heavy (800)
- **Headlines**: 32-48px, SF Pro Display Bold (700)
- **Subheads**: 24-36px, SF Pro Display Semibold (600)
- **Body**: 16-18px, SF Pro Text Regular (400)
- **Small**: 14px, SF Pro Text Regular (400)
### File Formats
- **Web**: SVG (preferred), PNG (2x retina)
- **Print**: PDF (vector), AI/EPS (native)
- **Social**: PNG (platform-specific sizes)
- **Apps**: PNG (multiple resolutions), ICO (favicons)
### Contact Information
**Brand inquiries**: brand@chorus.services
**Asset requests**: assets@chorus.services
**Usage questions**: marketing@chorus.services
---
*This brand guide is a living document that evolves with the CHORUS Services platform. For the most current version and additional assets, visit the internal brand portal or contact the brand team.*
**Document Version**: 1.0
**Last Updated**: 2025-08-01
**Next Review**: Quarterly

194
brand-assets/README.md Normal file
View File

@@ -0,0 +1,194 @@
# CHORUS Services Brand Assets
This directory contains the complete visual identity system for CHORUS Services, providing everything needed to maintain consistent, professional brand presentation across all applications and audiences.
## 📁 Directory Structure
```
brand-assets/
├── 📋 README.md # This overview file
├── 📘 CHORUS-BRAND-GUIDE.md # Complete brand guide
├── 🎨 colors/
│ └── chorus-color-system.md # Color palette specifications
├── 🖼️ logos/
│ ├── chorus-logo-concept.md # Primary logo design concept
│ ├── component-logo-system.md # Component brand integration
│ └── logo-variations-specifications.md # All logo variations
├── 📝 typography/
│ └── chorus-typography-system.md # Complete typography system
├── 📋 guidelines/
│ └── brand-usage-guidelines.md # Usage standards and rules
├── 🖼️ mockups/
│ └── website-mockup-concept.md # Implementation examples
└── 📄 templates/
└── [Future templates will be added here]
```
## 🎯 Quick Start Guide
### For Designers
1. **Start with**: [`CHORUS-BRAND-GUIDE.md`](./CHORUS-BRAND-GUIDE.md) for complete overview
2. **Logo Usage**: [`logos/chorus-logo-concept.md`](./logos/chorus-logo-concept.md) for primary logo specifications
3. **Color System**: [`colors/chorus-color-system.md`](./colors/chorus-color-system.md) for color palette
4. **Typography**: [`typography/chorus-typography-system.md`](./typography/chorus-typography-system.md) for font system
### For Developers
1. **Implementation Guide**: [`CHORUS-BRAND-GUIDE.md`](./CHORUS-BRAND-GUIDE.md) (Implementation Examples section)
2. **Color Variables**: [`colors/chorus-color-system.md`](./colors/chorus-color-system.md) (CSS Custom Properties)
3. **Typography CSS**: [`typography/chorus-typography-system.md`](./typography/chorus-typography-system.md) (Utility Classes)
4. **Logo Integration**: [`logos/logo-variations-specifications.md`](./logos/logo-variations-specifications.md) (SVG & CSS)
### For Marketing Teams
1. **Usage Guidelines**: [`guidelines/brand-usage-guidelines.md`](./guidelines/brand-usage-guidelines.md)
2. **Component Branding**: [`logos/component-logo-system.md`](./logos/component-logo-system.md)
3. **Mockup Examples**: [`mockups/website-mockup-concept.md`](./mockups/website-mockup-concept.md)
4. **Brand Voice**: [`guidelines/brand-usage-guidelines.md`](./guidelines/brand-usage-guidelines.md) (Content Guidelines)
## 🎨 Brand System Overview
### Core Identity
- **Brand Promise**: Enterprise-ready distributed AI orchestration without hallucinations
- **Visual Metaphor**: Musical orchestration meets distributed technology
- **Design Philosophy**: Sophisticated simplicity with global accessibility
- **Target Audience**: Enterprise technical decision-makers and AI research leaders
### Primary Elements
#### Logo System
- **Primary Logo**: Orchestration symbol + CHORUS Services wordmark
- **Configurations**: Horizontal, stacked, icon-only versions
- **Modular System**: Integrates with component logos (WHOOSH, BZZZ, SLURP, COOEE)
#### Color Palette
- **Core Colors**: Carbon Black, Natural Paper, Walnut Brown, Brushed Aluminum
- **System Colors**: Orchestration Blue, Harmony Green, Resonance Amber, Alert Coral
- **Dual Mode**: Optimized for both dark digital themes and light print materials
#### Typography
- **Primary**: SF Pro Display/Text (Apple system fonts)
- **Fallback**: Cross-platform system font stack with Inter backup
- **Scale**: Responsive typography system with fluid scaling
- **Accessibility**: WCAG 2.1 AA compliant contrast ratios
## 📐 Technical Specifications
### Logo Minimum Sizes
- **Horizontal Layout**: 120px width (digital), 1.5" width (print)
- **Stacked Layout**: 80px width (digital), 1" width (print)
- **Icon Only**: 16px (favicon) to 512px (high-resolution)
### Color Values (Primary)
```css
--color-carbon-black: #000000;
--color-natural-paper: #F5F5DC;
--color-orchestration-blue: #007AFF;
--color-walnut-brown: #8B4513;
--color-brushed-aluminum: #C0C0C0;
```
### Typography Scale
```css
--text-hero: clamp(48px, 8vw, 84px); /* SF Pro Display Heavy */
--text-display-1: clamp(32px, 5vw, 48px); /* SF Pro Display Bold */
--text-body: 16px; /* SF Pro Text Regular */
--text-small: 14px; /* SF Pro Text Regular */
```
## 🛡️ Brand Protection
### Approved Usage
- ✅ Marketing materials by authorized CHORUS Services team
- ✅ Partner materials with proper brand license and approval
- ✅ Media coverage with appropriate brand credit and context
- ✅ Educational content referencing CHORUS Services capabilities
### Prohibited Usage
- ❌ Competitor materials or comparative advertising without permission
- ❌ Modified logos, colors, or typography outside brand specifications
- ❌ Inappropriate contexts that could damage brand reputation
- ❌ Commercial usage without proper licensing agreements
### Quality Standards
- All applications must meet WCAG 2.1 AA accessibility requirements
- Print applications require brand team approval before production
- Digital applications should follow responsive design principles
- International applications may require cultural sensitivity review
## 📞 Brand Contact Information
### Asset Requests
- **Brand Assets**: assets@chorus.services
- **Usage Questions**: marketing@chorus.services
- **Partnership Inquiries**: partnerships@chorus.services
### Approval Process
1. **Internal Review**: Brand Manager → Design Lead → Marketing Director
2. **External Applications**: Brand license agreement required
3. **Media Kits**: Available upon request with usage guidelines
4. **Partner Materials**: Review and approval process with compliance check
## 🔄 Version Control
### Current Status
- **Brand Guide Version**: 1.0
- **Last Updated**: 2025-08-01
- **Next Review**: Quarterly (2025-11-01)
- **Maintained By**: CHORUS Services Brand Team
### Change Log
- **v1.0 (2025-08-01)**: Initial comprehensive brand system creation
- Complete logo system with modular component integration
- Comprehensive color palette with dark/light mode specifications
- Typography system with responsive scaling
- Usage guidelines and implementation examples
### Future Enhancements
- [ ] Actual logo files (SVG, PNG, PDF formats)
- [ ] Component-specific asset packages
- [ ] Presentation templates (PowerPoint, Keynote, Google Slides)
- [ ] Social media template packages
- [ ] Brand photography guidelines and style
- [ ] Motion graphics and animation specifications
- [ ] Merchandise and promotional item guidelines
## 📚 Related Documentation
### Project Documentation
- [`../../README.md`](../../README.md): Main project overview
- [`../../DESIGN.md`](../../DESIGN.md): Technical design implementation
- [`../../UX_DESIGN_STRATEGY.md`](../../UX_DESIGN_STRATEGY.md): User experience strategy
### Technical Integration
- [`../../modules/whoosh/frontend/`](../../modules/whoosh/frontend/): Frontend implementation
- [`../../website/`](../../website/): Marketing website implementation
- [`../../docker-compose.yml`](../../docker-compose.yml): Service configuration
## 💡 Implementation Tips
### For Web Development
- Use CSS custom properties for consistent color application
- Implement responsive typography with clamp() functions
- Load fonts with font-display: swap for performance
- Maintain proper contrast ratios for accessibility compliance
### For Print Design
- Use vector formats (SVG, PDF) for scalable quality
- Test color reproduction on intended paper stocks
- Maintain minimum size requirements for legibility
- Consider ink coverage for large solid color areas
### For Social Media
- Use platform-optimized logo variations
- Maintain brand voice consistency across platforms
- Follow platform-specific size and format requirements
- Use approved hashtags: #CHORUSServices #DistributedAI #EnterpriseAI
## 🎵 Brand Philosophy
*"Individual components make music, but CHORUS Services creates symphony."*
The CHORUS Services brand represents the sophisticated orchestration of distributed AI agents, combining enterprise reliability with approachable innovation. Every brand touchpoint should reinforce our commitment to eliminating context loss, reducing hallucinations, and enabling scalable multi-agent collaboration for global enterprise clients.
---
**For questions, asset requests, or brand guidance, contact the CHORUS Services brand team.**

199
brand-assets/colors/chorus-color-system.md Normal file
View File

@@ -0,0 +1,199 @@
# CHORUS Services Color System
## Brand Color Philosophy
The CHORUS Services color palette reflects sophisticated orchestration, enterprise reliability, and technological innovation. Drawing inspiration from natural materials (carbon black, walnut brown, brushed aluminum) and warmer accents, the system creates a premium, approachable aesthetic that works in both digital dark themes and print materials.
## Primary Color Palette
### Core Brand Colors
#### Carbon Black
- **Primary**: `#000000`
- **Usage**: Primary backgrounds, high-contrast text, logo applications
- **Psychology**: Authority, sophistication, premium quality
- **Print**: Rich black (C:91, M:79, Y:62, K:97)
#### Walnut Brown
- **Primary**: `#8B4513` (Deep Walnut)
- **Secondary**: `#A0522D` (Medium Walnut)
- **Light**: `#D2691E` (Warm Walnut)
- **Usage**: Accent elements, warm touches, secondary branding
- **Psychology**: Reliability, craftsmanship, natural intelligence
- **Print**: C:30, M:70, Y:100, K:20
#### Brushed Aluminum
- **Primary**: `#C0C0C0` (Metallic Silver)
- **Dark**: `#708090` (Slate Gray)
- **Light**: `#E5E5E5` (Light Silver)
- **Usage**: UI elements, borders, technical diagrams
- **Psychology**: Precision, technology, modern sophistication
- **Print**: C:15, M:10, Y:12, K:0
#### Natural Fiber Paper
- **Primary**: `#F5F5DC` (Warm Cream)
- **Pure**: `#FFFEF7` (Off-White)
- **Aged**: `#F0E68C` (Light Parchment)
- **Usage**: Light backgrounds, print materials, accessibility contrast
- **Psychology**: Clarity, simplicity, natural intelligence
- **Print**: C:6, M:4, Y:15, K:0
## Secondary Palette (Warmer Accents)
### Orchestration Blue (Primary System Color)
- **Electric Blue**: `#007AFF` - Primary actions, links, system elements
- **Deep Blue**: `#0051D5` - Hover states, pressed elements
- **Light Blue**: `#4A90E2` - Secondary actions, info states
### Harmony Green (Success/Growth)
- **Emerald**: `#30D158` - Success states, positive feedback
- **Forest**: `#228B22` - Secondary success, stable states
- **Sage**: `#9CAF88` - Subtle positive indicators
### Resonance Amber (Warning/Energy)
- **Warm Amber**: `#FF9F0A` - Warnings, attention states
- **Golden**: `#FFD700` - Premium features, highlights
- **Copper**: `#B87333` - Secondary attention elements
### Alert Coral (Error/Critical)
- **System Red**: `#FF453A` - Errors, critical states
- **Warm Red**: `#FF6B6B` - Secondary errors, warnings
- **Rose**: `#E55B5B` - Soft error states
## Dark Mode Implementation
### Background Hierarchy
1. **Pure Black**: `#000000` - App backgrounds, highest contrast
2. **Carbon Gray**: `#1A1A1A` - Card backgrounds, elevated surfaces
3. **Cool Gray**: `#2D2D30` - Secondary surfaces, input fields
4. **Border Gray**: `#48484A` - Dividers, subtle borders
### Text Colors (Dark Mode)
1. **Primary Text**: `#F2F2F7` - Headlines, primary content
2. **Secondary Text**: `#A1A1A6` - Descriptions, secondary content
3. **Tertiary Text**: `#6D6D73` - Captions, disabled text
4. **Accent Text**: `#007AFF` - Links, interactive elements
## Light Mode Implementation
### Background Hierarchy
1. **Pure White**: `#FFFFFF` - Clean backgrounds
2. **Natural Paper**: `#F5F5DC` - Warm backgrounds, print materials
3. **Light Gray**: `#F2F2F2` - Secondary surfaces
4. **Border Light**: `#E5E5E5` - Dividers, subtle borders
### Text Colors (Light Mode)
1. **Primary Text**: `#1A1A1A` - Headlines, primary content
2. **Secondary Text**: `#6D6D73` - Descriptions, secondary content
3. **Tertiary Text**: `#A1A1A6` - Captions, disabled text
4. **Accent Text**: `#007AFF` - Links, interactive elements
## Accessibility Standards
### WCAG 2.1 AA Compliance
- **Normal Text**: Minimum 4.5:1 contrast ratio
- **Large Text**: Minimum 3:1 contrast ratio
- **Interactive Elements**: Clear focus indicators with 3:1 contrast
### Tested Combinations (Dark Mode)
- White (#F2F2F7) on Black (#000000): 19.96:1 ✅
- Primary Blue (#007AFF) on Black (#000000): 8.59:1 ✅
- Secondary Text (#A1A1A6) on Black (#000000): 6.64:1 ✅
- Tertiary Text (#6D6D73) on Black (#000000): 4.51:1 ✅
### Tested Combinations (Light Mode)
- Black (#1A1A1A) on Natural Paper (#F5F5DC): 18.2:1 ✅
- Primary Blue (#007AFF) on White (#FFFFFF): 4.5:1 ✅
- Secondary Text (#6D6D73) on Natural Paper (#F5F5DC): 7.8:1 ✅
## Color Usage Guidelines
### Do's
- Use Carbon Black for premium, high-contrast applications
- Apply Walnut Brown for warmth and approachability
- Use Brushed Aluminum for technical, precise elements
- Apply warmer accents sparingly for energy and focus
- Maintain hierarchy with background/text contrast levels
### Don'ts
- Never use pure white text on colored backgrounds without contrast testing
- Avoid mixing warm and cool grays in the same interface
- Don't use accent colors as primary backgrounds
- Never sacrifice accessibility for aesthetic preferences
- Avoid using more than 3 accent colors in a single design
## Brand Color Applications
### Logo Applications
- **Primary Logo**: Carbon Black on Natural Paper or White
- **Reversed Logo**: Natural Paper on Carbon Black
- **Accent Logo**: Orchestration Blue accent with Carbon Black text
### UI Applications
- **Primary Actions**: Orchestration Blue
- **Secondary Actions**: Brushed Aluminum
- **Success States**: Harmony Green
- **Warning States**: Resonance Amber
- **Error States**: Alert Coral
### Print Applications
- **Business Cards**: Carbon Black on Natural Paper
- **Brochures**: Full color palette with Natural Paper base
- **Technical Documentation**: Monochrome with Orchestration Blue accents
## Technical Implementation
### CSS Custom Properties
```css
:root {
/* Core Brand Colors */
--color-carbon-black: #000000;
--color-walnut-brown: #8B4513;
--color-brushed-aluminum: #C0C0C0;
--color-natural-paper: #F5F5DC;
/* System Colors */
--color-orchestration-blue: #007AFF;
--color-harmony-green: #30D158;
--color-resonance-amber: #FF9F0A;
--color-alert-coral: #FF453A;
/* Dark Mode Backgrounds */
--bg-primary-dark: #000000;
--bg-secondary-dark: #1A1A1A;
--bg-elevated-dark: #2D2D30;
--bg-border-dark: #48484A;
/* Light Mode Backgrounds */
--bg-primary-light: #FFFFFF;
--bg-secondary-light: #F5F5DC;
--bg-elevated-light: #F2F2F2;
--bg-border-light: #E5E5E5;
}
```
### Design Token Structure
```javascript
export const colorTokens = {
brand: {
carbon: '#000000',
walnut: '#8B4513',
aluminum: '#C0C0C0',
paper: '#F5F5DC'
},
system: {
blue: '#007AFF',
green: '#30D158',
amber: '#FF9F0A',
coral: '#FF453A'
},
semantic: {
primary: 'var(--color-orchestration-blue)',
success: 'var(--color-harmony-green)',
warning: 'var(--color-resonance-amber)',
error: 'var(--color-alert-coral)'
}
};
```
This color system provides a sophisticated, accessible foundation for the CHORUS Services brand that works across all applications while maintaining the premium, technology-focused aesthetic required for enterprise clients.

BIN
brand-assets/fonts/Exo/Exo-Italic-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/Exo-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

93
brand-assets/fonts/Exo/OFL.txt Normal file
View File

@@ -0,0 +1,93 @@
Copyright 2017 The Exo Project Authors (https://github.com/NDISCOVER/Exo-1.0)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

81
brand-assets/fonts/Exo/README.txt Normal file
View File

@@ -0,0 +1,81 @@
Exo Variable Font
=================
This download contains Exo as both variable fonts and static fonts.
Exo is a variable font with this axis:
wght
This means all the styles are contained in these files:
Exo/Exo-VariableFont_wght.ttf
Exo/Exo-Italic-VariableFont_wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Exo:
Exo/static/Exo-Thin.ttf
Exo/static/Exo-ExtraLight.ttf
Exo/static/Exo-Light.ttf
Exo/static/Exo-Regular.ttf
Exo/static/Exo-Medium.ttf
Exo/static/Exo-SemiBold.ttf
Exo/static/Exo-Bold.ttf
Exo/static/Exo-ExtraBold.ttf
Exo/static/Exo-Black.ttf
Exo/static/Exo-ThinItalic.ttf
Exo/static/Exo-ExtraLightItalic.ttf
Exo/static/Exo-LightItalic.ttf
Exo/static/Exo-Italic.ttf
Exo/static/Exo-MediumItalic.ttf
Exo/static/Exo-SemiBoldItalic.ttf
Exo/static/Exo-BoldItalic.ttf
Exo/static/Exo-ExtraBoldItalic.ttf
Exo/static/Exo-BlackItalic.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.

BIN
brand-assets/fonts/Exo/static/Exo-Black.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-Bold.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-ExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-ExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-Italic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-Light.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-Medium.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-Regular.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-Thin.ttf Normal file
View File

Binary file not shown.

BIN
brand-assets/fonts/Exo/static/Exo-ThinItalic.ttf Normal file
View File

Binary file not shown.

202
brand-assets/fonts/Luckiest_Guy/LICENSE.txt Normal file
View File

@@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

BIN
brand-assets/fonts/Luckiest_Guy/LuckiestGuy-Regular.ttf Normal file
View File

Binary file not shown.

365
brand-assets/guidelines/brand-usage-guidelines.md Normal file
View File

@@ -0,0 +1,365 @@
# CHORUS Services Brand Usage Guidelines
## Brand Overview
CHORUS Services represents enterprise-grade distributed AI orchestration through sophisticated, approachable visual identity. These guidelines ensure consistent, professional brand application across all touchpoints while maintaining the premium, technology-focused aesthetic that appeals to global enterprise clients.
## Brand Positioning Statement
**CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.**
The brand conveys:
- **Enterprise Reliability**: Professional, trustworthy, scalable solutions
- **Technical Innovation**: Cutting-edge AI orchestration capabilities
- **Global Accessibility**: International appeal with sophisticated simplicity
- **Approachable Expertise**: Technical depth presented clearly and confidently
## Logo Usage Standards
### Primary Logo Applications
#### Horizontal Layout (Preferred)
- **Use Cases**: Website headers, business cards, letterhead, digital signatures
- **Minimum Size**: 120px width (digital), 1.5" width (print)
- **Clear Space**: Height of "C" in CHORUS on all sides
- **Background**: Carbon Black (#000000) or Natural Paper (#F5F5DC)
#### Stacked Layout (Vertical Applications)
- **Use Cases**: Social media profiles, mobile applications, square formats
- **Minimum Size**: 80px width (digital), 1" width (print)
- **Proportion**: Maintains icon-to-text relationship from horizontal version
- **Background**: Solid color fields only, no complex backgrounds
#### Icon-Only Applications
- **Use Cases**: Favicons, app icons, navigation elements, tight spaces
- **Minimum Size**: 16px (favicon), 32px (standard icon), 512px (high-resolution)
- **Format**: Square aspect ratio with rounded corners for app icons
- **Background**: Transparent or solid brand colors only
### Logo Color Specifications
#### Primary Version (Dark Backgrounds)
```css
/* For use on Carbon Black (#000000) or dark backgrounds */
--logo-icon: #F5F5DC; /* Natural Paper */
--logo-accent: #007AFF; /* Orchestration Blue */
--logo-primary-text: #F5F5DC; /* Natural Paper */
--logo-secondary-text: #C0C0C0; /* Brushed Aluminum */
```
#### Reversed Version (Light Backgrounds)
```css
/* For use on Natural Paper (#F5F5DC) or white backgrounds */
--logo-icon: #000000; /* Carbon Black */
--logo-accent: #007AFF; /* Orchestration Blue */
--logo-primary-text: #000000; /* Carbon Black */
--logo-secondary-text: #8B4513; /* Walnut Brown */
```
#### Monochrome Applications
- **Black**: All elements in Carbon Black (#000000)
- **White**: All elements in Natural Paper (#F5F5DC)
- **Blue**: All elements in Orchestration Blue (#007AFF)
- **Usage**: Single-color printing, embossing, engraving, simple applications
### Logo Placement Guidelines
#### Digital Applications
- **Website Headers**: Top-left placement, links to homepage
- **Email Signatures**: Left-aligned, followed by contact information
- **Social Media**: Profile images (icon-only), cover images (horizontal)
- **Documents**: Top-left on first page, smaller versions on subsequent pages
#### Print Applications
- **Business Cards**: Primary position, typically top-left or center
- **Letterhead**: Header placement, consistent with corporate identity
- **Brochures**: Front cover prominent, inside pages smaller versions
- **Trade Show**: Large format applications with maximum visibility
## Typography Applications
### Headline Hierarchy
#### Hero Headlines (Marketing Focus)
```css
.hero-headline {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: clamp(48px, 8vw, 84px);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--text-primary);
}
```
- **Use Cases**: Homepage hero, major campaign headlines
- **Treatment**: Gradient text effects approved for digital applications
- **Length**: Maximum 6 words for impact and readability
#### Section Headlines (Content Organization)
```css
.section-headline {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text-primary);
}
```
- **Use Cases**: Page sections, component features, major content divisions
- **Treatment**: Solid colors only, no effects
- **Length**: Maximum 8 words for clarity
#### Component Headlines (Technical Focus)
```css
.component-headline {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: clamp(24px, 4vw, 36px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-primary);
}
```
- **Use Cases**: WHOOSH, BZZZ, SLURP, COOEE component headers
- **Treatment**: May include component accent color
- **Length**: Component name + brief descriptor
### Body Text Standards
#### Feature Descriptions (Marketing Content)
```css
.feature-description {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);
max-width: 65ch; /* Optimal reading length */
}
```
- **Use Cases**: Feature explanations, value propositions, marketing copy
- **Tone**: Professional but approachable, benefit-focused
- **Length**: 2-3 sentences maximum per paragraph
#### Technical Descriptions (Documentation)
```css
.technical-description {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
max-width: 70ch;
}
```
- **Use Cases**: API documentation, integration guides, technical specifications
- **Tone**: Precise, clear, assumption-free
- **Format**: Numbered lists, bullet points, code examples
## Color Application Standards
### Primary Brand Colors Usage
#### Carbon Black (#000000)
- **Primary Applications**: Backgrounds, high-contrast text, logo elements
- **Digital**: Main website background, app interfaces, dark mode primary
- **Print**: Body text, headlines, premium finishing
- **Avoid**: Large solid areas in print (ink coverage issues)
#### Natural Paper (#F5F5DC)
- **Primary Applications**: Light backgrounds, high-contrast text, logo elements
- **Digital**: Light mode backgrounds, text on dark surfaces
- **Print**: Paper selection, background tints, accessibility contrast
- **Avoid**: Digital screens without proper calibration
#### Orchestration Blue (#007AFF)
- **Primary Applications**: Interactive elements, accent colors, system feedback
- **Digital**: Buttons, links, active states, progress indicators
- **Print**: Accent elements, callouts, technical diagrams
- **Avoid**: Large background areas (accessibility concerns)
#### Walnut Brown (#8B4513)
- **Primary Applications**: Warm accents, secondary text, natural elements
- **Digital**: Secondary buttons, icons, decorative elements
- **Print**: Text accents, border elements, warm contrast
- **Avoid**: Primary text (readability issues)
### System Color Applications
#### Success States (Harmony Green #30D158)
- **Usage**: Positive feedback, completed states, growth metrics
- **Examples**: "Success" messages, completed tasks, positive data visualization
- **Accessibility**: Always test contrast on intended backgrounds
#### Warning States (Resonance Amber #FF9F0A)
- **Usage**: Attention required, important information, energy indicators
- **Examples**: "Warning" messages, attention callouts, active processes
- **Accessibility**: Ensure sufficient contrast for text applications
#### Error States (Alert Coral #FF453A)
- **Usage**: Error messages, critical alerts, problem indicators
- **Examples**: Form validation errors, system alerts, critical warnings
- **Accessibility**: Must meet WCAG AA contrast requirements
## Content Tone & Voice Guidelines
### Brand Voice Characteristics
#### Professional Authority
- **Tone**: Confident, knowledgeable, trustworthy
- **Language**: Technical precision without jargon overuse
- **Examples**: "CHORUS Services eliminates context loss through intelligent orchestration"
- **Avoid**: Overly casual language, uncertain qualifiers ("maybe", "might")
#### Approachable Expertise
- **Tone**: Helpful, clear, solution-oriented
- **Language**: Plain English explanations of complex concepts
- **Examples**: "Distributed AI coordination made simple and reliable"
- **Avoid**: Condescending language, oversimplification of serious topics
#### Global Accessibility
- **Tone**: Inclusive, internationally appropriate, culturally neutral
- **Language**: Clear sentence structure, common terminology
- **Examples**: "Scalable multi-agent collaboration for enterprise teams worldwide"
- **Avoid**: Regional idioms, cultural assumptions, complex grammatical constructions
### Content Structure Guidelines
#### Headlines and Titles
- **Format**: Sentence case preferred over title case
- **Length**: 6-8 words maximum for headlines, 12 words maximum for page titles
- **Focus**: Benefit-driven for marketing, function-driven for technical content
- **Examples**:
- "Orchestrate AI agents without the hallucinations"
- "Enterprise-ready distributed reasoning platform"
#### Descriptions and Body Copy
- **Paragraph Length**: 2-3 sentences maximum
- **Sentence Length**: 15-20 words average, 25 words maximum
- **Structure**: Lead with benefit, follow with explanation, end with action
- **Examples**:
- "Context-aware AI coordination reduces hallucinations by 78%. CHORUS Services maintains intelligent context across distributed agents, ensuring consistent, reliable outputs for enterprise applications."
#### Technical Documentation
- **Structure**: Step-by-step procedures, numbered lists, clear headings
- **Language**: Active voice, imperative mood, specific instructions
- **Format**: Code examples, API references, integration guides
- **Examples**:
- "Initialize CHORUS orchestration: `./chorus.sh start`"
- "Configure agent endpoints in `config/whoosh.yaml`"
## Digital Brand Applications
### Website Design Standards
#### Header Treatment
- **Logo Placement**: Top-left, consistent size across pages
- **Navigation**: Horizontal, SF Pro Text Medium, 16px
- **CTA Buttons**: Orchestration Blue, SF Pro Text Semibold, prominent placement
- **Background**: Carbon Black (#000000) with Natural Paper (#F5F5DC) text
#### Hero Section Requirements
- **Background**: Dark gradient or solid Carbon Black
- **Typography**: Hero headline + supporting description + CTA
- **Layout**: Centered content, maximum 1200px width
- **Animation**: Subtle fade-in effects, respect reduced motion preferences
#### Component Sections
- **Background**: Alternating dark/light sections for visual rhythm
- **Icons**: Component-specific colors with CHORUS brand connection
- **Typography**: Section headline + feature grid + supporting details
- **CTA Integration**: Clear next steps for each component
### Social Media Brand Standards
#### Profile Applications
- **Profile Image**: Icon-only CHORUS logo, square format
- **Cover Image**: Horizontal logo with brand message
- **Bio Content**: Consistent brand voice, key platform benefits
- **Hashtags**: #CHORUSServices #DistributedAI #EnterpriseAI
#### Content Guidelines
- **Visual Style**: Dark backgrounds preferred, high contrast
- **Typography**: Brand fonts where supported, consistent hierarchy
- **Color Usage**: Primary brand colors, avoid off-brand combinations
- **Messaging**: Professional tone, benefit-focused content
### Email Communications
#### Signature Standards
```
[CHORUS Logo - Horizontal, 120px width]
Your Name
Title, CHORUS Services
email@chorus.services | +1 (555) 123-4567
https://www.chorus.services
Distributed AI Orchestration Without the Hallucinations
```
#### Newsletter Design
- **Header**: CHORUS logo + navigation links
- **Typography**: SF Pro Text hierarchy, readable sizes
- **Color Scheme**: Dark header/footer, light content areas
- **CTA Buttons**: Orchestration Blue, clear calls-to-action
## Print Brand Applications
### Business Collateral Standards
#### Business Cards
- **Size**: Standard 3.5" × 2" (89mm × 51mm)
- **Logo**: Horizontal layout, maximum 1.5" width
- **Typography**: SF Pro Text hierarchy, minimum 8pt size
- **Color**: Carbon Black text on Natural Paper background
- **Finish**: Matte coating preferred for premium feel
#### Letterhead Design
- **Logo**: Top-left placement, 1.75" width maximum
- **Contact Info**: Right-aligned header or footer placement
- **Typography**: SF Pro Text, professional hierarchy
- **Color**: Minimal color usage, focus on typography and layout
#### Brochure Standards
- **Cover**: Large logo, compelling headline, minimal text
- **Interior**: Component sections with icons and descriptions
- **Typography**: Clear hierarchy, generous white space
- **Color**: Full brand palette with accessibility considerations
### Large Format Applications
#### Trade Show Displays
- **Logo**: Maximum visibility, readable from 10+ feet
- **Typography**: Large headlines, minimal body text
- **Color**: High contrast combinations for visibility
- **Messaging**: Key benefits, clear contact information
#### Vehicle Graphics
- **Logo**: Simplified versions for vehicle applications
- **Contact**: Website URL prominently displayed
- **Color**: High contrast for visibility and safety
- **Placement**: Professional, non-intrusive positioning
## Brand Protection Guidelines
### Approved Usage
- Marketing materials by authorized CHORUS Services team members
- Partner materials with proper brand license and approval
- Media coverage with appropriate brand credit and context
- Educational content referencing CHORUS Services capabilities
### Prohibited Usage
- Competitor materials or comparative advertising without permission
- Modified logos, colors, or typography outside brand specifications
- Inappropriate contexts that could damage brand reputation
- Commercial usage without proper licensing agreements
### Quality Control Standards
- All brand applications must meet accessibility requirements
- Print applications require brand team approval before production
- Digital applications should follow responsive design principles
- International applications may require cultural sensitivity review
This comprehensive brand usage guide provides CHORUS Services with clear, actionable standards for maintaining consistent, professional brand presentation across all applications and audiences.

205
brand-assets/logos/chorus-logo-concept.md Normal file
View File

@@ -0,0 +1,205 @@
# CHORUS Services Logo Design Concept
## Design Philosophy
The CHORUS logo embodies distributed AI orchestration through visual metaphors of:
- **Musical Harmony**: References to orchestral coordination and symphony
- **Distributed Networks**: Interconnected nodes representing AI agent coordination
- **Technological Precision**: Clean, modern aesthetic reflecting enterprise software
- **Scalable Modularity**: System that combines elegantly with component logos
## Primary Logo Concept: "The Orchestration Mark"
### Visual Description
The CHORUS logo consists of three core elements:
#### 1. The Orchestration Symbol (Icon Mark)
- **Shape**: A stylized conductor's baton formed by interconnected nodes
- **Metaphor**: Represents the orchestration of distributed AI agents
- **Structure**:
- Central hub (conductor's handle) with 5 radiating connections
- Each connection represents a core component (WHOOSH, BZZZ, SLURP, COOEE, Monitoring)
- Nodes are connected by elegant, curved lines suggesting harmony and flow
- Overall shape creates an abstract musical note when viewed as a whole
#### 2. The Wordmark (Typography)
- **Typeface**: Custom-modified SF Pro Display (Apple-inspired)
- **Style**:
- **CHORUS**: Bold, slightly condensed, letter-spacing optimized for readability
- **Services**: Medium weight, smaller size, positioned below or to the right
- **Modifications**:
- Slightly rounded corners on letterforms for approachability
- Custom "O" in CHORUS designed to echo the orchestration symbol
- Subtle geometric adjustments for perfect optical alignment
#### 3. The Complete Logo System
- **Horizontal Layout**: Icon + Wordmark side-by-side (primary)
- **Stacked Layout**: Icon above wordmark (vertical applications)
- **Icon-Only**: Orchestration symbol standalone (favicon, social media)
- **Wordmark-Only**: Text without icon (tight space applications)
## Color Specifications
### Primary Version (Dark Backgrounds)
- **Icon**: Natural Paper (#F5F5DC) with Orchestration Blue (#007AFF) accent on central hub
- **CHORUS Text**: Natural Paper (#F5F5DC)
- **Services Text**: Brushed Aluminum (#C0C0C0)
- **Background**: Carbon Black (#000000) or transparent
### Reversed Version (Light Backgrounds)
- **Icon**: Carbon Black (#000000) with Orchestration Blue (#007AFF) accent
- **CHORUS Text**: Carbon Black (#000000)
- **Services Text**: Walnut Brown (#8B4513)
- **Background**: Natural Paper (#F5F5DC) or White (#FFFFFF)
### Monochrome Versions
- **Black**: All elements in Carbon Black (#000000)
- **White**: All elements in Natural Paper (#F5F5DC)
- **Single Color**: All elements in Orchestration Blue (#007AFF)
## Modular Component System
### Component Integration Framework
Each component logo follows the pattern: **Component Icon + CHORUS Brand Mark**
#### WHOOSH + CHORUS
- **Component Icon**: Stylized orchestration podium/dashboard
- **Arrangement**: WHOOSH icon connects to CHORUS orchestration symbol
- **Usage**: "WHOOSH powered by CHORUS" applications
#### BZZZ + CHORUS
- **Component Icon**: Hexagonal mesh network pattern (honeycomb reference)
- **Arrangement**: BZZZ mesh integrates with CHORUS node connections
- **Usage**: P2P networking and coordination materials
#### SLURP + CHORUS
- **Component Icon**: Layered context hierarchy (stacked information layers)
- **Arrangement**: SLURP layers flow into CHORUS orchestration hub
- **Usage**: Context management and curation applications
#### COOEE + CHORUS
- **Component Icon**: Feedback loop with learning arrows
- **Arrangement**: COOEE loop surrounds one node of CHORUS symbol
- **Usage**: Learning and feedback system materials
#### Monitoring + CHORUS
- **Component Icon**: Dashboard with metric visualization
- **Arrangement**: Monitoring graphs emanate from CHORUS central hub
- **Usage**: Analytics and monitoring dashboards
## Technical Specifications
### Logo Dimensions
- **Minimum Size**: 24px height (digital), 0.5" height (print)
- **Optimal Sizes**: 48px, 96px, 192px, 512px (digital icons)
- **Aspect Ratio**: 3:2 (horizontal), 1:1 (icon only), 2:3 (stacked)
### Clear Space
- **Rule**: Minimum clear space equals the height of the "C" in CHORUS
- **Application**: Applies to all sides of the logo in any configuration
- **Exception**: When used in dedicated logo areas (website headers, business cards)
### Typography Specifications
- **CHORUS**:
- Font: SF Pro Display Bold (custom-modified)
- Size Relationship: 100% (base size)
- Letter Spacing: -0.02em (tighter for bold weight)
- Line Height: 1.0 (tight for display use)
- **Services**:
- Font: SF Pro Display Medium
- Size Relationship: 40% of CHORUS height
- Letter Spacing: 0.01em (slightly looser for medium weight)
- Position: Baseline aligned with bottom of CHORUS, or centered vertically
### Color Values
```css
/* Primary Brand Colors */
--logo-primary-text: #F5F5DC; /* Natural Paper */
--logo-secondary-text: #C0C0C0; /* Brushed Aluminum */
--logo-accent: #007AFF; /* Orchestration Blue */
--logo-background-dark: #000000; /* Carbon Black */
/* Reversed Colors */
--logo-primary-text-rev: #000000; /* Carbon Black */
--logo-secondary-text-rev: #8B4513; /* Walnut Brown */
--logo-background-light: #F5F5DC; /* Natural Paper */
```
## Usage Guidelines
### Approved Applications
- Website headers and navigation
- Business cards and letterhead
- Digital presentations and documents
- Social media profiles and posts
- Marketing materials and advertisements
- Product packaging and merchandise
- Trade show displays and signage
### Logo Don'ts
- Never stretch or distort the logo proportions
- Don't use colors outside the approved palette
- Never place on backgrounds that fail contrast requirements
- Don't add effects (shadows, outlines, gradients) to the logo
- Never alter the spacing between elements
- Don't use low-resolution versions for print applications
### Background Requirements
- **Dark Backgrounds**: Use primary version with light elements
- **Light Backgrounds**: Use reversed version with dark elements
- **Complex Backgrounds**: Place logo on solid color field within clear space
- **Photographs**: Use high-contrast version with background overlay if needed
## Logo Variations by Context
### Digital Applications
- **Website Header**: Horizontal layout, medium size (48-64px height)
- **Favicon**: Icon-only version, 32x32px minimum
- **Social Media Profile**: Icon-only version, square format
- **App Icons**: Icon-only with rounded corners, various iOS/Android sizes
### Print Applications
- **Business Cards**: Horizontal layout, 0.75" height maximum
- **Letterhead**: Horizontal layout, top-left or center placement
- **Brochures**: Various sizes, ensure minimum 0.5" height
- **Large Format**: Stacked version works well for banners and signage
### Component-Specific Applications
- **Technical Documentation**: Component + CHORUS combined marks
- **API Documentation**: Simplified monochrome versions
- **Dashboard UI**: Icon-only versions as navigation elements
- **Marketing Materials**: Full brand system with component integration
## Accessibility Considerations
### Contrast Standards
- All logo versions meet WCAG 2.1 AA contrast requirements
- Minimum 4.5:1 contrast ratio for text elements
- 3:1 contrast ratio for non-text elements (icon shapes)
### Alternative Formats
- High-contrast versions for accessibility compliance
- Text-only versions for screen readers (alt text: "CHORUS Services")
- Simplified versions for low-resolution displays
- Monochrome versions for single-color printing
## File Format Specifications
### Vector Formats (Preferred)
- **SVG**: Web use, scalable, smallest file size
- **AI/EPS**: Adobe Illustrator native, print production
- **PDF**: Print-ready, font embedded
### Raster Formats (Specific Use)
- **PNG**: Transparent backgrounds, web use
- **JPG**: Photography integration, solid backgrounds only
- **WebP**: Modern web format, smaller file sizes
### Recommended Export Settings
- **Web**: SVG (optimized), PNG at 2x resolution (Retina)
- **Print**: Vector formats preferred, 300 DPI minimum for rasters
- **Social Media**: PNG at platform-specific dimensions
- **App Icons**: PNG at required iOS/Android specifications
This logo concept provides CHORUS Services with a sophisticated, scalable visual identity that reflects the platform's technical capabilities while maintaining the premium, approachable aesthetic required for enterprise clients.

266
brand-assets/logos/component-logo-system.md Normal file
View File

@@ -0,0 +1,266 @@
# CHORUS Services Component Logo System
## Modular Design Philosophy
The CHORUS component logo system creates visual harmony between the main brand and individual service components. Each component maintains its unique identity while clearly connecting to the CHORUS orchestration platform through:
- **Consistent Visual Language**: Shared design elements and proportions
- **Hierarchical Relationship**: Clear parent-child brand architecture
- **Flexible Integration**: Components work independently or combined with CHORUS
- **Scalable Implementation**: Logos work at various sizes and contexts
## Component Brand Architecture
### Primary Integration Pattern
**Format**: [Component Icon] + [Component Name] + "powered by CHORUS"
- **Visual Connection**: Component icons connect to CHORUS orchestration symbol
- **Hierarchy**: Component name primary, CHORUS attribution secondary
- **Usage**: Marketing materials, component-specific applications
### Secondary Integration Pattern
**Format**: [Component Icon] + [CHORUS Icon] + [Combined Wordmark]
- **Visual Connection**: Icons placed side-by-side with connecting element
- **Hierarchy**: Equal visual weight, combined functionality message
- **Usage**: Technical documentation, integrated dashboards
## Individual Component Logos
### WHOOSH - Orchestration Engine
#### Visual Concept: "The Command Center"
- **Icon Design**: Stylized orchestration podium with flowing conductor lines
- **Metaphor**: Musical conductor's podium representing workflow orchestration
- **Visual Elements**:
- Geometric podium base (stability, foundation)
- Flowing curves emanating upward (orchestration, direction)
- Node connection points (distributed coordination)
- Subtle gradient suggesting depth and dimension
#### Color Specifications
- **Primary**: Orchestration Blue (#007AFF) with Natural Paper (#F5F5DC) accents
- **Secondary**: Brushed Aluminum (#C0C0C0) for technical elements
- **Monochrome**: Single color applications in brand palette
#### Typography Integration
- **WHOOSH**: SF Pro Display Bold, same treatment as CHORUS
- **Orchestration Engine**: SF Pro Text Medium, 40% size of WHOOSH
- **Brand Connection**: "powered by CHORUS" in SF Pro Text Regular, 30% size
### BZZZ - P2P Agent Coordination
#### Visual Concept: "The Network Mesh"
- **Icon Design**: Hexagonal mesh network pattern inspired by honeycomb structure
- **Metaphor**: Bee hive organization representing peer-to-peer coordination
- **Visual Elements**:
- Interconnected hexagonal cells (network nodes)
- Dynamic connection lines (peer communication)
- Central hub with radiating connections (distributed coordination)
- Slight organic curvature (natural intelligence, swarm behavior)
#### Color Specifications
- **Primary**: Harmony Green (#30D158) representing growth and coordination
- **Secondary**: Carbon Black (#000000) for connection lines
- **Accent**: Orchestration Blue (#007AFF) for central hub highlighting
#### Typography Integration
- **BZZZ**: SF Pro Display Heavy with slight letter-spacing increase for buzz effect
- **P2P Agent Coordination**: SF Pro Text Medium, descriptive subtitle
- **Visual Treatment**: Subtle vibration effect on hover (digital applications)
### SLURP - Context Curator Service
#### Visual Concept: "The Information Layers"
- **Icon Design**: Stacked information layers with intelligent filtering
- **Metaphor**: Geological strata representing hierarchical context storage
- **Visual Elements**:
- Multiple horizontal layers with varying opacity
- Curved flow lines showing context curation
- Magnifying glass element suggesting intelligent search
- Gradient transitions between layers (context relevance)
#### Color Specifications
- **Primary**: Walnut Brown gradient (#8B4513 to #A0522D) for warmth and intelligence
- **Secondary**: Natural Paper (#F5F5DC) for information layers
- **Accent**: Orchestration Blue (#007AFF) for search and discovery elements
#### Typography Integration
- **SLURP**: SF Pro Display Semibold with subtle condensed treatment
- **Context Curator Service**: SF Pro Text Regular, professional positioning
- **Visual Effect**: Subtle layer animation revealing depth (digital applications)
### COOEE - Feedback & Learning System
#### Visual Concept: "The Learning Loop"
- **Icon Design**: Circular feedback loop with learning arrows and adaptation nodes
- **Metaphor**: Australian "cooee" call representing communication and response
- **Visual Elements**:
- Circular arrow path suggesting continuous learning
- Node points representing feedback collection
- Gradient progression showing improvement over time
- Sound wave elements referencing the "cooee" call
#### Color Specifications
- **Primary**: Resonance Amber (#FF9F0A) representing energy and learning
- **Secondary**: Harmony Green (#30D158) for positive feedback loops
- **Accent**: Carbon Black (#000000) for contrast and professional grounding
#### Typography Integration
- **COOEE**: SF Pro Display Bold with slight wave distortion (friendly, approachable)
- **Feedback & Learning System**: SF Pro Text Medium, descriptive and professional
- **Audio Reference**: Subtle sound wave graphic element in extended logo
### Monitoring & Analytics
#### Visual Concept: "The Insight Dashboard"
- **Icon Design**: Modern dashboard with real-time metrics visualization
- **Metaphor**: Mission control dashboard representing oversight and intelligence
- **Visual Elements**:
- Grid-based layout suggesting organized data
- Rising chart lines indicating performance metrics
- Circular progress indicators for health monitoring
- Subtle glow effects suggesting live data streams
#### Color Specifications
- **Primary**: Brushed Aluminum (#C0C0C0) for precision and technology
- **Secondary**: Orchestration Blue (#007AFF) for data visualization elements
- **Accent**: Multiple system colors for different metric types
#### Typography Integration
- **Monitoring**: SF Pro Display Medium, technical and precise
- **Analytics**: SF Pro Text Regular, secondary positioning
- **Data Emphasis**: Monospace font (SF Mono) for numeric displays
## Integration Guidelines
### Combined Logo Layouts
#### Horizontal Integration
```
[Component Icon] COMPONENT NAME → [CHORUS Icon] CHORUS
powered by
```
- **Use Case**: Marketing materials, business cards, letterhead
- **Spacing**: Component and CHORUS sections separated by 2x the x-height
- **Hierarchy**: Component name 100%, CHORUS name 70%, "powered by" 40%
#### Vertical Integration
```
[Component Icon]
COMPONENT NAME
↓
[CHORUS Icon]
CHORUS Services
```
- **Use Case**: Vertical layouts, mobile applications, square formats
- **Spacing**: Consistent vertical rhythm based on typography line-height
- **Connection**: Subtle arrow or connection line between icons
#### Compact Integration
```
[Component Icon][CHORUS Icon] COMPONENT × CHORUS
```
- **Use Case**: Favicons, app icons, tight space applications
- **Treatment**: Icons side-by-side with minimal separation
- **Typography**: Single line with multiplication symbol (×) or plus (+)
### Color Coordination Rules
#### Complementary Pairing
- **WHOOSH + CHORUS**: Blue orchestration with natural paper
- **BZZZ + CHORUS**: Green coordination with blue orchestration
- **SLURP + CHORUS**: Walnut brown intelligence with blue precision
- **COOEE + CHORUS**: Amber learning with blue stability
#### Monochrome Applications
- All components can be rendered in single color from brand palette
- Maintain contrast relationships between icon and text elements
- Use opacity variations to create hierarchy in single-color applications
## Usage Applications
### Digital Applications
- **Website Headers**: Horizontal integration with component focus
- **App Icons**: Compact integration or component-only versions
- **Dashboard UI**: Icon-only versions for navigation and identification
- **API Documentation**: Component + CHORUS technical integration
### Print Applications
- **Component Brochures**: Vertical integration with detailed explanations
- **Technical Specifications**: Monochrome versions with clear hierarchy
- **Business Materials**: Horizontal integration maintaining brand connection
- **Trade Show Materials**: Large format applications with full integration
### Marketing Applications
- **Social Media**: Component-focused posts with CHORUS attribution
- **Advertisements**: Component benefits highlighted with platform connection
- **Case Studies**: Component success stories within CHORUS ecosystem
- **Email Signatures**: Compact integration for professional communication
## Technical Implementation
### SVG Structure Template
```svg
<svg viewBox="0 0 240 60" xmlns="http://www.w3.org/2000/svg">
<!-- Component Icon -->
<g id="component-icon" transform="translate(0,0)">
<!-- Component-specific icon paths -->
</g>
<!-- Connection Element -->
<g id="connection" transform="translate(80,0)">
<!-- Connecting line or arrow -->
</g>
<!-- CHORUS Icon -->
<g id="chorus-icon" transform="translate(160,0)">
<!-- CHORUS orchestration symbol -->
</g>
<!-- Typography -->
<text id="component-name" x="0" y="45" class="component-text">COMPONENT</text>
<text id="chorus-name" x="160" y="45" class="chorus-text">CHORUS</text>
</svg>
```
### CSS Integration Classes
```css
.component-logo {
display: inline-flex;
align-items: center;
gap: var(--logo-spacing, 16px);
}
.component-icon {
width: var(--icon-size, 32px);
height: var(--icon-size, 32px);
fill: var(--component-color);
}
.chorus-icon {
width: calc(var(--icon-size, 32px) * 0.8);
height: calc(var(--icon-size, 32px) * 0.8);
fill: var(--chorus-color, #007AFF);
}
.component-text {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-size, 18px);
color: var(--text-color);
}
```
## Brand Protection Guidelines
### Approved Combinations
- Any CHORUS component may be combined with the main CHORUS brand
- Component logos may appear independently in component-specific contexts
- Combined logos must maintain proper spacing and hierarchy relationships
### Prohibited Combinations
- Components cannot be combined with competitor brands
- Third-party logos cannot be integrated into the CHORUS component system
- Component icons cannot be modified or recolored outside brand palette
- Typography treatments must remain consistent with brand specifications
This component logo system provides CHORUS Services with a cohesive, flexible brand architecture that supports individual component marketing while reinforcing the unified platform message.

261
brand-assets/logos/logo-variations-specifications.md Normal file
View File

@@ -0,0 +1,261 @@
# CHORUS Services Logo Variations & Specifications
## Overview
This document provides comprehensive specifications for all CHORUS Services logo variations, ensuring consistent brand presentation across every possible application context. Each variation is optimized for specific use cases while maintaining brand integrity and recognition.
## Primary Logo Variations
### 1. Horizontal Layout (Primary)
#### Full Color Version
- **Usage**: Primary logo for most applications
- **Background**: Carbon Black (#000000) or dark backgrounds
- **Icon Color**: Natural Paper (#F5F5DC) with Orchestration Blue (#007AFF) accent
- **Text Color**: Natural Paper (#F5F5DC) primary, Brushed Aluminum (#C0C0C0) secondary
- **Minimum Size**: 120px width (digital), 1.5" width (print)
- **File Formats**: SVG (preferred), PNG (2x retina), PDF (print)
#### Reversed Version
- **Usage**: Light backgrounds, print applications, high-contrast needs
- **Background**: Natural Paper (#F5F5DC), White (#FFFFFF), or light backgrounds
- **Icon Color**: Carbon Black (#000000) with Orchestration Blue (#007AFF) accent
- **Text Color**: Carbon Black (#000000) primary, Walnut Brown (#8B4513) secondary
- **Applications**: Business cards, letterhead, light-theme websites
### 2. Stacked Layout (Vertical)
#### Full Color Stacked
- **Usage**: Square formats, mobile applications, social media
- **Proportions**: Icon above text, centered alignment
- **Sizing**: Icon 60% of total height, text 40% of total height
- **Minimum Size**: 80px width (digital), 1" width (print)
- **Aspect Ratio**: Approximately 1:1.2 (width:height)
#### Reversed Stacked
- **Usage**: Light backgrounds in vertical format
- **Color Treatment**: Same as reversed horizontal
- **Applications**: Light-theme mobile apps, print materials with vertical layout
### 3. Icon-Only Variations
#### Primary Icon
- **Usage**: Favicons, app icons, navigation elements, profile images
- **Design**: Orchestration symbol only, no text
- **Size Range**: 16px to 512px (digital), 0.25" to 4" (print)
- **Aspect Ratio**: 1:1 (perfect square)
- **Background Treatment**: Transparent or solid brand colors
#### App Icon Treatment
- **iOS Specifications**: Rounded corners with 20% corner radius
- **Android Specifications**: Rounded corners with 15% corner radius
- **Background**: Solid Carbon Black (#000000) with centered icon
- **Icon Color**: Natural Paper (#F5F5DC) with Orchestration Blue accent
- **Required Sizes**: 16, 32, 48, 64, 128, 256, 512px
#### Favicon Specifications
- **Size**: 16x16px, 32x32px, 48x48px
- **Format**: ICO file with multiple resolutions
- **Design**: Simplified orchestration symbol
- **Color**: High contrast version optimized for small display
- **Background**: Transparent
## Monochrome Variations
### 1. Black Version
- **Color**: All elements in Carbon Black (#000000)
- **Usage**: Single-color printing, embossing, engraving
- **Background**: White or Natural Paper only
- **Applications**: Letterhead, business cards, cost-effective printing
### 2. White Version
- **Color**: All elements in Natural Paper (#F5F5DC) or White (#FFFFFF)
- **Usage**: Dark backgrounds, reversed applications
- **Applications**: Dark websites, presentations, merchandise
### 3. Single Brand Color
- **Orchestration Blue**: All elements in #007AFF
- **Usage**: Branded merchandise, promotional materials
- **Background**: White, Natural Paper, or transparent
- **Applications**: T-shirts, promotional items, digital watermarks
## Specialized Context Variations
### 1. Watermark Version
- **Opacity**: 15-25% transparency
- **Usage**: Document backgrounds, presentation slides
- **Size**: Large format, subtle presence
- **Color**: Single color with reduced opacity
- **Placement**: Off-center, non-interfering with content
### 2. Print Newspaper/Magazine
- **Design**: High contrast, simplified details
- **Color**: Black only for newspaper, spot color for magazines
- **Size**: Minimum legible size for publication standards
- **Format**: Vector format with outlined fonts
### 3. Embroidery Specifications
- **Design**: Simplified orchestration symbol
- **Stitch Count**: Optimized for production efficiency
- **Size Range**: 0.75" to 4" width
- **Colors**: Maximum 3 thread colors
- **Background**: None (direct on fabric)
### 4. Engraving/Etching
- **Design**: Line art version of orchestration symbol
- **Detail Level**: Simplified for engraving depth limitations
- **Applications**: Awards, plaques, metal products
- **File Format**: Vector outlines, no fills
## Digital-Specific Variations
### 1. Animated Logo (Digital Only)
- **Animation**: Subtle orchestration symbol rotation or pulse
- **Duration**: 2-3 seconds, smooth loop
- **Usage**: Website loading, video intros
- **Format**: SVG animation, GIF fallback
- **File Size**: Optimized for web performance
### 2. Social Media Profile Variations
#### LinkedIn Profile
- **Size**: 300x300px minimum
- **Format**: PNG with transparent background
- **Version**: Icon-only with high contrast
#### Twitter/X Profile
- **Size**: 400x400px recommended
- **Format**: PNG or JPG
- **Version**: Icon-only, optimized for small display
#### Facebook Profile
- **Size**: 180x180px minimum
- **Format**: PNG recommended
- **Version**: Icon-only or simplified horizontal
#### Instagram Profile
- **Size**: 320x320px minimum
- **Format**: PNG recommended
- **Version**: Icon-only with brand colors
### 3. Email Signature Specifications
- **Size**: 120px width maximum
- **Format**: PNG (Retina 2x resolution)
- **Version**: Horizontal layout preferred
- **Linking**: Clickable link to website homepage
- **Alt Text**: "CHORUS Services - Distributed AI Orchestration"
## Technical Implementation Specifications
### SVG Code Structure
```svg
<svg viewBox="0 0 240 60" xmlns="http://www.w3.org/2000/svg" aria-labelledby="chorus-logo-title">
<title id="chorus-logo-title">CHORUS Services Logo</title>
<!-- Orchestration Icon -->
<g id="orchestration-icon" fill="#F5F5DC">
<!-- Icon paths here -->
</g>
<!-- Brand Typography -->
<g id="brand-text">
<text x="80" y="35" font-family="-apple-system, SF Pro Display" font-weight="700" font-size="24" fill="#F5F5DC">CHORUS</text>
<text x="80" y="50" font-family="-apple-system, SF Pro Text" font-weight="400" font-size="10" fill="#C0C0C0">Services</text>
</g>
</svg>
```
### CSS Implementation
```css
.chorus-logo {
display: inline-block;
max-width: 100%;
height: auto;
}
.chorus-logo--horizontal {
aspect-ratio: 4/1;
min-width: 120px;
}
.chorus-logo--stacked {
aspect-ratio: 1/1.2;
min-width: 80px;
}
.chorus-logo--icon-only {
aspect-ratio: 1/1;
min-width: 32px;
}
/* Responsive sizing */
@media (max-width: 768px) {
.chorus-logo--horizontal {
min-width: 100px;
}
}
```
### File Naming Convention
```
chorus-logo-horizontal-color.svg
chorus-logo-horizontal-reversed.svg
chorus-logo-stacked-color.png
chorus-logo-icon-only-white.svg
chorus-logo-monochrome-black.pdf
```
## Quality Assurance Checklist
### Before Production
- [ ] Logo meets minimum size requirements for intended application
- [ ] Color contrast tested for accessibility compliance (WCAG 2.1 AA)
- [ ] File format appropriate for intended use (vector vs. raster)
- [ ] Resolution sufficient for intended output (72 DPI web, 300 DPI print)
- [ ] Colors match brand specifications exactly
- [ ] Typography rendering correctly at all sizes
- [ ] Clear space maintained around logo
- [ ] Alternative text or descriptions provided for accessibility
### After Production
- [ ] Logo displays correctly across different devices and browsers
- [ ] Print test completed for physical applications
- [ ] File sizes optimized for web performance
- [ ] Backup formats available for compatibility
- [ ] Usage rights and approvals documented
- [ ] Brand guidelines compliance verified
## Approval Process
### Internal Review
1. **Brand Manager**: Visual consistency and brand compliance
2. **Design Lead**: Technical quality and implementation feasibility
3. **Marketing Director**: Strategic alignment and marketing effectiveness
4. **Legal Review**: Trademark compliance and usage rights
### External Applications
1. **Partner Usage**: Requires brand license agreement and approval
2. **Media Usage**: Provide official logo package with usage guidelines
3. **Vendor Applications**: Review and approve before production
4. **International Usage**: Cultural sensitivity review when applicable
## Logo Package Contents
### Standard Logo Package
- Horizontal color version (SVG, PNG 2x, PDF)
- Horizontal reversed version (SVG, PNG 2x, PDF)
- Stacked color version (SVG, PNG 2x)
- Icon-only versions (SVG, PNG 2x, ICO)
- Monochrome versions (SVG, PNG, PDF)
- Usage guidelines summary (PDF)
### Extended Logo Package
- All standard package contents
- Animated versions (SVG, GIF)
- Social media optimized versions
- Print-specific versions (high-resolution)
- Component integration examples
- Brand color swatches (ASE, ACO, CSS)
- Typography files and licenses
This comprehensive logo variation system ensures CHORUS Services maintains consistent, professional brand presentation across every possible application while providing the flexibility needed for diverse marketing and communication contexts.

261
brand-assets/mockups/website-mockup-concept.md Normal file
View File

@@ -0,0 +1,261 @@
# CHORUS Services Website Mockup Concept
## Homepage Hero Section Mockup
### Layout Description
The homepage hero showcases the CHORUS brand system in its primary digital application, demonstrating how all brand elements work together to create a sophisticated, enterprise-grade experience.
### Visual Structure
```
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Header (Carbon Black #000000 background) │
│ ┌─────────────────┐ Navigation Links ┌─────────────────────┐ │
│ │ [CHORUS Logo] │ Platform Components │ Request Demo │ │
│ │ Horizontal │ Solutions Resources │ View Documentation │ │
│ │ Natural Paper │ Enterprise About │ (CTAs - Blue) │ │
│ └─────────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Hero Section (Carbon Black #000000 background with subtle gradient) │
│ │
│ [Orchestration Icon - Large] │
│ Natural Paper #F5F5DC + Blue Accent │
│ │
│ CHORUS Services │
│ (84px, SF Pro Display Heavy) │
│ Natural Paper #F5F5DC │
│ │
│ Distributed AI Orchestration Without the Hallucinations │
│ (36px, SF Pro Display Regular) │
│ Brushed Aluminum #C0C0C0 │
│ │
│ Enterprise-ready platform that eliminates context loss, reduces │
│ hallucinations, and enables true multi-agent coordination through │
│ intelligent context management and distributed reasoning. │
│ (18px, SF Pro Text Regular) │
│ Brushed Aluminum #C0C0C0 │
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ Explore Platform │ │ See Technical Demo │ │
│ │ (Primary CTA) │ │ (Secondary CTA) │ │
│ │ Orchestration Blue │ │ Outlined Style │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │
│ ↓ Scroll to explore ↓ │
│ (Animated scroll indicator) │
└─────────────────────────────────────────────────────────────────────────────────┘
```
### Platform Overview Section
```
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Platform Overview (Natural Paper #F5F5DC background) │
│ │
│ Context-Aware AI Coordination │
│ (48px, SF Pro Display Bold) │
│ Carbon Black #1A1A1A │
│ │
│ Five integrated components working in perfect harmony │
│ (18px, SF Pro Text Regular) │
│ Walnut Brown #8B4513 │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌──────────────┐ │
│ │ [WHOOSH Icon] │ │ [BZZZ Icon] │ │ [SLURP Icon] │ │ [COOEE Icon] │ │
│ │ Orchestration │ │ P2P Network │ │ Context Manager │ │ Learning │ │
│ │ Engine │ │ Coordination │ │ Service │ │ System │ │
│ │ │ │ │ │ │ │ │ │
│ │ Enterprise │ │ Mesh networking │ │ Context curator │ │ RL context │ │
│ │ workflow mgmt │ │ with libp2p │ │ from logs │ │ tuning │ │
│ │ │ │ │ │ │ │ │ │
│ │ Learn More → │ │ Learn More → │ │ Learn More → │ │ Learn More → │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ └──────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ [Monitor Icon] │ │
│ │ Monitoring & │ Real-time Performance Metrics │
│ │ Analytics │ │
│ │ │ ▅▆▇██▇▆▅ 92% Context Retention │
│ │ Prometheus & │ ▃▄▅▆▇▆▅▄ 78% Hallucination Reduction │
│ │ Grafana │ ▆▇██▇▆▅▄ 34% Faster Completion │
│ │ │ │
│ │ Learn More → │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────┘
```
### Component Deep-Dive Section
```
┌─────────────────────────────────────────────────────────────────────────────────┐
│ WHOOSH Component Detail (Carbon Black #000000 background) │
│ │
│ ┌─────────────────┐ WHOOSH Orchestration Engine │
│ │ │ (36px, SF Pro Display Semibold) │
│ │ [WHOOSH Icon] │ Natural Paper #F5F5DC │
│ │ + CHORUS │ │
│ │ Integration │ Enterprise workflow management for AI agents │
│ │ │ (16px, SF Pro Text Regular) │
│ │ Orchestration │ Brushed Aluminum #C0C0C0 │
│ │ Blue + Natural │ │
│ │ Paper Colors │ • Visual workflow editor with React Flow │
│ │ │ • Real-time performance monitoring │
│ └─────────────────┘ • Multi-agent task distribution │
│ • Distributed coordination without SPOF │
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ Try WHOOSH Demo │ │ View Documentation │ │
│ │ (Orchestration Blue)│ │ (Outlined) │ │
│ └─────────────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────┘
```
## Brand Implementation Notes
### Color Usage
- **Primary Background**: Carbon Black (#000000) for hero and component details
- **Secondary Background**: Natural Paper (#F5F5DC) for platform overview
- **Text Hierarchy**: Natural Paper → Brushed Aluminum → Walnut Brown
- **Interactive Elements**: Orchestration Blue (#007AFF) for all CTAs and links
### Typography Implementation
- **Hero Headline**: 84px SF Pro Display Heavy with tight line-height (1.0)
- **Section Headlines**: 48px SF Pro Display Bold with normal line-height (1.1)
- **Component Headlines**: 36px SF Pro Display Semibold
- **Body Text**: 18px SF Pro Text Regular with reading line-height (1.6)
- **Component Descriptions**: 16px SF Pro Text Regular
### Logo Integration
- **Header**: Horizontal logo, 150px width, Natural Paper color
- **Component Cards**: Individual component icons with CHORUS integration
- **Footer**: Horizontal logo with contact information
### Interactive Elements
- **Primary CTAs**: Orchestration Blue background, Natural Paper text, rounded corners
- **Secondary CTAs**: Outlined style with Orchestration Blue border and text
- **Hover States**: Subtle color transitions and elevation changes
- **Component Cards**: Gentle hover elevation with shadow
### Responsive Considerations
- **Mobile Hero**: Stacked layout with reduced text sizes
- **Tablet**: Two-column component grid instead of four-column
- **Desktop**: Full five-component layout with optimal spacing
## Business Card Mockup
```
┌─────────────────────────────────────────────────────────────┐
│ │
│ [CHORUS Logo - Horizontal] │
│ Carbon Black on Natural Paper, 1.5" width │
│ │
│ Sarah Chen │
│ Chief Technology Officer │
│ (SF Pro Text Semibold, 14pt, Carbon Black) │
│ │
│ sarah.chen@chorus.services │
│ +1 (415) 555-0123 │
│ https://www.chorus.services │
│ (SF Pro Text Regular, 10pt, Walnut Brown) │
│ │
│ │
│ Distributed AI Orchestration Without the Hallucinations │
│ (SF Pro Text Regular, 9pt, Brushed Aluminum equivalent) │
│ │
└─────────────────────────────────────────────────────────────┘
```
## Letterhead Template
```
┌─────────────────────────────────────────────────────────────────────────────────┐
│ [CHORUS Logo - Horizontal, 2" width] CHORUS Services │
│ Carbon Black on Natural Paper 123 Innovation Drive │
│ San Francisco, CA 94105 │
│ +1 (415) 555-0100 │
│ info@chorus.services │
│ ─────────────────────────────────────────────────────────────────────────────── │
│ │
│ [Letter Content Area] │
│ SF Pro Text Regular, 11pt, Carbon Black │
│ Line height 1.5 for optimal readability │
│ Maximum 65 characters per line │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ ─────────────────────────────────────────────────────────────────────────────── │
│ chorus.services | Distributed AI Orchestration Without the Hallucinations │
│ (SF Pro Text Regular, 8pt, Walnut Brown, centered) │
└─────────────────────────────────────────────────────────────────────────────────┘
```
## Social Media Profile Examples
### LinkedIn Company Page
```
┌─────────────────────────────────────────────────────────────┐
│ Cover Image (1584x396px) │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Carbon Black background with subtle gradient │ │
│ │ │ │
│ │ [CHORUS Logo - Horizontal, Large] Performance │ │
│ │ Natural Paper + Blue Accent Metrics │ │
│ │ ▅▆▇██▇▆▅ │ │
│ │ Distributed AI Orchestration 92% Context │ │
│ │ Without the Hallucinations Retention │ │
│ │ │ │
│ │ Enterprise • Reliable • Global chorus.services │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Profile Image (300x300px)
┌─────────────────┐
│ │
│ [CHORUS Icon] │
│ Orchestration │
│ Symbol Only │
│ Carbon Black │
│ Background │
│ Natural Paper │
│ Icon + Blue │
│ Accent │
│ │
└─────────────────┘
```
### Twitter/X Profile
```
Header Image (1500x500px)
┌─────────────────────────────────────────────────────────────┐
│ Carbon Black background │
│ │
│ [CHORUS Logo - Horizontal] Orchestrating AI agents │
│ Natural Paper + Blue without the hallucinations │
│ │
│ Enterprise-ready • Context-aware • Globally scalable │
└─────────────────────────────────────────────────────────────┘
Profile Image (400x400px)
┌─────────────────┐
│ [CHORUS Icon] │
│ Square format │
│ High contrast │
│ for small │
│ display sizes │
└─────────────────┘
```
This mockup demonstrates how the CHORUS Services brand system creates a cohesive, professional experience across all touchpoints while maintaining the sophisticated, enterprise-grade aesthetic that appeals to the target audience of technical decision-makers and global enterprise clients.

BIN
brand-assets/textures/aluminium.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
brand-assets/textures/brown-paper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 MiB

BIN
brand-assets/textures/brown-wooden-texture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 MiB

BIN
brand-assets/textures/dark-brown-wooden-texture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 MiB

301
brand-assets/typography/chorus-typography-system.md Normal file
View File

@@ -0,0 +1,301 @@
# CHORUS Services Typography System
## Typography Philosophy
The CHORUS Services typography system draws inspiration from Apple's refined approach to type, emphasizing clarity, hierarchy, and sophisticated simplicity. The system prioritizes:
- **Legibility**: Optimized for technical content and enterprise applications
- **Scalability**: Responsive typography that works across all devices and contexts
- **Personality**: Balancing technical precision with human approachability
- **Performance**: Web-optimized fonts with fallback strategies
## Primary Typeface: SF Pro Display/Text
### Rationale
SF Pro (San Francisco) is Apple's system typeface, providing:
- **Technical Precision**: Designed for user interfaces and technical content
- **Global Readability**: Optimized for international audiences and accessibility
- **Modern Aesthetic**: Clean, contemporary appearance suitable for enterprise
- **Variable Font Technology**: Efficient loading and optical size optimization
### Font Family Stack
```css
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
```
### Fallback Strategy
1. **-apple-system**: Native system font on macOS/iOS
2. **BlinkMacSystemFont**: Native system font on Chrome/macOS
3. **SF Pro Display/Text**: Explicitly loaded Apple fonts
4. **Inter**: High-quality open-source alternative
5. **Segoe UI**: Windows system font
6. **Roboto**: Android system font
7. **Helvetica Neue**: Classic fallback
8. **Arial**: Universal fallback
## Typography Scale & Hierarchy
### Display Typography (Large Headlines)
Used for: Hero sections, major page titles, prominent callouts
#### Hero Display
- **Font**: Exo Thin (100)
- **Size**: `clamp(48px, 8vw, 84px)` (responsive scaling)
- **Line Height**: 1.0 (tight for impact)
- **Letter Spacing**: -0.02em (optical correction for large sizes)
- **Use Case**: Homepage hero, major section headers
#### Section Display
- **Font**: Exo Thin (200)
- **Size**: `clamp(32px, 5vw, 48px)`
- **Line Height**: 1.1
- **Letter Spacing**: -0.015em
- **Use Case**: Section headers, page titles
#### Subsection Display
- **Font**: Roboto Flex (400)
- **Size**: `clamp(24px, 4vw, 36px)`
- **Line Height**: 1.2
- **Letter Spacing**: -0.01em
- **Use Case**: Component headers, card titles
### Body Typography (Content Reading)
Used for: Paragraphs, descriptions, documentation, UI text
#### Body Large
- **Font**: Roboto (400)
- **Size**: 18px
- **Line Height**: 1.6 (optimal for reading)
- **Letter Spacing**: 0 (neutral)
- **Use Case**: Important descriptions, feature explanations
#### Body Regular
- **Font**: Roboto Regular (400)
- **Size**: 16px
- **Line Height**: 1.5
- **Letter Spacing**: 0
- **Use Case**: Standard body copy, most content
#### Body Small
- **Font**: Roboto Regular (400)
- **Size**: 14px
- **Line Height**: 1.4
- **Letter Spacing**: 0.005em (slightly loose for small text)
- **Use Case**: Captions, metadata, helper text
### Interface Typography (UI Elements)
Used for: Buttons, navigation, forms, labels
#### Button Text
- **Font**: Roboto Semibold (600)
- **Size**: 16px (large buttons), 14px (regular buttons)
- **Line Height**: 1.0 (tight for buttons)
- **Letter Spacing**: 0.01em
- **Transform**: None (sentence case preferred)
#### Navigation
- **Font**: Roboto Medium (500)
- **Size**: 16px
- **Line Height**: 1.0
- **Letter Spacing**: 0.005em
- **Use Case**: Header navigation, sidebar menus
#### Labels
- **Font**: Roboto Medium (500)
- **Size**: 14px
- **Line Height**: 1.2
- **Letter Spacing**: 0.01em
- **Transform**: None
- **Use Case**: Form labels, section labels
### Technical Typography (Code & Data)
Used for: Code blocks, API documentation, technical specifications
#### Code Primary
- **Font**: SF Mono, 'Monaco', 'Inconsolata', 'Fira Code', monospace
- **Size**: 14px
- **Line Height**: 1.4
- **Letter Spacing**: 0
- **Use Case**: Code blocks, API examples
#### Code Inline
- **Font**: SF Mono, monospace
- **Size**: 90% of parent text size
- **Padding**: 2px 4px
- **Background**: Subtle background color
- **Border Radius**: 3px
- **Use Case**: Inline code references
## Color Applications
### Dark Mode Typography
Following the established color system:
#### Primary Text
- **Color**: `#F2F2F7` (Natural Paper)
- **Usage**: Headlines, primary body copy
- **Contrast Ratio**: 19.96:1 on black backgrounds
#### Secondary Text
- **Color**: `#A1A1A6` (Light Gray)
- **Usage**: Descriptions, supporting content
- **Contrast Ratio**: 6.64:1 on black backgrounds
#### Tertiary Text
- **Color**: `#6D6D73` (Medium Gray)
- **Usage**: Captions, metadata, disabled text
- **Contrast Ratio**: 4.51:1 on black backgrounds
#### Interactive Text
- **Color**: `#007AFF` (Orchestration Blue)
- **Usage**: Links, interactive elements
- **Contrast Ratio**: 8.59:1 on black backgrounds
### Light Mode Typography
#### Primary Text
- **Color**: `#1A1A1A` (Dark Charcoal)
- **Usage**: Headlines, primary body copy
- **Contrast Ratio**: 18.2:1 on Natural Paper background
#### Secondary Text
- **Color**: `#6D6D73` (Medium Gray)
- **Usage**: Descriptions, supporting content
- **Contrast Ratio**: 7.8:1 on Natural Paper background
#### Tertiary Text
- **Color**: `#A1A1A6` (Light Gray)
- **Usage**: Captions, metadata
- **Contrast Ratio**: 4.6:1 on Natural Paper background
#### Interactive Text
- **Color**: `#007AFF` (Orchestration Blue)
- **Usage**: Links, interactive elements
- **Contrast Ratio**: 4.5:1 on white backgrounds
## Responsive Typography Implementation
### CSS Custom Properties
```css
:root {
/* Font Families */
--font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
--font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
/* Responsive Sizes */
--text-hero: clamp(48px, 8vw, 84px);
--text-display-1: clamp(32px, 5vw, 48px);
--text-display-2: clamp(24px, 4vw, 36px);
--text-body-large: 18px;
--text-body: 16px;
--text-body-small: 14px;
--text-code: 14px;
/* Line Heights */
--leading-tight: 1.0;
--leading-snug: 1.1;
--leading-normal: 1.2;
--leading-relaxed: 1.4;
--leading-loose: 1.5;
--leading-reading: 1.6;
/* Letter Spacing */
--tracking-tight: -0.02em;
--tracking-snug: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.005em;
--tracking-wider: 0.01em;
}
```
### Utility Classes
```css
/* Display Typography */
.text-hero {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 800;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.text-display-1 {
font-family: var(--font-display);
font-size: var(--text-display-1);
font-weight: 700;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
}
/* Body Typography */
.text-body {
font-family: var(--font-text);
font-size: var(--text-body);
font-weight: 400;
line-height: var(--leading-loose);
letter-spacing: var(--tracking-normal);
}
/* Technical Typography */
.text-code {
font-family: var(--font-mono);
font-size: var(--text-code);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-normal);
}
```
## Accessibility Guidelines
### Contrast Requirements
- **Normal Text**: Minimum 4.5:1 contrast ratio
- **Large Text** (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
- **Interactive Elements**: Clear focus indicators with proper contrast
### Reading Considerations
- **Line Length**: 45-75 characters for optimal readability
- **Line Height**: Minimum 1.4 for body text, 1.5 preferred for long-form content
- **Font Size**: Minimum 14px for body text, 16px preferred
- **Responsive Scaling**: Text scales appropriately across all device sizes
### Motion Sensitivity
- **Reduced Motion**: Respect user preferences for reduced animations
- **Font Loading**: Use font-display: swap for better performance
- **Fallback Fonts**: Ensure similar metrics to prevent layout shift
## Implementation Guidelines
### Font Loading Strategy
```css
/* Optimal font loading */
@font-face {
font-family: 'SF Pro Display';
src: url('fonts/sf-pro-display.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SF Pro Text';
src: url('fonts/sf-pro-text.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
```
### Performance Optimization
- **Subsetting**: Include only required character sets
- **Preloading**: Preload critical font files
- **WOFF2 Format**: Use modern compression for smaller file sizes
- **Variable Fonts**: Utilize variable font technology when available
### Brand Consistency
- **Logo Typography**: Custom modifications to SF Pro Display for logo lockup
- **Hierarchy Consistency**: Maintain consistent size relationships across all applications
- **Color Pairing**: Always pair typography colors with appropriate background colors
- **Context Adaptation**: Adjust typography choices based on content context and user needs
This typography system provides CHORUS Services with a professional, accessible, and scalable foundation that supports both technical content and marketing communications while maintaining the Apple-inspired aesthetic that aligns with the platform's premium positioning.