Files
chorus-services/brand-assets/CHORUS-BRAND-GUIDE.md
tony b7553856f5 feat: Add comprehensive brand system and website architecture documentation
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>
2025-08-02 22:13:32 +10:00

16 KiB

CHORUS Services Brand Guide

Comprehensive Visual Identity & Brand Standards


Table of Contents

  1. Brand Overview
  2. Brand Identity Concept
  3. Logo System
  4. Color Palette
  5. Typography
  6. Component Brand System
  7. Usage Guidelines
  8. Implementation Examples
  9. Brand Protection
  10. 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

<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

: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

<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